no message

common/css/common.css

@@ -124,7 +124,10 @@ text {
 	display: flex;
 	justify-content: flex-start;
 }
-
+.flex-justify-evenly {
+	display: flex;
+	justify-content: space-evenly;
+}
 .align-items-center {
 	display: flex;
 	align-items: center;
@@ -942,7 +945,9 @@ text {
 .ml-16 {
 	margin-left: 16rpx;
 }
-
+.ml-30 {
+	margin-left: 30rpx;
+}
 .ml-40 {
 	margin-left: 40rpx;
 }

pages-takeout/new-shop.vue

@@ -49,10 +49,10 @@
 
 		<!-- <view class="bgc-f sticky-nav" :style="{ height: navBgType?`calc(100vh - ${newNavHeight}rpx - ${48}rpx)`:'auto'}"> -->
 		<view class="bgc-F7F8FA">
-			<view class="menu-box box-border-box align-items-flex-start pb-130" v-if="shopType === 1">
+			<view class="menu-box box-border-box align-items-flex-start" v-if="shopType === 1">
 
 				<view class="menu-box-left" :style="{top: newNavHeight + 'rpx'}">
-					<view class="menu-box-left-box"
+					<view class="menu-box-left-box pb-130 box-border-box"
 						:style="{height: menuLeftType?`calc(100vh - ${newNavHeight}rpx - ${68}rpx)`:''}">
 						<view class="menu-type-list fs-26 box-border-box align-items-center flex-justify-center"
 							v-for="(item,i) in categoryData" :key="i" @click="selectType(item)"
@@ -65,7 +65,7 @@
 					</view>
 				</view>
 
-				<view class="menu-box-only bgc-f">
+				<view class="menu-box-only bgc-f pb-130 box-border-box">
 					<view class="" v-for="(item,i) in categoryData" :key="i" :id="'scroll'+ item.type">
 						<view class="fs-28 fw-600 fc-3 sticky-nav bgc-f p-20 box-border-box"
 							:style="{top: newNavHeight + 'rpx'}">

pages-takeout/new-specs-info.vue

@@ -31,23 +31,29 @@
 					</view>
 					<view class="align-items-center flex-wrap-wrap w-add-16">
 						<view
-							class="specs-item b-rad-12 align-items-center flex-justify-center mr-16 mb-16 plr-12 box-border-box"
-							:class="postData.goods_spec_id.indexOf(info.spec_id)>=0?'s-item fc-FF3333 bgc-FAE9E9 b-FF3333':'n-item bgc-F5F5F5 fc-0'"
-							v-for="(info,index_two) in item.spec_list" :key="index_two" @click="selectSpec(info,i)">
-							<view class="align-items-center">
-								<view class="count-box b-rad-50 bgc-FE6B2C fs-22 fc-f text-align-center"
-									v-if="item.affect_quantity === 1">
-									0
+							class="specs-item b-rad-12 align-items-center flex-justify-evenly mr-16 mb-16 plr-12 box-border-box"
+							:class="spec_key.indexOf(info.spec_id)>=0?'s-item bgc-FAE9E9 b-FF3333':'n-item bgc-F5F5F5'"
+							v-for="(info,index_two) in item.spec_list" :key="index_two" @click="selectSpec(item,info)">
+							<view class="count-box b-rad-50 bgc-FE6B2C fs-22 fc-f text-align-center"
+								v-if="item.affect_quantity === 1 && info.spec_num > 0">
+								{{info.spec_num}}
+							</view>
+							<image v-if="spec_key.indexOf(info.spec_id)>=0 && info.spec_num > 0"
+								class="set-num-img mr-30" src="@/static/img/order-food/reduce-img.png"
+								@click.stop="setNum(item,info,0)" mode="">
+							</image>
+							<view class="align-items-center info-text">
+								<view class="" :class="spec_key.indexOf(info.spec_id)>=0?'fc-FF3333':'fc-0'">
+									{{info.spec_name}}
 								</view>
-								<view class="align-items-center">
-									<view class="">
-										{{info.spec_name}}
-									</view>
-									<view class="" v-if="info.spec_price">
-										￥{{info.spec_price}}
-									</view>
+								<view class="" :class="spec_key.indexOf(info.spec_id)>=0?'fc-FF3333':'fc-0'"
+									v-if="info.spec_price && item.affect_quantity != 0">
+									￥{{info.spec_price}}
 								</view>
 							</view>
+							<image v-if="spec_key.indexOf(info.spec_id)>=0 && info.spec_num > 0"
+								class="set-num-img ml-30" src="@/static/img/order-food/add-img.png"
+								@click.stop="setNum(item,info,1)" mode=""></image>
 						</view>
 					</view>
 				</view>
@@ -61,22 +67,24 @@
 							￥
 						</view>
 						<view class="fs-48 fc-3 fw-600">
-							80.9
+							{{total_price.toFixed(2)}}
 						</view>
 					</view>
 					<view class="fs-24 fc-9">
-						不辣、煎蛋
+						{{spec_text}}
 					</view>
 				</view>
 				<view class="align-items-center">
-					<image class="cz-img" src="@/static/img/order-food/reduce-img.png" mode=""></image>
+					<image class="cz-img" src="@/static/img/order-food/reduce-img.png" mode=""
+						@click="changeGoodsNum(0)"></image>
 					<view class="plr-16 fs-32 fc-3 fw-400">
 						{{postData.number}}
 					</view>
-					<image class="cz-img" src="@/static/img/order-food/add-img.png" mode=""></image>
+					<image class="cz-img" src="@/static/img/order-food/add-img.png" mode="" @click="changeGoodsNum(1)">
+					</image>
 				</view>
 			</view>
-			<view class="but-box text-align-center fs-32 fc-f fw-600 b-rad-200">
+			<view class="but-box text-align-center fs-32 fc-f fw-600 b-rad-200" @click="addShoppingCart">
 				加入购物车
 			</view>
 		</view>
@@ -100,70 +108,179 @@
 					affect_quantity: 0, //是否影响购物车数量: 0-不影响, 1-影响
 					spec_list: [{
 						spec_name: '不辣',
+						spec_price: 8,
 						spec_id: 0
 					}, {
 						spec_name: '微辣',
+						spec_price: 8,
 						spec_id: 1
 					}, {
-						spec_name: '微辣',
+						spec_name: '中辣',
+						spec_price: 8,
 						spec_id: 2
 					}, {
-						spec_name: '微辣',
+						spec_name: '特辣',
+						spec_price: 8,
 						spec_id: 3
 					}]
-				}, {
+				},{
+					sku_name: '粗细',
+					sku_id: 10,
+					sku_type: 1, //1:单选, 2:多选
+					affect_quantity: 0, //是否影响购物车数量: 0-不影响, 1-影响
+					spec_list: [{
+						spec_name: '特细',
+						spec_price: 0,
+						spec_id: 11
+					}, {
+						spec_name: '细',
+						spec_price: 0,
+						spec_id: 12
+					}, {
+						spec_name: '粗',
+						spec_price: 0,
+						spec_id: 13
+					}, {
+						spec_name: '韭叶',
+						spec_price: 0,
+						spec_id: 14
+					}]
+				}
+				, {
 					sku_name: '小料',
 					sku_type: 2,
 					sku_id: 9,
 					affect_quantity: 1, //是否影响购物车数量: 0-不影响, 1-影响
 					spec_list: [{
 						spec_name: '煎蛋',
-						spec_price: '3',
+						spec_price: 3,
 						spec_id: 4
 					}, {
-						spec_name: '牛肉',
-						spec_price: '8',
+						spec_name: '酱牛肉',
+						spec_price: 8,
 						spec_id: 5
 					}, {
 						spec_name: '卤蛋',
-						spec_price: '2',
+						spec_price: 2,
 						spec_id: 6
 					}, {
-						spec_name: '卤蛋',
-						spec_price: '2',
+						spec_name: '卤鸡腿',
+						spec_price: 2,
 						spec_id: 7
 					}]
 				}],
 				spec_key: [],
