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

最近在练习商城项目，记录下实现购物车三级选中的过程（小白一个，水平很菜）

效果图：

实现：

1.全选时所有商品+店铺全部选中；反之全部取消选中

2.店铺选中时，当前店铺内所有商品选中；反之取消选中

3.店铺内商品全选 → 所属店铺选中；反之取消选中店铺

4.店铺+所有商品全选 → 全选按钮选中；反之取消选中

首先说明一下，我使用了vuex来管理购物车数据，所有改变按钮状态的方法都写在mutaition里

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

html选择按钮部分

// 这是选择按钮，我把它封装成了一个组件  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");
},

mutations

// 单个商品选中
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;
},

因为方法涉及到一些逻辑判断，我把逻辑判断的部分都放在了actions里

// 商品状态
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;

到此这篇关于Vue实现淘宝购物车三级选中功能详解的文章就介绍到这了,更多相关Vue购物车三级选中功能内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！