购物车

复选框与按钮的结合使用

//购物车列表
 <div class="flx-cent" v-for="(item,index) in carData" :key="index">
        <van-checkbox
         v-model="item.checked" 
         checked-color="#C03131" 
         icon-size="15px"
         @change="selectOne"
         ></van-checkbox>
        <div class="cart-goods">
          <img :src="item.imgUrl" alt />
        </div>
        <div class="cart-container flex2 jc-sb">
          <p class="goods-msg">{{item.masterName}}</p>
          <div class="goods-price">
            <span class="price">￥{{item.price/100}}</span>
            <span class="old-price" v-if="false">￥{{item.maxPrice}}</span>
            <span class="count">X {{item.buyNum}}</span>
          </div>
        </div>
     
      </div>

<!-- 底部结算 -->
<div class="buttom-nav">
  <van-checkbox v-model="checkedAll" 
   checked-color="#C03131" 
   icon-size="15px"
   @click="selectAll"
   >
    <span style="color: #797d82;">全选</span>
  
  </van-checkbox>
  <span class="all-price">￥{{totalPrice}}</span>
  <van-button style="height:49px;width:105px;font-size:17px" color="#C03131" @click="payMoney">结算</van-button>
</div>

//单选和全选的js部分
   // 单选 这里我们使用组件的change的事件，它自带一个回调参数，这个参数是布尔值，可以选中的状态
    selectOne(value){
      console.log("单选：",value)
         // 被选中商品的数量
        let selectArr= this.carData.filter(item=>{
             return item.checked;
         })
        // 判断被选中商品和全部商品的数量是否相等
        if(selectArr.length==this.carData.length){
          this.checkedAll=true
        }
        else{
          this.checkedAll=false
        }
    },
    // 全选 全使用的是点击事件click
    selectAll(value){
      console.log("多选：",this.checkedAll)
      this.carData=this.carData.map(item=>{
        return {
          ...item,
          checked: !this.checkedAll
        }
      })
    },

    //获取数据
    getCarData(){     
      let url ="cart/all"
      this.$axios.post(url).then(res=>{
        console.log("购物车的列表数据：",res)
    let resList=   res.list.filter(item=>{
      return item.buyNum >0
       })
        //由于返回的对象里没有我们需要的checked属性，所有我们需要对数组里的每一个对象添加checked属性，使用的方式是map和扩展运算符
        this.carData= resList.map(item=>{

          return {
            ...item,
            checked:false
          }
        })
        // this.carData=res.list
        console.log("this.carData",this.carData)
          this.getProductData()      
      }).catch(err=>{
        console.log("err",err)
      })
    },