【类 型】：factor

【原  因】：
【过  程】："收银台" 页面ui重置
【影  响】：

# 类型 包含:
# 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,12 +205,14 @@
 	.borderno {
 		border: none;
 	}
+
 	//下边框 实线
 	.borderB {
 		border-bottom: 1rpx solid $uni-border-color;
 	}
+
 	//下边框 虚线
-	.borderBDas{
+	.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/pay.vue

@@ -6,9 +6,25 @@
 				<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">支付剩余时间 {{ countdown }}</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>
 
@@ -21,19 +37,41 @@
 		data() {
 			return {
 				order_sn: '', //订单号
-				fullPrice: 0,//总价格 包括附加费用
+				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) // 从提交订单页面传递过来的订单号
+			setInterval(() => {
+				this.countdown = Date.now() / 1000;
+			}, 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) {
+					this.order_time = Number(newVal.order_time)
+				},
+				deep: true // 如果需要深度监视对象或数组的变化，则需要设置为true
+			}
+		},
 		methods: {
 			// 支付方法
 			pay() {
@@ -48,7 +86,7 @@
 					if (res.data.status === 1) {
 						// 调用微信支付接口
 						this.requestPayment(res.data.payMsg);
-					}else{
+					} else {
 						uni.showToast({
 							title: '支付失败',
 							icon: 'error'
@@ -66,7 +104,7 @@
 					signType: payMsg.signType,
 					paySign: payMsg.paySign,
 					success: (res) => {
-						if(res.status===1){
+						if (res.status === 1) {
 							uni.showToast({
 								title: '支付成功',
 								icon: 'success'
@@ -82,10 +120,28 @@
 					}
 				});
 			},
+
+
+		},
+		destroyed() {
+			// 在组件销毁前清除定时器
+			// this.clearInterval()
 		}
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.priceBox {
+		font-size: 72rpx;
+		margin-top: 140rpx;
+	}
 
+	.butBox {
+		margin-bottom: 72rpx;
+	}
+
+	.bodyBox {
+		height: calc(100vh - 176rpx);
+		;
+	}
 </style>