qidian/pages/payorder/payorder.vue

<template>
	<view class="payxx">
		<view v-if='!expirationTime' class="time">剩余支付时间{{m}} ：{{s}}</view>
		<view v-if="expirationTime" class="time">订单过期时间：{{expirationTime}}</view>
		<view class="price">
			<view>￥</view>
			<view>{{price}}</view>
		</view>
		<view @click="godet" class="orderdetails">
			<view>订单详情</view>
			<image src="../../static/youjiantou.png"></image>
		</view>
	</view>
	<view class="pay_type">
		<view v-for="item in paytypes" @click="xiugai(item.id)">
			<view>
				<image :src="item.payWay=='支付宝支付'?'../../static/zfb.png':item.payWay=='微信支付'?'../../static/wx.png':'../../static/yhk.png'"></image>
				<view>{{item.payWay}}</view>
			</view>
			<image :src="xzstate==item.id?'../../static/yixuan.png':'../../static/weixuan.png'"></image>
		</view>
<!-- 		<view v-if="paytypes[0].payWay='微信支付'">
			<view>
				<image src="../../static/wx.png"></image>
				<view>微信支付</view>
			</view>
			<image @click="xiugai(1)" :src="xzstate==1?'../../static/yixuan.png':'../../static/weixuan.png'"></image>
		</view>
		<view v-if="paytypes[1].payWay='支付宝'">
			<view>
				<image src="../../static/zfb.png"></image>
				<view>支付宝支付</view>
			</view>
			<image @click="xiugai(2)" :src="xzstate==2?'../../static/yixuan.png':'../../static/weixuan.png'"></image>
		</view>
		<view v-if="paytypes[2].state">
			<view>
				<image src="../../static/yhk.png"></image>
				<view>银行卡支付</view>
			</view>
			<image @click="xiugai(3)" :src="xzstate==3?'../../static/yixuan.png':'../../static/weixuan.png'"></image>
		</view> -->
	</view>
	<view @click="queren" class="pay_btn">
		确认支付
	</view>
</template>

