小程序购物车商品全选，非全选，滑动删除，结算

wxml

<!-- 购物车列表 -->
    <view class='carsList'>
        <block wx:for="{{cardTeams}}" wx:key="key">
            <view class="row c-btm-list {{item.isTouchMove ? 'touch-move-active' : ''}}">
            <!--多选框-->
                <view style='width:60rpx;height:60rpx;' wx:if="{{item.stock == 0}}"></view>
                <checkbox-group class="checkbox-box" data-checkid="{{index}}"  bindchange='goodsdagou' wx:if="{{item.stock != 0}}">
                  <label class="checkbox checkboxHeight">
                    <checkbox  checked="{{item.selected}}" />
                  </label>
                </checkbox-group>
                <!-- 商品列表 -->
                <view class=' row btm-box' bindtap='goDetails' id="{{cardTeams.id}}" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="drawEnd" data-index='{{index}}'>
                  <view class='c-cont-left'>
                    <view class='c-cont-icon'>
                      <image src='{{item.img}}' mode='aspectFit'></image>
                    </view>
                  </view>
                  <view class='c-cont-right column'>
                    <view class='c-right-top'>
                      {{item.goodsName}}
                    </view>
                    <view class='c-number'>
                      累计{{item.amount}}件<text>|</text>剩余{{item.remain}}件
                    </view>
                    <view class='c-right-btm between'>
                      <view class='c-price'>
                        <text>￥</text>
                        <text>{{item.price}}</text>
                        <text>￥{{item.oldPrice}}</text>
                      </view>
                      <view class='c-shoptrolley' wx:if="{{item.stock != 0}}">
                        <view class='c-carts-num row'>
                          <view class='c-main' catchtap='getMain' data-index="{{index}}"><image src='../../images/jian.png'></image></view>
                          <view class='c-num'>{{item.shopNum}}</view>
                          <view class='c-plus' catchtap='getPlus' data-index="{{index}}"><image src='../../images/jia.png'></image></view>
                        </view>
                      </view> 
                    </view>
                  </view>
                  <view class='modal' wx:if="{{item.stock == 0}}">
                    <view class='c-cont-left'>
                      <view class='c-cont-icon'>
                        <image src='../../images/noData.png' mode='aspectFit'></image>
                      </view>
                    </view>
                  </view>
                  <!--删除  -->
                  <view class="remove" catchtap="delItem" data-index='{{index}}'>
                    <image src='/pages/images/lajitong.png' mode='widthFix'></image>
                  </view>

                </view>
            </view>
        </block>
    </view>

js

//自写假数据
const list = [
  {
    id: 0,
    img: '../../images/1.png',
    goodsName: '【精神传承】诸柑约3kg*1箱',
    price: 38.8,
    oldPrice: 55.8,
    amount: 2981,
    remain: 69,
    shopNum: 1,
    stock: 200
  },
  {
    id: 1,
    img: '../../images/2.png',
    goodsName: '【甜爽多汁】泰国小菠萝约450kg*1袋',
    price: 11.8,
    oldPrice: 20.8,
    amount: 2981,
    remain: 69,
    shopNum: 3,
    stock: 20
  },
  {
    id: 2,
    img: '../../images/2.png',
    goodsName: '【甜爽多汁】泰国小菠萝约450kg*1袋',
    price: 11.8,
    oldPrice: 20.8,
    amount: 2981,
    remain: 69,
    shopNum: 3,
    stock: 20
  },
  {
    id: 3,
    img: '../../images/1.png',
    goodsName: '【精神传承】诸柑约3kg*箱',
    price: 38.8,
    oldPrice: 55.8,
    amount: 2981,
    remain: 69,
    shopNum: 5,
    stock: 20
  }]
