From a183514533aa35bc4bc02c8509197cd1c9e45f97 Mon Sep 17 00:00:00 2001
From: YeMingfei666 <1619116647@qq.com>
Date: Tue, 22 Oct 2024 14:24:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=83=A8=E5=88=86=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BF=AE=E6=94=B9=E6=B8=85?=
 =?UTF-8?q?=E7=A9=BA=E8=B4=AD=E7=89=A9=E8=BD=A6=E5=BC=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pagesCreateOrder/index/components/car.vue     | 190 +++++++++++-------
 .../index/components/goods-item.vue           |   6 +-
 2 files changed, 117 insertions(+), 79 deletions(-)

diff --git a/pagesCreateOrder/index/components/car.vue b/pagesCreateOrder/index/components/car.vue
index 89af4f5..9547612 100644
--- a/pagesCreateOrder/index/components/car.vue
+++ b/pagesCreateOrder/index/components/car.vue
@@ -1,74 +1,83 @@
 <template>
-	<view class="mask" @tap="hideGoods" v-if="switchGoods"></view>
-	<view class="car border-top u-flex u-row-between u-col-bottom u-relative">
-		<view class="u-absolute goods bg-fff">
-			<view
-				class="u-p-t-32 color-666 border-bottom bg-fff u-absolute total u-p-r-28 u-p-b-32 u-p-l-28 u-flex u-row-between">
-				<view>已添加{{goodsNumber}}件商品</view>
-				<view class="color-666">
-					<uni-icons color="#666" type="trash"></uni-icons>
-					<text class="u-m-l-10" @tap="clear">清空</text>
-				</view>
-			</view>
-			<scroll-view scroll-y="true" class="tranistion" :style="{height:switchGoods?'50vh':0 }">
-				<!-- 占位 -->
-				<view class="u-p-t-32 color-666 border-bottom u-p-r-28 u-p-b-32 u-p-l-28 u-flex u-row-between"
-					style="opacity: 0;">
+	<view>
+
+		<view class="mask" @tap="hideGoods" v-if="switchGoods"></view>
+		<view class="car border-top u-flex u-row-between u-col-bottom u-relative">
+			<view class="u-absolute goods bg-fff">
+				<view
+					class="u-p-t-32 color-666 border-bottom bg-fff u-absolute total u-p-r-28 u-p-b-32 u-p-l-28 u-flex u-row-between">
 					<view>已添加{{goodsNumber}}件商品</view>
 					<view class="color-666">
 						<uni-icons color="#666" type="trash"></uni-icons>
-						<text class="u-m-l-10">清空</text>
+						<text class="u-m-l-10" @tap="setModalShow('clear',true)">清空</text>
 					</view>
 				</view>
-				<!-- 占位 -->
-				<view class="color-333 item border-top u-flex u-row-center u-row-between" v-for="(item,index) in data"
-					:key="index">
-					<view class="">
-						<view>{{item.name}}</view>
-						<view class="u-m-t-10 u-font-24 color-666">{{item.specSnap||''}}</view>
+				<scroll-view scroll-y="true" class="tranistion" :style="{height:switchGoods?'50vh':0 }">
+					<!-- 占位 -->
+					<view class="u-p-t-32 color-666 border-bottom u-p-r-28 u-p-b-32 u-p-l-28 u-flex u-row-between"
+						style="opacity: 0;">
+						<view>已添加{{goodsNumber}}件商品</view>
+						<view class="color-666">
+							<uni-icons color="#666" type="trash"></uni-icons>
+							<text class="u-m-l-10">清空</text>
+						</view>
 					</view>
