在线商城

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

@@ -1,24 +1,33 @@
 <template>
-	<tm-drawer z-index="100" v-model:show="props.modelValue" showFooter title="购物车" position="bottom" size="60%" @close="doClose">
+	<tm-drawer
+		z-index="100"
+		v-model:show="props.modelValue"
+		showFooter
+		title="购物车"
+		position="bottom"
+		size="60%"
+		bgColor="#ECF4F9"
+		@close="doClose"
+	>
 		<product-row
-			mode="car"
-			v-for="v in carList"
+			mode="cart"
+			v-for="v in cartList"
 			:key="v.id"
-			:productId="v.productId"
-			:spuId="v.spuId"
-			:merchantId="v.merchantId"
-			:picUrl="filePath(v.productPic)"
-			:productName="v.productName"
 			:productCount="v.productCount"
+			:productId="v.productId"
+			:productName="v.productName"
+			:picUrl="filePath(v.productPic)"
 			:productPrice="v.productPrice"
-			:spec="v.spec"
+			:spuId="v.spuId"
+			:totalPrice="v.totalPrice"
 			:unit="v.unit"
+			:spec="v.spec"
 			@add="(v) => emit('add', v)"
 			@remove="(v) => emit('remove', v)"
 		/>
 
 		<template #footer>
-			<view class="car z-200 p-x-30rpx p-y-30rpx bg-white" :style="{ marginBottom: getHeight() }">
+			<view class="z-200 p-x-30rpx p-y-30rpx bg-white" :style="{ marginBottom: getHeight() }">
 				<product-total :totPrice="props.totPrice" :totCount="props.totCount" @doPay="doPay" />
 			</view>
 		</template>
@@ -30,28 +39,26 @@ import { filePath } from "@/sheep/utils/file"
 import ProductRow from "./product-row.vue"
 import ProductTotal from "./product-total.vue"
 
-const emit = defineEmits(["update:modelValue", "submit", "add", "remove"])
+const emit = defineEmits(["update:modelValue", "add", "remove", "submit"])
 
-export type Props = {
-	modelValue: any
-	carList: any
-	totPrice: number
-	totCount: number
-}
-const props = withDefaults(defineProps<Props>(), {
-	modelValue: false,
-	carList: [],
-	totPrice: 0,
-	totCount: 0,
-})
+const props = withDefaults(
+	defineProps<{
+		modelValue: any
+		cartList: any
+		totPrice: number
+		totCount: number
+	}>(),
+	{
+		modelValue: false,
+		cartList: [],
+		totPrice: 0,
+		totCount: 0,
+	},
+)
 
-const doClose = () => {
-	emit("update:modelValue", false)
-}
+const doClose = () => emit("update:modelValue", false)
 
