购物车历史订单增加，代码优化

2025-04-02 09:20:26 +08:00
parent 5a655ba09e
commit 5e6646b574
31 changed files with 418 additions and 357 deletions
--- a/pagesCreateOrder/confirm-order/confirm-order.vue
+++ b/pagesCreateOrder/confirm-order/confirm-order.vue
@@ -289,7 +289,7 @@

 <script setup>
 	import { onLoad, onReady, onShow,onHide } from '@dcloudio/uni-app'
-	import { ref, inject, onUnmounted, reactive, computed, watch } from 'vue';
+	import { ref, inject, onUnmounted, nextTick, reactive, computed, watch } from 'vue';
 	
 	import modelDiscount from './components/discount'
 	import giveFood from './components/give-food'
@@ -369,6 +369,7 @@
 			pageData.table.id = opt.tableId
 			pageData.table.tableCode = opt.tableCode
 		}
+		pageData.shopInfo = uni.getStorageSync('shopInfo')
 		getTbShopInfo()
 	
 	})
@@ -399,6 +400,7 @@
 		console.log("onUnmounted")
 		websocketUtil.offMessage()
 	}); 
+	
 	/**
 	 * 获取订单详情
 	 * @param {Object} tableCode
@@ -457,6 +459,7 @@
 			return prve + (cur.is_gift ? 0 : tPrice)
 		}, 0)
 		const tpackFee = $packFee.value > 0 ? $packFee.value*1 : 0
+	
 		return ((goodsTotalPrice - discount_sale_amount.value + tpackFee) || 0).toFixed(2)
 	})
 	
@@ -490,6 +493,9 @@
 	 * init
 	 */
 	async function init() {
+		nextTick(()=>{
+			onMessage()
+		})
 		// 获取商品列表
 		$goods = await getProductList({},'product', false)
 		// console.log("商品列表===",$goods)
@@ -500,84 +506,92 @@
 	/**
 	 * socket消息监听
 	 */
-	websocketUtil.offMessage()
-	websocketUtil.onMessage(res => {  
-		let msg = JSON.parse(res);
-		let cartItem;
-		if( msg.msg_id ){
-			websocketUtil.send(JSON.stringify({
-				type: 'receipt',
-				msg_id: msg.msg_id,
-			}))
-		}
-		if( msg.status == 0 ){
-			infoBox.showToast('添加失败')
-			return false;
-		}
-		
-		switch (msg.operate_type) {
-			case 'onboc_init':
-				goods.list = []
-				msg.data.map(item=>{
-					cartItem = getNowCart(item,$goods,pageData.user)
-					if( cartItem.isGrounding||cartItem.is_temporary == 1 ){
-						cartControls(cartItem,'add')
-					} else {
-						delCart(cartItem.id)
+	function onMessage() {
+		websocketUtil.offMessage()
+		websocketUtil.onMessage(res => {  
+			let msg = JSON.parse(res);
+			console.log(msg)
+			let cartItem;
+			if( msg.msg_id ){
+				websocketUtil.send(JSON.stringify({
+					type: 'receipt',
+					msg_id: msg.msg_id,
+				}))
+			}
+			if( msg.status == 0 ){
+				infoBox.showToast('添加失败')
+				return false;
+			}
+			
+			switch (msg.operate_type) {
+				case 'onboc_init':
+					goods.list = []
+					console.log(msg.data)
+					msg.data.map(item=>{
+						cartItem = getNowCart(item,$goods,pageData.user)
+						console.log(cartItem)
+						if( cartItem.isGrounding||cartItem.is_temporary == 1 ){
+							cartControls(cartItem,'add')
+						} else {
+							delCart(cartItem.id)
+						}
+						
+					})
+					if( pageData.eatTypes.isShow ){
+						if( pageData.eatTypes.active == 'take-out') {
+							cartItem.pack_number = cartItem.number
+						} else {
+							cartItem.pack_number = 0
+						}
+						let par = {
+							type:'onboc',
+							account: uni.getStorageSync("iToken").loginId,
+							shop_id: uni.getStorageSync("shopInfo").id,
+							operate_type:'batch',
+							table_code: pageData.table.tableCode,
+							is_pack: pageData.eatTypes.active == 'take-out' ? 1 : 0,
+						}
+						updateCart(par)
+					}
+					// 是否更新就餐人数
+					if (!$seatFee.totalNumber) {
+						updateChoseCount()
 					}
 					
-				})
-				if( pageData.eatTypes.isShow ){
-					if( pageData.eatTypes.active == 'take-out') {
-						cartItem.pack_number = cartItem.number
-					} else {
-						cartItem.pack_number = 0
-					}
-					let par = {
-						type:'onboc',
-						account: uni.getStorageSync("iToken").loginId,
-						shop_id: uni.getStorageSync("shopInfo").id,
-						operate_type:'batch',
-						table_code: pageData.table.tableCode,
-						is_pack: pageData.eatTypes.active == 'take-out' ? 1 : 0,
-					}
-					updateCart(par)
-				}
-				// 是否更新就餐人数
-				if (!$seatFee.totalNumber) {
-					updateChoseCount()
-				}
-				
-				pageData.eatTypes.isShow = false
-				break;
-			case 'onboc_add':
-			case 'add':
-				cartItem = getNowCart(msg.data,$goods,pageData.user)
-				cartControls(cartItem,'add')
-				break;
-			case 'onboc_edit':
-			case 'edit':
-				getCart()
-				break;
-			case 'onboc_del':
-			case 'del':
-				cartItem = getNowCart(msg.data,$goods,pageData.user)
-				cartControls(cartItem,'del')
-				break;
-			case 'onboc_cleanup':
-			case 'cleanup':
-				goods.list = []
-				$seatFee.totalNumber = 0
-				$seatFee.totalAmount = 0
-				userNumbers.defaultCateIndex = 0
-				init()
-				break;
-			case 'product_update':
-				init()
-				break;	
-		}
+					pageData.eatTypes.isShow = false
+					break;
+				case 'onboc_add':
+				case 'add':
+					cartItem = getNowCart(msg.data,$goods,pageData.user)
+					cartControls(cartItem,'add')
+					break;
+				case 'onboc_edit':
+				case 'edit':
+					getCart()
+					break;
+				case 'onboc_del':
+				case 'del':
+					cartItem = getNowCart(msg.data,$goods,pageData.user)
+					cartControls(cartItem,'del')
+					break;
+				case 'onboc_cleanup':
+				case 'cleanup':
+					goods.list = []
+					$seatFee.totalNumber = 0
+					$seatFee.totalAmount = 0
+					userNumbers.defaultCateIndex = 0
+					init()
+					break;
+				case 'product_update':
+					init()
+					break;	
+			}
+			
+		}); 
 		
-	}); 
+	}
+	
+	
 	
 	/**
 	 * 删除购物车菜品
@@ -840,9 +854,11 @@
 			userNumbers.defaultCateIndex = maxCapacity - 1
 			return
 		}
-	
+		console.log(pageData.shopInfo)
+		console.log(!pageData.shopInfo.isTableFee)
 		if (!pageData.shopInfo.isTableFee && pageData.table && pageData.table.id && goods.list.length > 0) {
 			//不免餐位费
+			console.log("不免餐位费")
 			let seatFee = {
 				totalNumber: userNumbers.defaultCateIndex * 1 + 1,
 				totalAmount: (userNumbers.defaultCateIndex * 1 + 1) * pageData.shopInfo.tableFee,
@@ -897,7 +913,7 @@
 		}
 	
 		let vipPrice = isVip.value ? 1 : 0
-		let placeNum = pageData.shopInfo.registerType == 'after'&&pageData.orderInfo ? pageData.orderInfo.placeNum + 1 : 1;
+		let placeNum = pageData.orderInfo ? pageData.orderInfo.placeNum + 1 : 1;
 		let originAmount = goodsPrice.value*1+youhui.value*1
 		let par = {
 			shopId: pageData.shopInfo.id, 			//店铺Id
@@ -915,7 +931,7 @@
 		if(!pageData.shopInfo.isTableFee&&pageData.table&&pageData.table.id){
 			par.seatNum = userNumbers.defaultCateIndex * 1 + 1
 		}
-		if(pageData.shopInfo.registerType == 'after'&&pageData.orderInfo){
+		if(pageData.orderInfo){
 			par.orderId = pageData.orderInfo.id
 		}
 		
@@ -928,6 +944,7 @@
 			operate_type:'cleanup',
 			table_code: pageData.table.tableCode,
 		}))
+		uni.removeStorageSync("table_code")
 		if (pageData.shopInfo.registerType == 'before' || pageData.eatTypes.active == 'take-out') {
 			//先付
 			return go.to('PAGES_ORDER_PAY', {
--- a/pagesCreateOrder/index/components/car.vue
+++ b/pagesCreateOrder/index/components/car.vue
@@ -9,7 +9,7 @@
 					<view>已添加{{goodsNumber.toFixed(0)}}件商品</view>
 					<view class="color-666">
 						<uni-icons color="#666" type="trash"></uni-icons>
-						<text class="u-m-l-10" @tap="setModalShow('clear',true)">清空</text>
+						<text class="u-m-l-10" @tap="setModalShow('clear',true,'cart','是否清空全部已添加的商品')">清空购物车</text>
 					</view>
 				</view>
 				<scroll-view scroll-y="true" class="tranistion" :style="{height:switchGoods?'50vh':0 }">
@@ -45,9 +45,44 @@

 						</view>
 					</view>
-					<my-empty v-if="!data.length" text="暂未有添加商品"></my-empty>
+					<view style="margin: 50rpx auto 110rpx auto;" v-if="!data.length">
+						<my-empty text="暂未有添加商品"></my-empty>
+					</view>
+					
+					<!-- 历史订单 -->
+					
+					<view v-if="historyOrder.length > 0"
+						class="u-p-t-32 u-p-b-32 u-p-r-28 u-p-l-28 u-m-t-40 bg-fff u-flex u-row-between">
+						<view class="color-333" style="font-weight: bold;">历史订单</view>
+						<view class="color-666">
+							<uni-icons color="#666" type="trash"></uni-icons>
+							<text class="u-m-l-10" @tap="setModalShow('clear',true,'allHistoryOrder','清空历史订单')">清空历史订单</text>
+						</view>
+					</view>
+					<view v-for="(item,index) in historyOrder" :key="index">
+						<view v-if="historyOrder.length > 0"
+							class="u-p-t-32 border-top bg-fff u-p-r-28 u-p-b-32 u-p-l-28 u-flex u-row-between">
+							<view class="color-333" style="font-size: 30rpx;">第{{item.placeNum}}次下单</view>
+							<view class="color-666">
+								<uni-icons color="#666" type="trash"></uni-icons>
+								<text class="u-m-l-10" @tap="setModalShow('clear',true,item.placeNum,'清空第'+item.placeNum+'次下单历史订单')">清空</text>
+							</view>
+						</view>
+						<view class="color-333 item border-top u-flex u-row-center u-row-between"
+							v-for="(v,i) in item.info" :key="i">
+							<view style="display: flex;align-items: center;">
+								<view class="up-line-1" style="margin-right: 10rpx;">{{v.productName}}</view>
+								<uni-tag v-if="v.returnNum>0" :text="'退菜X'+v.returnNum"
+									custom-style="background-color: #EB4F4F; border-color: #EB4F4F; color: #fff;">
+								</uni-tag>
+							</view>
+							<view class="u-flex" style="flex-shrink: 0;">
+								<view class="font-bold red u-m-r-32">￥{{formatPrice(v.price*(v.num - v.returnNum)) }}</view>
+								<view class="u-m-l-30 u-m-r-30 color-333"> X{{v.num.toFixed(2)}} </view>
+							</view>
+						</view>
+					</view>
 				</scroll-view>
-
 			</view>
 			<view class="icon-car-box" @tap="toggleGoods">
 				<image src="/pagesCreateOrder/static/images/icon-car.svg" class="icon-car" />
@@ -63,15 +98,15 @@


 		</view>
-		<up-modal title="提示" content="是否清空全部已添加的商品?" :show="modal.clear" showCancelButton closeOnClickOverlay
+		<up-modal title="提示" :content="modal.title" :show="modal.clear" showCancelButton closeOnClickOverlay
 			@confirm="confirmModelConfirm" @cancel="setModalShow('clear',false)" @close="setModalShow('clear',false)"
 			width="300px"></up-modal>
 	</view>
 </template>

 <script setup>
-	import { computed, reactive, ref } from 'vue';
-	
+	import { computed, reactive, ref, watch } from 'vue';
+	import myButton from '@/components/my-components/my-button.vue'
 	import go from '@/commons/utils/go.js';
 	import infoBox from '@/commons/utils/infoBox.js';
 	import { formatPrice } from '@/commons/utils/format.js';
@@ -83,10 +118,24 @@
 				return []
 			}
 		},
+		historyOrder: {
+			type: Array,
+			default: () => {
+				return []
+			}
+		},
 		isCreateOrderToDetail: {
 			type: Boolean,
 			default: false
 		},
+		orderInfo: {
+			type: Object,
+			default: () => {
+				return {
+					id: ''
+				}
+			}
+		},
 		table: {
 			type: Object,
 			default: () => {
@@ -96,8 +145,43 @@
 			}
 		}
 	})
+	let allHistoryOrder = ref([]);
+	const allPrice = computed(() => {
+		let cartPrice = props.data.reduce((prve, cur) => {
+			let price = Math.floor((cur.lowPrice * cur.number)*100)/100
+			return prve + price
+		}, 0)
+		let historyOrderPrice = allHistoryOrder.value.reduce((prve, cur) => {
+			let price = Math.floor((cur.price * (cur.num-cur.returnNum))*100)/100
+			return prve + price
+		}, 0)
+		
+		return (cartPrice + historyOrderPrice).toFixed(2)
+	})
+	
+	const goodsNumber = computed(() => {
+		let result = 0
+		let cart = props.data.reduce((prve, cur) => {
+			return prve + cur.number
+		}, 0)
+		
+		let historyOrderNum = allHistoryOrder.value.reduce((prve, cur) => {
+			return prve + cur.num
+		}, 0)
+		result = cart + historyOrderNum
+		result = result > 0 ? result.toFixed(2) : 0
+		return result >= 99 ? 99 : parseFloat(result)
+	})
+	watch(() => props.historyOrder, (newval) => {
+		allHistoryOrder.value = [];
+		newval.forEach(item=>{
+			allHistoryOrder.value = [...allHistoryOrder.value,...item.info]
+		})
+	})
 	const modal = reactive({
 		key: '',
+		title: '',
+		type: '',
 		clear: false
 	})

@@ -107,10 +191,12 @@
 		}
 	}

-	function setModalShow(key = 'show', show = true) {
+	function setModalShow(key = 'show',show = true, type = '' , title = '') {
 		// if (key == 'clear' && show && props.data.length <= 0) {
 		// 	return infoBox.showToast('购物车是空的！')
 		// }
+		if( title ){ modal.title = title }
+		if( type ){ modal.type = type }
 		modal.key = key
 		modal[key] = show
 		console.log(modal);
@@ -134,12 +220,19 @@
 	}

 	function toConfimOrder() {
-		if (props.data.length <= 0) {
+		if ( props.data.length <= 0 && allHistoryOrder.value.length <= 0 ) {
 			return infoBox.showToast('还没有选择商品')
 		}
 		const { name,  status, type } = props.table
-		console.log(props.table)
-		if (props.table.id == ''&&props.table.tableCode == '') {
+		if ( props.data.length <= 0 && allHistoryOrder.value.length > 0 ) {
+			go.to('PAGES_ORDER_PAY', {
+				orderId: props.orderInfo.id,
+			})
+			return 
+		}
+		
+		
+		if (props.table.id == '' && props.table.tableCode == '') {
 			go.to('PAGES_CONFIRM_ORDER', {
 				isCreateOrderToDetail: props.isCreateOrderToDetail ? 1 : 0
 			})
@@ -155,21 +248,7 @@
 		})
 	}

-	const allPrice = computed(() => {
-		return props.data.reduce((prve, cur) => {
-			let price = Math.floor((cur.lowPrice * cur.number)*100)/100
-			return prve + price
-		}, 0).toFixed(2)
-	})

-	const goodsNumber = computed(() => {
-		let result = 0
-		result = props.data.reduce((prve, cur) => {
-			return prve + cur.number
-		}, 0)
-		result = result > 0 ? result.toFixed(2) : 0
-		return result >= 99 ? 99 : parseFloat(result)
-	})

 	function updateNumber(isAdd, index, goods) {
 		const step = isAdd ? 1 : -1
@@ -183,12 +262,13 @@
 	}

 	function clear() {
+		if ( modal.type == 'cart') {
+			hideGoods()
+		}
 		setModalShow('clear', false)
-		edmits('clear')
-		hideGoods()
+		edmits('clear',modal.type)
 	}

-	import myButton from '@/components/my-components/my-button.vue'
 </script>

 <style lang="scss" scoped>
--- a/pagesCreateOrder/index/components/taocanModel.vue
+++ b/pagesCreateOrder/index/components/taocanModel.vue
@@ -36,7 +36,7 @@
 </template>

 <script setup>
-	import { computed, getCurrentInstance, reactive, ref, watch } from 'vue';
+	import { computed, reactive, ref, watch } from 'vue';
 	import infobox from '@/commons/utils/infoBox.js'
 	import myModel from '@/components/my-components/my-model.vue'
 	import myButton from '@/components/my-components/my-button.vue'
@@ -48,6 +48,7 @@
 		},
 	})
 	const model = ref(null)
+	const popup = ref()
 	let datas = reactive({
 		item: "",
 		title: "",
@@ -75,7 +76,6 @@
 	})
 	
 	const emits = defineEmits(['confirm', 'updateSku'])
-	const instance = getCurrentInstance();
 	
 	function confirm() {
 		// 将数据保存进对应的值
@@ -104,7 +104,7 @@
 			emits('confirm', arr, datas.item)
 			close()
 		} else {
-			instance.ctx.$refs.popup.open()
+			popup.value.open()
 		}
 	}
 	
--- a/pagesCreateOrder/index/index.vue
+++ b/pagesCreateOrder/index/index.vue
@@ -97,7 +97,7 @@

 		<view class="bottom w-full">
 			<my-car :isCreateOrderToDetail="isCreateOrderToDetail" @updateNumber="carsNumberChange"
-				 :table="data.table" :data="cars" @clear="cleaCart"></my-car>
+				 :table="data.table" :data="cars" :orderInfo="data.orderInfo" :historyOrder="data.historyOrder" @clear="cleaCart"></my-car>
 		</view>
 		<!-- 套餐选择规格 -->
 		<taocanModel ref="taocanModelRef" @confirm="taocanConfirm" :goodsData="selGoods"></taocanModel>
@@ -132,7 +132,7 @@
 	import { getProductList } from '@/http/api/product.js'
 	import { categoryPage } from '@/http/api/cateGory.js'
 	import { getShopInfo } from '@/http/api/shop.js'
-	
+	import { getHistoryOrder, cancelOrder, rmPlaceOrder } from '@/http/api/order.js'

 	const modal = reactive({
 		key: '',
@@ -178,6 +178,8 @@
 		orderId: null,
 		isGoodsAdd: true,
 		goodsData: null,
+		orderInfo: null,
+		historyOrder: [],
 	})
 	const guigeModelData = reactive({
 		title: '',
@@ -192,12 +194,12 @@
 	let option = {
 		type: ''
 	}
-	
+	const taocanModelRef = ref()
 	const websocketUtil = inject('websocketUtil'); // 注入 WebSocket 工具类实例
 	onLoad((opt) => {
 		option = opt
 		Object.assign(data.table, opt)
-	
+		console.log(opt)
 		uni.setNavigationBarTitle({
 			title: (opt && opt.type == 'add') ? '顾客加菜' : '代客下单'
 		})
@@ -296,6 +298,21 @@
 		initCart()
 	}
 	
+	/**
+	 * 获取订单详情
+	 */
+	async function getHistoryOrderDetail(){
+		data.historyOrder = [];
+		let res = await getHistoryOrder({tableCode:data.table.tableCode});
+		data.orderInfo = res;
+		if( res ){
+			data.historyOrder = Object.entries(data.orderInfo.detailMap).map(([key, value]) => ({
+				info: value,
+				placeNum: key
+			}))
+		}
+	}
+	
 	/**
 	 * 监听socket是否连接正常
 	 */
@@ -361,6 +378,7 @@
 							delCart(cartItem.id)
 						}
 					})
