vue3.0实现购物车效果(多店铺)

效果展示

代码

初学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>