下单页面调整，确认订单页面调整

2025-04-28 11:29:32 +08:00
parent 94cc918357
commit 7c182023a5
39 changed files with 5725 additions and 275 deletions
--- a/pages/product/components/confirmorder.vue
+++ b/pages/product/components/confirmorder.vue
@@ -1,6 +1,7 @@
 <template>
 	<view>
 		<up-popup :show="confirmordershow" :round="20" :safeAreaInsetBottom="false" :zIndex="105"
+		close-on-click-overlay
 			:overlayStyle="{ zIndex: 98 }" @close="close">
 			<!-- 头部内容 -->
 			<view class="container">
--- a/pages/product/components/shoppingCartes.vue
+++ b/pages/product/components/shoppingCartes.vue
@@ -19,7 +19,7 @@
 								</view>
 								<view class="flex-between" @click="cartclear">
 									<up-icon name="trash" color="#999" size="20"></up-icon>
-									<text class="t">清空购物车</text>
+									<text class="clear-btn">清空购物车</text>
 								</view>

 							</view>
@@ -65,7 +65,7 @@

 											<view class="operation-wrap">
 												<view class="btn">
-													<up-icon name="minus-circle-fill" size="25"></up-icon>
+													<up-icon color="#E8AD7B" name="minus-circle" size="25"></up-icon>
 													<view class="btnClick" @click="cartListadd(item,'-')"></view>
 												</view>
 												<text class="num">{{ ifcartNumber(item) }}</text>
@@ -73,7 +73,7 @@
 													<!-- <up-icon name="plus-circle-fill"
 														:color="{shopInfo.isVip ==1 && shopInfo.isMemberPrice==1? '#CECECE' : '#E9AB7A'"
 														size="25"></up-icon> -->
-													<up-icon name="plus-circle-fill" color="#E9AB7A"
+													<up-icon name="plus-circle-fill" color="#E8AD7B"
 														size="25"></up-icon>
 													<view class="btnClick" @click="cartListadd(item,'+')"></view>
 												</view>
@@ -83,56 +83,7 @@
 								</view>
 							</view>
 						</view>
-						<!-- 历史订单 -->
-						<view class="card" v-if="orderinfo.detailMap">
-							<!-- 订单头部 -->
-							<view class="cardcalorders flex-between">
-								<!-- ··· 历史订单 ··· -->
-								<text>待支付订单</text>
-								<view class="flex-start">
-									<up-icon name="trash" color="#999" size="20"></up-icon>
-									<text style="color:' #999;'" @click="clickcancelOrder('all')">清空历史订单</text>
-								</view>
-							</view>
-							<view class="card_item" v-for="(value, key) in orderinfo.detailMap" :key="key">
-								<view class="head">
-									<view class="head_left">
-										<text class="placeNum">第{{key}}次下单</text>
-										<view class="placeTime flex-start">
-											<up-icon name="trash" color="#999"></up-icon>
-											<text class="t" @click="clickcancelOrder('Single',key)">清空</text>
-										</view>
-									</view>
-								</view>
-								<!-- 订单详情 -->
-								<view class="shop-info">
-									<view class="item" v-for="item in value" :key="item.id">
-										<view class="cover">
-											<up-image width="80" radius="10" height="80" :src="item.productImg"
-												v-if="item.productId!=-999"></up-image>
-											<up-image width="80" radius="10" height="80"
-												:src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/table.png'"
-												mode="heightFix" v-else></up-image>
-										</view>
-										<view class="info">
-											<text class="productName">{{item.productName}}</text>
-											<text class="productSkuName" v-if="item.skuName">{{item.skuName}}</text>
-										</view>
-
-										<view class="price">
-											<view class="priceAmount">
-												￥{{shopInfo.isVip ==1 && shopInfo.isMemberPrice==1?(item.memberPrice||item.price):item.price}}
-											</view>
-											<view class="num">x{{item.num}}</view>
-										</view>
-									</view>
-								</view>
-								<view class="semicircle_icon" v-if="index > 0">
-									<view class="semicircle_left_icon"></view>
-									<view class="semicircle_right_icon"></view>
-								</view>
-							</view>
-						</view>
+						
 					</view>
 				</scroll-view>
 			</view>
@@ -289,6 +240,11 @@
 </script>

 <style lang="scss">
