wxml

<view class="shoppingCart">
    <view class="allGoods">
        <checkbox-group bindchange="sel" wx:if="{{goodsArr}}">
            <view class="goodsBox" wx:for="{{goodsArr}}" wx:key="{{item.id}}">
                <checkbox class="check" checked="{{item.isSel}}" value="{{index}}" />
                <view class="goodsDetail">
                    <image mode="aspectFit" class="goodsImg" src="{{item.img_url}}" />
                    <view class="goods">
                        <view class="goodsDesc">{{item.desc}}</view>
                        <view class="countPrice">
                            <text  class="price">{{item.price}}</text> 
                            <view class="count">
                                <text bindtap="numBtn" data-type="+" data-id="{{index}}">+</text>
                                <text class="num">{{item.number<100?item.number:"1+"}}</text>
                                <text bindtap="numBtn" data-type="-" data-id="{{index}}">-</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="del"><icon bindtap="del" type="cancel" data-id="{{index}}" /></view>
            </view> 
        </checkbox-group>
    </view>
    <view class="totalPrice">
        <checkbox-group bindchange="selAll" class="checkAll">
            <label>
                <checkbox value="{{selAll}}" checked="{{selAll}}" />
                全选
            </label>
        </checkbox-group>
        <view>
            <text class="tPrice">合计：￥{{totalPrices}}</text>
            <text class="settlement">结算</text>
        </view>
    </view>
</view>

wxss

/* 购物车 */
.allGoods{
    margin-bottom: 160rpx;
}
.goodsBox{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx;
    margin: 80rpx 0;
}
.goodsDetail{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.goodsImg{
    width: 200rpx;
    height: 100rpx;
    padding: 0 8rpx;
}
.goods{
    padding: 0 26rpx 0 14rpx;
}
.goodsDesc{
    font-size: 26rpx;
    line-height: 1.5;
}
.countPrice{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
}
.price{
    font-size: 28rpx;
    color: red;
}
.count{
    font-size: 24rpx;
    display: flex;

}
.count text{
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
    border: 1px solid #666;
    text-align: center;
    line-height: 30rpx;
    margin: 0 6rpx;
}
.count .num{
    border: 1px solid #ff0000;
    line-height: 32rpx;
}
.totalPrice{
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx;
    box-sizing: border-box;
    background: #fff;
}
.checkAll,.tPrice{
    font-size: 30rpx;
}
.settlement{
    display: inline-block;
    width: 172rpx;
    height: 92rpx;
    text-align: center;
    line-height: 92rpx;
    background: orange;
    margin-left: 20rpx;
}

js

// pages/shoppingCart/shoppingCart.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    goodsArr: "", //购物车商品列表
    totalPrices: 0, //购物车总价格
    selAll:false
  },
  // 购物车商品列表数据请求
  getData() {
    let that = this;
    wx.showLoading({
      title: "加载中"
    })
    wx.request({
      url:"https://www.easy-mock.com/mock/5cc6aa1374833c2de422e373/shoop/shoop",
      method:"get",
      success(res){
        wx.hideLoading();
        // 给每一个条目添加一个属性用于判断是否选中商品
        res.data.data.forEach(val=>{
          val.isSel = false
        })
        that.setData({
          goodsArr: res.data.data
        })
      }
    })
  },
  del(e){//删除商品条目
    this.data.goodsArr.splice(e.target.dataset.id,1);
    this.setData({
      goodsArr:this.data.goodsArr
    })
    this.computedPrice();
  },
  numBtn(e){//控制商品数量的按钮
    let data = e.target.dataset;
    let goodsArr = this.data.goodsArr;
    if(data.type=="+"){
      goodsArr[data.id].number++;
    }else{
      if(goodsArr[data.id].number>1){
        goodsArr[data.id].number--;
      }
    }
    this.setData({
      ["goodsArr["+data.id+"].number"]: goodsArr[data.id].number
    })
    this.computedPrice();
  },
  computedPrice(){//计算总价格
    let goods = this.data.goodsArr;
    let totalP = 0;
    // let res = goods.filter((val,index)=>{
    //   if(val.isSel){//筛选选中的商品
    //     return val;
    //   }
    // })
    // res.forEach(val=>{//计算选中商品的总价格
    //   totalP += val.price*val.number
    // })
    goods.forEach(val=>{
      if(val.isSel){
        totalP += Number(val.price*val.number)
      }
    })
    console.log(totalP);
    this.setData({
      totalPrices: totalP.toFixed(2)
    })
  },
  sel(e){//单独选中一个商品
    let selArr = e.detail.value;
    if(selArr.length==this.data.goodsArr.length){
      this.setData({
        selAll:true
      })
    }else{
      this.setData({
        selAll:false
      })
    }
    this.data.goodsArr.forEach((val,index)=>{
      console.log(index);
      if(selArr.indexOf(index.toString()) != -1){
        this.setData({
          ["goodsArr["+index+"].isSel"]:true
        })
      }else{
        this.setData({
          ["goodsArr["+index+"].isSel"]:false
        })
      }
    })
    this.computedPrice();
  },
  selAll(e){//全选
    this.data.goodsArr.forEach((val,index)=>{
      if(e.detail.value.length==0){
        this.setData({
          ["goodsArr["+index+"].isSel"]:false
        })
      }else{
        this.setData({
          ["goodsArr["+index+"].isSel"]:true
        })
      }
    })
    this.computedPrice();
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

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

  },

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

  },

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

  },

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

  },

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

  }
})