html5+vue仿淘宝购物车多个店铺实现单选全选

购物车有多个店铺商品的情况下实现单选全选

1、实现单个店铺的全选
获取店铺商品的数量，设置初始商品选中数字total=0，店铺全选中数量totalShop=0，点击选中total+1，反选total-1，再判断total是否等于店铺的商品数量，等于则店铺全选，totalShop+1
2、购物车全部选中
当totalShop的值等于店铺数量的情况下，则购物车的商品全部选中
3、点击单个商品的时候判断1,2
HTML代码

<div class="product-list" v-for="(item, index) in productList" :key="index">
                     <div v-if="item.length>0">
                        <div class="product-header">
                            <p class="shop-name">
                                <van-checkbox checked-color="#f84f44" :name="index" v-model="item.shopCheck" @click="checkShop(item,index)"></van-checkbox>
                                &nbsp;&nbsp;<van-icon name="shop-o"></van-icon>&nbsp;{{item[0].merchant!=null?item[0].merchant.store_name:''}}</p>
                                <!-- 领取优惠券位置 -->
                            <div class="shop-getCoupon" @click="enterCouponCenter" v-show="item[0].merchant_id==0">
                                <img src="../../assets/coupon/cart_icon_discount.png"/>
                                <div class="text">领劵</div>
                            </div>
                        </div>
                        <van-cell-group>
                            <van-cell v-for="(itemIn,indexIn) in item" :key="indexIn" class="item" >
                                <template slot="title">
                                    <van-checkbox checked-color="#f84f44" :name="itemIn.id" v-model="itemIn.checked" @click="checkSingle(item,itemIn,indexIn)"></van-checkbox>
                                    <div class="product-info">
                                        <div class="img-box" @click="goDetail(itemIn)">
                                            <img :src ="itemIn.pic_index">
                                        </div>
                                        <div class="info-text">
                                            <h5>{{itemIn.goods.detail_name}}</h5>
                                            <p class="sku"><span v-for = "(item1,index1) in itemIn.specs" :key="index1">{{item1.attribute_option_name}} </span></p>
                                            <div class="price-box">
                                                <div class="left">
                                                    <h6>￥{{itemIn.price}}</h6>
                                                </div>
                                                <van-stepper v-model="itemIn.amount" integer  min="1" :max="itemIn.stock" @change="changeNumber(itemIn)"></van-stepper>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </van-cell>
                        </van-cell-group>
                     </div>
                 </div>

js代码

 data(){
     return{
          productList:[],			有效商品列表
          checkAllItem:false,     //全部选中
          total:0,         //选中的商品数量
          totalShop:0,      //全选的店铺数量
          shopLength:0,      //店铺数量

      }
  },
///
///
            //点击单个商品
            checkSingle(item, itemIn){
                !itemIn.checked ? this.checkTrue(item, itemIn) : this.checkFalse(item, itemIn);
            },
          // 单个商品点击为true
            checkTrue (item, itemIn) {
                let _this = this;
                itemIn.checked = true;
                _this.total +=1;
                item.checkNum +=1;
                if(item.checkNum == item.length){
                    item.shopCheck = true;
                    _this.totalShop += 1;
                }
                if (item.shopCheck) {
                    if (_this.totalShop == _this.shopLength) {
                        _this.checkAllItem = true
                    } else {
                        _this.checkAllItem = false
                    }
                }
                console.log(_this.total)
            },
            // 单个商品点击为false
            checkFalse (item, itemIn) {
                let _this = this;
                itemIn.checked = false;         // 将商品选中状态改为false
                --item.checkNum;            // 被选中的商品数减一
                _this.total -=1;
                if (item.shopCheck) {
                    // 如果店铺是被选中的，更改店铺选中状态
                    item.shopCheck = false; // 当商店状态为选中时改变false
                    --_this.totalShop // 商店数减一
                }
                this.checkAllItem = false;
            },
            //单个店铺全选
            shopTrue (item) {
                let _this = this;
                item.forEach((itemIn,index) => {
                    if (itemIn.checked === false) {
                        _this.checkTrue(item, itemIn)
                    }
                })
            },
            //单个店铺反选
            shopFalse (item) {
                let _this = this;
                item.forEach(itemIn => {
                    // 同上
                    if (itemIn.checked === true) {
                        _this.checkFalse(item, itemIn)
                    }
                })
            },
            //点击选中整个店铺
            checkShop(item){
                !item.shopCheck ? this.shopTrue(item) : this.shopFalse(item);
            },
            // 选择全部商店的商品或反选
            checkAll () {
                let _this = this;
                _this.checkAllItem = !_this.checkAllItem;
                if(_this.checkAllItem){
                    for(let i in _this.productList){
                        _this.shopTrue(_this.productList[i])
                    }
                }else{
                    for(let i in _this.productList){
                        _this.shopFalse(_this.productList[i])
                    }
                }
            },