Page({

  /**
   * 页面的初始数据
   */
  data: {
    cardTeams: list,
    checked_all:true,     //全选
    newArr:[],            //复选框选中
    countMoney:0          //结算价格
  },
  // 购物车+
  getPlus:function(e){
    var that = this
    var cardTeams = that.data.cardTeams
    var index = e.currentTarget.dataset.index
    // console.log(index)
    var shopnum = cardTeams[index].shopNum
    shopnum++
    cardTeams[index].shopNum = shopnum
    that.setData({
      cardTeams:cardTeams
    })
    that.getTotalPrice()
  },
  // 购物车-
  getMain:function(e){
    var that = this
    var cardTeams = that.data.cardTeams
    var index = e.currentTarget.dataset.index
    // console.log(index)
    cardTeams[index].shopNum--
    if (cardTeams[index].shopNum <= 0 ){
      cardTeams[index].shopNum =1
      that.delItem(e)
    }
    console.log(cardTeams[index].shopNum)
    that.setData({
      cardTeams: cardTeams
    })
    that.getTotalPrice()
  },
  // 单选
  goodsdagou:function(e){
    // console.log(e)
    var that = this
    var num = that.data.num
    var cardTeams = that.data.cardTeams
    var index = e.currentTarget.dataset.checkid
    // console.log(index)
    var arr = that.data.newArr
    var selected = cardTeams[index].selected
    // console.log(selected)
    cardTeams[index].selected = !selected
    if(!selected){
      arr.push(index)
    }else{
      arr.pop()
    }
    console.log(arr)
    console.log(arr.length)
    if(arr.length == cardTeams.length){
      that.setData({
        checked_all: true
      })
    }else{
      that.setData({
        checked_all: false
      })
    }
    that.setData({
      cardTeams:cardTeams,
      newArr:arr
    })
    that.getTotalPrice()
  },
  // 全选
  checkedAll:function(){
    var that = this
    var selectedAll = that.data.checked_all
    selectedAll = !selectedAll
    var cardTeams = that.data.cardTeams
    var arr = []
    for(var i=0;i<cardTeams.length;i++){
      cardTeams[i].selected = selectedAll
      console.log(selectedAll)
      if(selectedAll){
        arr.push(i)
      }else{
        arr = []
      }
    }
    console.log(arr)
    that.setData({
      cardTeams:cardTeams,
      checked_all:selectedAll,
      newArr:arr
    })
    that.getTotalPrice() 
  },
  // 计算商品价格
  getTotalPrice(){
    var cardTeams = this.data.cardTeams
    var total = 0
    for(var i=0;i<cardTeams.length;i++){
      if (cardTeams[i].selected){
        total += cardTeams[i].shopNum * cardTeams[i].price
      }
    }
    this.setData({
      cardTeams:cardTeams,
      countMoney:total.toFixed(2)
    })
  },
  // 删除
  delItem: function (e) {
    var that = this;
    var index = e.currentTarget.dataset.index;
    const cardTeams = that.data.cardTeams
    wx.showModal({
      title: '提示',
      content: '确定删除吗？',
      cancelText: '否',
      confirmText: '是',
      success: function (res) {
        if (res.confirm) {
          cardTeams.splice(index, 1);
          that.setData({
            cardTeams: cardTeams
          });
          that.getTotalPrice()
        }
      }
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this
    var cardTeams = that.data.cardTeams
    var arr = that.data.newArr
    for (var i = 0; i < cardTeams.length; i++) {
      if (that.data.checked_all) {
        cardTeams[i].selected = true
        arr.push(i)
      } else {
        cardTeams[i].selected = false
        arr = []
      }
    }
    that.setData({
      cardTeams: cardTeams,
      newArr: arr
    })
    that.getTotalPrice()     //合计
  },
//滑动删除
  //手指触摸动作开始 记录起点X坐标
  touchstart: function (e) {
    //开始触摸时 重置所有删除
    this.data.cardTeams.forEach(function (v, i) {
      if (v.isTouchMove) //只操作为true的
        v.isTouchMove = false;
    })
    this.setData({
      startX: e.changedTouches[0].clientX,
      startY: e.changedTouches[0].clientY,
      cardTeams: this.data.cardTeams
    })
  },
  //滑动事件处理
  touchmove: function (e) {
    var that = this,
      index = e.currentTarget.dataset.index, //当前索引
      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
        });
    
    that.data.cardTeams.forEach(function (v, i) {
      v.isTouchMove = false
  
      //滑动超过30度角 return
      if (Math.abs(angle) > 30) return;
      if (i == index) {
        if (touchMoveX > startX) //右滑
          v.isTouchMove = false
        else //左滑
          v.isTouchMove = true
      }
   
    })
    //更新数据
    // console.log(that.data.cardTeams)
    that.setData({
      cardTeams: that.data.cardTeams
    })

  },
  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);
  },
  drawEnd:function(){

  },

})

wxss

.carsList{
  background: #fff;
  width: 100%;
  overflow: hidden;
}
.checkbox-box{
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: right;
  box-sizing: border-box;
}
.c-btm-list{
  width:100%;
  height:280rpx;
  border-bottom:1px solid rgba(193,193,193,.4);
  position:relative;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(70px);
  transform: translateX(70px);
  margin-left: -70px;
}
.c-cont-left{
  width: 220rpx;
  height: 220rpx;
}
.c-cont-icon{
  width: 180rpx;
  height: 180rpx;
  margin: 0 auto;
  margin-top: 10rpx;
}
.c-cont-right{
  width: calc(100% - 240rpx);
  height:280rpx;
  position:relative;
}
.c-right-top {
  font-size:34rpx;
  color:#111111;
  padding-top:30rpx;
  box-sizing:border-box;
}
.c-number {
  color:#9C9C9C;
  font-size:28rpx;
  margin-top:20rpx;
}
.c-right-btm {
  position:absolute;
  bottom:30rpx;
  left:0;
  right:0;
}
.between {
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.column {
  display:flex;
  flex-direction:column;
}
.row {
  display:flex;
  flex-direction:row;
  align-items:center;
}
.btm-box{
  width: 100%;
}
/* 删除 */
.remove {
  width: 70px;
  height: 100%;
  background-color: #FF2600;
  position: absolute;
  top: 0;
  right: -70px;
  color: #fff;
  display: flex;
  justify-content: center;
  font-size: 32rpx;
  align-items: center;
  text-align: center;
  z-index: 9999;
}
.remove image{
  width: 35rpx;
}
.touch-move-active {
  -webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;
}