小程序 购物车

首先我们要拆分一下购物车的功能点
1.商品选中功能，包括单选、全选
2.商品数量加减功能
3.商品的总数量计算
4.商品的总价钱计算
大致分为以上四点了，现在我们来一个个实现
首先呢，我们现在js的data里放入一些数据

//code表示编号,name商品名称,url图片地址,style类型说明，price价格，select是否选中,num购买数量

list:[{
      code:"0001",
      name:"无人机",
      url:"http://i1.mifile.cn/a1/pms_1487824962.01314237!220x220.jpg",
      style:"低配版",
      price:"4999",
      select:"circle",
      num:"1"
    },
    {
      code: "0002",
      name: "智能手环",
      url: "http://i1.mifile.cn/a1/pms_1467962689.97551741!220x220.jpg",
      style: "2代",
      price: "149",
      select: "circle",
      num: "1"
    },{
      code: "0003",
      name: "指环支架",
      url: "http://i2.mifile.cn/a1/pms_1482221011.26064844.jpg",
      style: "金色",
      price: "19",
      select: "circle",
      num: "1"
    }]

然后呢，我们wxml文件中的选中框这么写

<icon type="{{item.select}}" size="26" data-index="{{index}}" data-select=‘’{{item.select}}" bindtap="change"/>

type为success时是选中状态，circle为未选中
当用户点击时通过change方法传入data-index和data-select
为了确定被点击的商品和该商品是否选中
然后change方法

//改变选框状态

 change:function(e){
var that=this
//得到下标
var index = e.currentTarget.dataset.index
//得到选中状态
var select = e.currentTarget.dataset.select

if(select == "circle"){
   var stype="success"
}else{
   var stype="circle"
}
//把新的值给新的数组
   var newList= that.data.list
   newList[index].select=stype
    //把新的数组传给前台
    that.setData({
      list:newList
    })

其实就是每次点击就更改我们的商品数组里面的信息
全选功能也就简单了
点击的时候遍历数组嘛，把select属性都变成success就行了

//全选
allSelect:function(e){
  var that=this
  //先判断现在选中没
  var allSelect = e.currentTarget.dataset.select
  var newList = that.data.list
  if(allSelect == "circle"){
    //先把数组遍历一遍，然后改掉select值
    for (var i = 0; i < newList.length; i++) {
      newList[i].select = "success"
    }
    var select="success"
  }else{
   //取消全选
    for (var i = 0; i < newList.length; i++) {
      newList[i].select = "circle"
    }
    var select = "circle"
  }
  that.setData({
    list:newList,
    allSelect:select
  })
}

好，现在接着下面一个功能，商品加减
现在后面做法基本都一样
点击加减，改变list里面的num就行了
我这里默认商品最大数量为99件，当为0的时候就移除该商品
wxml代码

	<view class="num-box">
                    <view class="btn-groups">
                           <button class="goods-btn btn-minus" data-index="{{index}}" data-num="{{item.num}}" bindtap="subtraction">—</button>
                          <view class="num">{{item.num}}</view>
                          <button class="goods-btn btn-add" data-index="{{index}}" data-num="{{item.num}}" bindtap="addtion">+</button>
                    </view>
    </view>

点击时还是带两个信息，一个是data-index确定是那个商品被点击，data-num确定当前的数量

 //加法
   addtion:function(e){
    var that=this
    //得到下标
    var index = e.currentTarget.dataset.index
    //得到点击的值
    var num = e.currentTarget.dataset.num
    //默认99件最多
    if(num<100){
      num++
    }
    //把新的值给新的数组
    var newList = that.data.list
    newList[index].num =num
   
    //把新的数组传给前台
    that.setData({
      list: newList
    })
  },
  //减法
subtraction:function(e){
  var that = this
  //得到下标
  var index = e.currentTarget.dataset.index
  //得到点击的值
  var num = e.currentTarget.dataset.num
  //把新的值给新的数组
  var newList = that.data.list
  //当1件时，点击移除
  if (num == 1) {
      newList.splice(index,1)
  }else{
    num--
    newList[index].num = num
  }
  
  //把新的数组传给前台
  that.setData({
    list: newList
  })
}

计算总数量这个不要太简单
遍历list，把每个item的num属性加起来就OK了

//计算数量
countNum:function(){
  var that=this
  //遍历数组，把既选中的num加起来
  var newList = that.data.list
  var allNum=0
  for (var i = 0; i < newList.length; i++) {
        if(newList[i].select=="success"){
          allNum += parseInt(newList[i].num) 
        }
  }
  parseInt
  console.log(allNum)
  that.setData({
    num:allNum
  })
}

最后一个也简单，遍历数组把每个item的num*price加起来就OK了

//计算金额方法
count:function(){
  var that=this 
  //思路和上面一致
  //选中的订单，数量*价格加起来
  var newList = that.data.list
  var newCount=0
  for(var i=0;i<newList.length;i++){
    if(newList[i].select == "success"){
      newCount += newList[i].num * newList[i].price
    }
  }
  that.setData({
    count:newCount
  })
}

最后呢，我们在点击加减或者是选中的操作方法的结尾，调用上面的两个计算方法就行了
链接：http://pan.baidu.com/s/1pLv2USj 密码：4bri