+				total_price: 0,
+				spec_text: '请选择规格',
 				postData: {
 					shop_id: '',
 					goods_id: '',
 					category_id: '',
-					goods_spec_id: '',
+					goods_spec: [],
 					number: 1
 				}
 			}
 		},
-		onLoad(data) {},
-		mounted() {
+		watch: {
+			// 监听相关数据变化，自动计算总价和拼接规格文字
+			'postData.goods_spec': {
+				handler() {
+					this.updatePriceAndText();
+				},
+				deep: true
+			},
+			'postData.number': {
+				handler() {
+					this.updatePriceAndText();
+				}
+			}
+		},
+		onLoad(data) {
 			this.addSpecNum()
 		},
+		mounted() {},
 		methods: {
+			// 添加商品数量
+			changeGoodsNum(type) {
+				if (type === 0) {
+					// 减少数量
+					if (this.postData.number > 1) {
+						this.postData.number--;
+					}
+				} else {
+					// 增加数量
+					this.postData.number++;
+				}
+			},
+			// 更新总价和规格文字
+			updatePriceAndText() {
+				let basePrice = 0; // 假设商品基础价格，可以从接口获取
+				let specPrice = 0;
+				let specArray = [];
+
+				// 遍历所有规格组
+				this.specsData.forEach(group => {
+					group.spec_list.forEach(spec => {
+						// 检查规格是否被选中
+						if (this.spec_key.includes(spec.spec_id)) {
+							// 获取规格数量
+							let specNum = group.affect_quantity === 1 ? spec.spec_num : 1;
+
+							// 累加价格
+							specPrice += spec.spec_price * specNum;
+
+							// 构建规格文字
+							let specName = spec.spec_name;
+							if (group.sku_type === 2 && specNum > 1) {
+								// 多选且数量大于1，显示 ×数量
+								specName += `×${specNum}`;
+							}
+							specArray.push(specName);
+						}
+					});
+				});
+				// 计算总价：基础价格 + 规格价格 × 商品数量
+				this.total_price = (basePrice + specPrice) * this.postData.number;
+				// 拼接规格文字
+				if (specArray.length > 0) {
+					this.spec_text = specArray.join('、');
+				} else {
+					this.spec_text = '请选择规格';
+				}
+				// this.$forceUpdate();
+			},
+			addShoppingCart() {
+				console.log(this.postData, "提交数据");
+			},
+			setNum(item, info, type) {
+				if (type === 0) {
+					info.spec_num -= 1;
+					if (info.spec_num <= 0) {
+						const infoKey = this.spec_key.indexOf(info.spec_id)
+						if (infoKey != -1) {
+							this.spec_key.splice(infoKey, 1)
+							this.postData.goods_spec.splice(infoKey, 1)
+						}
+					}
+				} else {
+					info.spec_num += 1;
+				}
+				const targetSpec = this.postData.goods_spec.find(e => e.id === info.spec_id);
+				if (targetSpec) {
+					targetSpec.number = info.spec_num;
+				}
+				this.$forceUpdate();
+			},
 			addSpecNum() {
 				this.specsData.forEach((v, k) => {
 					if (v.affect_quantity === 1) {
 						v.spec_list.forEach(spec => {
-							// 添加数量字段，默认为0
 							spec.spec_num = 0;
-							// 或者如果你想要存储选中状态：
-							// spec.quantity = 0;
-							// spec.selected = false; // 对于多选规格
 						});
+					} else {
+						this.addSpec(v.spec_list[0])
 					}
 				})
-				setTimeout(() => {
-					console.log(this.specsData, '111111');
-				}, 1000)
 			},
 			getGoodsGoodsSpec() {
 				getGoodsGoodsSpec({
@@ -182,9 +299,36 @@
 					delta: 1
 				})
 			},
-			selectSpec(info, groupKey) {
+			selectSpec(item, info) {
+				let specKey = this.spec_key.indexOf(info.spec_id)
+				if (item.sku_type === 1) {
+					//单选
+					item.spec_list.forEach((e, i) => {
+						let infoKey = this.spec_key.indexOf(e.spec_id)
+						if (infoKey >= 0) {
+							this.spec_key.splice(infoKey, 1)
+							this.postData.goods_spec.splice(infoKey, 1)
+						}
+					})
+					this.addSpec(info)
 
+				} else {
+					//多选
+					if (specKey < 0) {
+						if (info.spec_num === 0) {
+							info.spec_num += 1
+							this.addSpec(info)
+						}
+					}
+				}
 			},
+			addSpec(info) {
+				this.spec_key.push(info.spec_id);
+				this.postData.goods_spec.push({
+					id: info.spec_id,
+					number: info.spec_num || 1
+				});
+			}
 		}
 	}
 </script>
@@ -272,4 +416,9 @@
 		right: -8rpx;
 		top: -8rpx;
 	}
+
+	.set-num-img {
+		width: 44rpx;
+		height: 44rpx;
+	}
 </style>