+	.clear-btn{
+		color: #333;
+		font-size: 24rpx;
+		font-weight: 500;
+	}
 	.cart-list-wrap {
 		.cart-header {
 			display: flex;
--- a/pages/product/index.vue
+++ b/pages/product/index.vue
@@ -8,8 +8,13 @@
 				mode="aspectFill">
 			</image>
 			<view class="panelone flex-start">
-				<view>
-					{{ shopInfo.shopName }}
+				<view class="u-flex u-flex-y-center">
+					<text>
+						{{ shopInfo.shopName }}
+					</text>
+					<view class="u-flex u-flex-y-center u-m-t-4">
+						<up-icon name="arrow-right" color="#999999" size="14"></up-icon>
+					</view>
 				</view>
 				<!-- <up-icon name="arrow-right" color="#999999" size="14"></up-icon> -->
 			</view>
@@ -31,7 +36,8 @@
 			<view class="panelfour" v-if="shopProductList.hots && shopProductList.hots.length > 0">
 				本店招牌菜
 			</view>
-			<view class="panelfive">
+			<view class="panelfive ">
+
 				<scroll-view :scroll-x="true" :scroll-with-animation="false">
 					<view class="panelfive_list">
 						<view class="panelfiveitem" @click="clickspecifications(item,index,index,'热销')"
@@ -142,7 +148,7 @@
 		</view>

 		<!-- 滚动区域 -->
-		<view class="scroll-panel" id="scroll-panel" :class="{ 'grayscale':!isBusinessTime }">
+		<view class="scroll-panel " id="scroll-panel" :class="{ 'grayscale':!isBusinessTime }">
 			<view class="list-box">
 				<view class="left" :style="{top: `${store.height}px`}">
 					<scroll-view :scroll-into-view="leftIntoView" :scroll-with-animation="false" :scroll-y="true"
@@ -257,6 +263,8 @@
 					</view>
 				</view>
 			</view>
+
+
 		</view>

 		<confirmorder ref="confirmorderref" :cartLists_count="cartLists_count" :cartList="matchedProducts"
@@ -288,7 +296,7 @@
 					<text class="num">{{totalPrices}}</text>
 				</view>
 				<view class="btn" @tap="$u.debounce(orderdetail, 500)">
-					<text class="t">去结算</text>
+					<text class="t">结算</text>
 				</view>
 			</view>
 		</view>
@@ -406,7 +414,10 @@
 				</view>
 			</view>
 		</up-popup>
-
+		<view class="history_order" @click="toHistory" v-if="shopInfo&&shopInfo.registerType == 'after'&&orderinfo.id">
+			<image class="img" src="@/static/history.png" mode=""></image>
+			<text>已下单菜品</text>
+		</view>
 		<Loading :isLoading="isLoading" />
 	</view>
 </template>
@@ -1123,7 +1134,6 @@
 			shop_id: uni.cache.get('shopId')
 		}
 	}
