效果展示
代码
初学vue3.0，大家多提意见
<template>
<div class="content">
<div v-for="(item, index) in data.shopList" :key="index" class="item_warp">
<div class="flex_row">
<div style="margin-right: 20px">
<van-checkbox v-model="item.checked" icon-size="18" @click="storeCheck($event,index)"></van-checkbox>
</div>
<img
src="../../static/icon/store_icon.png"
class="store_icon"
alt=""
srcset=""
/>
<span style="margin: 0 5px">{
{
item.storeName }}</span>
<van-icon name="arrow" />
</div>
<div class="shop_content flex" v-for="(item2,index2) in item.shop" :key="item2.id">
<div style="margin-right: 20px">
<van-checkbox v-model="item2.checked" icon-size="18" @click="shopCheck($event,index,index2)"></van-checkbox>
</div>
<div class="content_right flex">
<van-image
width="100px"
height="100px"
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<div style="margin-left:15px">
<p>商品名称：{
{
item2.shopName}}</p>
<van-stepper v-model="item2.num" min="1" max="999" />
</div>
</div>
</div>
</div>
</div>
<div class="fixed_warp flex">
<van-checkbox v-model="allcheck" icon-size="18"></van-checkbox>
</div>
</template>
<script lang="ts" setup>
import {
computed, reactive, ref, watch } from "vue";
//模拟数据
const data = reactive({
shopList: [
{
storeName: "广东威华旗舰店", //店铺名称
checked: false,
shop: [
{
id: 1,
shopName: "大豆油", //商品名称
brand: "宝华农业科技",
specif: "50ml",
price: "89.20", //单价
num: 1, //数量
checked: false,
},
{
id: 2,
shopName: "大豆油2",
brand: "宝华农业科技",
specif: "50ml",
price: "66.20",
num: 1,
checked: false,
},
],
},
{
storeName: "润斛生态农业",
checked: false,
shop: [
{
id: 3,
shopName: "花生",
brand: "宝华农业科技2",
specif: "50ml",
price: "89.20",
num: 1,
checked: false,
},
{
id: 4,
shopName: "花生2",
brand: "宝华农业科技2",
specif: "56ml",
price: "61.20",
num: 1,
checked: false,
},
],
},
],
});
// const total = ref(false);
//全选按钮
const allcheck = computed({
set:(v)=>{
data.shopList.forEach((item)=>{
item.checked = v;
item.shop.forEach((item2)=>{
item2.checked = v;
})
})
},
get:()=>{
return data.shopList.every((item)=>{
return item.checked == true
})
}
})
//店铺全选
function storeCheck(e: any,index: any){
console.log(e,index,"agreement");
data.shopList[index].shop.forEach(item=>{
item.checked = data.shopList[index].checked;
})
}
//商品勾选
function shopCheck(e:any,index:any,index2:any){
console.log(e,index,index2,"shopCheck");
// data.shopList[index].checked =
console.log("shop",data.shopList[index].shop)
data.shopList[index].checked = data.shopList[index].shop.every(item=>{
return item.checked ==true
})
}
</script>
<style>
body {
background: #f5f5f5;
}
</style>
<style scoped lang="scss">
.item_warp {
margin-top: 20px;
padding:24px;
background: #ffffff;
}
.content {
margin: 0 30px;
}
.store_icon {
height: 30px;
width: 30px;
}
.shop_content{
margin: 20px 0;
}
.content_right {
height: 200px;
}
.fixed_warp{
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 88px;
padding:0 20px;
background: #ffffff;
}
</style>