|
|
@@ -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>
|
