微信小程序 “万利商城”实战之十： 商品列表页加入购物车功能的实现

加入购物车功能的基本实现是这样的：

用户点击“加入购物车” ， 小程序将该商品信息发送到服务器记录下来，

同时页面上“加入购物车”的按钮变成一个输入框，用户可以增加/减少商品数量，

当用户点“购物车” Tabbar时，切换到shoppingcart/shoppingcart.wxml页面，

此页面显示购物车中的商品列表，页面效果如下 ：

接下来我们就来编码完成加入购物车的功能。

先在index.wxml中加入如下的代码 ，见红色部分：

<view class="detail1">
    <text>{{index}} {{item.productName}}</text>
    <text>{{item.price}}</text>
    <text>{{item.originalPrice}}</text>
    
 6     <view class="qtyinfo1" wx:if="{{item.inShoppingCart==0}}">
 7       <button class="button1" data-productid="{{item.productId}}" data-index="{{index}}" bindtap="addToShoppingCart">加入购物车</button>
 8     </view>
 9     <view class="qtyinfo1" wx:else>
10       <text class="minus1" data-productid="{{item.productId}}" data-index="{{index}}" bindtap="tapMinus">-</text>
11       <input class="qty1" type="text" data-productid="{{item.productId}}" data-index="{{index}}" value="{{item.productQty}}" />
12       <text class="plus1" data-productid="{{item.productId}}" data-index="{{index}}" bindtap="tapPlus">+</text>      
13     </view>

  </view>

  1 . 首先要在productList这个json数组中加入2个字段 “inShoppingCart”和"productQty" ,

“inShoppingCart”用来记录当前商品是否已经被加入了购物车，"productQty"用来记录用户购买的数量。

代码如下：

var products=[
          {'productId':111,'productName':'女装T恤简洁11','price':12.9,'originalPrice':22.9,'imageUrl':'../../images/product11.jpg',
          'inShoppingCart':0,'productQty':1},
          {'productId':122,'productName':'女装T恤简洁22','price':15.9,'originalPrice':25.9,'imageUrl':'../../images/product22.jpg',
          'inShoppingCart':1,'productQty':1},
          {'productId':133,'productName':'女装T恤简洁33','price':18.9,'originalPrice':38.9,'imageUrl':'../../images/product33.jpg',
          'inShoppingCart':0,'productQty':1},
          {'productId':144,'productName':'女装T恤简洁44','price':18.9,'originalPrice':38.9,'imageUrl':'../../images/product44.jpg',
          'inShoppingCart':0,'productQty':1}
        ];

 

2 . 当用户点“加入购物车”按钮时候要将按钮隐藏起来，变成可以加减商品数量的控件，所以在index.wxml中需要做一个判断，

微信小程序在标签中加判断用wx:if这个属性，可以搭配wx:else来使用，这里我们用wx:if="{{item.inShoppingCart==0}}"

做判断。

3 . <button class="button1" data-productid="{{item.productId}}" data-index="{{index}}"

bindtap="addToShoppingCart">加入购物车</button>是一个按钮控件，

上面定义了一个点击函数addToShoppingCart，需要在index.js中完成相关逻辑，

data-productid="{{item.productId}}" 是将当前商品的productId值传给addToShoppingCart 函数，

小程序的传值非常简单，任意定义一个变量（这里是productId），在变量前面加上data- 作为属性，后面放值就可以了。

然后在addToShoppingCart 函数中就可以用下面的方式取值来用：

let productId = options.currentTarget.dataSet.productid; 

4 . <view class="qtyinfo1" wx:else></view>用来显示一个输入框和加/减数量的按钮，让用户可以增减商品数量。

5 . bindtap="tapMinus" 和 bindtap="tapPlus" 定义了2个方法tapMinus和tapPlus，

分别对应增加数量和减少数量的操作，我们要在index.js中实现这个逻辑。

data-productid="{{item.productId}}" data-index="{{index}}"是传递给函数的值。

 

index.wxss中定义的样式如下 ：

.button1   /*加入购物车按钮样式，height和line-height设置成一样让文字垂直居中对齐*/ 2 {
  height: 80rpx;
  line-height: 80rpx;
  background-color: antiquewhite;
}
.qtyinfo1    /*加减数量区块的样式及标签布局方式*/
{ 
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; 
  margin-left: 60rpx;
}
.plus1{      /*加数量的样式*/
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  border:solid 4rpx #c0c0c0;
  border-left: 0;
  background-color: aquamarine;
  font-size: 20pt;
  text-align: center;
  border-top-right-radius: 20rpx;   /*右上边框设置成圆角*/
  border-bottom-right-radius: 20rpx;  /*右下边框设置成圆角*/
}
.qty1{
  width: 120rpx;
  height: 80rpx;
  line-height: 80rpx;
  border:solid 4rpx #c0c0c0;
  background-color: aquamarine;
  text-align: center;
}
.minus1{
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  border:solid 4rpx #c0c0c0;
  border-right:0;
  background-color: aquamarine;
  font-size: 20pt;
  text-align: center;
  border-top-left-radius: 20rpx;   /*左上边框设置成圆角*/
  border-bottom-left-radius: 20rpx;   /*左下边框设置成圆角*/
}

 

