首页手记微信小程序实现购物车功能

微信小程序实现购物车功能

标签：

小程序源码

购物车的功能，基本上在每一个需要有支付功能的小程序中都会涉及到，最近自己也恰好在做类似的项目，于是就根据自己的想法以及参考网上的代码实现了一个小demo，效果请看下图，完整源码在此

由于WXML和WXSS代码过于简单，而且也是有些抠脚，在此不做讲解，下面直接看具体的功能代码，首先看data中的初始数据

data: {
  isAllSelect: false,
  totalMoney: 0,
  carts: [{
    imgSrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545749696672&di=31a25f2946bb876476efc397929f1d60&imgtype=0&src=http%3A%2F%2Fo4.xiaohongshu.com%2Fdiscovery%2Fw640%2F462ba43540b307990a8b4a2664b9ef20_640_640_92.jpg',
    title: "[马应龙]红霉素软膏",
    desc: '10g(1%)',
    price: 200,
    isSelect: false,
    count: {
      quantity: 2,
      min: 1,
      max: 20
    }
  }, {
    imgSrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545749696672&di=d59a2ae0dad0151c93d252d6478d8007&imgtype=0&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20140120%2F20140120153321-150550151.jpg',
    title: "[云南]白药牙膏",
    desc: '10g(1%)',
    price: 200,
    isSelect: true,
    count: {
      quantity: 5,
      min: 1,
      max: 20
    }
  }]
}

以上代码定义了是否全选的变量（isAllSelect）、商品总金额变量（totalMoney）以及商品列表（carts）。下面我们再来看看选中单个商品时触发的事件

switchSelect: function(e) {
  const index = e.currentTarget.dataset.index; // 获取data- 传进来的index
  let carts = this.data.carts; // 获取购物车列表
  let selectNum = 0; //统计选中商品
  const isSelect = carts[index].isSelect; // 获取当前商品的选中状态
  carts[index].isSelect = !isSelect; // 改变状态
  for (let i = 0; i < carts.length; i++) {
    if (carts[i].isSelect) {
      selectNum++
    }
  }
  if (selectNum == carts.length) {
    this.setData({
      isAllSelect: true
    })
  } else {
    this.setData({
      isAllSelect: false
    })
  }
  this.setData({
    carts: carts
  })
  // 计算总金额方法
  this.getTotalPrice()
}

以上代码的逻辑是这样的：从视图层接收到index值，通过该值将对应的carts数组对象中的isSelect属性取反，实现选中和未选中状态的切换。通过定义selectNum来计算选中商品的品种，如果选中所有的品种，那么全选按钮就处于激活状态；如果没有选中所有的品种，则全选按钮处于未激活状态，最后重新调用计算总额的方法。

下面是计算总额的方法，很简单，首先判断该商品是否被选中，然后商品的数量与价格互乘即可

getTotalPrice() {
  let carts = this.data.carts; // 获取购物车列表
  let total = 0;
  for (let i = 0; i < carts.length; i++) { // 循环列表得到每个数据
    if (carts[i].isSelect) { // 判断选中才会计算价格
      total += carts[i].count.quantity * carts[i].price; // 所有价格加起来
    }
  }
  this.setData({ // 最后赋值到data中渲染到页面
    carts: carts,
    totalMoney: total.toFixed(2)
  });
}

当然，商品的数量是动态的，我们通过一个方法接收视图层传递过来的index值以此来判断carts数组的下标；接收视图层传递过来的id值来判断是执行增加产品还是减少产品动作，此时对商品的减少动作得设置一个临界值，商品数量怎么说也不能为负值是吧，最后再重新计算商品总金额

quantityChange(e) {
  const index = e.currentTarget.dataset.index;
  let carts = this.data.carts;
  let quantity = carts[index].count.quantity;
  if (e.target.id == 'sub') {
    if (quantity == 0) return
    quantity -= 1
  } else if (e.target.id == 'add') {
    quantity += 1
  }
  carts[index].count.quantity = quantity
  this.setData({
    carts: carts
  })
  this.getTotalPrice()
}

最后一个方法是全选，思路也是挺简单的，给当前全选状态值取反，然后将该全选状态值赋给carts数组中所有对象里的isSelect值，以此达到一个联动的效果

selectAll(e) {
  let isAllSelect = this.data.isAllSelect; // 是否全选状态
  isAllSelect = !isAllSelect;
  let carts = this.data.carts;
  for (let i = 0; i < carts.length; i++) {
    carts[i].isSelect = isAllSelect; // 改变所有商品状态
  }
  this.setData({
    isAllSelect: isAllSelect,
    carts: carts
  });
  this.getTotalPrice(); // 重新获取总价
}