微信小程序之购物车

原文地址：我的博客

 实现增加商品的数量

思路：当用户点击增加按钮时，商品数量 +1 ,同时向后台发送增加商品数量的请求，这里没有实现超过库存就禁止增加数量，如果想做这个功能就加一个判断就可以了，判断当前的数量(增加后的)是否大于库存数量，如果大于库存数量则不发送请求同时商品数量不允许再增加

上代码

// 添加按钮被点击
  addButtonClick:function(tap){
    var that = this;
    var user_data = wx.getStorageSync('user_data');   //获取缓存里面的用户信息
    const index = parseInt(tap.currentTarget.id);     //获取当前的商品的索引值
    let dataSource = that.data.dataSource;            //购物车所有的商品数据
    let quantity = dataSource[index].quantity;        //获取购买数量
    quantity = quantity + 1;                          //将购买数量 +1
    dataSource[index].quantity = quantity;            //更改当前商品的数量
    that.setData({
      dataSource: dataSource                          //更新商品数据
    });
    wx.request({
      url: url,                                       
      data: {                                         //发送给后端的参数
        "cart_id": dataSource[index].cart_id,
        "q": dataSource[index].quantity,
        "id": dataSource[index].goods_id,
        "uid": user_data.uid
      },
      method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {

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

 

实现减少商品数量和删除商品

思路：当用户点击减少按钮时，商品数量 -1 ，同时发送减少商品数量的请求，如果商品数量小于1,则发送删除商品请求，成功之后刷新当前页面
Tips: 刷新页面的目的是重新获取一次数据，这里我的获取数据是写在 onShow() 这个生命周期里，所以当用户删除商品成功以后执行 onShow() 这个生命周期函数

上代码

// 减少按钮被点击
  reduceButtonClick:function(tap){
    var that = this;
    var user_data = wx.getStorageSync('user_data');
    const index = parseInt(tap.currentTarget.id);
    let dataSource = that.data.dataSource[index];
    let quantity = dataSource.quantity;         //获取购买数量
    if (quantity == 1) {                        //判断是否等于1
      wx.showModal({
        title: '提示',
        content: '确定将  ' + dataSource.name + '  移出购物车吗？',
        success: function (sm) {
          if (sm.confirm) {
            var tempData = that.data.dataSource;    //所有商品数据
            tempData.splice(index, 1);              //从当前索引值开始删除1项数据
            that.setData({
              dataSource: tempData                  //更新数据
            })
            wx.request({
              url: url,                             //发送删除请求
              data: {
                "cart_id": dataSource.cart_id,
                "uid": user_data.uid
              },
              method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
              // header: {}, // 设置请求的 header
              header: {
                'content-type': 'application/json'
              },
              success: function (res) {
                that.onShow()                       //删除成功之后刷新当前页面
              },
            })
          } else if (sm.cancel) {
            return false;
          }
        }
      })
    } else {                                       //如果商品数量不等于 1                                 
      var dataSource_2 = that.data.dataSource;            
      var quantity2 = quantity - 1;
      dataSource_2[index].quantity = quantity2;
      this.setData({
        dataSource: dataSource_2
      });
      wx.request({
        url: url,
        data: {
          "cart_id": dataSource_2[index].cart_id,
          "q": dataSource_2[index].quantity,
          "id": dataSource_2[index].goods_id,
          "uid": user_data.uid
        },
        method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
        // header: {}, // 设置请求的 header
        header: {
          'content-type': 'application/json'
        },
        success: function (res) {
          
        },
      })
    }
    that.getTotalPrice();                           //重新计算总价格
  },
  /**计算总价格  */
  getTotalPrice() {
    let good = this.data.dataSource;                  // 获取购物车列表
    let total = 0;
    for (let i = 0; i < good.length; i++) {           // 循环列表得到每个数据
      if (good