index.js中给对应的事件编码 ：

  addToShoppingCart: function (options) { 
    let productId = options.currentTarget.dataset.productid;
    let index = options.currentTarget.dataset.index;

    this.saveShoppingCart(1, index, productId, 1);
  },

  tapMinus: function (options) { 
    let productId = options.currentTarget.dataset.productid;
    let index = options.currentTarget.dataset.index;

    let qty = this.data.productList[index].productQty
    let newQty = qty-1; 
    if(newQty<1)
    {
      wx.showToast({title: '数量不能小于1!' });
      return false;
    }
 
    this.saveShoppingCart(2, index, productId, newQty);
  },
  tapPlus: function (options) { 
    let productId = options.currentTarget.dataset.productid;
    let index = options.currentTarget.dataset.index;

    let qty = this.data.productList[index].productQty
    let newQty = qty+1;
    if(newQty>99)
    {
      wx.showToast({title: '数量不能大于99!'});
      return false;
    }
 
    this.saveShoppingCart(3, index, productId, newQty);
  },

  saveShoppingCart: function (operationType, productIndex, productId, productQty) {  
    var _this=this;
    wx.request({
      url: 'http://www.tm.com/webapi/shoppingcart',
      data:{
        'operationType':operationType,
        'productIndex':productIndex,
        'productId':productId,
        'productQty':productQty
      },
      method:'GET',
      success:function(res){

        _this.setData({['productList['+productIndex+'].productQty']:productQty});
        wx.showToast({title: 'Success'});
        if (operationType=1)
        {
          _this.setData({['productList['+productIndex+'].inShoppingCart']:1});
        }
      }
    })
  },

 

不论是添加商品到购物车，还是增减购物车中商品数量，都需要将商品信息（包括商品名称、价格、数量）保存到服务器，

本质上都是对数据库中商品的数量做的修改，所以我们定义了一个公共的函数

saveShoppingCart: function (operationType, productIndex, productId, productQty) { } 来执行数据库操作，各个函数说明如下：

加入购物车：

addToShoppingCart: function (options) { 
    let productId = options.currentTarget.dataset.productid;  //获取index.wxml中 传递过来的productId值，注意名称与data-productId一致
    let index = options.currentTarget.dataset.index;  //获取index.wxml中 传递过来的index值
    //将当前商品的索引值 、productId值、数量传递到函数中（加入购物车可以理解为商品数量是0+1），然后更新到服务器上处理。
    this.saveShoppingCart(1, index, productId, 1);  
  },

 减少商品数量：

tapMinus: function (options) { 
    let productId = options.currentTarget.dataset.productid;  //获取index.wxml中 传递过来的productId值，注意名称与data-productId一致
    let index = options.currentTarget.dataset.index;  //获取index.wxml中 传递过来的index值
    
    let qty = this.data.productList[index].productQty;  //抓取当前数量
    let newQty = qty-1; //数量-1
    if(newQty<1)  //数量小于1时给出提示并终止后面的操作
    {
      wx.showToast({title: '数量不能小于1!' });
      return false;
    }
    //将当前商品的索引值 、productId值、数量传递到函数中，然后更新到服务器上处理。
    this.saveShoppingCart(2, index, productId, newQty);
  },

增加商品数量 ：

tapPlus: function (options) { 
    let productId = options.currentTarget.dataset.productid;  //获取index.wxml中 传递过来的productId值，注意名称与data-productId一致
    let index = options.currentTarget.dataset.index;  //获取index.wxml中 传递过来的index值

    let qty = this.data.productList[index].productQty;  //抓取当前数量
    let newQty = qty+1;  //数量+1
    if(newQty>99)  //数量大于99时给出提示并终止后面的操作
    {
      wx.showToast({title: '数量不能大于99!'});
      return false;
    }
    //将当前商品的索引值 、productId值、数量传递到函数中，然后更新到服务器上处理。
    this.saveShoppingCart(3, index, productId, newQty);
  },

 更新服务器 ：

saveShoppingCart: function (operationType, productIndex, productId, productQty) {  
    var _this=this;
    wx.request({
      url: 'http://www.tm.com/webapi/shoppingcart',
      data:{  //将服务器需要的数据都传递过去，实际项目可以根据需要加其他的参数
        'operationType':operationType,
        'productIndex':productIndex,
        'productId':productId,
        'productQty':productQty
      },
      method:'GET',
      success:function(res){
        //服务器更新成功就用setData()函数将数量设置到该商品的输入框中， 只有调用此函数页面的值才会变化，
        _this.setData({['productList['+productIndex+'].productQty']:productQty});
        wx.showToast({title: 'Success'});
        if (operationType=1)
        {//点加入购物车的按钮时需要用setData()函数更新inShoppingCart的值，按钮就会变成加减和输入框，让用户知道购买了此商品并可以去修改数量
          _this.setData({['productList['+productIndex+'].inShoppingCart']:1});
        }
      }
    })
  },

 至此，添加商品到购物车的功能就完成了， 在服务器端需要设计一个购物车表 ，基本结构如下 ：

字段	说明
product_id	商品编号
product_qty	购买数量
shoppingcart_key	购物车编号，多个商品加入购物车的时候这个值是相同的
add_time	创建时间
add_user	创建人

 

 服务器端的代码在介绍后端开发的时候单独讲，这里略过。