changshu_WeChat/subPackages/order/orderPay.vue

<template>
	<view class="bg">
		<view class="title-box flex-between">
			<span class="iconfont" @click="gotoPath('/subPackages/order/trades')">&#xe660;</span>
			<view>支付</view>
			<view style="width: 32rpx;"></view>
		</view>
		<view class="title">支付剩余时间</view>
		<view class="time-box">
			<uni-countdown :font-size="40" :show-day="false" :hour="times.hours" :minute="times.minutes"
				:second="times.seconds" @timeup="timeup"></uni-countdown>
		</view>
		<view class="money-box" style="padding-bottom: 30rpx;">
			<view>应付金额</view>
			<view style="color: red;">￥{{detail.paid_money / 100}}</view>
		</view>
		<view class="money-box" style="border-bottom: none;">
			<view>支付方式:</view>
		</view>
		
		<!-- 优惠券 -->
		<view v-if="coupon_activity">
			<view class="pay-box" @click="payType = 1" v-if="pay_type.includes('WEIXIN')">
				<view style="display: flex; align-items: center;">
					<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/wxPay.png" mode="widthFix"></image>
					微信支付
				</view>
			
				<view class="select-box">
					<view class="select" v-if="payType == 1"></view>
				</view>
			</view>
			
			<view v-if="walletList.length > 0 &&  pay_type.includes('SUBWALLET')">
				<view class="pay-box">
					<view style="display: flex; align-items: center;">
						<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/numLogo.png" mode="widthFix">
						</image>
						数字人民币子钱包支付
					</view>
			
					<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/selectB.png" class="select-img"
						mode="widthFix" :style="{'transform': showMore ? 'rotate(180deg)' : ''}"
						@click="showMore = !showMore"></image>
				</view>
			
				<view v-show="showMore" style="padding-left: 40rpx;">
					<view class="pay-box" v-for="(item,index) in walletList" :key="index" @click="payType = 2;walletIndex = index">
						<view style="display: flex; align-items: center;">
							<image :src="item.bank_logo" mode="widthFix"></image>
							{{item.bank_name}}
						</view>
			
						<view class="select-box">
							<view class="select" v-if="payType == 2 && walletIndex === index"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="" v-else>
			<view class="pay-box" @click="payType = 1">
				<view style="display: flex; align-items: center;">
					<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/wxPay.png" mode="widthFix"></image>
					微信支付
				</view>
			
				<view class="select-box">
					<view class="select" v-if="payType == 1"></view>
				</view>
			</view>
			
			<view v-if="walletList.length > 0">
				<view class="pay-box">
					<view style="display: flex; align-items: center;">
						<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/numLogo.png" mode="widthFix">
						</image>
						数字人民币子钱包支付
					</view>
			
					<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/selectB.png" class="select-img"
						mode="widthFix" :style="{'transform': showMore ? 'rotate(180deg)' : ''}"
						@click="showMore = !showMore"></image>
				</view>
			
				<view v-show="showMore" style="padding-left: 40rpx;">
					<view class="pay-box" v-for="(item,index) in walletList" :key="index" @click="payType = 2;walletIndex = index">
						<view style="display: flex; align-items: center;">
							<image :src="item.bank_logo" mode="widthFix"></image>
							{{item.bank_name}}
						</view>
			
						<view class="select-box">
							<view class="select" v-if="payType == 2 && walletIndex === index"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn" @click="pay">
			立即付款
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				token: {},
				detail: {},
				closeTime: 1000 * 60 * 30,
				times: {},
				showMore: true,
				walletList: [],
				walletIndex: 0,
				payType: null,
				coupon_activity: false,
				pay_type: "",
				JDSZAPIURL: 'https://api.cloud.sz-trip.com'
			}
		},
		onReady() {

		},
		onBackPress() {
			return true; // 返回 true 表示阻止默认返回行为
		},
		onLoad(option) {
			this.id = option.orderId
			this.token = option.token
			uni.request({
				method: 'POST',
				url: this.JDSZAPIURL + '/api/subwallet.ermb/wallet',
				header: {
					'content-type': 'application/json',
					'token': option.token
				},
				data: {},
				success: res => {
					this.walletList = res.data.data
					uni.request({
						method: 'POST',
						url: this.JDSZAPIURL + '/api/order/query',
						header: {
							'content-type': 'application/json',
							'token': option.token
						},
						data: {
							order_id: option.orderId
						},
						success: res => {
							// 选择优惠券需要判断优惠券支付方式
							if(res.data.data.coupon_activity && res.data.data.coupon_activity.pay_type) {
								this.coupon_activity = true
								this.pay_type = res.data.data.coupon_activity.pay_type
							}
							
							if(res.data.data.paid_money == 0) {
								uni.redirectTo({
									url: '/subPackages/order/trades'
								})
								return;
							}
							this.detail = res.data.data
							let createTime = new Date(
								(this.detail.create_time + "").replace(/-/g, "/")
							).getTime();
							createTime += this.detail.auto_close_time * 1000;
							this.closeTime = createTime - new Date().getTime();
							const hours = parseInt((this.closeTime % (1000 * 60 * 60 * 24)) / (
								1000 * 60 * 60));
							const minutes = parseInt((this.closeTime % (1000 * 60 * 60)) / (
								1000 * 60));
							const seconds = (this.closeTime % (1000 * 60)) / 1000;
							this.times = {
								hours: hours,
								minutes: minutes,
								seconds: seconds
							}
						}
					})
				}
			})
		},
		onShow() {

		},
		methods: {
			// 倒计时时间到触发事件
			timeup() {
				let flag = false
				setTimeout(() => {
					flag = true
				}, 2000)
				if (flag) {
					console.log('倒计时结束')
				}
			},
			// 支付
			pay() {
				if(this.payType == null) {
					uni.showToast({
						title: '请选择支付方式',
						icon: 'none'
					})
					return;
				}
				uni.showLoading({
					title: '加载中'
				})
				if(this.payType == 1) {
					// 微信支付
					uni.request({
						method: 'POST',
						url: this.JDSZAPIURL + '/api/order/pay',
						header: {
							'content-type': 'application/json',
							'token': this.token
						},
						data: {
							order_id: this.id,
							pay_method: "WEIXIN",
							pay_platform: "MINI",
							app_name: "WxXcxConfig"
						},
						success: res => {
							uni.hideLoading()
							if (res.data.code == 1) {
								let data = JSON.parse(res.data.data)
								uni.requestPayment({
									nonceStr: data.nonceStr || data.noncestr,
									package: data.package,
									paySign: data.paySign || data.sign,
									signType: data.signType,
									timeStamp: "" + (data.timeStamp || data.timestamp),
									complete: function(res) {
										// setTimeout(() => {
										// 	uni.redirectTo({
										// 		url: '/subPackages/order/trades'
										// 	})
										// }, 1000)
									}
								});
							} else {
								uni.showToast({
									title:res.data.msg,
									icon:'none'
								})
							}
						},
					})
				}else if(this.payType == 2) {
					// 数币支付
					uni.request({
						method: 'POST',
						url: this.JDSZAPIURL + '/api/subwallet.ermb/wallet',
						header: {
							'content-type': 'application/json',
							'token': this.token
						},
						data: {
							order_id: this.id,
							pay_method: "SUBWALLET",
							pay_platform: "MWEB",
							ins_no: this.walletList[this.walletIndex].ins_no,
							return_url: "https://m.cloud.sz-trip.com/OrderWaiting",
						},
						success: res => {
							uni.request({
								method: 'POST',
								url: this.JDSZAPIURL + '/api/order/pay',
								header: {
									'content-type': 'application/json',
									'token': this.token
								},
								data: {
									order_id: this.id,
									pay_method: "SUBWALLET",
									pay_platform: "MWEB",
									ins_no: this.walletList[this.walletIndex].ins_no,
									return_url: "https://https://m.cloud.sz-trip.com/OrderWaiting",
								},
								success: res => {
									let data = JSON.parse(res.data.data);
									if(data && data.RESULT && data.RESULT=='Y'){
										uni.request({
											method: 'POST',
											url: this.JDSZAPIURL + '/api/order/query',
											header: {
												'content-type': 'application/json',
												'token': this.token
											},
											data: {
												order_id: this.id,
											},
											success: res => {
												uni.hideLoading()
												if (res.data.data.state != "UNPAID") {
													uni.redirectTo({
														url: '/subPackages/order/trades'
													})
												} else {
													uni.showToast({
														title: '未查询到支付结果！',
														icon: 'none'
													})
												}
											},
											complete: (res) => {uni.hideLoading()}
										})
									} else {
										uni.hideLoading()
										if (res.data.code!=1 && res.data.msg) {
											uni.showToast({
												title: res.data.msg,
												icon: 'none'
											})
										}
									}
								},
							})
						},
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.bg {
		padding-top: 40rpx;
		box-sizing: border-box;
	}
	
	.title-box {
		position: absolute;
		top: 101rpx;
		font-size: 40rpx;
		padding: 0 26.67rpx;
		z-index: 2;
		display: flex;
		align-items: center;
		width: 100%;
	
		view {
			font-weight: 400;
			font-size: 36rpx;
			color: #000000;
		}
	}

	.title {
		text-align: center;
		font-size: 35rpx;
		line-height: 60rpx;
		margin-top: 200rpx;
	}

	.time-box {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.money-box {
		width: 670rpx;
		margin: 30rpx auto 0;
		font-size: 35rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #000;
		height: 60rpx;
		align-items: center;
	}

	.pay-box {
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 35rpx;
		margin-top: 40rpx;

		image {
			width: 70rpx;
			margin-right: 20rpx;
		}

		.select-box {
			width: 35rpx;
			height: 35rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1rpx solid #000;
			border-radius: 50%;

			.select {
				width: 15rpx;
				height: 15rpx;
				background: #000;
				border-radius: 50%;
			}
		}

		.select-img {
			width: 50rpx;
			height: 50rpx;
			margin-right: 0rpx;
		}
	}

	.btn {
		margin: 80rpx auto 0;
		width: 670rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 40rpx;
		background: #d62828;
		color: #fff;
		border-radius: 40rpx;
	}
</style>