微信小程序電商平臺購物車交互功能

微信小程序電商平臺購物車交互功能。包括選擇，改變數量，刪除
cart.wxml頁面

<block wx:for="{{items}}" wx:for-index="bindex">
  <view class='b_head'>
    <image class='b_select' src="{{item.isSelect ? '/images/common/selected.png' : '/images/common/no_select.png'}}" data-bindex="{{bindex}}" bindtap='b_select'></image>
    <view class='ruzhu' hidden="{{item.supplier_id>0 ? false :true}}">
      <text class='b_flag'>入駐商家</text>
      <text class="bname">{{item.supplier_name}}</text>
    </view>
    <view class='ziying' hidden="{{item.supplier_id == 0 ? false :true}}">-平臺自營商品-</view>
  </view>
<block wx:for="{{item.goods_list}}">
 <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-bindex="{{bindex}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove">
  <view class="content">
  <image class='select' src="{{item.isSelect ? '/images/common/selected.png' : '/images/common/no_select.png'}}" bindtap='single_select' data-bindex="{{bindex}}" data-index="{{index}}"></image> 
  <image class='thumb' src="{{item.goods_thumb}}"></image>
  <view class='name'>{{item.goods_name}}</view>
  <view class="attr">{{item.goods_attr}}</view>
  <view class='price'>￥{{item.goods_price}}</view>
  <view class="buy_num">
    <view class="stepper">
      <!-- 減號 -->
      <text class="{{minusStatus}}" data-bindex="{{bindex}}" data-index="{{index}}"  data-rec_id="{{item.rec_id}}"  bindtap="bindMinus">-</text>
      <!-- 數值 -->
      <input type="number" bindchange="bindManual" data-bindex="{{bindex}}" data-index="{{index}}"  data-rec_id="{{item.rec_id}}" value="{{item.goods_number}}" />
      <!-- 加號 -->
      <text class="normal" data-bindex="{{bindex}}"  data-index="{{index}}" data-rec_id="{{item.rec_id}}" bindtap="bindPlus">+</text>
    </view>
  </view>
  </view>
  <view class="del" catchtap="del" data-index="{{index}}" data-bindex="{{bindex}}">刪除</view>
 </view>
 </block>
</block>
<view class='bottom'>
  <view class='l'>
  <text>全選</text>
  <image class='all' src="{{all_select ? '/images/common/selected.png' : '/images/common/no_select.png'}}" data-bindex="{{bindex}}" bindtap='all_select'></image>
  </view>
  <view class='m'>
    <text>合計：</text>
    <text class='price'>￥{{total_price}}</text>
  </view>
  <view class='r'>去結算{{cart_count}}件</view>
</view>

cart.wxss 頁面

 /*頭部  */
