先看效果图
实现的功能有：
1、选中店铺，店铺下的商品全选中
2、店铺下的商品全选中，相对应的店铺也会被选中
3、所有的店铺全选中，底部的全选也会被选中
4、所有的商品全选中，底部的全选也会被选中
5、底部的全选选中，所有的店铺和商品都会被选中
6、价格会根据相应的选中计算
代码如下
html部分：
<!-- 商品列表 -->
<div class="cartlist">
<div class="cart-item" v-for="item in fetchData.list" :key="item.shop_id">
<div class="cart-shop">
<van-checkbox
v-model="item.check"
icon-size=".24rem"
@click="shopChecked(item)"
name="shopRadio"
>
<img src="../../assets/images/c1.png" alt="" />
{{ item.shop_name }}
<van-icon name="arrow" />
</van-checkbox>
</div>
<div
class="cart-goods"
v-for="goods in item.products"
:key="goods.goods_id"
>
<van-checkbox
v-model="goods.checked"
icon-size=".24rem"
@click="goodsChecked(item, goods)"
></van-checkbox>
<img :src="goods.img" alt="" />
<div class="cart-desc">
<p>{{ goods.goodsDesc }}</p>
<div class="tags">
<span v-for="(tag, index) in goods.goodsTags" :key="index">{{
tag
}}</span>
</div>
<div class="price">
<span class="num">￥{{ goods.total }}</span>
<span>
<van-stepper
v-model="goods.num"
input-width=".7rem"
button-size=".4rem"
@plus="plusNum(goods)"
@minus="minusNum(goods)"
@blur="changeNum(goods)"
@focus="focus(goods.num)"
/></span>
</div>
</div>
</div>
</div>
</div>
<!-- 底部提交订单 -->
<van-submit-bar :price="price * 100" button-text="结算" @submit="onSubmit">
<van-checkbox v-model="status" @click="allChecked()">全选</van-checkbox>
</van-submit-bar>模拟的data数据:
fetchData: {
list: [
{
shop_id: 1,
shop_name: "数码科技",
products: [
{
goods_id: 101,
goodsDesc: "傻瓜迷你复古防水胶卷相机胶片机儿童学生日创意网红毕业ins礼物",
price: 30.0,
num: 1,
img: "http://zy.xyaxw.cn/ca1.webp",
total: 30.0,
checked: false,
goodsTags: ["官方正品", "极速退款"],
},
{
goods_id: 102,
goodsDesc: "人生密密缝 傻瓜相机胶卷复古小型随身胶片机学生生日ins小礼物",
price: 100.0,
num: 1,
img: "http://zy.xyaxw.cn/ca2.webp",
total: 100.0,
checked: false,
goodsTags: ["官方正品", "海外直销"],
},
{
goods_id: 103,
goodsDesc: "燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片",
price: 500.0,
num: 1,
img: "http://zy.xyaxw.cn/ca3.webp",
total: 500.0,
checked: false,
goodsTags: ["官方正品", "海外直销"],
},
],
check: false, //店铺选中状态
choose: 0, //商品选中个数
},
{
shop_id: 2,
shop_name: "yhh旗舰店",
products: [
{
goods_id: 201,
goodsDesc: "儿童数码照相机便携拍立得单反小型学生玩具高清可拍照可打印女生",
price: 1500.0,
num: 1,
img: "http://zy.xyaxw.cn/ca2.webp",
total: 1500.0,
checked: false,
goodsTags: ["官方正品", "支持IOS"],
},
{
goods_id: 202,
goodsDesc: "相机数码相机学生入门级高清旅游便携vlog照相机小型微单单反ccd",
price: 700.0,
num: 1,
img: "http://zy.xyaxw.cn/ca3.webp",
total: 700.0,
checked: false,
goodsTags: ["官方正品", "海外直销"],
},
],
check: false,
choose: 0,
},
],
allchoose: 0, //店铺选中个数
allsum: 0, //总计价格
allnum: 0, //总计数量
},
status: false, //全选选中状态
shopId: [],
goodsId: [],
price: 0,
oldNum:''methods:
watch: {
shopId(val) {
if (val.length == this.fetchData.list.length) {
this.status = true;
} else {
this.status = false;
}
},
},
methods: {
// 数组删
arrayCheckDel(arr, val) {
let e = arr.indexOf(val);
if (e != -1) {
arr.splice(e, 1);
}
},
// 数组增
arrayCheckAdd(arr, val) {
let e = arr.indexOf(val);
if (e == -1) {
arr.push(val);
}
},
// 店铺选择
shopChecked(item) {
if (item.check) {
item.products.forEach(pro=> {
if(pro.checked) {
let p = pro.num * pro.price;
this.price = this.price - p
}
})
this.arrayCheckAdd(this.shopId, item.shop_id);
item.choose = item.products.length;
item.products.forEach((i) => {
let p = i.num * i.price;
i.checked = true;
this.arrayCheckAdd(this.goodsId, i.goods_id);
this.price = this.price + p;
});
} else {
this.arrayCheckDel(this.shopId, item.shop_id);
item.choose = 0;
item.products.forEach((i) => {
let p = i.num * i.price;
i.checked = false;
this.arrayCheckDel(this.goodsId, i.goods_id);
this.price = this.price - p;
});
}
console.log("选中的店铺ID集合:", this.shopId);
console.log("选中的商品ID集合:", this.goodsId);
console.log("选中的商品Price集合:", this.price);
},
// 商品选择
goodsChecked(item, goods) {
let p = goods.num * goods.price;
if (goods.checked) {
// 存储商品ID
this.arrayCheckAdd(this.goodsId, goods.goods_id);
this.price = this.price + p;
item.choose++;
} else {
// 删除商品ID
this.arrayCheckDel(this.goodsId, goods.goods_id);
this.price = this.price - p;
item.choose--;
}
console.log(this.price);
if (item.choose == item.products.length) {
// 存储店铺ID
item.check = true;
this.arrayCheckAdd(this.shopId, item.shop_id);
} else {
// 删除店铺ID
item.check = false;
this.arrayCheckDel(this.shopId, item.shop_id);
}
console.log("选中的店铺ID集合:", this.shopId);
console.log("选中的商品ID集合:", this.goodsId);
},
// 全选
allChecked() {
this.fetchData.list.forEach(i => {
i.products.forEach(pro => {
if (!pro.checked) {
pro.checked = this.status;
this.goodsChecked(i, pro);
}
});
});
if (this.status == false) {
console.log("删除商品");
this.fetchData.list.forEach(itemF => {
itemF.products.forEach(item => {
item.checked = this.status;
this.goodsChecked(itemF, item);
});
});
}
},
onSubmit() {},
// vant 步进器组件方法
plusNum(goods) {
if (goods.checked) {
this.price = this.price + goods.price;
console.log(goods.num);
}
},
minusNum(goods) {
if (goods.checked) {
this.price = this.price - goods.price;
}
},
changeNum(goods) {
if(goods.checked) {
let n = goods.num - this.oldNum
this.price = this.price + goods.price * n
}
},
focus(num) {
this.oldNum = num
},
},