-					<view class="u-flex">
-						<view class="font-bold red u-m-r-32">￥{{formatPrice(item.salePrice*item.number) }}</view>
-						<view class="u-flex" @tap="updateNumber(false,index,item)">
-							<image src="/pagesCreateOrder/static/images/icon-reduce-black.svg" class="icon" mode="">
-							</image>
-						</view>
-						<view class="u-m-l-30 u-m-r-30 color-333">
-							{{item.number}}
-						</view>
-						<view class="u-flex" @tap="updateNumber(true,index,item)">
-							<image src="/pagesCreateOrder/static/images/icon-add-black.svg" class="icon" mode="">
-							</image>
+					<!-- 占位 -->
+					<view class="color-333 item border-top u-flex u-row-center u-row-between"
+						v-for="(item,index) in data" :key="index">
+						<view class="">
+							<view class="u-line-1">{{item.name}}</view>
+							<view class="u-m-t-10 u-font-24 color-666 u-line-1">{{item.specSnap||''}}</view>
 						</view>
+						<view class="u-flex">
+							<view class="font-bold red u-m-r-32">￥{{formatPrice(item.salePrice*item.number) }}</view>
+							<view class="u-flex" @tap="updateNumber(false,index,item)">
+								<image src="/pagesCreateOrder/static/images/icon-reduce-black.svg" class="icon" mode="">
+								</image>
+							</view>
+							<view class="u-m-l-30 u-m-r-30 color-333">
+								{{item.number}}
+							</view>
+							<view class="u-flex" @tap="updateNumber(true,index,item)">
+								<image src="/pagesCreateOrder/static/images/icon-add-black.svg" class="icon" mode="">
+								</image>
+							</view>
 
+						</view>
 					</view>
-				</view>
-				<my-empty v-if="!data.length" text="暂未有添加商品"></my-empty>
-			</scroll-view>
+					<my-empty v-if="!data.length" text="暂未有添加商品"></my-empty>
+				</scroll-view>
+
+			</view>
+			<view class="icon-car-box" @tap="toggleGoods">
+				<image src="/pagesCreateOrder/static/images/icon-car.svg" class="icon-car" />
+				<view class="dot">{{goodsNumber}}</view>
+			</view>
+			<view class="price font-bold u-flex">
+				<view>￥</view>
+				<view>{{allPrice}}</view>
+			</view>
+			<my-button shape="circle" height="80" width="220" @tap="toConfimOrder">
+				<text class="u-font-32 font-bold">{{table.type=='add'?'确认加菜':'去下单'}} </text>
+			</my-button>
+
 
 		</view>
-		<view class="icon-car-box" @tap="toggleGoods">
-			<image src="/pagesCreateOrder/static/images/icon-car.svg" class="icon-car" />
-			<view class="dot">{{goodsNumber}}</view>
-		</view>
-		<view class="price font-bold u-flex">
-			<view>￥</view>
-			<view>{{allPrice}}</view>
-		</view>
-		<my-button shape="circle" height="80" width="220" @tap="toConfimOrder">
-			<text class="u-font-32 font-bold">{{table.type=='add'?'确认加菜':'去下单'}} </text>
-		</my-button>
-
+		<up-modal title="提示" content="是否清空全部已添加的商品?" :show="modal.clear" showCancelButton closeOnClickOverlay @confirm="confirmModelConfirm"
+			@cancel="setModalShow('clear',false)" @close="setModalShow('clear',false)" width="300px"></up-modal>
 	</view>
 </template>
 
 <script setup>
 	import go from '@/commons/utils/go.js';
 	import infoBox from '@/commons/utils/infoBox.js';
-	import {formatPrice} from '@/commons/utils/format.js';
-	
+	import {
+		formatPrice
+	} from '@/commons/utils/format.js';
+
 	import {
 		computed,
+		reactive,
 		ref
 	} from 'vue';
 	const props = defineProps({
@@ -78,10 +87,11 @@
 				return []
 			}
 		},
