food_wechat/pages/shop/pay.vue

<template>
	<view>
		<!-- topbar -->
		<u-navbar title="收银台" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
			</view>
		</u-navbar>
		<!-- body -->
		<view class="flex column msb bodyBox">
			<view>
				<view class="priceBox fb flex mc">¥{{fullPrice | formatPrice}}</view>
				<view class="fcb fz24 flex mc">
					<span class="m-r-24">支付剩余时间</span>
					<span v-if="order_time!==0">{{ countdown }}</span>
				</view>
				<view class="flex msb mac rad8 bg-w m-l-24 m-r-24 m-t-24 p-24">
					<view class="flex mac">
						<u--image src="/static/icons/wxPayLogo.svg" width="75rpx" height="60rpx" />
						<view class="fz36 m-l-24">微信支付</view>
					</view>
					<view class="flex border rad-c border-m bg-m checkBox">
						<u-icon name="checkbox-mark" size="40rpx" color="#fff"></u-icon>
					</view>
				</view>
			</view>
			<view @click="pay" class="butBox fci bg-m rad8 fb fz36 flex mc p-24 m-l-24 m-r-24">确认支付</view>
			<!-- <button @click="pay" type="primary">确认支付</button> -->
		</view>

	</view>
</template>

<script>
	import {
		formatPrice,
		formatSeconds
	} from '@/utils/index.js'

	export default {
		data() {
			return {
				order_sn: '', //订单号
				fullPrice: 0, //总价格 包括附加费用
				order_time: 0, //订单创建时间
				countdown: '', // 用于显示倒计时
				timer: null, // 存储计时器
			}
		},
		onLoad(options) {
			this.$store.dispatch('fetchOrderList')
			this.order_sn = options.order_sn // 从提交订单页面传递过来的订单号
			this.fullPrice = Number(options.fullPrice) // 从提交订单页面传递过来的订单号
			//倒计时
			this.timer = setInterval(() => {
				if (this.order_time && this.order_time > 0) {
					let tempTime = this.order_time + 100 - Math.floor(Date.now() / 1000)
					if (tempTime <= 0) {
						this.countdown = '00:00'
						clearInterval(this.timer) // 清除定时器
						// 倒计时结束后跳转到首页
						uni.navigateTo({
							url: '/pages/index/index' // 非 Tab 页的路径
						})
					} else {
						this.countdown = this.formatSeconds(tempTime)
					}
				} else {
					this.countdown = '00:00'
					clearInterval(this.timer) // 清除定时器
					// 如果没有有效的 order_time，也跳转到首页
					uni.switchTab({
						url: '/pages/index/index' // 首页的路径
					})
				}
			}, 1000)
		},
		computed: {
			//订单详情
			orderShow() {
				if (this.$store.state.orderList && this.$store.state.orderList.length > 0) {
					// 使用 find 查找匹配的订单，若没有找到返回 null
					return this.$store.state.orderList.find((item) => item.order_sn === this.order_sn) || null;
				}
				return null; // 如果 orderList 为空或未定义，返回 null
			},
		},
		filters: {
			formatPrice, //格式化价格
		},
		watch: {
			'orderShow': {
				handler(newVal, oldVal) {
					if (newVal) {
						this.order_time = Number(newVal.order_time)
					}
				},
				deep: true
			}
		},
		methods: {
			//秒格式化成 00:00格式
			formatSeconds,
			// 支付方法
			pay() {
				uni.$u.http.post('/Api/Pay/pay', {
					order_sn: this.order_sn
				}, {
					header: {
						'Token': this.$store.state.userInfo.token,
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then((res) => {
					if (res.data.status === 1) {
						// 调用微信支付接口
						this.requestPayment(res.data.payMsg);
					} else {
						uni.showToast({
							title: '支付失败',
							icon: 'error'
						});
						console.error(res.data.msg)
					}
				})
			},
			// 调用微信支付接口
			requestPayment(payMsg) {
				uni.requestPayment({
					timeStamp: payMsg.timeStamp,
					nonceStr: payMsg.nonceStr,
					package: payMsg.package,
					signType: payMsg.signType,
					paySign: payMsg.paySign,
					success: (res) => {
						if (res.status === 1) {
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							})
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '支付失败',
							icon: 'error'
						});
						console.error(err)
					}
				});
			},


		},
		destroyed() {
			// 在组件销毁前清除定时器
			clearInterval(this.timer) // 倒计时结束后清除定时器
		}
	}
</script>

<style lang="scss" scoped>
	.priceBox {
		font-size: 72rpx;
		margin-top: 140rpx;
	}

	.butBox {
		margin-bottom: 72rpx;
	}

	.bodyBox {
		height: calc(100vh - 176rpx);
	}
</style>