首页 » 网络编程 » Vue

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

Vue 2022-01-13

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

效果图:

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

实现:

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

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

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

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

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

ass="jb51code">
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购物车三级选中功能内容请搜索www.580doc.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.580doc.com!


上一篇:详解vue使用Echarts画柱状图下一篇:Vue生态的新成员Pinia的详细介绍
程序园_程序员的世界 Copyright © 2020- www.580doc.com. Some Rights Reserved.