微信小程序 购物车代码

<view  wx:for="{{list}}" style="margin-left:30rpx" wx:key>
  <view bindtap="BindList" data-id="{{item.id}}" data-price="{{item.totle}}">
  
    <icon type="success" size="20" color="red" wx:if="{{item.select==true}}"/> 
    <icon type="circle" size="20"  wx:else/>
    {{item.name}}---单价：{{item.price}}
  </view>
<view class="count">
   <view class="add" bindtap="BindAdd" data-id="{{item.id}}">+</view>
   <input class="import" value="{{item.InputValue}}"  data-id="{{item.id}}" bindinput='BindInput'></input>
   <view class="reduce {{minusStatus}}" bindtap="BindReaduce" data-id="{{item.id}}">-</view>
</view>
<view>商品价格：{{item.totle}}</view>
</view>
<view>商品总价格: {{total}}</view>
<view  bindtap="BindListall" >
<icon type="success" size="20" color="red" wx:if="{{selectall==true}}"/> 
    <icon type="circle" size="20"  wx:else/>全部购物车
</view>

.checkbox{padding: 50rpx;}
.checkbox-handle{margin-bottom: 40rpx;}
.count{overflow: hidden;width:300rpx;margin-top: 50rpx}
.add{float:left;border:2rpx solid #D0CCCB;padding: 1rpx 20rpx;margin-left: 60rpx}
.import{border:2rpx solid #D0CCCB;vertical-align: top;width:80rpx;display:inline-block;text-align: center;margin-left: 12rpx;font-size:28rpx }
.reduce{float:right;display: inline-block;border:2rpx solid #D0CCCB;padding: 1rpx 20rpx}
/* .disabled{color: #ccc;}
.normal{color:#000} */

const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [{ name: '商品1', id: 1, select: false, price: 50, InputValue: 1, totle: 50 }, { name: '商品2', id: 2, select: false, price: 55, InputValue: 1, totle: 55 }, { name: '商品3', id: 3, select: false, price: 70, InputValue: 1, totle: 70 }, { name: '商品4', id: 4, select: false, price: 100, InputValue: 1, totle: 100 }],
    selectall: false,
    InputValue: 1,
    total: 0,
    minusStatus: 'disabled'
  },

  BindAdd(e){
    var that = this
    that.item_total(e, 1)
  },

  BindReaduce(e){
    var that = this
    that.item_total(e, -1)
  },

  //加减计算价格

  item_total(e,nums){
    var that = this
    var list = that.data.list
    var n = e.currentTarget.dataset.id - 1
    var num = that.data.list[n].InputValue;
    if(nums < 0){
      num--
    }else{
      num++
    }
    var minusStatus = num <= 1 ? 'disabled' : 'normal';
    if (num > 0){
      list[n].InputValue = num;
    }else{
      list[n].InputValue == 1;
    }
    list[n].totle = parseInt(list[n].InputValue) * parseInt(list[n].price)
    

    that.sum();
    that.setData({
      list: list,
      minusStatus: minusStatus
    })
  },

  // 计算总金额
  sum() {
    var that = this
    var list = that.data.list;
    var total = 0;
    for (var i = 0; i < list.length; i++) {
      if (list[i].select) {
        total += list[i].InputValue * list[i].price;
      }
    }
    var newValue = parseInt(total * 100);
    total = newValue / 100.0;
    that.setData({
      list: list,
      total: total
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that  = this
    // console.log(app.globalData.userInfo)
  },

  BindInput(e){
    var that = this
    var list = that.data.list
    var n = e.currentTarget.dataset.id -1
    list[n].totle = parseInt(e.detail.value) * parseInt(list[n].price)
    var t = "list["+n+"].totle"
    var v = "list["+n+"].InputValue"
    if (e.detail.value == ''){
      that.setData({
        [v]: 1,
        [t]: list[n].price
      })
    }
    that.setData({
      [t]: list[n].totle,
    })
  },

  //全部选择
  BindListall(e){
    var that = this
    var list = that.data.list
    var total = that.data.total
    let selectAllStatus = that.data.selectall;
    selectAllStatus = !selectAllStatus;
    var totals = 0
    for(var i = 0;i < list.length ; i++){
      list[i].select = selectAllStatus;
    }
    that.setData({
      selectall: selectAllStatus,
      list: list,
      total: totals.toFixed(2)
    })
    that.sum();
  },

  // 选择商品
  BindList(e) {
    console.log(e)
    var that = this
    const index = e.currentTarget.dataset.id-1;
    let list = that.data.list;        
    const select = list[index].select;         
    list[index].select = !select;              
    that.setData({
      list: list
    });
    that.sum(); 
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})