购物车商品选择处理

今天我们要实现的效果是商品购物车的选择效果。

image.png

数据分为两级，第一级是店铺shop，第二级是店铺下面的商品good。
主要有三点：
1.不选择商品时，商品会被取消掉

image.png

2.不选择店铺时，店铺的所有商品都被取消掉

image.png
3.不选择全选时，所有商品都被取消掉
image.png

现在用代码来实现：
由于给的接口api没有checked，所以我们在获取数据的时候自己加上checked属性。需注意的是要先添加属性，再把数据赋值。

    getList() {
      axios.get(url.cartLists).then(res=>{
        let lists = res.data.cartList
         lists.forEach(shop=>{
           shop.checked = true
          shop.goodsList.forEach(good=>{
            good.checked = true
          })
        })
        this.lists = lists
      })
    }

这样数据api中就有了checked属性。接下来就好操作了。
1.商品
①动态绑定class<span class="check" :class="{checked:shop.checked}">
②绑定点击事件<div class="select-group js-select-group" @click="selectShop(shop)">
③

    selectGood(shop,good) {
      good.checked = !good.checked
      shop.checked = shop.goodsList.every(good =>{
        return good.checked
      })

2.店铺
前两步同上

    selectShop(shop) {
      shop.checked = !shop.checked
      shop.goodsList.forEach(good => {
        good.checked = shop.checked
      })
    }

3.全选
前两步同上，不过这里class绑定的是computed:allSelected

    allSelected: {
      get() {
        if(this.lists&&this.lists.length) {
          return this.lists.every(shop => {
            return shop.checked 
          })
        }
        return false
      },
      set(newVal) {
        this.lists.forEach(shop =>{
          shop.checked =newVal
          shop.goodsList.forEach(good =>{
            good.checked = newVal
          })
        })
      }
    }

点击事件:

    selectAll() {
      this.allSelected = !this.allSelected
    }