Vue实现淘宝购物车三级选中功能详解

const state = {
  cartList: [],  // 购物车列表
  totalCount: 0,
  allChecked: false,  // 全选
  shopCheckedNum: 0,  // 选中的店铺数量
  /**
   * cartList: [
   *  {
   *    shopName,
   *    shopChecked: false,  // 店铺选中
   *    proCheckedNum: 0,  // 当前店铺商品选中数量
   *    cartGoodsInfo: [
   *      {iid,styleName,proChecked...}  // 里边是商品的各种信息，proChecked是商品选中状态
   *      {...}
   *    ]
   *  },
   *  {...}
   * ]
   */
};

// 这是选择按钮，我把它封装成了一个组件  chooseClass接收父组件传值改变选中时的样式
// 商品的选中按钮
<cart-choose
    :chooseClass="$store.state.cartList[index].products[key].proChecked"
    @click.native.stop="proCheckedClick(index, key)"
/>
// 店铺的选择按钮  （我把店铺列表和商品分成了两个组件，index是传给店铺列表内商品的）
<cart-choose
    :index="index"
    :chooseClass="$store.state.cartList[index].shopChecked"
    @click.native="shopCheckedClick(index)"
/>
// 全选按钮
<cart-choose :chooseClass="$store.state.allChecked" />

// index：店铺索引值  key：当前商品在当前店铺内的索引值
proCheckedClick(index, key) {
    this.$store.dispatch("ProChecked", { index, key });
},
shopCheckedClick(index) {
    this.$store.dispatch("ShopChecked", index);
},
allChecked() {
    this.$store.dispatch("AllChecked");
},

// 单个商品选中
proCheckedTrue(state, { index, key }) {
  const cartList = state.cartList;

  cartList[index].products[key].proChecked = true;
  cartList[index].proCheckedNum += 1;  // 商品数量+1
},
// 单个商品取消选中
proCheckedFalse(state, { index, key }) {
  const cartList = state.cartList;

  cartList[index].products[key].proChecked = false;
  cartList[index].proCheckedNum -= 1;
},
// 店铺选中
shopCheckedTrue(state, index) {
  const cartList = state.cartList;

  cartList[index].shopChecked = true;
  console.log(state.shopCheckedNum);
  state.shopCheckedNum += 1;  // 店铺数量+1
},
// 店铺取消选中
shopCheckedFalse(state, index) {
  const cartList = state.cartList;

  cartList[index].shopChecked = false;
  state.shopCheckedNum -= 1;
},
// 全选
allCheckedTrue(state) {
  state.allChecked = true;
},
// 取消全选
allCheckedFalse(state) {
  state.allChecked = false;
},

// 商品状态
ProChecked({ state, commit }, { index, key }) {
  const cartList = state.cartList;

  // 这里要取反，因为此时的proChecked是点击按钮前的
  !cartList[index].products[key].proChecked
    ? commit("proCheckedTrue", { index, key })
    : commit("proCheckedFalse", { index, key });

  // 商品全选，所选店铺选中
  if (cartList[index].proCheckedNum === cartList[index].products.length) {
    commit("shopCheckedTrue", index);
  }
  // 商品没全选 → 如果店铺选中改为未选中
  // (不加这个判断条件的话 本来没选中的店铺也会执行shopCheckedFalse,导致商品选中数量会-1)
  else if (cartList[index].shopChecked) {
    commit("shopCheckedFalse", index);
  }

  // 判断店铺是否全选，改变全选按钮状态
  if (state.shopCheckedNum === cartList.length) {
    commit("allCheckedTrue");
  } else {
    commit("allCheckedFalse");
  }
},
// 店铺选中状态
ShopChecked({ state, commit }, index) {
  const cartList = state.cartList;

  if (!cartList[index].shopChecked) {
    // 让店铺选中 → 将当前店铺内未选中的商品改为选中
    commit("shopCheckedTrue", index);
    for (let k in cartList[index].products) {
      if (!cartList[index].products[k].proChecked) {
        commit("proCheckedTrue", { index, key: k });
      }
    }
  } else {
    // 店铺取消选中 → 将当前店铺内所有商品改为未选中
    commit("shopCheckedFalse", index);
    for (let k in cartList[index].products) {
      commit("proCheckedFalse", { index, key: k });
    }
  }

  if (state.shopCheckedNum === cartList.length) {
    commit("allCheckedTrue");
  } else {
    commit("allCheckedFalse");
  }
},
// 全选
AllChecked({ state, commit }) {
  const cartList = state.cartList;

  if (!state.allChecked) {
    // 全选 → 所有未选中的店铺+商品全部选中
    commit("allCheckedTrue");
    for (let i in cartList) {
      if (!cartList[i].shopChecked) {
        commit("shopCheckedTrue", i);
      }
      for (let k in cartList[i].products) {
        if (!cartList[i].products[k].proChecked) {
          commit("proCheckedTrue", { index: i, key: k });
        }
      }
    }
  } else {
    // 取消全选 → 所有店铺+商品取消选中
    commit("allCheckedFalse");
    for (let i in cartList) {
      commit("shopCheckedFalse", i);
      for (let k in cartList[i].products) {
        commit("proCheckedFalse", { index: i, key: k });
      }
    }
  }
},

// 单个商品选中
  ProChecked(state, { index, key }) {
    const cartList = state.cartList;

    // 商品选中状态取反
    cartList[index].products[key].proChecked =
      !cartList[index].products[key].proChecked;

    // 如果选中，选中数量+1，取消选中则-1
    if (cartList[index].products[key].proChecked) {
      cartList[index].proCheckedNum++;
    } else {
      cartList[index].proCheckedNum--;
    }

    // 如果商品全选，则店铺选中；否则店铺取消选中
    if (cartList[index].proCheckedNum === cartList[index].products.length) {
      cartList[index].shopChecked = true;
      state.shopCheckedNum++;
    } else if (cartList[index].shopChecked) {
      cartList[index].shopChecked = false;
      state.shopCheckedNum--;
    }
    // 判断店铺是否全选，改变全选按钮状态
    if (state.shopCheckedNum === cartList.length) {
      state.allChecked = true;