修改食堂点餐

src/pages/merchant/components/product-car.vue

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, withDefaults, defineProps, defineEmits } from "vue";
-import { onLoad, onShow } from "@dcloudio/uni-app";
-
-import { hooks, router } from "@@/index"
-import { merchantApi } from "@@/api"
-
-import ProductRow from './product-row.vue'
-import ProductTotal from './product-total.vue'
-
-import { filePath } from "@@/utils/file";
-
-const emit = defineEmits(["update:modelValue", "submit", "doContainer", "add", "remove"])
-
-export type Props = {
-    modelValue: any,
-    carList: any,
-    totPrice: number,
-    totCount: number,
-}
-const props = withDefaults(defineProps<Props>(), {
-    modelValue: false,
-    carList: [],
-    totPrice: 0,
-    totCount: 0,
-});
-
-const state = reactive<any>({
-
-})
-
-onLoad(() => {
-
-});
-onShow(() => {
-
-})
-
-const doClose = () => {
-    emit("update:modelValue")
-}
-
-const doPay = () => {
-    emit("submit")
-}
-
-const doContainer = () => {
-    emit("doContainer")
-}
-
-const getHeight = () => {
-    const { bottom } = uni.getSystemInfoSync().safeAreaInsets!;
-    return `-${bottom + 16}px`
-}
-
-</script>
-
-
-<template>
-    <tm-drawer z-index="100" v-model:show="props.modelValue" showFooter title="购物车" position="bottom" size="60%"
-        @close="doClose">
-        <product-row v-for="(v, i) in props.carList" mode="car" :key="v.id" v-model="v.productCount" :pic="filePath(v.productPic)"
-            :count="v.productCount" :name="v.name" :price="v.productPrice" :marketPrice="v.marketPrice"
-            :salesCount="v.salesCount" :stock="v.stock" @add="() => emit('add', v)" @remove="emit('remove', v)" />
-        <template #footer>
-            <view class="car z-200 p-x-30rpx p-y-30rpx bg-white" :style="{ marginBottom: getHeight() }">
-                <product-total :totPrice="props.totPrice" :totCount="props.totCount" @submit="doPay"
-                    @doContainer="doContainer" />
-            </view>
-        </template>
-    </tm-drawer>
-</template>
-
-<style lang="scss" scoped>
-.car {
-    box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.1);
-}
-</style>

src/pages/merchant/components/product-cart.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import ProductRow from "./product-row.vue"
+import ProductTotal from "./product-total.vue"
+import { filePath } from "@@/utils/file"
+
+const emit = defineEmits(["update:modelValue", "submit", "add", "remove"])
+
+export type Props = {
+	modelValue: boolean
+	cartList: any
+	totPrice: number
+	totCount: number
+}
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: false,
+	cartList: [],
+	totPrice: 0,
+	totCount: 0,
+})
+
+const doClose = () => {
+	emit("update:modelValue", false)
+}
+
+const doPay = () => {
+	emit("submit")
+}
+
+const getHeight = () => {
+	const { bottom } = uni.getSystemInfoSync().safeAreaInsets!
+	return `-${bottom + 16}px`
+}
+
+const add = (v) => emit("add", v)
+const remove = (v) => emit("remove", v)
+</script>
+
+<template>
+	<tm-drawer z-index="100" v-model:show="props.modelValue" showFooter title="购物车" position="bottom" size="60%" @close="doClose">
+		<view v-for="(v, i) in props.cartList" :key="v.id">
+			<product-row
+				v-model="v.productCount"
+				mode="cart"
+				:pic="filePath(v.productPic)"
+				:count="v.productCount"
+				:name="v.productName"
+				:price="v.productPrice"
+				:marketPrice="v.marketPrice"
+				:salesCount="v.salesCount"
+				:stock="v.stock"
+				@add="add(v)"
+				@remove="remove(v)"
+			/>
+		</view>
+
+		<template #footer>
+			<view class="z-200 p-x-30rpx p-y-30rpx bg-white" :style="{ marginBottom: getHeight() }">
+				<product-total :totPrice="props.totPrice" :totCount="props.totCount" @submit="doPay" @doContainer="" />
+			</view>
+		</template>
+	</tm-drawer>
+</template>

