功能描述

1、可单选，全选/取消全选
2、增加、减少、手动编辑商品的数量
3、根据商品的数量统计价格 

代码实现

此处省略一万字，废话不多说，直接上代码吧！

WXML静态布局、绑定“死”数据（主要功能代码）

 
  
  
  
  
 
  
  
   {{item.title}}
 
   
   
   -
   
   +
   
 
   ￥{{item.price}}
  
  
 
 
 
 
 
  
  
  全选
 
 
 去结算
 
 
 合计：￥{{totalPrice}}

WXSS：样式有点多，就不放上来啦，需要的可以留下你的邮箱地址哦 

JS：

当页面刚加载进来，当然要先onShow一下，默认全选，统计购物车里所有商品的价格。PS：这里建议用onShow，因为每次进入购物车都需要重新加载数据，而onLoad和onReady只在初始化的时候执行一次。

onShow() {
 this.getTotalPrice();
}

统计总价（该页面还有其它地方需要调用到这个方法）

// 统计总价
getTotalPrice() {
 // 获取购物车列表
 let dataArr = this.data.dataArr;
 let total = 0;
 // 循环列表
 for(let i = 0; i
选择商品（单选），通过 data-index="{{index}}" 把当前商品在列表数组中的下标传给事件，在更改单个商品的状态时，也要注意全选的状态，还有重新统计总价。
// 选择事件
selectList(e) {
 // 获取data- 传进来的index
 let index = e.currentTarget.dataset.index;
 // 获取购物车列表
 let dataArr = this.data.dataArr;
 // 获取当前商品的选中状态
 let selected = dataArr[index].selected;
 // 改变状态
 dataArr[index].selected = !selected;
 this.setData({
 dataArr: dataArr
 });
 
 // 改变全选状态
 for (var i=0; i
商品全选/取消全选，该状态更改之后也要重新统计总价哦，包括后面的，我就不再提示了
// 全选事件
selectAll(e) {
 // 是否全选状态
 let selectAllStatus = this.data.selectAllStatus;
 selectAllStatus = !selectAllStatus;
 let dataArr = this.data.dataArr;
 for (let i = 0; i < dataArr.length; i++) {
 // 改变所有商品状态
 dataArr[i].selected = selectAllStatus;
 }
 this.setData({
 selectAllStatus: selectAllStatus,
 dataArr: dataArr
 });
 // 重新统计总价
 this.getTotalPrice();
}
另外，还有增加或减少数量的方法。
温馨提示：减少数量时注意不能少于1（参考某宝商城的做法）
// 增加数量
addCount(e) {
 let index = e.currentTarget.dataset.index;
 let dataArr = this.data.dataArr;
 let num = dataArr[index].num;
 num = num + 1;
 dataArr[index].num = num;
 this.setData({
 dataArr: dataArr
 });
 // 重新统计总价
 this.getTotalPrice();
},
 
// 减少数量
minusCount(e) {
 let index = e.currentTarget.dataset.index;
 let dataArr = this.data.dataArr;
 let num = dataArr[index].num;
 if(num <= 1){
 wx.showToast({
  title: '宝贝不能再减少啦',
  icon: 'none'
 })
 return false;
 }
 num = num - 1;
 dataArr[index].num = num;
 this.setData({
 dataArr: dataArr
 });
 // 重新统计总价
 this.getTotalPrice();
}
然后，还有手动输入数量的方法
// 输入数量
inputCount(e) {
 let index = e.currentTarget.dataset.index;
 let dataArr = this.data.dataArr;
 let num = e.detail.value;
 dataArr[index].num = num;
 this.setData({
 dataArr: dataArr
 });
 // 重新统计总价
 this.getTotalPrice();
}
别忘了，手动输入数量也要有不能少于1的判断哦，我这里是在input失去焦点时做的判断，当然也是参考某宝商城的做法
// 失去焦点时判断数量是否小于1
bindblur(e) {
 let index = e.currentTarget.dataset.index;
 let dataArr = this.data.dataArr;
 let num = e.detail.value;
 if(num < 1){
 wx.showToast({
  title: '数量不能小于1',
  icon: 'none'
 })
 num = 1;
 dataArr[index].num = num;
 this.setData({
  dataArr: dataArr
 });
 // 重新统计总价
 this.getTotalPrice();
 }
}
最后，就是去结算了，在处理完一堆噼里啪啦的业务之后，跳转到结算页面
// 去结算
toOrder() {
 // 处理数据
 // *****
 // Author: Moss
 // QQ: 827291427
 // *****
 
 // 跳转结算页面
 wx.navigateTo({
 url: '/pages/shop/order/order'
 })
}