.b_head{
  width: 750rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 24rpx;
  border-bottom: 2rpx #ccc solid;
  padding: 0 20rpx;
  box-sizing: border-box;
  background: #F5F5F5;
}
.b_head .b_select{
  width: 34rpx;
  height: 34rpx;
  float: left;
  margin-top:16rpx;
}
.b_head .ziying{
  margin-left: 50rpx;
  color: #C62127;
}
.b_head .ruzhu .b_flag{
  margin-left:10rpx;
  color: #C62127;
}
.b_head .ruzhu .bname{
  margin-left:20rpx;
}
.touch-item {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  border-bottom:2rpx solid #ccc;
  width: 750rpx;
  overflow: hidden
}
.content {
  width: 750rpx;
  padding: 20rpx;
  line-height: 44rpx;
  margin-right:0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(180rpx);
  transform: translateX(180rpx);
  margin-left: -180rpx;
  box-sizing:border-box;
  font-size: 24rpx;
}
.content .select{
  width: 34rpx;
  height: 34rpx;
  float: left; 
  margin-top:80rpx;
}
.content .thumb{
  width: 180rpx;
  height: 180rpx;
  margin-left:10rpx;
  float: left; 
}
.content .name{
  width: 460rpx;
  height: 84rpx;
  margin-left: 60rpx;
  line-height: 42rpx;
  margin-top:0rpx;
  overflow: hidden;
  padding: 10rpx 20rpx;
  box-sizing: border-box;
}
.content .attr{
  width: 470rpx;
  line-height: 21rpx;
  margin-top:10rpx;
  padding: 10rpx 20rpx;
  margin-left:222rpx;
  color:#ccc;
}
.content .price{
  width: 200rpx;
  height: 22rpx;
  line-height: 22rpx;
  margin-top:10rpx;
  color: #C62127;
  float: left;
  padding: 10rpx 20rpx;
  box-sizing: border-box;
}
.del {
  background-color: #C62127;
  width: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  -webkit-transform: translateX(180rpx);
  transform: translateX(180rpx);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.touch-move-active .content,
.touch-move-active .del {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
/*購買  */
.content .buy_num {
  margin-top:10rpx;
  margin-bottom: 10rpx;
  font-size: 24rpx;
  float: left;
}
.content .buy_num .font_num{
  margin-left: 20rpx;
}
/*主容器*/
.content .buy_num .stepper {
    width: 200rpx;
    height: 52rpx;
    /*給主容器設一個邊框*/
    border: 2rpx solid #ccc;
    border-radius: 3px;
    margin-left:40rpx;
  margin-top:20rpx;
}

/*加號和減號*/
.content .buy_num .stepper text {
    width: 58rpx;
    line-height: 52rpx;
    text-align: center;
    float: left;
}

/*數值*/
.content .buy_num .stepper input {
    width: 80rpx;
    height: 52rpx;
    float: left;
    margin: 0 auto;
    text-align: center;
    font-size: 32rpx;
    /*給中間的input設置左右邊框即可*/
    border-left: 2rpx solid #ccc;
    border-right: 2rpx solid #ccc;
}

/*普通樣式*/
.content .buy_num .stepper .normal{
    color: black;
}
/*禁用樣式*/
.content .buy_num .stepper .disabled{
    color: #ccc;
}
.bottom{
  position: fixed;
  width:750rpx;
  height: 100rpx;
  background: #fff;
  border: 2rpx #ccc solid;
  bottom: 0;
}
.bottom .l{
  width: 150rpx;
  height: 100rpx;
  background:#fff;
  float: left;
  line-height: 100rpx;
  font-size: 28rpx;
  display: table-cell;
  vertical-align: middle;
  padding: 0rpx 10rpx;
  box-sizing: border-box;
}
.bottom text{
  vertical-align: middle;
}
.bottom .l image{
  width: 34rpx;
  height: 34rpx;
  vertical-align:middle;
  margin-left:10rpx;
}
.bottom .m{
  width: 360rpx;
  height: 100rpx;
  background: #fff;
  float: left;
  font-size: 28rpx;
  line-height: 100rpx;
  text-align: right;
  padding: 0 40rpx;
  box-sizing: border-box;
}
.bottom .m .price{
  color: #C62127;
}
.bottom .r{
  width: 240rpx;
  height: 100rpx;
  background: #C62127;
  margin-left:510rpx;
  color: #fff;
  line-height: 100rpx;
  text-align: center;
  font-size: 30rpx;
}

cart.js頁面

var app = getApp();
app.globalData.binding = 1;
var common = require('../../utils/common.js');
Page({
  data: {
    items: [{ "supplier_id": "5", "supplier_name": "\u79c0\u8863\u574a", "supplier_phone": "13125374143", "is_self": false, "isSelect": true, "goods_list": [{ "goods_id": "34", "rec_id": "294019", "goods_name": "\u5c0f\u897f\u88c5\u5973\u5916\u5957\u77ed\u6b3e\u957f\u88962016\u6625\u79cb\u4fee\u8eab\u663e\u7626\u97e9\u7248\u5f00\u886b\u4f11\u95f2\u897f\u670d\u4e0a\u8863\u767e\u642d", "goods_price": "176.00", "goods_number": "7", "goods_thumb": "http:\/\/fq89.cn\/images\/201608\/thumb_img\/_thumb_P_1470023358722.jpg", "goods_attr": "\u5c3a\u7801:l[1] \u989c\u8272:\u6d45\u8c46\u7eff[6] ", "isTouchMove": false, "isSelect": true }, { "goods_id": "34", "rec_id": "294007", "goods_name": "\u5c0f\u897f\u88c5\u5973\u5916\u5957\u77ed\u6b3e\u957f\u88962016\u6625\u79cb\u4fee\u8eab\u663e\u7626\u97e9\u7248\u5f00\u886b\u4f11\u95f2\u897f\u670d\u4e0a\u8863\u767e\u642d", "goods_price": "176.00", "goods_number": "1", "goods_thumb": "http:\/\/fq89.cn\/images\/201608\/thumb_img\/_thumb_P_1470023358722.jpg", "goods_attr": "\u5c3a\u7801:xl[4] \u989c\u8272:\u6df1\u7070\u8272[7] ", "isTouchMove": false, "isSelect": true }] }, { "supplier_id": "181", "supplier_name": "ZF\u98df\u54c1\u5c0f\u767e\u8d27", "supplier_phone": "15359855075", "is_self": false, "isSelect": true, "goods_list": [{ "goods_id": "14336", "rec_id": "294008", "goods_name": "\u65e0\u6dfb\u52a0 \u8d35\u5dde\u7279\u4ea7\u9999\u8fa3\u8c46\u74e3\u9171 \u7092\u83dc\u70f9\u996a\u706b\u9505\u8c03\u5473 \u80dc\u90eb\u53bf\u8c46\u74e3\u9171 500g", "goods_price": "40.00", "goods_number": "1", "goods_thumb": "http:\/\/fq89.cn\/images\/201701\/thumb_img\/_thumb_P_1485827377913.jpg", "goods_attr": "\u5c5e\u6027:\u8c46\u74e3\u9171[] ", "isTouchMove": false, "isSelect": true }] }],
    startX: 0, //開始座標
    startY: 0,
    all_select:true,//全選
    cart_count:9,//總數量
    total_price: 1448.00,//總金額
  },
  onLoad: function () {
    new app.WeToast();
    //未綁定跳轉到綁定 暫時註釋
    // if (app.globalData.binding == 0 || app.globalData.token ==''){
    //     wx.redirectTo({
    //       url: '../binding/binding',
    //     })
    // }
    //暫時註釋
    // this.get_cart();
  },
  //手指觸摸動作開始 記錄起點X座標
  touchstart: function (e) {
    var curBindex = e.currentTarget.dataset.bindex;//當前組索引
    var curIndex = e.currentTarget.dataset.index;//當前商品索引
    var items = this.data.items;
    //遍歷修改滑動狀態
    for(var i=0; i<items.length;i++){
      for(var j=0; j<items[i].goods_list.length;j++){
        if (items[i].goods_list[j].isTouchMove){
          items[i].goods_list[j].isTouchMove = false;
        }
      }
    }
    //更新座標與數據
    this.setData({
      startX: e.changedTouches[0].clientX,
      startY: e.changedTouches[0].clientY,
      items:items
    })
  },
  //滑動事件處理
  touchmove: function (e) {
      var that = this,
      curIndex = e.currentTarget.dataset.index,//當前索引
      curBindex = e.currentTarget.dataset.bindex,//當前組索引
      startX = that.data.startX,//開始X座標
      startY = that.data.startY,//開始Y座標
      touchMoveX = e.changedTouches[0].clientX,//滑動變化座標
      touchMoveY = e.changedTouches[0].clientY,//滑動變化座標
      //獲取滑動角度
      angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
      var items = that.data.items;
      var len = items[curBindex].goods_list.length;
      for (var i = 0; i < len; i++) {
        items[curBindex].goods_list[i].isTouchMove = false;
        if (Math.abs(angle) > 30) return;//滑動超過30度角return
        if (i == curIndex) {
          if (touchMoveX > startX){ 
            //右滑
            items[curBindex].goods_list[i].isTouchMove =false;
          }else{ //左滑
            items[curBindex].goods_list[i].isTouchMove = true
          }  
        }  
      }
    //更新數據
    that.setData({
      items:items
    })
  },
  /**
   * 計算滑動角度
   * @param {Object} start 起點座標
   * @param {Object} end 終點座標
   */
  angle: function (start, end) {
    var _X = end.X - start.X,
      _Y = end.Y - start.Y
    //返回角度 /Math.atan()返回數字的反正切值
    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
  },
  //刪除事件
  del: function (e) {
    var curBindex = e.currentTarget.dataset.bindex;
    var curIndex = e.currentTarget.dataset.index;
    var items = this.data.items;
    items[curBindex].goods_list.splice(curIndex,1);//彈出指定位置元素
    this.setData({
      items:items
    });
    this.clear_item();
  },
  /* 點擊減號 */
  bindMinus: function (e) {
    var items = this.data.items,
    curBindex = e.currentTarget.dataset.bindex,
    curIndex = e.currentTarget.dataset.index;
    // 如果大於1時，纔可以減
    if (items[curBindex].goods_list[curIndex].goods_number > 1) {
      items[curBindex].goods_list[curIndex].goods_number--;
    }
    // 只有大於一件的時候，才能normal狀態，否則disable狀態
    var minusStatus = items[curBindex].goods_list[curIndex].goods_number <= 1 ? 'disabled' : 'normal';
    // 將數值與狀態寫回
    this.setData({
      items: items,
    });
    this.re_count();//重新計算
  },
  bindPlus: function (e) {
    var items = this.data.items,
      curBindex = e.currentTarget.dataset.bindex,
      curIndex = e.currentTarget.dataset.index;
    // 不作過多考慮自增1
    items[curBindex].goods_list[curIndex].goods_number++;
    // 只有大於一件的時候，才能normal狀態，否則disable狀態
    var minusStatus = items[curBindex].goods_list[curIndex].goods_number < 1 ? 'disabled' : 'normal';
    // 將數值與狀態寫回
    this.setData({
      items: items,
    });
    this.re_count();//重新計算
  },
  /* 輸入框事件 */
  bindManual: function (e) {
    var items = this.data.items,
      curBindex = e.currentTarget.dataset.bindex,
      curIndex = e.currentTarget.dataset.index;
    var num = e.detail.value;
    if (isNaN(num)) {
      num = 1;
    }
    items[curBindex].goods_list[curIndex].goods_number = num;
    // 將數值與狀態寫回
    this.setData({
      items: items,
    });
    this.re_count();//重新計算
  },
  //把該組整體取消選中
  b_select:function(e){
    var curBindex = e.currentTarget.dataset.bindex;
    var items = this.data.items;
    var len = items[curBindex].goods_list.length;
    var selectStatus = items[curBindex].isSelect;
    if(selectStatus === false){
      items[curBindex].isSelect = true;
    }else{
      items[curBindex].isSelect =false;
    }
    for(var i=0; i<len;i++){
      if(selectStatus === false){
          items[curBindex].goods_list[i].isSelect = true;
      }else{
        items[curBindex].goods_list[i].isSelect = false;
      }
    }
    //全選按鈕
    var all_select;
    var ilen = items.length;//店數
    var num = 0;
    for(var j=0;j<ilen;j++){
      if(items[j].isSelect === true){
        num++;
      }
    }
    if(num == ilen){
      all_select = true;
    }else{
      all_select = false;
    }
    this.setData({
      all_select:all_select,
      items:items
    });
    //重新計算
    this.re_count();
  },
  //單選
  single_select:function(e){
      var items = this.data.items;
      var curBindex = e.currentTarget.dataset.bindex;
      var curIndex = e.currentTarget.dataset.index;
      //改變當前按鈕
      if(items[curBindex].goods_list[curIndex].isSelect){
        items[curBindex].goods_list[curIndex].isSelect = false;
      }else{
        items[curBindex].goods_list[curIndex].isSelect = true;
      }
      console.log(items[curBindex]);
      //先改變當前組的狀態
      var ilen = items.length;
      var len = items[curBindex].goods_list.length;
      var inum=0,num=0,all_select;
      for(var j=0;j<len;j++){
        if (items[curBindex].goods_list[j].isSelect === true){
          num++;
        }
      }
      if(num == len){
        items[curBindex].isSelect = true;
      }else{
        items[curBindex].isSelect = false;
      }
      //改變全選狀態
      for(var i=0; i<ilen;i++){
        if(items[i].isSelect === true){
          inum++;
        }
      }
      if(inum == ilen){
        all_select = true;
      }else{
        all_select = false;
      }
      this.setData({
        items:items,
        all_select:all_select,
      });
      //重新計算
      this.re_count();
  },
  //全選
  all_select:function(){
    var all_select = this.data.all_select;
    var items = this.data.items;
    if(all_select === false){
      //全選
      for (var i = 0; i < items.length; i++) {
        items[i].isSelect = true;
        for (var j = 0; j < items[i].goods_list.length; j++) {
          items[i].goods_list[j].isSelect = true;
        }
      }
      all_select = true;
    }else{
      //取消全選
      for (var i = 0; i < items.length; i++) {
        items[i].isSelect = false;
        for (var j = 0; j < items[i].goods_list.length; j++) {
          items[i].goods_list[j].isSelect = false;
        }
      }
      all_select = false;
    }
    this.setData({
      items:items,
      all_select:all_select
    });
    //重新計算
    this.re_count();
  },
  get_cart:function(){
    wx.showLoading({
      title: '加載中',
    })
    var that = this;
    wx.request({
      url: app.globalData.host +'/index.php/app/cart/get_cart_list',
      data: {token: app.globalData.token},
      method:'post',
      header: { "Content-Type": "application/x-www-form-urlencoded" },
      success:function(res){
        if(res.data.code === 2000){
          console.log(res);
          that.setData({
            items: res.data.data.cart_list,
            total_price: res.data.data.total_price,
            cart_count: res.data.data.cart_count
          });
        }else if(res.data.code == 8003){
          that.relogin();
        }else{
          that.wetoast.toast({
            title:res.data.msg,
            duration:1000
          });
        }
         wx.hideLoading();
      },
      fail:function(){
        that.wetoast.toast({
          title: '網絡錯誤',
          duration: 1000
        });
      }
    })
  },
  //重新登錄
  relogin: function () {
    var that = this;
    wx.login({
      success: function (res) {
        wx.request({
          url: app.globalData.host + '/index.php/app/user/login',
          data: { code: res.code },
          header: { "Content-Type": "application/x-www-form-urlencoded" },
          method: 'post',
          success: function (res) {
            if (res.data.code == 2000) {
              app.globalData.token = res.data.token;
              app.globalData.binding = res.data.binding;
              that.get_cart();
            } else {
              that.wetoast.toast({
                title: '登錄過期請退出重新進入',
                duration: 1000,
              });
            }
          },
          fail: function (res) {
            that.wetoast.toast({
              title: '通訊失敗',
              duration: 1000,
            });
          },
        })
      }
    })
  },
  clear_item:function(){
    var items = this.data.items;
    for(var i=0;i<items.length;i++){
      if(items[i].goods_list.length==0){
        items.splice(i,1);
      }
    }
    this.setData({
      items:items
    });
    this.re_count();
  },
  //重新計算
  re_count:function(){
    var items = this.data.items,
    total_price=0.00,
    cart_count =0;
    for(var i=0;i<items.length;i++){
      for(var j=0;j<items[i].goods_list.length;j++){
        if (items[i].goods_list[j].isSelect===true){
          cart_count += parseInt(items[i].goods_list[j].goods_number);
          total_price += parseInt(items[i].goods_list[j].goods_number) * parseFloat(items[i].goods_list[j].goods_price);
        } 
      }
    }
    this.setData({
      total_price:common.number_format(total_price,2,'.',','),
      cart_count:cart_count,
    });
  }
})