-
 	const {
 		isConnected,
 		sendMessage,
@@ -1140,8 +1150,6 @@
 	// 提交订单显示
 	const confirmordershow = ref(false)

-	// 购物车数组
-	const cartList = ref([])

 	// 更新商品数量的方法
 	const updateProductQuantities = () => {
@@ -1195,6 +1203,7 @@
 		if (isDataLoaded.value && receivedMessages.value) {
 			const Message = receivedMessages.value
 			if (Message) {
+				console.log(Message.data);
 				// 心跳返回  过滤
 				if (Message.type == "ping_interval" || Message.msg_id == "ping_interval") {
 					isLoading.value = false;
@@ -1208,14 +1217,14 @@

 				// 初始化
 				if (Message.operate_type == "init") {
-					cartList.value = Message.data
+					cartStore.carts = Message.data
 					uni.hideLoading();
 					isLoading.value = false;
 				}

 				// 清空购物车
 				if (Message.operate_type == 'cleanup') {
-					cartList.value = []
+					cartStore.carts = []
 					setTimeout(() => {
 						Historicalorders()
 					}, 400)
@@ -1225,18 +1234,18 @@
 				// 删除除购物车
 				if (Message.operate_type == 'del' && Message.status == 1) {
 					// 优化：使用可选链操作符避免报错
-					cartList.value = cartList.value.filter(item => item.id !== Message.data?.id);
-					// cartList.value = cartList.value.filter(item => item.id != Message.data.id);
+					cartStore.carts = cartStore.carts.filter(item => item.id !== Message.data?.id);
+					// cartStore.carts = cartStore.carts.filter(item => item.id != Message.data.id);
 				}

 				// 添加或者减少购物后返回
 				if (Message.operate_type == 'add' || Message.operate_type == 'edit') {
 					[Message.data].forEach((objA) => {
-						const index = cartList.value.findIndex((objB) => objB.id == objA.id);
+						const index = cartStore.carts.findIndex((objB) => objB.id == objA.id);
 						if (index !== -1) {
-							cartList.value[index] = objA;
+							cartStore.carts[index] = objA;
 						} else {
-							cartList.value.push(objA);
+							cartStore.carts.push(objA);
 						}
 					});
 				}
@@ -1295,7 +1304,7 @@

 	// 更新购物车数据shopProductList.hots
 	const matchedProducts = computed(() => {
-		if (cartList.value.length > 0) {
+		if (cartStore.carts.length > 0) {
 			let Specialstop = null

 			try {
@@ -1308,7 +1317,7 @@
 				Specialstop = shopProductList.productInfo
 				//TODO handle the exception
 			}
-			return cartList.value.flatMap((cartItem) => {
+			return cartStore.carts.flatMap((cartItem) => {
 				for (const group of Specialstop) {
 					for (const product of group.productList) {
 						if (product.id == cartItem.product_id) {
@@ -1365,6 +1374,12 @@

 	// 结账
 	const orderdetail = async () => {
+		uni.navigateTo({
+			url: '/pages/order/confirm-order?tableCode=' + uni.cache.get('tableCode') + '&shopId=' + uni
+				.cache.get(
+					'shopId')
+		})
+		return
 		try {
 			await Historicalorders()
 		} catch (error) {}
@@ -1374,16 +1389,18 @@

 	// 历史订单
 	const Historicalorders = async (W) => {
-		let res = await APIhistoryOrder({
-			tableCode: uni.cache.get('tableCode'),
-		})
-		orderinfo.value = {
-			id: res.id,
-			detailMap: res.detailMap,
-			placeNum: res.placeNum
-		}
+
 		if (W) {
 			showCart.value = !showCart.value
+		} else {
+			let res = await APIhistoryOrder({
+				tableCode: uni.cache.get('tableCode'),
+			})
+			orderinfo.value = {
+				id: res.id,
+				detailMap: res.detailMap,
+				placeNum: res.placeNum
+			}
 		}
 	}

@@ -1449,7 +1466,7 @@
 				}
 			}, 0);
 		}
-		cart = parseFloat(cartone) + parseFloat(cart)
+		cart = parseFloat(cart)
 		// 向上取整并保留两位小数
 		return parseFloat(cart.toFixed(2));
 	});
@@ -1467,7 +1484,7 @@
 			return sum + num;
 		}, 0);

-		const totalCount = orderInfoCount + matchedProductsCount;
+		const totalCount = matchedProductsCount;
 		return parseFloat(totalCount.toFixed(2));
 	});

@@ -1499,7 +1516,7 @@
 	// 计算处理后的购物车列表 	// 用于筛选后的购物车数组
 	const cartListFilter = computed(() => {
 		// 使用 reduce 方法对 cartList 进行处理
-		const grouped = cartList.value.reduce((acc, item) => {
+		const grouped = cartStore.carts.reduce((acc, item) => {
 			const productId = item.product_id;
 			const num = parseFloat(item.number);

@@ -1554,6 +1571,7 @@

 	// 列表请求
 	const productqueryProduct = async () => {
+		cartStore.goodsIsloading = false;
 		try {
 			shopProductList.hots = await productminiApphotsquery()
 			shopProductList.productInfo = await APIgroupquery()
@@ -1574,12 +1592,15 @@
 					product.cartNumber = 0;
 					product.isSaleTimeshow = await isProductAvailable(product.days, product
 						.startTime, product.endTime)
+					cartStore.setGoodsMap(product.id, product)
 				});
 			});
 			shopProductList.hots.forEach(async (i) => {
 				i.cartNumber = 0
 				i.isSaleTimeshow = await isProductAvailable(i.days, i.startTime, i.endTime)
+				cartStore.setGoodsMap(i.id, i)
 			})
+			cartStore.goodsIsloading = true;
 			scrollTopSize.value = 0
 			topArr.value = []
 			// userStore.actionsAPIuser()
@@ -1623,13 +1644,34 @@
 		const currentPage = pages[pages.length - 1];
 		// 获取页面参数
 		const options = currentPage.options;
+		let res = await APIhistoryOrder({
+			tableCode: uni.cache.get('tableCode'),
+		})
+
 		await productqueryProduct()
+		if (res && res.id && shopInfo.registerType == "after") {
+			toHistory()
+			return
+		}
 		setTimeout(() => {
 			// 启动网络监听
 			initNetworkListener()
 			getElementTop()
 		}, 500)
 	})
+
+
+	//跳转历史订单
+	function toHistory() {
+		uni.navigateTo({
+			url: '/pages/order/confirm-order?tableCode=' + uni.cache.get('tableCode') + '&shopId=' + uni
+				.cache.get(
+					'shopId')
+		})
+		// uni.navigateTo({
+		// 	url: '/pages/order/confirm-order?orderId=' + orderinfo.id + '&shopId=' + uni.cache.get('shopId')+'&tableCode='+uni.cache.get('tableCode')
+		// })
+	}
 </script>

 <style lang="scss" scoped>
@@ -1893,6 +1935,8 @@
 	}

 	.scroll-panel {
+		position: relative;
+
 		.list-box {
 			display: flex;
 			flex-direction: row;
@@ -2538,14 +2582,36 @@
 					height: 64rpx;
 					line-height: 64rpx;
 					text-align: center;
-					background: #E7AE7B;
+					background: #FEFAF7;
 					border-radius: 36rpx 36rpx 36rpx 36rpx;
-					border: 2rpx solid #E8AD7B;
+					border: 2rpx solid $my-main-color;
 					font-weight: bold;
 					font-size: 28rpx;
-					color: #FFFFFF;
+					color: $my-main-color;
 				}
 			}
 		}
 	}
+
+	.history_order {
+		background-color: #fff;
+		padding: 12rpx 16rpx;
+		font-size: 24rpx;
+		color: #333;
+		display: flex;
+		align-items: center;
+		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
+		position: fixed;
+		top: 50%;
+		right: 0;
+		transform: translateY(-50%);
+		border-radius: 100px 0 0 100px;
+		z-index: 20;
+
+		.img {
+			width: 36rpx;
+			margin-right: 8rpx;
+			height: 36rpx;
+		}
+	}
 </style>