【类 型】：test

【主	题】：调整一下支付页面的ui
【描	述】：
	[原因]：
	[过程]：
	[影响]：
【结	束】

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

pages.json

@@ -42,7 +42,7 @@
 		{
 			"path": "pages/shop/pay",
 			"style": {
-				"navigationBarTitleText": "收银台"
+				"navigationStyle": "custom"
 			}
 		},
 		{
@@ -53,9 +53,14 @@
 		},
 		{
 			"path" : "pages/main/login",
-			"style" : 
-			{
-				"navigationBarTitleText" : ""
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path" : "pages/main/order",
+			"style": {
+				"navigationStyle": "custom"
 			}
 		}
 	],

pages/main/order.vue

@@ -0,0 +1,27 @@
+<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>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages/shop/list.vue

@@ -72,10 +72,11 @@
 			<view v-else class="bg-m rad16 flex" style="height: 108rpx;">
 				<view class="flex md p-b-12">
 					<u--image src="/static/icons/planeBox-100.svg" width="136rpx" height="136rpx"
-						@click="$store.state.cartShow = !$store.state.cartShow" />
+						@click="$store.commit('setCartShow',!$store.state.cartShow)" />
 				</view>
 				<view class="fci fz36 flex1 flex msb">
-					<view class="flex1 p-l-12 flex column mc" @click="$store.state.cartShow = !$store.state.cartShow">
+					<view class="flex1 p-l-12 flex column mc"
+						@click="$store.commit('setCartShow',!$store.state.cartShow)">
 						<view class="fz36 fb">¥{{total | formatPrice}}</view>
 						<view class="fz24" v-if="minimumOrderDifference>0">还差¥{{minimumOrderDifference | formatPrice}}起送
 						</view>
@@ -186,13 +187,13 @@
 						// 如果节点尚未生成，res值为null，循环调用执行
 						if (!res) {
 							setTimeout(() => {
-								this.getElRect(elClass);
+								this.getElRect(elClass)
 							}, 10)
 							return
 						}
-						this[dataVal] = res.height;
+						this[dataVal] = res.height
 						resolve()
-					}).exec();
+					}).exec()
 				})
 			},
 			// 观测元素相交状态
@@ -262,21 +263,22 @@
 						// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
 						if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
 							this.leftMenuStatus(i)
-							return;
+							return
 						}
 					}
 				}, 10)
 			},
 			//"选好了"执行
 			handleSeled() {
-				if (!this.$store.state.userInfo.tel) { //没有手机号 跳转到手机获取
-					uni.navigateTo({
-						url: '/pages/main/getTel'
-					})
-				} else { //跳转到 确认订单页面
-					uni.navigateTo({
+				const regex = /^(\+?\d{1,4}[\s-]?)?\d{3}\*{4}\d{4}$/
+				if (regex.test(this.$store.state.userInfo.tel)) { //手机号合法
+					uni.navigateTo({ //跳转到订单页面
 						url: '/pages/shop/order'
 					})
+				} else { //手机号不合法 获取为空
+					uni.navigateTo({ //跳转到获取手机号页面
+						url: '/pages/main/getTel'
+					})
 				}
 			}
 		},

pages/shop/order.vue

@@ -44,8 +44,8 @@
 				<text class="fz24">合计：</text>
 				<text class="fz44">¥{{total | formatPrice}}</text>
 			</view>
-			<view class="fz32 bg-m flex column mac mc fci rad16 m-r-24" style="width:220rpx;height:100rpx;"
-				@click="handleCheckout">
+			<view class="fz32 flex column mac mc fci rad16 m-r-24" style="width:220rpx;height:100rpx;"
+				@click="handleCheckout" :class="isPressed?'bg-g':'bg-m'">
 				<view>提交订单</view>
 				<view>Checkout</view>
 			</view>
@@ -64,6 +64,7 @@
 	export default {
 		data() {
 			return {
+				isPressed: false, //提交按钮是否锁定
 				remark: '' //用户备注
 			}
 		},
@@ -90,6 +91,10 @@
 			totalPrice,
 			//提交订单
 			handleCheckout() {
+				if (this.isPressed) {//防止提交订单按钮重复点击
+					return
+				}
+				this.isPressed = true
 				//提交订单
 				uni.$u.http.post('/Api/Check/checkout', {
 					cartList: JSON.stringify(this.cartList), //购物车列表
@@ -105,9 +110,11 @@
 				}).then(res => {
 					//订单添加成功
 					if (res.data.status === 1) {
-						const order_sn = res.data.order_sn;
+						//清空购物车
+						this.$store.commit('clearCartList')
+						//跳转到支付页面
 						uni.navigateTo({
-							url: `/pages/shop/pay?order_sn=${order_sn}`
+							url: `/pages/shop/pay?order_sn=${res.data.order_sn}`
 						});
 					} else if (res.data.status === -1) {
 						uni.removeStorage({ //清除用户信息 跳转首页
@@ -124,6 +131,7 @@
 							title: res.data.msg,
 							icon: 'error'
 						})
+						this.isPressed = false
 					}
 				})
 			}
@@ -133,7 +141,12 @@
 			formatPrice, //格式化价格
 		},
 		onShow() {
-			
+			//购物车没有信息 跳转到订单查询页面
+			if (this.$store.state.cartList.length === 0) {
+				uni.redirectTo({
+					url: '/pages/main/order'
+				})
+			}
 		}
 	}
 </script>

pages/shop/pay.vue

@@ -1,6 +1,12 @@
 <template>
 	<view>
-		<button @click="pay">确认支付</button>
+		<!-- 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>
+		<button @click="pay" type="primary" style="margin-top:200rpx;">确认支付</button>
 	</view>
 </template>
 

store/index.js

@@ -43,6 +43,10 @@ const store = new Vuex.Store({
 	},
 	//修改状态
 	mutations: {
+		//设置 列表页 购物车折叠显隐
+		setCartShow(state,val){
+			Vue.set(state,'cartShow', val)
+		},
 		//设置 标记用户登录状态
 		setMqttState(state,val){
 			Vue.set(state,'mqttState', val)
@@ -89,6 +93,10 @@ const store = new Vuex.Store({
 		setShopCon(state, obj) {
 			state.shopCon = obj
 		},
+		//清空购物车
+		clearCartList(state){
+			Vue.set(state,'cartList', [])
+		},
 		// 设置购物车列表
 		setCartList(state, obj) {
 			let isExisting = false