<template>
	<view>
		<!-- <sh-custom-nav :info="info" ></sh-custom-nav> -->
		<view class="pay-container" v-if="!isPay">
			<view class="pay-info">
				<text class="info-tips">订单已创建，还需支付</text>
				<view class="money-box">￥<text class="money">{{actuallyPay}}</text></view>
			</view>
			<u-button  @click="pay" shape="circle" type="primary" text="微信支付" color="#61b077"></u-button>
		</view>
		<view class="payResult" v-else>
			<u-icon v-if="payStatus == 'pending'" name="clock" size="60px" color="#61b077"></u-icon>
			<u-icon v-else-if="payStatus == 'fulfilled'" name="checkmark-circle" size="60px" color="#61b077"></u-icon>
			<u-icon v-else name="close-circle" size="60px" color="#ff0000"></u-icon>
			<view class="tips">
				{{payTips}}			
			</view>
			<view class="bot">
				<view class="lf">
					<u-button type="primary" color="#61b077"  text="查看订单" @click="goPath('shopMallList')"></u-button>
				</view>
				<view class="rt">
					<u-button type="primary" color="#61b077" :plain="true" text="回到商城" @click="goPath('')"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import http from '@/shopro/request/index';
	// import shCustomNav from '@/components/sh-custom-nav/sh-custom-nav';
	export default {
		components:{
			// shCustomNav
		},
		data() {
			return {
				params:{},
				actuallyPay:"",//现金支付
				payStatus:'pending',
				payTips:"等待中",
				orderId:"",
				isPay:false,
				info:{
					title:'支付'
				}
			}
		},
		methods: {
			goPath(path){
				uni.navigateTo({
					url: `/pages/h5/index?appointPage=${path}`
				})
			},
			// 支付结果查询
			payResult(){
				http('user.status', {orderId:this.orderId}).then(res => {
					if(res.code == 0){
						if(res.data) {
							this.payStatus = "fulfilled";
							this.payTips = "下单成功";
						}else{
							this.payStatus = "rejected";
							this.payTips = "支付有延迟，请查看订单";
						}
					}
				})
			},
			pay() {
				let that = this;
				wx.requestPayment({
					timeStamp: this.params.timeStamp,
					nonceStr: this.params.nonceStr,
					package: this.params.package,
					signType: this.params.signType,
					paySign: this.params.paySign,
					success(res) {
						that.isPay = true;
						that.payResult();
					},
					fail(err) {
						that.isPay = false;
						if(err.errMsg == 'requestPayment:fail cancel'){
							that.$u.toast("取消支付");
						}else{
							that.$u.toast(err.errMsg);
						}
					}
				})
				 
			},
			goback: function() {
			    // var pages = getCurrentPages();
			    // console.log(666,pages);
			    // wx.navigateBack({
			    //   delta: pages.length-2
			    // })
					uni.navigateTo({ 
						url: '/pages/h5/index'
					})
			  }
		},
		onLoad(option){
			let {data,orderId,actuallyPay} = option;
			this.actuallyPay = actuallyPay;
			this.orderId = orderId;
			this.params = JSON.parse(decodeURIComponent(data));
		}
	}
		
</script>
<style lang="scss" scoped>
.pay-container{
	.pay-info{
		text-align: center;
		margin: 100rpx 0 ;
		.info-tips{
			font-weight: bold;
			font-size: 36rpx;
		}
	}
	.money-box{
		font-size: 34rpx;
		font-weight: bold;
		text-align: center;
		padding-top:50rpx;
		.money{
			font-size: 60rpx;
		}
	}
	::v-deep .u-button{
		width: 80%; 
	}
}
.payResult{
	text-align: center;
	margin: 100rpx 0 ;
	::v-deep .u-icon{
		justify-content: center;
	}
	.tips{
		font-size: 38rpx;
		color: #61b077;
		margin:20rpx 0 80rpx 0 ;
	}
	.bot{
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10%;
		.lf,.rt{
			width: 45%;
		}
	}
}
</style>