-const doPay = () => {
-	emit("submit")
-}
+const doPay = () => emit("submit")
 
 const getHeight = () => {
 	const { bottom } = uni.getSystemInfoSync().safeAreaInsets!

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

@@ -1,41 +1,45 @@
 <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 && props.mode === 'default' && router.jump('/pages/shop/product-detail', { id: props.productId })"
+		@tap="props.productId && props.mode == 'default' && router.jump('/pages/shop/product-detail', { id: props.productId })"
 	>
-		<image class="size-140rpx rounded-12rpx" :src="props.picUrl" mode="aspectFill" />
+		<image class="size-160rpx rounded-12rpx" :src="props.picUrl" mode="aspectFill" />
 		<view class="flex-1 m-l-20rpx">
 			<view class="sub-text-28 show-line">{{ props.productName }}</view>
-			<view class="sub-text-24 show-line">规格：{{ "" + props.spec + props.unit }}</view>
-			<view class="m-t-10rpx flex-row items-center">
-				<!-- <view class="second-text-32 color-red!"> ¥{{ hooks.useMoney(props.price) }} </view> -->
-				<!-- <view class="m-l-20rpx second-text-24 line-through"> ¥{{ hooks.useMoney(props.marketPrice) }} </view> -->
-			</view>
-			<view v-if="props.mode == 'car'" class="flex-row justify-between items-center">
-				<view class="m-t-10rpx second-text-32 c-red!"> ￥{{ (Number(productPrice) / 100).toFixed(2) }} </view>
-				<view class="m-t-10rpx second-text-28">x{{ productCount }}</view>
+			<view v-if="mode === 'default'" class="flex-row items-center">
+				<view class="second-text-32 c-red!"> ¥{{ hooks.useMoney(props.promotionPrice) }} </view>
+				<view class="m-l-20rpx second-text-26 line-through"> ¥{{ hooks.useMoney(props.retailPrice) }} </view>
 			</view>
+			<view class="second-text-26 show-line">单位：{{ props.unit }}</view>
 			<view v-if="mode === 'default'" class="flex-row items-center">
 				<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-1" />
 				<view class="second-text-24">{{ hooks.useFormatNum("销量", "", props.salesCount) }}</view>
 			</view>
+
+			<view v-if="mode == 'cart'" class="flex-row justify-between items-center">
+				<view class="second-text-30"> ¥{{ hooks.useMoney(productPrice) }} </view>
+				<view class="second-text-30">x {{ productCount }}</view>
+			</view>
+
 			<view
 				v-if="mode === 'default'"
 				class="second-text-24 w-200rpx py-1 border-1px border-solid border-#0094ff bg-#0094ff c-white! border-rd-8 text-center mt-3 float-right"
-				@tap.stop="handleClickAddToCar"
+				@tap.stop="handleClickAddToCart"
 			>
 				加入购物车
 			</view>
 
-			<view v-if="mode === 'car'" 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="iconfont icon-a--" />
-				</view>
-				<view class="sub-text-28 m-x-20rpx">{{ productCount }}</view>
-				<view class="flex-row-center size-40rpx rounded-full bg-#0094ff" @tap.stop="add">
-					<view class="font-size-40rpx color-white iconfont icon-a-" />
+			<view v-if="mode == 'cart'" class="flex-row justify-between items-center">
+				<view class="second-text-32 c-red!"> ¥{{ hooks.useMoney(totalPrice) }} </view>
+				<view class="flex-row justify-between items-center">
+					<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">{{ productCount }}</view>
+					<view class="flex-row-center size-40rpx rounded-full bg-#0094ff" @tap.stop="add">
+						<view class="font-size-40rpx color-white iconfont icon-a-" />
+					</view>
 				</view>
 			</view>
 		</view>
@@ -48,46 +52,50 @@ import { hooks, router } from "@@/index"
 const emit = defineEmits(["onClickAddToCart", "add", "remove"])
 
 export type Props = {
-	mode?: "default" | "car"
+	mode?: "default" | "cart"
 	productId: string
-	spuId?: string
-	merchantId: string
+	merchantId?: string
 	picUrl: string
 	productName: string
-	productCount?: number
-	productPrice?: number
 	salesCount?: number
 	stock?: number
-	spec?: string
 	unit?: string
-	onClickAddToCart?: () => void
+	spec?: string
+	retailPrice?: number
+	promotionPrice?: number
+
+	productCount?: number
+	productPrice?: number
+	spuId?: string
+	totalPrice?: string | number
 }
 const props = withDefaults(defineProps<Props>(), {
 	mode: "default",
 	productId: "",
-	spuId: "",
 	merchantId: "",
 	picUrl: "",
 	productName: "",
-	productCount: 0,
-	productPrice: 0,
 	salesCount: 0,
 	stock: 0,
-	spec: "",
 	unit: "",
+	spec: "",
+	retailPrice: 0,
+	promotionPrice: 0,
+
+	productCount: 0,
+	productPrice: 0,
+	spuId: "",
+	totalPrice: 0,
 })
 
-const handleClickAddToCar = () => {
-	if (props.productId) {
-		emit("onClickAddToCart", { ...props })
-	}
+const handleClickAddToCart = () => {
+	if (props.productId) emit("onClickAddToCart", { ...props })
 }
 
 const add = () => {
 	if (props.productCount + 1 >= 99) {
 		return
 	}
-	// emit("add", { productId: props.productId, productCount: props.productCount + 1 })
 	emit("add", { productId: props.productId, productCount: props.productCount, spuId: props.spuId })
 }
 
@@ -95,13 +103,6 @@ const remove = () => {
 	if (props.productCount - 1 < 0) {
 		return
 	}
-	// emit("remove", { productId: props.productId, productCount: props.productCount - 1 })
 	emit("remove", { productId: props.productId, productCount: props.productCount, spuId: props.spuId })
 }
 </script>
-
-<style lang="scss" scoped>
-.car_border {
-	border: 1px solid #f2f2f2;
-}
-</style>

src/pages/shop/components/product-sku.vue

@@ -5,70 +5,61 @@
 		showFooter
 		title="加入购物车"
 		position="bottom"
-		size="60%"
+		size="70%"
+		bgColor="#ECF4F9"
+		:duration="100"
 		@close="doClose"
 	>
-		<view class="px-20rpx">
-			<scroll-view scroll-y="true" class="max-h-7xl" @touchmove.stop>
-				<!-- 商品信息 -->
-				<view class="m-3 flex-row">
-					<image class="w-120rpx h-120rpx" :src="filePath(state.goodsDetail.picUrl)" mode="aspectFill" />
-					<view class="w-100% ml-3 flex flex-col justify-between">
-						<view class="sub-text-30 font-600! ws-nowrap text-ellipsis overflow-hidden">
-							{{ state.goodsDetail.productName }}
-						</view>
-						<view class="flex justify-between items-center">
-							<view class="flex-col justify-between items-left">
-								<view class="sub-text-26 line-through">售价￥{{ retailPrice }}</view>
-								<view class="sub-text-32 c-red!">促销价￥{{ promotionPrice }}</view>
-							</view>
-							<view class="flex-col justify-between items-left">
-								<view class="sub-text-28">库存{{ state.goodsDetail.stock }}</view>
-								<view class="sub-text-28">已售{{ state.goodsDetail.salesCount }}</view>
-							</view>
+		<scroll-view scroll-y="true" @touchmove.stop>
+			<!-- 商品信息 -->
+			<view class="flex-col card p-y-20rpx p-x-30rpx mb-20rpx">
+				<view class="prefix_title mb-15rpx">商品信息</view>
+				<view class="flex-row items-center">
+					<image class="w-120rpx h-120rpx bg-#0094ff" :src="filePath(state.goodsDetail.picUrl)" mode="aspectFill" />
+					<view class="ml-3 flex flex-col justify-between">
+						<view class="text-30 ws-nowrap text-ellipsis overflow-hidden">{{ state.goodsDetail.productName }}</view>
+						<view class="flex items-center">
+							<view class="second-text-30 c-red!">促销 ¥{{ state.selectedSku.promotionPrice }}</view>
+							<view class="m-l-20rpx second-text-28 line-through">原价 ¥{{ state.selectedSku.retailPrice }}</view>
 						</view>
+						<view class="second-text-26">内装数量：{{ state.selectedSku.packageNum }}</view>
 					</view>
 				</view>
+			</view>
 
-				<!-- 规格 -->
-				<!-- <view v-for="property in skuData" :key="property.id"> -->
-				<view class="sub-text-32 font-600! my-2">规格</view>
+			<!-- 包装单位 -->
+			<view class="flex-col card p-y-20rpx p-x-30rpx mb-20rpx">
+				<view class="prefix_title mb-15rpx">包装单位</view>
 				<view class="flex flex-wrap">
-					<button
-						class="text-center border-rd-4 c-black ml-0 mr-2 mb-2 border-1 border-solid border-blueGray sub-text-34"
-						v-for="value in state.goodsDetail?.skuList"
-						:key="value.id"
-						:style="{ 'background-color': state.selectedSku.id === value.id ? '#0094ff' : '#F4F4F4' }"
-						@click="onSelectSku(value)"
+					<view
+						class="text-center rounded-2 mr-4 mb-2 py-2 px-3 text-28 duration-200"
+						v-for="v in state.goodsDetail?.skuList"
+						:key="v.id"
+						:style="{ 'background-color': state.selectedSku.id === v.id ? '#0094ff66' : '#F0F0F0' }"
+						@click="onSelectSku(v)"
 					>
-						{{ value.spec + value.unit }}
-					</button>
-				</view>
-				<!-- </view> -->
-
-				<!-- 数量 -->
-				<view class="sub-text-32 font-600! my-2">购买数量</view>
-				<view class="flex-row items-center justify-end m-t-20rpx">
-					<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="handleNumRemove"
-						>
-							<view class="iconfont icon-a--" />
-						</view>
-						<view class="sub-text-28 m-x-20rpx">{{ String(state.goodsCount).padStart(2, "0") }}</view>
-						<view class="flex-row-center size-40rpx rounded-full bg-#0094ff" @tap.stop="handleNumAdd">
-							<view class="font-size-40rpx color-white iconfont icon-a-" />
-						</view>
+						{{ v.spec + " " + v.unit }}
 					</view>
 				</view>
-			</scroll-view>
-		</view>
+			</view>
+
+			<!-- 购买数量 -->
+			<view class="flex-col card p-y-20rpx p-x-30rpx mb-20rpx">
+				<view class="prefix_title mb-15rpx">购买数量</view>
+				<view class="flex-row items-center justify-end">
+					<view class="flex-row-center size-40rpx rounded-full border-1px border-solid border-color-#0094ff" @tap.stop="handleNumRemove">
+						<view class="iconfont icon-a--" />
+					</view>
+					<view class="sub-text-28 m-x-20rpx">{{ String(state.goodsCount).padStart(2, "0") }}</view>
+					<view class="flex-row-center size-40rpx rounded-full bg-#0094ff" @tap.stop="handleNumAdd">
+						<view class="font-size-40rpx color-white iconfont icon-a-" />
+					</view>
+				</view>
+			</view>
+		</scroll-view>
 
 		<template #footer>
-			<button class="mx-12 border-rd-8 bg-#0094ff sub-text-30 py-2 c-white!" @tap="handleClickAddToCar">
-				加入购物车
-			</button>
+			<button class="mx-12 border-rd-8 bg-#0094ff sub-text-30 py-2 c-white!" @tap="handleSkuAddToCar">加入购物车</button>
 		</template>
 	</tm-drawer>
 </template>
@@ -77,38 +68,37 @@
 import { shopApi } from "@/sheep/api"
 import { filePath } from "@/sheep/utils/file"
 import { computed, reactive, watch } from "vue"
+import { hooks } from "@@/index"
 
-const emit = defineEmits(["update:modelValue", "onAddToCar"])
+const emit = defineEmits(["update:modelValue", "onSkuAddToCart"])
+
+const props = withDefaults(
+	defineProps<{
+		modelValue: boolean
+		productData: any
+	}>(),
+	{
+		modelValue: false,
+		productData: {},
+	},
+)
 
-export type Props = {
-	modelValue: boolean
-	productData: any
-	onAddToCar?: () => void
-}
-const props = withDefaults(defineProps<Props>(), {
-	modelValue: false,
-	productData: {},
-})
 const state = reactive<any>({
 	goodsCount: 1,
-	selectedSku: {},
+	selectedSku: {
+		retailPrice: 0,
+		promotionPrice: 0,
+		packageNum: 0,
+	},
 	goodsDetail: {},
 })
-// 售价
-const retailPrice = computed(() =>
-	state.selectedSku.retailPrice ? Number(state.selectedSku.retailPrice) * Number(state.goodsCount) : 0,
-)
-// 优惠价
-const promotionPrice = computed(() =>
-	state.selectedSku.promotionPrice ? Number(state.selectedSku.promotionPrice) * Number(state.goodsCount) : 0,
-)
 
 watch(
 	() => props.modelValue,
 	async (newValue) => {
 		if (newValue) {
 			// 获取商品详情
-			const { data } = await shopApi.getSupermarketSpuDetail({ id: props.productData.productId })
+			const { data } = await shopApi.getSupermarketSpuDetail({ id: props.productData.id })
 			state.goodsDetail = data
 			if (data.skuList.length > 0) {
 				state.selectedSku = state.goodsDetail.skuList[0]
@@ -117,122 +107,37 @@ watch(
 	},
 )
 
-// SKU 列表
-// const skuList = computed(() => {
-//   let skuPrices = props.goodsInfo.skus;
-//   for (let price of skuPrices) {
-//     price.value_id_array = price.properties.map((item) => item.valueId);
-//   }
-//   return skuPrices;
-// });
-
-// 当前所选属性下，获取所有有库存的 SKU 们
-// function getCanUseSkuList() {
-//   let newSkus = [];
-//   for (let sku of skuList.value) {
-//     if (sku.stock <= 0) {
-//       continue;
-//     }
-//     let isOk = true;
-//     state.currentPropertyArray.forEach((propertyId) => {
-//       // propertyId 不为空，并且，这个 条 sku 没有被选中，则排除
-//       if (propertyId.toString() !== "" && sku.value_id_array.indexOf(propertyId) < 0) {
-//         isOk = false;
-//       }
-//     });
-//     if (isOk) {
-//       newSkus.push(sku);
-//     }
-//   }
-//   return newSkus;
-// }
-
-// 选择规格
-function onSelectSku(skuItem: any) {
-	// const index = state.currentPropertyArray.findIndex((item: any) => item.id === skuItem.id);
-	// if (index === -1) {
+// 选择规格/取消选择规格
+const onSelectSku = (skuItem: any) => {
 	if (state.selectedSku.id === skuItem.id) {
 		state.selectedSku = {}
-	} else {
-		state.selectedSku = skuItem
+		return
 	}
-	// } else {
-	// state.currentPropertyArray.splice(index, 1);
-	// }
-
-	// 清空已选择
-	// let isChecked = true; // 选中 or 取消选中
-	// if (state.currentPropertyArray[propertyId] !== undefined && state.currentPropertyArray[propertyId] === valueId) {
-	// 点击已被选中的，删除并填充 ''
-	// isChecked = false;
-	// state.currentPropertyArray.splice(propertyId, 1, "");
-	// } else {
-	// 选中
-	// state.currentPropertyArray[propertyId] = valueId;
-	// }
-	// 选中的 property 大类
-	// let choosePropertyId: any = [];
-	// state.currentPropertyArray.forEach((currentPropertyId: string) => {
-	//   if (currentPropertyId !== "") {
-	//     // currentPropertyId 为空是反选 填充的
-	//     choosePropertyId.push(currentPropertyId);
-	//   }
-	// });
-	// 当前所选 property 下，所有可以选择的 SKU 们
-	// let newSkuList = getCanUseSkuList();
-	// 判断所有 property 大类是否选择完成
-	// if (choosePropertyId.length === skuData.length && newSkuList.length) {
-	//   newSkuList[0].name = state.selectedSku.goods_num || 1;
-	//   state.selectedSku = newSkuList[0];
-	// } else {
-	//   state.selectedSku = {};
-	// }
-	// if (choosePropertyId.length === skuData.value.length) {
-	//   state.selectedSku = state.currentPropertyArray;
-	// }
-	// 改变 property 禁用状态
-	// changeDisabled(isChecked, propertyId, valueId);
+	state.selectedSku = skuItem
 }
 
 // 加数量
 const handleNumAdd = () => {
-	if (state.goodsCount >= state.goodsDetail.stock) {
-		return
-	}
+	if (state.goodsCount >= state.goodsDetail.stock) return uni.showToast({ title: "库存不足", icon: "none" })
 	state.goodsCount += 1
 }
 // 减数量
 const handleNumRemove = () => {
-	if (state.goodsCount <= 1) {
-		return
-	}
+	if (state.goodsCount <= 1) return
 	state.goodsCount -= 1
 }
 
-// 点击加入购物车
-const handleClickAddToCar = async () => {
-	// 检查规格选择
-	if (!state.selectedSku.id) {
-		uni.showToast({
-			title: "请选择规格",
-			icon: "none",
-			duration: 1000,
-		})
-		return
-	}
+// 点击sku加入到购物车
+const handleSkuAddToCar = async () => {
+	// 检查包装单位选择
+	if (!state.selectedSku.id) return uni.showToast({ title: "请选择包装单位", icon: "none" })
+
 	// 检查库存
 	try {
 		uni.showLoading({ title: "加载中", mask: true })
-		const { code }: any = await shopApi.checkSpuStock({
-			spuId: state.goodsDetail.id,
-			incrCount: state.goodsCount,
-		})
+		const { code }: any = await shopApi.checkSpuStock({ spuId: state.goodsDetail.id, incrCount: state.goodsCount })
 		if (code != 0) {
-			return uni.showToast({
-				title: "库存不足",
-				icon: "none",
-				duration: 1000,
-			})
+			return uni.showToast({ title: "库存不足", icon: "none" })
 		}
 	} catch (e) {
 		console.error(e)
@@ -240,22 +145,20 @@ const handleClickAddToCar = async () => {
 		uni.hideLoading()
 	}
 	// 检查库存
-	if (state.goodsDetail.stock === 0) {
-		uni.showToast({
-			title: "库存不足",
-			icon: "none",
-			duration: 1000,
-		})
-		return
-	}
-	emit("onAddToCar", { ...state.goodsDetail, productCount: state.goodsCount, productId: state.selectedSku.id })
+	if (state.goodsDetail.stock === 0) return uni.showToast({ title: "库存不足", icon: "none" })
+
+	emit("onSkuAddToCart", { ...state.goodsDetail, productCount: state.goodsCount, productId: state.selectedSku.id })
 }
 
 const doClose = () => {
 	emit("update:modelValue", false)
 
 	state.goodsCount = 1
-	state.selectedSku = {}
+	state.selectedSku = {
+		retailPrice: 0,
+		promotionPrice: 0,
+		packageNum: 0,
+	}
 	state.goodsDetail = {}
 }
 </script>

src/pages/shop/components/select-sku.vue

@@ -1,447 +0,0 @@
-<template>
-	<!-- 规格弹窗 -->
-	<su-popup :show="show" round="10" @close="emits('close')">
-		<!-- SKU 信息 -->
-		<view class="ss-modal-box bg-white ss-flex-col">
-			<view class="modal-header ss-flex ss-col-center">
-				<view class="header-left ss-m-r-30">
-					<image class="sku-image" :src="state.selectedSku.picUrl || goodsInfo.picUrl" mode="aspectFill" />
-				</view>
-				<view class="header-right ss-flex-col ss-row-between ss-flex-1">
-					<view class="goods-title ss-line-2">{{ goodsInfo.name }}</view>
-					<view class="header-right-bottom ss-flex ss-col-center ss-row-between">
-						<view class="ss-flex">
-							<view class="price-text">
-								{{ fen2yuan(state.selectedSku.promotionPrice || state.selectedSku.price || goodsInfo.price) }}
-								<text v-if="state.selectedSku.promotionType > 0">
-									<text class="iconBox" v-if="state.selectedSku.promotionType === 4"> 限时优惠 </text>
-									<text class="iconBox" v-else-if="state.selectedSku.promotionType === 6"> 会员价 </text>
-									<text class="origin-price-text">
-										{{ fen2yuan(state.selectedSku.price) }}
-									</text>
-								</text>
-							</view>
-						</view>
-						<view class="stock-text ss-m-l-20">
-							{{ formatStock("exact", state.selectedSku.stock || goodsInfo.stock) }}
-						</view>
-					</view>
-				</view>
-			</view>
-
-			<!-- 属性选择 -->
-			<view class="modal-content ss-flex-1">
-				<scroll-view scroll-y="true" class="modal-content-scroll" @touchmove.stop>
-					<view class="sku-item ss-m-b-20" v-for="property in propertyList" :key="property.id">
-						<view class="label-text ss-m-b-20">{{ property.name }}</view>
-						<view class="ss-flex ss-col-center ss-flex-wrap">
-							<button
-								class="ss-reset-button spec-btn"
-								v-for="value in property.values"
-								:class="[
-									{
-										'ui-BG-Main-Gradient': state.currentPropertyArray[property.id] === value.id,
-									},
-									{
-										'disabled-btn': value.disabled === true,
-									},
-								]"
-								:key="value.id"
-								:disabled="value.disabled === true"
-								@tap="onSelectSku(property.id, value.id)"
-							>
-								{{ value.name }}
-							</button>
-						</view>
-					</view>
-					<view class="buy-num-box ss-flex ss-col-center ss-row-between ss-m-b-40">
-						<view class="label-text">购买数量</view>
-						<su-number-box
-							:min="1"
-							:max="state.selectedSku.stock"
-							:step="1"
-							v-model="state.selectedSku.goods_num"
-							@change="onNumberChange($event)"
-						/>
-					</view>
-				</scroll-view>
-			</view>
-
-			<!-- 操作区 -->
-			<view class="modal-footer border-top">
-				<view class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center">
-					<button class="ss-reset-button add-btn ui-Shadow-Main" @tap="onAddCart">加入购物车</button>
-					<button class="ss-reset-button buy-btn ui-Shadow-Main" @tap="onBuy">立即购买</button>
-				</view>
-			</view>
-		</view>
-	</su-popup>
-</template>
-
-<script setup>
-import { computed, reactive, watch } from "vue"
-import sheep from "@/sheep"
-import { formatStock, convertProductPropertyList, fen2yuan } from "@/sheep/hooks/useGoods"
-
-const emits = defineEmits(["change", "addCart", "buy", "close"])
-const props = defineProps({
-	goodsInfo: {
-		type: Object,
-		default() {},
-	},
-	show: {
-		type: Boolean,
-		default: false,
-	},
-})
-
-const state = reactive({
-	selectedSku: {}, // 选中的 SKU
-	currentPropertyArray: [], // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号
-})
-
-const propertyList = convertProductPropertyList(props.goodsInfo.skus)
-// SKU 列表
-const skuList = computed(() => {
-	let skuPrices = props.goodsInfo.skus
-	for (let price of skuPrices) {
-		price.value_id_array = price.properties.map((item) => item.valueId)
-	}
-	return skuPrices
-})
-
-watch(
-	() => state.selectedSku,
-	(newVal) => {
-		emits("change", newVal)
-	},
-	{
-		immediate: true, // 立即执行
-		deep: true, // 深度监听
-	},
-)
-
-// 输入框改变数量
-function onNumberChange(e) {
-	if (e === 0) return
-	if (state.selectedSku.goods_num === e) return
-	state.selectedSku.goods_num = e
-}
-
-// 加入购物车
-function onAddCart() {
-	if (state.selectedSku.id <= 0) {
-		sheep.$helper.toast("请选择规格")
-		return
-	}
-	if (state.selectedSku.stock <= 0) {
-		sheep.$helper.toast("库存不足")
-		return
-	}
-
-	emits("addCart", state.selectedSku)
-}
-
-// 立即购买
-function onBuy() {
-	if (state.selectedSku.id <= 0) {
-		sheep.$helper.toast("请选择规格")
-		return
-	}
-	if (state.selectedSku.stock <= 0) {
-		sheep.$helper.toast("库存不足")
-		return
-	}
-	emits("buy", state.selectedSku)
-}
-
-// 改变禁用状态：计算每个 property 属性值的按钮，是否禁用
-function changeDisabled(isChecked = false, propertyId = 0, valueId = 0) {
-	let newSkus = [] // 所有可以选择的 sku 数组
-	if (isChecked) {
-		// 情况一：选中 property
-		// 获得当前点击选中 property 的、所有可用 SKU
-		for (let price of skuList.value) {
-			if (price.stock <= 0) {
-				continue
-			}
-			if (price.value_id_array.indexOf(valueId) >= 0) {
-				newSkus.push(price)
-			}
-		}
-	} else {
-		// 情况二：取消选中 property
-		// 当前所选 property 下，所有可以选择的 SKU
-		newSkus = getCanUseSkuList()
-	}
-
-	// 所有存在并且有库存未选择的 SKU 的 value 属性值 id
-	let noChooseValueIds = []
-	for (let price of newSkus) {
-		noChooseValueIds = noChooseValueIds.concat(price.value_id_array)
-	}
-	noChooseValueIds = Array.from(new Set(noChooseValueIds)) // 去重
-
-	if (isChecked) {
-		// 去除当前选中的 value 属性值 id
-		let index = noChooseValueIds.indexOf(valueId)
-		noChooseValueIds.splice(index, 1)
-	} else {
-		// 循环去除当前已选择的 value 属性值 id
-		state.currentPropertyArray.forEach((currentPropertyId) => {
-			if (currentPropertyId.toString() !== "") {
-				return
-			}
-			// currentPropertyId 为空是反选 填充的
-			let index = noChooseValueIds.indexOf(currentPropertyId)
-			if (index >= 0) {
-				// currentPropertyId 存在于 noChooseValueIds
-				noChooseValueIds.splice(index, 1)
-			}
-		})
-	}
-
-	// 当前已选择的 property 数组
-	let choosePropertyIds = []
-	if (!isChecked) {
-		// 当前已选择的 property
-		state.currentPropertyArray.forEach((currentPropertyId, currentValueId) => {
-			if (currentPropertyId !== "") {
-				// currentPropertyId 为空是反选 填充的
-				choosePropertyIds.push(currentValueId)
-			}
-		})
-	} else {
-		// 当前点击选择的 property
-		choosePropertyIds = [propertyId]
-	}
-
-	for (let propertyIndex in propertyList) {
-		// 当前点击的 property、或者取消选择时候，已选中的 property 不进行处理
-		if (choosePropertyIds.indexOf(propertyList[propertyIndex]["id"]) >= 0) {
-			continue
-		}
-		// 如果当前 property id 不存在于有库存的 SKU 中，则禁用
-		for (let valueIndex in propertyList[propertyIndex]["values"]) {
-			propertyList[propertyIndex]["values"][valueIndex]["disabled"] =
-				noChooseValueIds.indexOf(propertyList[propertyIndex]["values"][valueIndex]["id"]) < 0 // true 禁用 or false 不禁用
-		}
-	}
-}
-
-// 当前所选属性下，获取所有有库存的 SKU 们
-function getCanUseSkuList() {
-	let newSkus = []
-	for (let sku of skuList.value) {
-		if (sku.stock <= 0) {
-			continue
-		}
-		let isOk = true
-		state.currentPropertyArray.forEach((propertyId) => {
-			// propertyId 不为空，并且，这个 条 sku 没有被选中，则排除
-			if (propertyId.toString() !== "" && sku.value_id_array.indexOf(propertyId) < 0) {
-				isOk = false
-			}
-		})
-		if (isOk) {
-			newSkus.push(sku)
-		}
-	}
-	return newSkus
-}
-
-// 选择规格
-function onSelectSku(propertyId, valueId) {
-	// 清空已选择
-	let isChecked = true // 选中 or 取消选中
-	if (state.currentPropertyArray[propertyId] !== undefined && state.currentPropertyArray[propertyId] === valueId) {
-		// 点击已被选中的，删除并填充 ''
-		isChecked = false
-		state.currentPropertyArray.splice(propertyId, 1, "")
-	} else {
-		// 选中
-		state.currentPropertyArray[propertyId] = valueId
-	}
-
-	// 选中的 property 大类
-	let choosePropertyId = []
-	state.currentPropertyArray.forEach((currentPropertyId) => {
-		if (currentPropertyId !== "") {
-			// currentPropertyId 为空是反选 填充的
-			choosePropertyId.push(currentPropertyId)
-		}
-	})
-
-	// 当前所选 property 下，所有可以选择的 SKU 们
-	let newSkuList = getCanUseSkuList()
-
-	// 判断所有 property 大类是否选择完成
-	if (choosePropertyId.length === propertyList.length && newSkuList.length) {
-		newSkuList[0].goods_num = state.selectedSku.goods_num || 1
-		state.selectedSku = newSkuList[0]
-	} else {
-		state.selectedSku = {}
-	}
-
-	// 改变 property 禁用状态
-	changeDisabled(isChecked, propertyId, valueId)
-}
-
-changeDisabled(false)
-// TODO 芋艿：待讨论的优化点：1）单规格，要不要默认选中；2）默认要不要选中第一个规格
-</script>
-
-<style lang="scss" scoped>
-// 购买
-.buy-box {
-	padding: 10rpx 0;
-
-	.add-btn {
-		width: 356rpx;
-		height: 80rpx;
-		border-radius: 40rpx 0 0 40rpx;
-		background-color: var(--ui-BG-Main-light);
-		color: var(--ui-BG-Main);
-	}
-
-	.buy-btn {
-		width: 356rpx;
-		height: 80rpx;
-		border-radius: 0 40rpx 40rpx 0;
-		background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
-		color: #fff;
-	}
-
-	.score-btn {
-		width: 100%;
-		margin: 0 20rpx;
-		height: 80rpx;
-		border-radius: 40rpx;
-		background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
-		color: #fff;
-	}
-}
-
-.ss-modal-box {
-	border-radius: 30rpx 30rpx 0 0;
-	max-height: 1000rpx;
-
-	.modal-header {
-		position: relative;
-		padding: 80rpx 20rpx 40rpx;
-
-		.sku-image {
-			width: 160rpx;
-			height: 160rpx;
-			border-radius: 10rpx;
-		}
-
-		.header-right {
-			height: 160rpx;
-		}
-
-		.close-icon {
-			position: absolute;
-			top: 10rpx;
-			right: 20rpx;
-			font-size: 46rpx;
-			opacity: 0.2;
-		}
-
-		.goods-title {
-			font-size: 28rpx;
-			font-weight: 500;
-			line-height: 42rpx;
-		}
-
-		.score-img {
-			width: 36rpx;
-			height: 36rpx;
-			margin: 0 4rpx;
-		}
-
-		.score-text {
-			font-size: 30rpx;
-			font-weight: 500;
-			color: $red;
-			font-family: OPPOSANS;
-		}
-
-		.price-text {
-			font-size: 30rpx;
-			font-weight: 500;
-			color: $red;
-			font-family: OPPOSANS;
-
-			&::before {
-				content: "￥";
-				font-size: 30rpx;
-				font-weight: 500;
-				color: $red;
-			}
-		}
-
-		.stock-text {
-			font-size: 26rpx;
-			color: #999999;
-		}
-	}
-
-	.modal-content {
-		padding: 0 20rpx;
-
-		.modal-content-scroll {
-			max-height: 600rpx;
-
-			.label-text {
-				font-size: 26rpx;
-				font-weight: 500;
-			}
-
-			.buy-num-box {
-				height: 100rpx;
-			}
-
-			.spec-btn {
-				height: 60rpx;
-				min-width: 100rpx;
-				padding: 0 30rpx;
-				background: #f4f4f4;
-				border-radius: 30rpx;
-				color: #434343;
-				font-size: 26rpx;
-				margin-right: 10rpx;
-				margin-bottom: 10rpx;
-			}
-
-			.disabled-btn {
-				font-weight: 400;
-				color: #c6c6c6;
-				background: #f8f8f8;
-			}
-		}
-	}
-}
-
-.iconBox {
-	width: fit-content;
-	height: fit-content;
-	padding: 2rpx 10rpx;
-	background-color: rgb(255, 242, 241);
-	color: #ff2621;
-	font-size: 24rpx;
-	margin-left: 5rpx;
-}
-
-.origin-price-text {
-	font-size: 26rpx;
-	font-weight: 400;
-	text-decoration: line-through;
-	color: $gray-c;
-	font-family: OPPOSANS;
-
-	&::before {
-		content: "￥";
-	}
-}
-</style>

src/pages/shop/detail.vue

@@ -71,7 +71,7 @@
 			<!-- start 商品 start -->
 			<view class="flex-row">
 				<scroll-view
-					v-if="state.classifyList?.length > 0"
+					v-if="state.classifyList.length"
 					scroll-y
 					:style="{ height: getHeight() }"
 					class="menu w-200rpx h-full p-l-12rpx p-b-20rpx bg-#f6f6f6"
@@ -83,26 +83,25 @@
 						:class="[{ menu_item_active: i == state.currentClassifyIndex }]"
 						@tap="doClassify(i)"
 					>
-						<view class="menu_item_title show-line">
-							{{ v.name }}
-						</view>
+						<view class="menu_item_title show-line">{{ v.name }}</view>
 					</view>
 				</scroll-view>
 
-				<scroll-view v-if="state.shopList?.length > 0" scroll-y :style="{ height: getHeight() }" class="flex-1 p-b-20rpx">
-					<view class="m-x-15rpx">
-						<product-row
-							v-for="goodsItem in state.goodsList"
-							:key="goodsItem.id"
-							:productId="goodsItem.id"
-							:merchantId="goodsItem.merchantId"
-							:picUrl="filePath(goodsItem.picUrl)"
-							:productName="goodsItem.productName"
-							:salesCount="goodsItem.salesCount"
-							:stock="goodsItem.stock"
-							@onClickAddToCart="onClickAddToCart(goodsItem)"
-						/>
-					</view>
+				<scroll-view v-if="state.goodsList.length" scroll-y :style="{ height: getHeight() }" class="flex-1 p-b-20rpx p-x-15rpx">
+					<product-row
+						v-for="goodsItem in state.goodsList"
+						:key="goodsItem.id"
+						:productId="goodsItem.id"
+						:merchantId="goodsItem.merchantId"
+						:picUrl="filePath(goodsItem.picUrl)"
+						:productName="goodsItem.productName"
+						:salesCount="goodsItem.salesCount"
+						:stock="goodsItem.stock"
+						:unit="goodsItem.unit"
+						:retailPrice="goodsItem.retailPrice"
+						:promotionPrice="goodsItem.promotionPrice"
+						@onClickAddToCart="onClickAddToCart(goodsItem)"
+					/>
 				</scroll-view>
 			</view>
 		</tm-sticky>
@@ -118,7 +117,7 @@
 	<!-- 购物车弹框 -->
 	<product-cart
 		v-model="state.showCartDialog"
-		:carList="state.cartList"
+		:cartList="state.cartList"
 		:totPrice="state.totPrice"
 		:totCount="state.totCount"
 		@add="doAdd"
@@ -126,7 +125,7 @@
 		@submit="doBuy"
 	/>
 	<!-- 规格与数量弹框 -->
-	<product-sku v-model="state.showSkuDialog" :productData="state.curProductData" @onAddToCar="onAddToCar" />
+	<product-sku v-model="state.showSkuDialog" :productData="state.curProductData" @onSkuAddToCart="onSkuAddToCart" />
 </template>
 
 <script setup lang="ts">
@@ -158,7 +157,7 @@ const state = reactive<any>({
 	showCartDialog: false,
 	showSkuDialog: false,
 
-	curProductData: {}, // 当前点击加入购物车的商品信息
+	curProductData: {}, // 当前点击加入到购物车的商品信息
 })
 
 onLoad((options: any) => {
@@ -209,36 +208,17 @@ const getClassify = async () => {
 const getPorductList = async () => {
 	const target = state.classifyList[state.currentClassifyIndex]
 	if (isEmpty(target)) return
-	const { data } = await shopApi.getSupermarketSpuList({
+	const { code, data }: any = await shopApi.getSupermarketSpuList({
 		merchantId: state.merchantId,
 		categoryId: target.id,
 		current: 1,
 		size: 99999,
 	})
-	state.goodsList = data.records
-	state.goodsList.forEach((i) => {
-		if (i && i.foodSPURespVOList && i.foodSPURespVOList.length) {
-			i.foodSPURespVOList.forEach((j) => {
-				j.productCount = 0
-				j.productId = j.id
-			})
-		}
-	})
-	const goodsList = [...state.goodsList]
-	if (state.cartList && state.cartList.length) {
-		for (const i of goodsList) {
-			if (i && i.foodSPURespVOList && i.foodSPURespVOList.length) {
-				for (const j of i.foodSPURespVOList) {
-					for (const v of state.cartList) {
-						if (j.id == v.productId) {
-							j.productCount = v.productCount
-						}
-					}
-				}
-			}
-		}
+	if (code == 0) {
+		state.goodsList = data.records
+		return
 	}
-	state.goodsList = goodsList
+	state.goodsList = []
 }
 
 const doClassify = async (i: any) => {
@@ -252,15 +232,18 @@ const onClickAddToCart = (goodsItem: any) => {
 	state.showSkuDialog = true
 }
 
-// 加入到购物车时
-const onAddToCar = (cartGoodsInfo: any) => {
-	chentProductCount(cartGoodsInfo) // 同步购物车中的数据
+// 选择sku加入到购物车
+const onSkuAddToCart = (skuGoodsInfo: any) => {
+	chentProductCount(skuGoodsInfo) // 同步购物车中的数据
 	state.showSkuDialog = false
 }
+
 // 同步购物车中的数据
 const chentProductCount = async (item: any, type?: "add" | "remove") => {
 	try {
 		uni.showLoading({ title: "加载中", mask: true })
+
+		// 在购物车中增减商品数量
 		let count = item.productCount
 		if (type === "add") {
 			count += 1
@@ -270,9 +253,8 @@ const chentProductCount = async (item: any, type?: "add" | "remove") => {
 			count -= 1
 		}
 
-		const target = state.cartList.find((v) => v.productId == item.productId)
-		const targetIndex = state.cartList.findIndex((v) => v.productId == item.productId)
-		if (target) {
+		const targetIndex = state.cartList.findIndex((v: any) => v.productId == item.productId)
+		if (targetIndex !== -1) {
 			state.cartList[targetIndex].productCount = count
 			state.cartList[targetIndex].productId = item.productId
 			state.cartList[targetIndex].spuId = item.spuId
@@ -287,6 +269,7 @@ const chentProductCount = async (item: any, type?: "add" | "remove") => {
 		uni.hideLoading()
 	}
 }
+
 // 保存购物车数据
 const updateShopCar = async () => {
 	if (isEmpty(state.cartList)) return
@@ -298,12 +281,7 @@ const updateShopCar = async () => {
 				productId: v.productId,
 			}
 		})
-	// if (isEmpty(list)) return
-	const { data, code }: any = await foodApi.updateShopCar({
-		merchantId: state.merchantId,
-		list,
-		hardType: "SUPERMARKET",
-	})
+	const { code }: any = await foodApi.updateShopCar({ merchantId: state.merchantId, list, hardType: "SUPERMARKET" })
 	if (code == 0) await getShopCart()
 }
 
@@ -333,15 +311,10 @@ const doBuy = async () => {
 // 提交订单
 const submitPay = async () => {
 	try {
-		if (isEmpty(state.cartList)) {
-			uni.showToast({ title: "请至少购买一件商品", icon: "none" })
-			return
-		}
+		if (isEmpty(state.cartList)) return uni.showToast({ title: "请至少购买一件商品", icon: "none" })
+
 		uni.showLoading({ title: "支付中...", mask: false })
-		const { data, code }: any = await payApi.createHardwareOrder({
-			carParentId: state.cartList[0].parentCarId,
-			hardType: "SUPERMARKET",
-		})
+		const { data, code }: any = await payApi.createHardwareOrder({ carParentId: state.cartList[0].parentCarId, hardType: "SUPERMARKET" })
 		if (code != 0) throw new Error()
 		uni.showToast({ title: "支付成功", icon: "none" })
 		router.jump("/pages/tabbar/order")

src/pages/shop/product-detail.vue

@@ -35,25 +35,23 @@ const getDetail = async () => {
 			indicator-color="#ffffff"
 			:autoplay="true"
 		>
-			<swiper-item v-for="(v, i) in state.detail?.sliderPicUrls?.split(',')" :key="i">
-				<image class="w-full h-full" :src="filePath(state.detail.picUrl)" mode="aspectFill" />
+			<swiper-item v-for="(v, i) in state.detail?.picUrl?.split(',')" :key="i">
+				<image class="w-full h-full" :src="filePath(v)" mode="aspectFill" />
 			</swiper-item>
 		</swiper>
 
-		<view class="p-x-15rpx">
+		<view class="p-15rpx">
 			<view class="flex-col justify-between card p-y-20rpx p-x-30rpx">
-				<view class="flex-row items-center justify-between">
-					<!-- <view class="flex-row items-center"> -->
+				<view class="prefix_title">商品</view>
+				<view class="sub-text-32 m-t-15rpx">{{ state.detail.productName }}</view>
+				<view class="flex-row items-center justify-between m-t-15rpx">
 					<!-- <view class="second-text-46 color-#f63a36!">¥{{ state.detail.price }}</view> -->
 					<!-- <view class="m-l-20rpx second-text-28 line-through">¥{{ state.detail.marketPrice }}</view> -->
-					<!-- </view> -->
+					<view class="second-text-26">库存{{ state.detail.stock }}</view>
 					<view class="second-text-26">已售{{ state.detail.salesCount }}</view>
 				</view>
-				<view class="flex-col m-t-15rpx">
-					<view class="sub-text-32">{{ state.detail.productName }}</view>
-					<view class="m-t-15rpx second-text-26">{{ state.detail.introduction }}</view>
-				</view>
 			</view>
+
 			<view class="h-15rpx" />
 			<view class="flex-row items-center justify-between card p-y-20rpx p-x-30rpx">
 				<view class="prefix_title">评价</view>