zh_order_food_xcx/pages-takeout/pay-page.vue

<template>
	<view class="flex-common-css iPhone-bottom flex-common-css box-border-box">
		<Nav title="订单支付" bgckgroundBox='transparent'></Nav>
		<scroll-view :scroll-y="true" class="box-sizing-border scroll-view-css plr-30 box-border-box">
			<view class="fs-28 fc-121212 mb-20 p-t-40 text-align-center">
				剩余时间 {{time.m}}:{{time.s}}
			</view>
			<view class="align-items-baseline flex-justify-center mb-40">
				<view class="fs-40 fw-500 fc-FB3D03">
					￥
				</view>
				<view class="fs-64 fw-500 fc-FB3D03">
					{{Number(payData.pay_money).toFixed(2) || '0.00'}}
				</view>
			</view>
			<view class="mb-40 text-align-center">
				订单编号： {{payData.order_sn}}
			</view>
			<view class="fs-32 fw-500 fc-3 mb-22">
				支付方式
			</view>
			<view class="plr-16 box-border-box b-rad-20 bgc-f">
				<view class="align-items-center flex-justify-space p-26-0 b-t-F4" @click="setPayType(3)">
					<view class="align-items-center">
						<image class="icon-img mr-16" src="static/ye.png" mode=""></image>
						<view class="fs-28 fc-333">
							余额支付
						</view>
						<view class="fs-28 fc-707070">
							（可用{{Number(payData.member_money).toFixed(2) || '0.00'}}）
						</view>
					</view>
					<image v-if="payType === 3" class="w-h-36 mr-10" src="@/static/img/common/y-select.png" mode="">
					</image>
					<image v-else class="w-h-36 mr-10" src="@/static/img/common/n-select.png" mode=""></image>
				</view>
				<view class="align-items-center flex-justify-space p-26-0 b-t-F4" @click="setPayType(1)">
					<view class="align-items-center">
						<image class="icon-img mr-16" src="@/static/img/common/wx-zf.png" mode="scaleToFill"></image>
						<view class="fs-28 fc-333">
							微信支付
						</view>
					</view>
					<image v-if="payType === 1" class="w-h-36 mr-10" src="@/static/img/common/y-select.png" mode="">
					</image>
					<image v-else class="w-h-36 mr-10" src="@/static/img/common/n-select.png" mode=""></image>
				</view>
			</view>
			<view class="fs-32 fw-500 fc-f text-align-center pay-but b-rad-200" @click="paySure"
				:class="butType === 1?'bgc-4FB3EF':'bgc-9'">
				立即支付￥{{Number(payData.pay_money).toFixed(2) || '0.00'}}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		orderPay
	} from '@/api/order.js'
	import {
		orderPayInfo
	} from "@/api/order.js"
	import tools from "@/service/tools.js"
	export default {
		data() {
			return {
				payType: 1,
				order_id: 0,
				isAJAX: false,
				payData: {},
				butType: 1,
				time: {
					day: '',
					h: "",
					m: '',
					s: '',
				},
			}
		},
		onLoad(data) {
			if (data) {
				this.order_id = data.orderId
				this.orderPayInfo()
			}
		},
		mounted() {},
		methods: {
			orderPayInfo() {
				orderPayInfo({
					order_id: this.order_id
				}).then((res) => {
					if (res.code === 1) {
						this.payData = res.data
						let createDate = new Date(res.data.created_at); //格式化订单创建时候的时间
						createDate.setMinutes(createDate.getMinutes() + 10)
						this.setCountDown(createDate)
					}
				})
			},
			setCountDown(sTime) {
				let end = new Date(sTime).getTime();
				let now = new Date().getTime();
				let msec = end - now;
				this.time.day = parseInt(msec / 1000 / 60 / 60 / 24);
				let h = parseInt(msec / 1000 / 60 / 60 % 24);
				let m = parseInt(msec / 1000 / 60 % 60);
				let s = parseInt(msec / 1000 % 60);
				this.time.h = h > 9 ? h : '0' + h;
				this.time.m = m > 9 ? m : '0' + m;
				this.time.s = s > 9 ? s : '0' + s;
				msec -= 1000;
				if (this.time.day >= 1) {
					this.showTime = true;
				} else {
					this.showTime = false;
				};
				if (msec >= 0) {
					setTimeout(() => {
						this.setCountDown(sTime);
					}, 1000);
				} else {
					this.isTimeEnd = true;
					this.bText = '活动结束';
					this.time.h = '--';
					this.time.m = '--';
					this.time.s = '--';
				};
			},
			setPayType(payType) {
				this.payType = payType
				if (payType === 3) {
					if (Number(this.payData.member_money) < Number(this.payData.pay_money)) {
						this.butType = 2
					} else {
						this.butType = 1
					}
				} else {
					this.butType = 1
				}
			},
			paySure() {
				if (this.butType === 2) {
					return
				}
				orderPay({
					order_id: this.order_id,
					pay_type: this.payType
				}).then((ret) => {
					if (ret.code === 1) {
						if (this.payType === 1) {
							uni.requestPayment({
								provider: "wxpay", //支付类型-固定值
								timeStamp: ret.data.wx_pay.timeStamp + "", // 时间戳（单位：秒）
								nonceStr: ret.data.wx_pay.nonceStr, // 随机字符串
								package: ret.data.wx_pay.package, // 固定值
								signType: ret.data.wx_pay.signType, //固定值
								paySign: ret.data.wx_pay.paySign, //签名
								success: (ren) => {
									uni.removeStorageSync('isConfirmAddressFlag')
									tools.success("支付成功");
									this.isAJAX = false;
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/order/index'
										})
										uni.setStorageSync('orderPayType', 1)
									}, 1000)
								},
								fail: (err) => {
									uni.removeStorageSync('isConfirmAddressFlag')
									this.isAJAX = false;
									tools.error("支付失败");
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/order/index'
										})
										uni.setStorageSync('orderPayType', 1)
									}, 1000)
								},
							});
						} else if (this.payType === 3) {
							uni.removeStorageSync('isConfirmAddressFlag')
							tools.success("支付成功");
							this.isAJAX = false;
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/order/index'
								})
								uni.setStorageSync('orderPayType', 1)
							}, 1000)
						}
					} else {
						uni.removeStorageSync('isConfirmAddressFlag')
						this.isAJAX = false;
						tools.error("支付失败");
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/order/index'
							})
							uni.setStorageSync('orderPayType', 1)
						}, 1000)
					}
				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	.pop-box {
		width: 80vw;
		height: 30vh;
	}

	.p-t-40 {
		padding: 40rpx 0 0;
	}

	.p-12-30 {
		padding: 12rpx 30rpx;
	}

	.p-23-16 {
		padding: 23rpx 16rpx;
	}

	.plr-16 {
		padding: 0 16rpx;
	}

	.p-26-0 {
		padding: 26rpx 0;
	}

	.icon-img {
		width: 40rpx;
		height: 40rpx;
	}

	.w-h-36 {
		width: 36rpx;
		height: 36rpx;
	}

	.pay-but {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		margin: 30rpx auto;
	}

	.pop-but {
		width: 80%;
		padding: 24rpx 0;
		margin: auto;

		.add-card {
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>