+					getHistoryOrderDetail()
 					uni.hideLoading()
 					break;
 				case 'onboc_add':
@@ -388,6 +406,7 @@
 							data.tabbar[i].foods[k].chooseNumber = 0
 						}
 					}
+					getHistoryOrderDetail()
 					break;
 				case 'init':
 				case 'rottable':
@@ -402,6 +421,9 @@
 					break;
 				case 'product_update':
 					init()
+					break;
+				case 'clearOrder':
+					getHistoryOrderDetail()
 					break;	
 			}
 			
@@ -458,14 +480,35 @@
 	/**
 	 * 清除购物车
 	 */
-	function cleaCart () {
-		let params = {
-			...data.socketData,
-			operate_type:'cleanup',
-			table_code: data.table.tableCode,
+	async function cleaCart (e) {
+		if( e == 'cart' ){
+			let params = {
+				...data.socketData,
+				operate_type:'cleanup',
+				table_code: data.table.tableCode,
+			}
+			console.log('购物车清空菜品参数===',params)
+			websocketUtil.send(JSON.stringify(params))
+		} else if ( e == 'allHistoryOrder' ) {
+			await cancelOrder({orderId: data.orderInfo.id, shopId: uni.getStorageSync("shopInfo").id })
+			let params = {
+				...data.socketData,
+				operate_type:'clearOrder',
+				table_code: data.table.tableCode,
+			}
+			websocketUtil.send(JSON.stringify(params))
+			initCart()
+		} else {
+			await rmPlaceOrder({orderId: data.orderInfo.id, placeNum: e, shopId: uni.getStorageSync("shopInfo").id })
+			let params = {
+				...data.socketData,
+				operate_type:'clearOrder',
+				table_code: data.table.tableCode,
+			}
+			websocketUtil.send(JSON.stringify(params))
+			initCart()
 		}
-		console.log('购物车清空菜品参数===',params)
-		websocketUtil.send(JSON.stringify(params))
+	
 	}
 	
 	
@@ -755,7 +798,7 @@
 		selGoods.value = $goods
 		if ($goods.groupType == 1) {
 			data.goodsData = $goods
-			instance.ctx.$refs.taocanModelRef.open()
+			taocanModelRef.value.open()
 		} else {
 			guigeModelData.title = $goods.name
 			const skuMap = returnSelGoodsSkuMap($goods.skuList)