【类 型】：feat

【原  因】：
【过  程】：收银台 订单超时功能 并在超时之后跳转到首页
【影  响】：

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动

App.vue

@@ -3,8 +3,10 @@
 		// 数据初始化
 		onLaunch: function(options) {
 			//从二维码获取站点id 商铺id
-			this.$store.commit('setShopId', options.query.s);
+			// this.$store.commit('setShopId', options.query.s);
-			this.$store.commit('setSiteId', options.query.z);
+			// this.$store.commit('setSiteId', options.query.z);
+			this.$store.commit('setShopId', '2dc23dcfecc05fb1');
+			this.$store.commit('setSiteId', '13');
 			//异步加载商铺信息
 			this.$store.dispatch('fetchShopCon')
 			//异步加载站点列表
@@ -55,6 +57,19 @@
 		float: right;
 	}
 
+	.fc {
+		text-align: center;
+	}
+
+	.fr {
+		text-align: right;
+	}
+
+	.checkBox {
+		weight: 40rpx;
+		height: 40rpx;
+	}
+
 	.ls {
 		background-color: #007aff;
 	}
@@ -163,14 +178,17 @@
 	.flex4 {
 		flex: 4;
 	}
+
 	//阴影
 	.boxshadow {
 		box-shadow: 0px 4rpx 4rpx rgba(0, 0, 0, 0.1);
 	}
+
 	//边框
 	.border {
 		border: 1rpx solid $uni-border-color;
 	}
+
 	//粗边框
 	.border4 {
 		border: 4rpx solid $uni-border-color;
@@ -187,10 +205,12 @@
 	.borderno {
 		border: none;
 	}
+
 	//下边框 实线
 	.borderB {
 		border-bottom: 1rpx solid $uni-border-color;
 	}
+
 	//下边框 虚线
 	.borderBDas {
 		border-bottom: 1rpx dashed $uni-border-color;

pages/shop/content.vue

@@ -37,8 +37,7 @@
 								+{{priceDifference(sku.id) | formatPrice}}
 							</text>
 						</view>
-						<view class="border rad-c m-r-12" :class="isSel(sku.id)?'border-m bg-m':''"
+						<view class="border rad-c m-r-12 checkBox" :class="isSel(sku.id)?'border-m bg-m':''">
-							style="width: 40rpx;height: 40rpx;">
 							<u-icon name="checkbox-mark" size="40rpx" color="#fff" v-if="isSel(sku.id)"></u-icon>
 						</view>
 					</view>

pages/shop/order.vue

@@ -188,7 +188,7 @@
 						//跳转到支付页面
 						uni.navigateTo({
 							url: `/pages/shop/pay?order_sn=${res.data.order_sn}&fullPrice=${fullPrice}`
-						});
+						})
 					} else if (res.data.status === -1) {
 						uni.removeStorage({ //清除用户信息 跳转首页
 							key: 'userInfo',

pages/shop/pay.vue

@@ -6,15 +6,35 @@
 				<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
 			</view>
 		</u-navbar>
-		<!-- 价格 -->
+		<!-- body -->
-		<view>{{fullPrice | formatPrice}}</view>
+		<view class="flex column msb bodyBox">
-		<button @click="pay" type="primary" style="margin-top:200rpx;">确认支付</button>
+			<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
+		formatPrice,
+		formatSeconds
 	} from '@/utils/index.js'
 
 	export default {
@@ -22,19 +42,65 @@
 			return {
 				order_sn: '', //订单号
 				fullPrice: 0, //总价格 包括附加费用
+				order_time: 0, //订单创建时间
+				countdown: '', // 用于显示倒计时
+				timer: null, // 存储计时器
 			}
 		},
 		onLoad(options) {
-			this.order_sn = options.order_sn; // 从提交订单页面传递过来的订单号
+			this.$store.dispatch('fetchOrderList')
-			this.fullPrice = Number(options.fullPrice); // 从提交订单页面传递过来的订单号
+			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
 			},
-		computed(){
-			
 		},
 		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', {
@@ -82,10 +148,27 @@
 					}
 				});
 			},
+
+
+		},
+		destroyed() {
+			// 在组件销毁前清除定时器
+			clearInterval(this.timer) // 倒计时结束后清除定时器
 		}
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.priceBox {
+		font-size: 72rpx;
+		margin-top: 140rpx;
+	}
 
+	.butBox {
+		margin-bottom: 72rpx;
+	}
+
+	.bodyBox {
+		height: calc(100vh - 176rpx);
+	}
 </style>

utils/index.js

@@ -75,6 +75,23 @@ export function formatTime(value) {
 
 	return `(${period})${hour}:${minute}`
 }
+
+/**
+ * 格式化秒数为 mm:ss 的格式
+ * @param {number} seconds 总秒数
+ * @returns {string} 格式化后的时间字符串
+ */
+export function formatSeconds(seconds) {
+	if (seconds < 0) return '00:00' // 如果秒数为负，则返回 00:00
+
+	let minutes = Math.floor(seconds / 60)
+	let remainingSeconds = seconds % 60
+
+	minutes = minutes.toString().padStart(2, '0')
+	remainingSeconds = remainingSeconds.toString().padStart(2, '0')
+
+	return `${minutes}:${remainingSeconds}`
+}
 /**
  * 过滤价格数值 超过小数点两位得 保留两位
  * @param {string} value