-		isCreateOrderToDetail:{
-			type:Boolean,default:false
+		isCreateOrderToDetail: {
+			type: Boolean,
+			default: false
 		},
-		user:{
+		user: {
 			type: Object,
 			default: () => {
 				return {
@@ -89,20 +99,41 @@
 				}
 			}
 		},
-		table:{
+		table: {
 			type: Object,
 			default: () => {
 				return {
-					tableId:''
+					tableId: ''
 				}
 			}
 		},
-		masterId:{
-			type: [String,Number],
-			default:''
+		masterId: {
+			type: [String, Number],
+			default: ''
 		}
 	})
+	const modal = reactive({
+		key: '',
+		clear:false
+	})
+
+	function confirmModelConfirm() {
+		if (modal.key == 'clear') {
+			clear()
+		}
+	}
+
+	function setModalShow(key = 'show', show = true) {
+		if (key == 'clear'&&show&&props.data.length<=0) {
+			return infoBox.showToast('购物车是空的！')
+		}
+		modal.key = key
+		modal[key] = show
+		console.log(modal);
+	}
+
 	
+
 	const edmits = defineEmits(['clear', 'updateNumber'])
 
 	// mask
@@ -122,20 +153,31 @@
 
 	function toConfimOrder() {
 		console.log(props.user);
-		if(props.data.length<=0){
+		if (props.data.length <= 0) {
 			return infoBox.showToast('还没有选择商品')
 		}
-		const {tableId,name,maxCapacity,status,type}=props.table
-		go.to('PAGES_CONFIRM_ORDER',{
-			masterId:props.masterId,type,
-			tableId,name,maxCapacity,status,isCreateOrderToDetail:props.isCreateOrderToDetail?1:0
+		const {
+			tableId,
+			name,
+			maxCapacity,
+			status,
+			type
+		} = props.table
+		go.to('PAGES_CONFIRM_ORDER', {
+			masterId: props.masterId,
+			type,
+			tableId,
+			name,
+			maxCapacity,
+			status,
+			isCreateOrderToDetail: props.isCreateOrderToDetail ? 1 : 0
 		})
 	}
 
 	const allPrice = computed(() => {
-		return props.data.reduce((prve,cur)=>{
-			return prve+cur.salePrice*cur.number
-		},0).toFixed(2)
+		return props.data.reduce((prve, cur) => {
+			return prve + cur.salePrice * cur.number
+		}, 0).toFixed(2)
 	})
 
 	const goodsNumber = computed(() => {
@@ -158,16 +200,9 @@
 	}
 
 	function clear() {
-		uni.showModal({
-			title: '提示',
-			content: '是否清空全部已添加的商品?',
-			success(res) {
-				if (res.confirm) {
-					edmits('clear')
-					hideGoods()
-				}
-			}
-		})
+		setModalShow('clear',false)
+		edmits('clear')
+		hideGoods()
 	}
 
 	import myButton from '@/components/my-components/my-button.vue'
@@ -249,6 +284,7 @@
 			justify-content: center;
 			align-items: center;
 			z-index: 2;
+
 			.dot {
 				position: absolute;
 				right: 0;
diff --git a/pagesCreateOrder/index/components/goods-item.vue b/pagesCreateOrder/index/components/goods-item.vue
index 186907a..f8a7858 100644
--- a/pagesCreateOrder/index/components/goods-item.vue
+++ b/pagesCreateOrder/index/components/goods-item.vue
@@ -1,9 +1,11 @@
 <template>
 	<view class="u-relative u-flex item">
-		<image lazy-load class="img" :src="data.coverImg" mode="" :style="computedImgStyle()"></image>
+		<image lazy-load class="img" :src="data.coverImg" mode="aspectFill" :style="computedImgStyle()"></image>
 		<view class="info u-flex u-row-between u-col-top u-flex-col" @tap="emitEvent('add')">
 			<view>
-				<view>{{data.name}}</view>
+				<view>
+					<text class="u-line-2">{{data.name}}</text>
+				</view>
 				<view class="u-font-32 font-bold u-m-t-16">
 					￥{{data.price}}
 				</view>