<script>
	import {
		paypayway,
		paypurchase,
		criticismdetails,
	} from '@/api/user.js'
	import wx from 'weixin-js-sdk'
	import {ref} from 'vue'
	export default {
		props:['id'],
		onShow() {
			for(let i=0;i<=5;i++){
				criticismdetails({id:this.id}).then(res=>{
					console.log(res);
					if(res.data.orderState==3||res.data.orderState==6){
						uni.navigateTo({
							url:'../paysuccess/paysuccess'
						})
					}else if(res.data.orderState==7){
						uni.reLaunch({
							url:'../index/index'
						})
					}
				})
			}
			if(this.iszhifu){
				this.xh=setInterval(()=>{
					criticismdetails({id:this.id}).then(res=>{
						console.log(res);
						if(res.data.orderState==3||res.data.orderState==6){
							uni.navigateTo({
								url:'../paysuccess/paysuccess'
							})
							if(this.xh!=null){
								clearInterval(this.xh)
							}
						}else if(res.data.orderState==7){
							uni.reLaunch({
								url:'../index/index'
							})
						}
					})
				},200)
			}
		},
		onHide() {
			if(this.xh!=null){
				clearInterval(this.xh)
			}
		},
		onUnload() {
			if(this.xh!=null){
				clearInterval(this.xh)
			}
			if(this.djsxh!=null){
				clearInterval(this.djsxh)
			}
		},
		setup(props) {
			let m=ref('10')
			let s=ref('00')
			let xh=ref(null)
			let djsxh=ref(null)
			let iszhifu=ref(false)
			uni.showLoading({
				title:'加载中'
			})
			function djs(){
				djsxh.value=setInterval(()=>{
					// console.log(m.value,Number(m.value));
					if(Number(s.value)<=0){
						if(Number(m.value)==0){
							uni.reLaunch({
								url:'../index/index'
							})
							clearInterval(xunhuan)
						}
						if(Number(m.value)-1<10){
							m.value='0'+(Number(m.value)-1)
						}else{
							m.value=(Number(m.value)-1)
						}
						s.value=60
					}
					let news=(Number(s.value)-1)
					if(news<10){
						news='0'+news
					}
					s.value=news
				},990)
			}
			djs()
			let xzstate=ref(-1)
			let paytypes=ref([{state:true},{state:true},{state:true}])
			
			paypayway({}).then(res=>{
				console.log(res);
				paytypes.value=res.data
			})
			let price=ref(0)
			let expirationTime=ref(null)
			criticismdetails({id:props.id}).then(res=>{
				console.log(res,'xq');
				price.value=res.data.orderAmount.split('.')[0]+'.'+res.data.orderAmount.split('.')[1].substring(0,2)
				expirationTime.value=res.data.expirationTime
				var minutes = parseInt((res.data.timeStamp % (1000 * 60 * 60)) / (1000 * 60));
				var seconds = parseInt((res.data.timeStamp % (1000 * 60)) / 1000);
				m.value=minutes
				s.value=seconds
				uni.hideLoading()
			})
			function xiugai(value){
				xzstate.value=value
			}
			function queren(){
				if(xzstate.value==-1){
					uni.showToast({
						title:'请选择支付方式',
						icon:'error'
					})
					return
				}
				if(xzstate.value == 8){
					uni.navigateTo({
							url:'/pages/yanzhen/yanzhen?id='+props.id
					})
					return
				}
				paypurchase({
					orderId: props.id,
					payId: xzstate.value,
					// payWayId:,
				}).then(res=>{
					console.log(res);
					// return
					if(res.code!=200){
						uni.showToast({
							title:res.msg
						})
						return
					}
					if(res.msg=='操作成功'){
						uni.reLaunch({
							url:'../paybaipiao/paybaipiao'
						})
						return
					}
					if (xzstate.value == 1) {
						// if(!iswx){
						iszhifu.value=true
						let str = res.msg.split(">")
						let str1 = str[1].split("<");
						let str2 = str1[0].slice(15)
						let str3 = str2.replace(/"/, '')
						// console.log(str3,'str3');
						uni.setStorageSync("https", str3)
						location.href = `${str3}`
						// }else{
						// wx.invoke(
						// 	'getBrandWCPayRequest', {
						// 	    "appId":"wx2421b1c4370ec43b",     //公众号名称，由商户传入     
						// 	    "timeStamp":"1395712654",         //时间戳，自1970年以来的秒数     
						// 	    "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     
						// 	    "package":"prepay_id=u802345jgfjsdfgsdg888",     
						// 	    "signType":"MD5",         //微信签名方式：     
						// 	    "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
						// 	},
						// 	function(res){
						// 	if(res.err_msg == "get_brand_wcpay_request:ok" ){
						// 	      // 使用以上方式判断前端返回,微信团队郑重提示：
						// 	            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
						// 	} 
						// 	}); 
						// }
						
					} else if (xzstate.value == 2) {
						console.log(res.msg);
						const div = document.createElement('div')
						div.id = 'formdata'
						div.innerHTML = res.msg
						document.body.appendChild(div)
						const form = document.getElementById('formdata');
						document.forms[0].submit()
						document.body.removeChild(form)
					}else if(xzstate.value == 7){
						location.href = res.msg
					}else if(xzstate.value == 8){
						uni.navigateTo({
							url:'/pages/yanzhen/yanzhen?id='+props.id
						})
					}
				})
			}
			function godet(){
				uni.navigateTo({
					url:'../orderdetails/orderdetails?id='+props.id
				})
			}
			return {
				djsxh,
				xzstate,
				expirationTime,
				xiugai,
				paytypes,
				queren,
				godet,
				price,
				m,s,iszhifu,xh
			}
		}
	}
</script>

<style lang="scss">
	.pay_btn{
		width: 668upx;
		height: 84upx;
		background: #3772FF;
		border-radius: 12upx;
		font-size: 28upx;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: auto;
		margin-top: 320upx;
	}
	.pay_type{
		display: flex;
		flex-direction: column;
		margin-top: 180upx;
		>view{
			width: 676upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #ffffff;
			margin: auto;
			padding-bottom: 36upx;
			padding-top: 36upx;
			box-sizing: border-box;
			border-bottom: 1upx solid #373737;
			&:nth-last-child(1){
				border-bottom:0;
			}
			>view{
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28upx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				>image{
					width: 48upx;
					height: 48upx;
					margin-right: 30upx;
				}
			}
			>image{
				width: 32upx;
				height: 32upx;
			}
		}
	}
.payxx{
	display: flex;
	flex-direction: column;
	align-items: center;
	.time{
		font-size: 24upx;
		font-weight: 500;
		color: #8D8C9F;
	}
	.price{
		font-size: 48upx;
		font-weight: bold;
		color: #FFFFFF;
		margin-top: 20upx;
		margin-bottom: 20upx;
		display: flex;
		align-items: center;
		>view:nth-of-type(2){
			font-size: 72upx !important;
		}
	}
	.orderdetails{
		font-size: 24upx;
		font-weight: 500;
		color: #8D8C9F;
		display: flex;
		align-items: center;
		>image{
			width: 24upx;
			height: 24upx;
		}
	}
}

page{
	padding-top: 100upx;
}

</style>