<!-- 商城支付成功 -->
<template>
	<view class="pay-success-page">
		<HeaderCom></HeaderCom>
		<view class="status">
			<image src="@/static/pay/success.png" class="status-icon" mode=""></image>
			<view class="status-txt">{{type === 'record' ? '提取成功' : '支付成功'}}</view>
		</view>
		<view class="opc">
			<view class="btn" @click="goShop">再去逛逛</view>
			<view class="btn" @click="goDetail">查看订单</view>
		</view>
		<view class="main">
			<view class="item">
				<view class="label">用户信息</view>
				<view class="value">{{nickname}}</view>
			</view>
			<view class="item">
				<view class="label">商品名称</view>
				<view class="value">{{productName}}</view>
			</view>
			<view class="item">
				<view class="label">商品数量</view>
				<view class="value">{{quantity}}</view>
			</view>
			<view class="item">
				<view class="label">实付积分</view>
				<view class="value">{{point}}</view>
			</view>
			<view class="item">
				<view class="label">实付金额</view>
				<view class="value">¥ {{price}}</view>
			</view>
		</view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/shop/paySuccess"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import HeaderCom from '@/pages/components/header.vue'
	export default{
	mixins: [myMixins],
		data(){
			return{
				id:"",
				no:"",
				price:"",
				point:"",
				payType:"",
				productName:'',
				quantity:'',
				nickname:uni.getStorageSync('box-nickname'),
				type:''
			}
		},
		components:{HeaderCom},
		onLoad(opation) {
			this.type = opation.type ? opation.type : 0
			this.price = opation.price ? Number(opation.price) : 0
			this.point = opation.point ? Number(opation.point) : 0
			this.payType = opation.payType ? opation.payType : 'NONE'
			this.productName = opation.productName
			this.quantity = opation.quantity
			this.id = opation.id
			this.no = opation.no
		},
		methods:{
			
			copy(no) {
				uni.setClipboardData({
					data: no,
				})
			},
			goShop(){
				uni.reLaunch({
					url:`/pages/shop/index`
				})
			},
			goDetail(){
				if(this.type === 'record'){
					uni.redirectTo({
						url:`/pages/order/index`
					})
				}else{
					uni.redirectTo({
						url:`/pages/mine/orderStatusDetail?no=${this.no}`
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.pay-success-page{
		padding: 112rpx 32rpx 0 32rpx;
		.status{
			height: 312rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			// justify-content: center;
			padding-top: 80rpx;
			.status-icon{
				width: 144rpx;
				height: 144rpx;
			}
			.status-txt{
				font-weight: bold;
				font-size: 40rpx;
				color: #333333;
				// margin-top: 16rpx;
			}
		}
		.opc{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.btn{
				width: 332rpx;
				height: 96rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				border: 2rpx solid #EBEBEB;
				font-weight: 500;
				font-size: 32rpx;
				color: #666666;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.main{
			margin-top: 24rpx;
			width: 686rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			.item{
				height: 80rpx;
				padding: 0 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.label{
					font-size: 28rpx;
					color: #666666;
				}
				.value{
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					width: 300rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					text-align: right;
				}
			}
		}
	}
</style>