high-mini/pages/classify/order/pay.vue

<template>
	<view class="backcor9 pay-syt pd-main">
		<view class="fotct">
			<view class="">
				¥<text class="font28 fontwig6">37.13</text>
			</view>
			<view class="fcor666 font14 paddtop10 paddbotm10">
				支付剩余时间<text class="paddleft10">{{countdownm}}:{{countdowns}}</text>
			</view>
		</view>
		<view class="content pd-main backcolorfff border-8r">
			<checkbox-group @change="changeCheckBox">
			<view class="dis-flex border-b pd15-v">
				<image class="pay-img paddtright10" src="../../../static/img/zfb.png" mode="aspectFit"></image>
				<view class="flex-1 dis-flex flex-sp  ">
					<view class="">
						<view class="">
							支付宝
						</view>
						<view class="fcor666">
							周五，六，日，光大信用卡支付随机优惠
						</view>
					</view>
					
					<checkbox class="mycheck" :value="1" color="#55B836"   :checked="isCheck[0]" />
				</view>
			</view>
			<view class="dis-flex border-b pd15-v">
				<image class="pay-img paddtright10" src="../../../static/img/yl.png" mode="aspectFit"></image>
				<view class="flex-1 dis-flex flex-sp  ">
					<view class="">
						<view class="">
							银联云闪付
						</view>
						<view class="fcor666">
							建行信用卡支付满40减16,先到先得
						</view>
					</view>
					
					<checkbox class="mycheck" :value="2" color="#55B836"  :checked="isCheck[1]" />
				</view>
			</view>
			<view class="dis-flex  pd15-v">
				<image class="pay-img paddtright10" src="../../../static/img/wechat.png" mode="aspectFit"></image>
				<view class="flex-1 dis-flex flex-sp  ">
					<view class="">
						<view class="">
							微信支付
						</view>
						
					</view>
					
					<checkbox class="mycheck" :value="3" color="#55B836" :checked="isCheck[2]" />
				</view>
			</view>
			</checkbox-group>
		</view>
		
		<view class="btn-contain backcolorfff">
			<view class="btn-edit fotct fcorfff font18" @click="payMoney()">确认支付<text class="paddleft5">¥37.13</text></view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data(){
			return{
				isCheck:[false,false,false],
				// 倒计时
				countdownh: '', //倒计时时
				countdownm: '', // 倒计时分
				countdowns:'',//倒计时秒
				timers:null,
				recinfo:{
					createTime:1680774642959,
				},
				
			
			}
		},
		onShow(){
			// 待支付状态
			// if(this.status == 0){
				this.timers = setInterval(() => {
					this.showtime()
				}, 1000)
			// }
		},
		methods:{
			// 倒计时
			showtime() {
				var nowtime = (new Date()).getTime();//获取当前时间
				var	endtime = this.recinfo.createTime + 600000; //定义结束时间 600000是10分钟
				var lefttime = endtime - nowtime; //距离结束时间的毫秒数
				var	leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)); //计算天数
				var	lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24) < 10 ? "0" + Math.floor((lefttime /
						(1000 * 60 * 60) % 24) + leftd * 24) : Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd *
						24); //计算小时数
				var	leftm = Math.floor(lefttime / (1000 * 60) % 60) < 10 ? "0" + Math.floor(lefttime / (1000 * 60) % 60) :
					Math.floor(lefttime / (1000 * 60) % 60); //计算分钟数
				var	lefts = Math.floor(lefttime / 1000 % 60) < 10 ? "0" + Math.floor(lefttime / 1000 % 60) : Math.floor(
						lefttime / 1000 % 60); //计算秒数
				this.countdownh = lefth; //返回倒计时的字符串
				this.countdownm = leftm; //返回倒计时的字符串
				this.countdowns = lefts; //返回倒计时的字符串
				// 倒计时结束时，显示00:00:00
				if (lefttime < 0) {
					clearInterval(this.timers);
					// this.getDetailByOrderNo();
					this.countdownh = this.countdownm = this.countdowns = "00";
				}
			},
			
			//changeCheckBox
			changeCheckBox(e){
				if(e.detail.value.length>1){
					let val = e.detail.value[e.detail.value.length-1]
					 this.isCheck.map((item,index)=>{
						 if(index-1 == val){
							 this.isCheck=[]
						 }
					 })
					 this.isCheck=[false,false,false];
					 this.isCheck[val-1]=true;
				}else if(e.detail.value.length==1){
					this.isCheck=[false,false,false];
					 this.isCheck[e.detail.value[0]-1]=true;
					
				}else{
					this.isCheck=[false,false,false];
				}
				
				// console.log(this.isCheck,e.detail.value)
				
			},
			
			payMoney(){	
				let isSelect=false;	
				console.log(this.isCheck,"支付确认")
				this.isCheck.map((item,index)=>{
					if(item){
						isSelect=true;
						if(index == 0){
							this.pay('zfb')
							return
						}
						if(index == 1){	
							this.pay('yl')
							return
						}
						if(index == 2){	
							this.pay('wx')
							return
						}
						
					}				
				})
				
				if(!isSelect){
					uni.showToast({
						title: '请选择支付方式',
						duration: 2000,
						icon:"error"
					});
				}
	
			},
			pay(type){
				uni.navigateTo({
					url:"/pages/classify/order/paymentResult?type="+type
				})
			}
		}
	}
</script>

<style scoped>
.pay-syt{
	height: 100vh;
}

.pay-img{
	width: 30px;
	height: 30px;
}

.pd15-v{
	padding: 15px 0;
}

.btn-contain{
position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
		padding: 10px;
		box-sizing: border-box;
}

.btn-edit{
	
	height: 40px;
	border-radius: 20px;
	line-height: 40px;
	background-color: #EA3E44;
}
</style>