src/pages/merchant/components/product-row.vue

@@ -1,28 +1,24 @@
 <script setup lang="ts">
-import { ref, reactive, withDefaults, defineProps, defineEmits } from "vue"
-import { onLoad, onShow } from "@dcloudio/uni-app"
-
 import { hooks, router } from "@@/index"
-import { merchantApi } from "@@/api"
 
 const emit = defineEmits(["update:modelValue", "add", "remove"])
 
 export type Props = {
-	mode: "default" | "car"
-	productId: number | null
+	mode?: "default" | "cart"
 	modelValue: number
+	productId?: number | string | null
 	pic: string
 	name: string
-	price: any
+	price: string | number
 	marketPrice: number
 	salesCount: number
 	stock: number
-	count: number
+	count?: number
 }
 const props = withDefaults(defineProps<Props>(), {
 	mode: "default",
-	productId: null,
 	modelValue: 0,
+	productId: null,
 	pic: "",
 	name: "",
 	price: 0,
@@ -31,57 +27,43 @@ const props = withDefaults(defineProps<Props>(), {
 	stock: 0,
 	count: 0,
 })
-const state = reactive<any>({})
-
-onLoad(() => {})
-onShow(() => {})
 
+// 点击加
 const add = () => {
-	if (props.modelValue >= 99) {
-		emit("update:modelValue", 99)
-		return
-	}
-	// emit("update:modelValue", props.modelValue + 1)
+	// if (props.modelValue + 1 >= props.stock) return uni.showToast({ title: "库存不足", icon: "none" })
+	emit("update:modelValue", props.modelValue + 1)
 	emit("add")
 }
 
+// 点击减
 const remove = () => {
-	if (props.modelValue < 0) {
-		emit("update:modelValue", 0)
-		return
-	}
-	// emit("update:modelValue", props.modelValue - 1)
+	if (props.modelValue - 1 < 0) return
+	emit("update:modelValue", props.modelValue - 1)
 	emit("remove")
 }
 </script>
 
 <template>
 	<view
-		:class="[props.mode == 'car' ? 'car_border' : '']"
 		class="flex-row items-start card p-x-15rpx p-y-25rpx m-b-20rpx"
 		@tap="props.productId && router.jump('/pages/merchant/product-detail', { id: props.productId })"
 	>
 		<image v-if="props.mode == 'default'" class="size-180rpx rounded-12rpx" :src="props.pic" mode="aspectFill" />
-		<image v-if="props.mode == 'car'" class="size-120rpx rounded-12rpx" :src="props.pic" mode="aspectFill" />
+		<image v-if="props.mode == 'cart'" class="size-120rpx rounded-12rpx" :src="props.pic" mode="aspectFill" />
 		<view class="flex-1 m-l-20rpx">
 			<view class="sub-text-28 show-line">{{ props.name }}</view>
 			<view class="m-t-10rpx flex-row items-center">
-				<view class="second-text-32 color-red!"> ¥{{ hooks.useMoney(props.price) }} </view>
-				<view v-if="props.mode == 'default'" class="m-l-20rpx second-text-24 line-through">
-					¥{{ hooks.useMoney(props.marketPrice) }}
-				</view>
+				<view class="w-100rpx second-text-32 color-red!"> ¥{{ hooks.useMoney(props.price) }} </view>
+				<view v-if="props.mode == 'default'" class="m-l-20rpx second-text-24 line-through">¥{{ hooks.useMoney(props.marketPrice) }}</view>
+				<view v-if="props.mode == 'cart'" class="m-l-40rpx second-text-24">x{{ props.count }}</view>
 			</view>
-			<view v-if="props.mode == 'car'" class="m-t-10rpx second-text-28"> x{{ props.count }} </view>
 			<view v-if="props.mode == 'default'" class="flex-row items-center MT 10rpx">
 				<view class="second-text-24">{{ hooks.useFormatNum("库存", "", props.stock) }}</view>
-				<view class="w-1px h-20rpx m-x-5rpx bg-#999" />
+				<view class="w-1px h-20rpx m-x-5rpx bg-#999 mx-2" />
 				<view class="second-text-24">{{ hooks.useFormatNum("销量", "", props.salesCount) }}</view>
 			</view>
 			<view class="flex-row items-center justify-end m-t-20rpx">
-				<view
-					class="flex-row-center size-40rpx rounded-full border-1px border-solid border-color-#0094ff"
-					@tap.stop="remove"
-				>
+				<view class="flex-row-center size-40rpx rounded-full border-1px border-solid border-color-#0094ff" @tap.stop="remove">
 					<view class="iconfont icon-a--" />
 				</view>
 				<view class="sub-text-28 m-x-20rpx">{{ props.modelValue }}</view>
@@ -92,9 +74,3 @@ const remove = () => {
 		</view>
 	</view>
 </template>
-
-<style lang="scss" scoped>
-.car_border {
-	border: 1px solid #f2f2f2;
-}
-</style>

src/pages/merchant/components/product-total.vue

@@ -1,59 +1,37 @@
 <script setup lang="ts">
-import { ref, reactive, withDefaults, defineProps, defineEmits } from "vue";
-import { onLoad, onShow } from "@dcloudio/uni-app";
-
-import { hooks, router } from "@@/index"
-import { merchantApi } from "@@/api"
+import { hooks } from "@@/index"
 
 const emit = defineEmits(["submit", "doContainer"])
 
 export type Props = {
-    totPrice: number,
-    totCount: number,
+	totPrice: number
+	totCount: number
 }
 const props = withDefaults(defineProps<Props>(), {
-    totPrice: 0,
-    totCount: 0,
-});
-
-const state = reactive<any>({
-
-})
-
-onLoad(() => {
-
-});
-onShow(() => {
-
+	totPrice: 0,
+	totCount: 0,
 })
 
 const doPay = () => {
-    emit("submit")
+	emit("submit")
 }
 
 const doContainer = () => {
-    emit("doContainer")
+	emit("doContainer")
 }
-
 </script>
 
-
 <template>
-    <view class="flex-row items-center justify-between" @tap="doContainer">
-        <view class="flex-row-center">
-            <view class="flex-row-center size-80rpx rounded-full bg-#0094ff">
-                <view class="color-white! iconfont icon-biaoqianlanicon_gouwuche-xuanzhong" />
-            </view>
-            <view class="flex-col m-l-30rpx">
-                <view class="second-text-36 color-#f63a36!">¥ {{ hooks.useMoney(props.totPrice) }}</view>
-                <view class="sub-text-28">共{{ props.totCount }}件</view>
-            </view>
-        </view>
-        <view class="bg-#0094ff p-x-30rpx p-y-20rpx text-center rounded-40rpx sub-text-30 color-white!"
-            @tap.stop="doPay">
-            购买
-        </view>
-    </view>
+	<view class="flex-row items-center justify-between" @tap="doContainer">
+		<view class="flex-row-center">
+			<view class="flex-row-center size-80rpx rounded-full bg-#0094ff">
+				<view class="color-white! iconfont icon-biaoqianlanicon_gouwuche-xuanzhong" />
+			</view>
+			<view class="flex-col m-l-30rpx">
+				<view class="second-text-36 color-#f63a36!">¥ {{ hooks.useMoney(props.totPrice) }}</view>
+				<view class="sub-text-28">共{{ props.totCount }}件</view>
+			</view>
+		</view>
+		<view class="bg-#0094ff p-x-30rpx p-y-20rpx text-center rounded-40rpx sub-text-30 color-white!" @tap.stop="doPay">购买</view>
+	</view>
 </template>
-
-<style lang="scss" scoped></style>

src/pages/merchant/detail.vue

@@ -7,21 +7,23 @@ import { merchantApi, foodApi, payApi } from "@@/api"
 import { filePath } from "@@/utils/file"
 
 import ProductRow from "./components/product-row.vue"
-import ProductCar from "./components/product-car.vue"
+import ProductCart from "./components/product-cart.vue"
 import ProductTotal from "./components/product-total.vue"
 
 const state = reactive<any>({
 	detailId: null,
 	canteenDetail: {},
 
+	foodList: [],
+
+	cartList: [],
 	totPrice: 0,
 	totCount: 0,
-	currentClassifyIndex: 0,
-	showCarDialog: false,
 
-	carList: [],
 	classifyList: [],
-	shopList: [],
+	currentClassifyIndex: 0,
+
+	showCartDialog: false,
 })
 
 onLoad((options: any) => {
@@ -31,10 +33,15 @@ onLoad((options: any) => {
 })
 onShow(() => {
 	getDetail()
-	getShopCar()
+	getFoodCart()
 	getClassify()
 })
 
+const getHeight = () => {
+	const rpx = 480
+	return `calc(100vh - ${uni.upx2px(rpx)}px)`
+}
+
 // 获取食堂详情信息
 const getDetail = async () => {
 	uni.showLoading({ title: "加载中...", mask: true })
@@ -43,46 +50,46 @@ const getDetail = async () => {
 	uni.hideLoading()
 }
 
-const getShopCar = async () => {
+// 获取购物车信息
+const getFoodCart = async () => {
 	const { data } = await foodApi.getShopCar({ merchantId: state.detailId, hardType: "CANTEEN" })
-	state.carList = data ?? []
-	if (isEmpty(state.carList)) {
-		state.shopList.forEach((v: any) => {
+	state.cartList = data ?? []
+	if (isEmpty(state.cartList)) {
+		state.foodList.forEach((v: any) => {
 			v.productCount = 0
 		})
 	} else {
-		asyncCarCount(state.shopList)
+		syncCartCount(state.foodList)
 	}
-	state.totPrice = state.carList.map((v) => Number(v.totalPrice)).reduce((pre, next) => pre + next, 0)
-	state.totCount = state.carList.map((v) => v.productCount).reduce((pre, next) => pre + next, 0)
+	state.totPrice = state.cartList.map((v) => Number(v.totalPrice)).reduce((pre, next) => pre + next, 0)
+	state.totCount = state.cartList.map((v) => v.productCount).reduce((pre, next) => pre + next, 0)
 }
 
-const getClassify = async () => {
-	const _pa = { merchantId: state.detailId }
-	const { data } = await foodApi.classify(_pa)
-	state.classifyList = data
-	if (!isEmpty(state.classifyList)) {
-		getPorduct()
-	}
-}
-
-const updateShopCar = async () => {
-	if (isEmpty(state.carList)) return
-	const list = state.carList
-		.filter((v) => v.productCount !== undefined && v.productCount >= 0)
-		.map((v) => {
-			return {
-				productCount: v.productCount,
-				productId: v.productId,
+// 同步购物车购买数量
+const syncCartCount = (foodList: any) => {
+	if (state.cartList && state.cartList.length) {
+		for (const i of foodList) {
+			for (const v of state.cartList) {
+				if (i.id == v.productId) {
+					i.productCount = v.productCount
+				}
 			}
-		})
-	if (isEmpty(list)) return
-	const _pa = { merchantId: state.detailId, list: list, hardType: "CANTEEN" }
-	const { data, code }: any = await foodApi.updateShopCar(_pa)
-	if (code == 0) await getShopCar()
+		}
+	}
+	state.foodList = foodList
 }
 
-const getPorduct = async () => {
+// 获取菜品分类
+const getClassify = async () => {
+	const { data } = await foodApi.classify({ merchantId: state.detailId })
+	state.classifyList = data ?? []
+	if (!isEmpty(state.classifyList)) {
+		getFoodList()
+	}
+}
+
+// 获取食物列表
+const getFoodList = async () => {
 	const target = state.classifyList[state.currentClassifyIndex]
 	if (isEmpty(target)) return
 	const _pa = {
@@ -94,51 +101,31 @@ const getPorduct = async () => {
 		i.productCount = 0
 		i.productId = i.id
 	})
-	asyncCarCount(data)
+	syncCartCount(data)
 }
 
-// 同步购买数量
-const asyncCarCount = (shopList) => {
-	if (state.carList && state.carList.length) {
-		for (const i of shopList) {
-			for (const v of state.carList) {
-				if (i.id == v.productId) {
-					i.productCount = v.productCount
-				}
-			}
-		}
-	}
-	state.shopList = shopList
+// 切换选中的分类
+const doClassify = (i: any) => {
+	state.currentClassifyIndex = i
+	getClassify()
 }
 
-const doAdd = async (item: any) => {
-	chentProductCount(item, "add")
-}
-
-const remove = async (item: any) => {
-	chentProductCount(item, "remove")
-}
-
-const chentProductCount = async (item: any, type: "add" | "remove") => {
+// 设置购物车商品的数量
+const chentProductCartCount = async (item: any) => {
 	try {
 		uni.showLoading({ title: "加载中", mask: true })
-		let count = item.productCount
-		if (type === "add") {
-			count += 1
-			const { code }: any = await foodApi.checkSpuStock({ spuId: item.productId, incrCount: count })
-			if (code != 0) throw new Error()
-		} else if (type === "remove") {
-			count -= 1
-		}
-		const target = state.carList.find((v) => v.productId == item.productId)
-		const targetIndex = state.carList.findIndex((v) => v.productId == item.productId)
-		if (target) {
-			state.carList[targetIndex].productCount = count
+		// 检查商品库存
+		const { code }: any = await foodApi.checkSpuStock({ spuId: item.productId, incrCount: item.productCount })
+		if (code != 0) throw new Error()
+
+		const targetIndex = state.cartList.findIndex((v) => v.productId == item.productId)
+		if (targetIndex !== -1) {
+			state.cartList[targetIndex].productCount = item.productCount
 		} else {
-			state.carList.push({ ...item, productId: item.id, productCount: count })
+			state.cartList.push({ ...item, productId: item.id, productCount: item.productCount })
 		}
 		nextTick(async () => {
-			await updateShopCar()
+			await updateFoodCart()
 		})
 	} catch (e) {
 		console.error(e)
@@ -147,52 +134,57 @@ const chentProductCount = async (item: any, type: "add" | "remove") => {
 	}
 }
 
-const doClassify = (i: any) => {
-	state.currentClassifyIndex = i
-	getClassify()
+// 保存购物车商品
+const updateFoodCart = async () => {
+	if (isEmpty(state.cartList)) return
+	const list = state.cartList
+		.filter((v) => v.productCount !== undefined && v.productCount >= 0)
+		.map((v) => {
+			return {
+				productCount: v.productCount,
+				productId: v.productId,
+			}
+		})
+	if (isEmpty(list)) return
+	const _pa = { merchantId: state.detailId, list: list, hardType: "CANTEEN" }
+	const { data, code }: any = await foodApi.updateShopCar(_pa)
+	if (code == 0) await getFoodCart()
 }
 
-const doVisibleCar = async () => {
-	state.showCarDialog = true
-}
+// 打开购物车
+const doVisibleCart = async () => (state.showCartDialog = true)
 
-const submitPay = async () => {
-	try {
-		if (isEmpty(state.carList)) {
-			uni.showToast({ title: "请至少购买一件商品", icon: "none" })
-			return
-		}
-		uni.showLoading({ title: "支付中...", mask: false })
-		const _createtPa = {
-			carParentId: state.carList[0].parentCarId,
-			hardType: "CANTEEN",
-		}
-		const { data: createData, code: createCode }: any = await payApi.createHardwareOrder(_createtPa)
-		if (createCode != 0) throw new Error()
-		uni.hideLoading()
-		uni.showToast({ title: "支付成功", icon: "none" })
-		router.jump("/pages/tabbar/order")
-	} catch (error) {
-		console.error(error)
-		uni.hideLoading()
-	}
-}
-
-const doPay = async () => {
+// 购买
+const doBuy = async () => {
 	uni.showModal({
 		title: "提示",
 		content: "是否确定购买",
 		confirmColor: "#0094ff",
 		success: async (res) => {
 			if (!res.confirm) return
-			submitPay()
+			submitBuy()
 		},
 	})
 }
 
-const getHeight = () => {
-	const rpx = 480
-	return `calc(100vh - ${uni.upx2px(rpx)}px)`
+// 确认购买
+const submitBuy = async () => {
+	try {
+		if (isEmpty(state.cartList)) return uni.showToast({ title: "请至少购买一件商品", icon: "none" })
+		uni.showLoading({ title: "支付中...", mask: true })
+		const _createtPa = {
+			carParentId: state.cartList[0].parentCarId,
+			hardType: "CANTEEN",
+		}
+		const { data: createData, code: createCode }: any = await payApi.createHardwareOrder(_createtPa)
+		if (createCode != 0) throw new Error()
+		uni.showToast({ title: "支付成功", icon: "none" })
+		router.jump("/pages/tabbar/order")
+	} catch (error) {
+		console.error(error)
+	} finally {
+		uni.hideLoading()
+	}
 }
 
 const doPhone = () => {
@@ -202,6 +194,7 @@ const doPhone = () => {
 	}
 	hooks.useMakePhoneCall(state.canteenDetail.phone)
 }
+
 const doFood = () => {
 	router.jump("/pages/merchant/food", { merchantId: state.detailId })
 }
@@ -307,11 +300,10 @@ const doFood = () => {
 						</view>
 					</view>
 				</scroll-view>
-				<scroll-view v-if="state.shopList.length > 0" scroll-y :style="{ height: getHeight() }" class="flex-1 p-b-20rpx">
-					<view v-for="(pV, pI) in state.shopList" :key="pI">
+				<scroll-view v-if="state.foodList.length > 0" scroll-y :style="{ height: getHeight() }" class="flex-1 p-b-20rpx">
+					<view v-for="(pV, pI) in state.foodList" :key="pI">
 						<view class="m-x-15rpx">
 							<product-row
-								:key="pV.id"
 								v-model="pV.productCount"
 								:productId="pV.id"
 								:pic="filePath(pV.picUrl)"
@@ -320,8 +312,8 @@ const doFood = () => {
 								:marketPrice="pV.marketPrice"
 								:salesCount="pV.salesCount"
 								:stock="pV.stock"
-								@add="doAdd(pV)"
-								@remove="remove(pV)"
+								@add="chentProductCartCount(pV)"
+								@remove="chentProductCartCount(pV)"
 							/>
 						</view>
 					</view>
@@ -332,18 +324,19 @@ const doFood = () => {
 		<!-- end 商品 end -->
 		<template #main-bottom>
 			<view v-if="state.classifyList.length > 0" class="car z-200 p-x-30rpx p-y-30rpx bg-white">
-				<product-total :totPrice="state.totPrice" :totCount="state.totCount" @doContainer="doVisibleCar" @submit="doPay" />
+				<product-total :totPrice="state.totPrice" :totCount="state.totCount" @doContainer="doVisibleCart" @submit="doBuy" />
 			</view>
 		</template>
 	</crud-layout>
-	<product-car
-		v-model="state.showCarDialog"
-		:carList="state.carList"
+
+	<product-cart
+		v-model="state.showCartDialog"
+		:cartList="state.cartList"
 		:totPrice="state.totPrice"
 		:totCount="state.totCount"
-		@add="doAdd"
-		@remove="remove"
-		@submit="doPay"
+		@add="(v) => chentProductCartCount(v)"
+		@remove="(v) => chentProductCartCount(v)"
+		@submit="doBuy"
 	/>
 </template>