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

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>