shopping_cart.wxml页面:
<!--pages/shopping_cart/shopping_cart.wxml-->
<view class='all'>
<view class='top'>
<image class='top_bg' src='../../img/top_cart.png'></image>
<view class='top_index'>购物车({{list_cart.length}})</view>
<view class='top_edit'>编辑</view>
</view>
<!--是否全选 s -->
<view class='total'>
<view class="allSelect">
<icon wx:if="{{selectAllStatus}}" type='circle' color='#D9BE64' size="20" bindtap='selectAll'></icon>
<icon wx:else type="success" color='#D9BE64' size="20" data-select="{{allSelect}}" bindtap="selectAll" />
<view class="allSelect-text">商品</view>
</view>
</view>
<!--是否全选 e -->
<!--勾选商品 s -->
<view class='commSelect' wx:for="{{list_cart}}" wx:key="{{index}}">
<icon wx:if="{{item.selected}}" type='circle' color='#D9BE64' size="20" data-index="{{index}}" bindtap="selectList"></icon>
<icon wx:else type='success' color='#D9BE64' size="20" data-index="{{index}}" bindtap="selectList"></icon>
<view class='commSelects'>
<view class='commSelect_left'>
<image class='commSelect_left_bg' src='{{item.imgs}}'></image>
</view>
<view class='commSelect_right'>
<view class='text' wx:if="{{item.text}}">{{item.text}}</view>
<view class='msg'>{{item.msg}}</view>
<view class='mon_num'>
<view>¥{{item.mon}}</view>
<view class='num'>
<view bindtap='subCount' data-index='{{index}}'>-</view>
<view>{{item.num}}</view>
<view bindtap='addCount' data-num='{{num}}' data-index='{{index}}'>+</view>
</view>
</view>
<view class='pri_storage'>
<view wx:if="{{item.pri}}">已降¥{{item.pri}}</view>
<view wx:if="{{item.storage}}">{{item.storage}}</view>
</view>
</view>
</view>
</view>
<view class='fulls'>
<view class='full'>【满减】再购2件立享【满3件减10元】</view>
</view>
<!--勾选商品 e -->
<!--结算 s -->
<view class='settlement'>
<view class='settlement_left'>
<view>不含运费 已省:¥{{freight}}</view>
<view class='mons_total'>¥{{mons_total}}</view>
</view>
<navigator>
<view class='settlement_right'>去结算({{check_num}})</view>
</navigator>
</view>
<!--结算 e -->
</view>
 
 
 
shopping_cart.js界面:
 
// pages/shopping_cart/shopping_cart.js
Page({
/**
* 页面的初始数据
*/
"data": {
"check_num":0, //勾选的个数 默认开始为0
"freight":0, //不含运费已省
// "list_cart":[], //购物车列表
"mons_total":0, //购物总价,默认开始为0
"selectAllStatus": true, //全选状态,默认全选
"allSelect":"circle",
"list_cart":[
{
"imgs":"../../img/del/Group_comm.png",
"text":false,
"msg":"有机特级初榨橄榄油有机特级初榨橄榄油 750ml",
"mon":"148.00",
"num":"2",
"pri":"12.00",
"storage":"库存仅剩 3 件",
"selected":true
},
{
"imgs": "../../img/del/Group_comm.png",
"text": "”每人限购3件,超出件数按原价计算”",
"msg": "有机特级初榨橄榄油有机特级初榨橄榄油 750ml",
"mon": "148.00",
"num": "2",
"pri": false,
"storage": false,
"selected": true
},
{
"imgs": "../../img/del/Group_comm.png",
"text": false,
"msg": "有机特级初榨橄榄油有机特级初榨橄榄油 750ml",
"mon": "148.00",
"num": "2",
"pri": false,
"storage": false,
"selected": true
},
{
"imgs": "../../img/del/Group_comm.png",
"text": false,
"msg": "有机特级初榨橄榄油有机特级初榨橄榄油 750ml",
"mon": "148.00",
"num": "2",
"pri": false,
"storage": false,
"selected": true
},
{
"imgs": "../../img/del/Group_comm.png",
"text": false,
"msg": "有机特级初榨橄榄油有机特级初榨橄榄油 750ml",
"mon": "148.00",
"num": "2",
"pri": false,
"storage": false,
"selected": true
}
]
},
"onload":function(e){

  },


  /**
   * 生命周期函数--监听页面加载
   */


  /**
   * 当前商品选中事件
   */
  selectList:function(e){
    var index = e.currentTarget.dataset.index;
    var list_cart = this.data.list_cart;
    var selected = list_cart[index].selected;
    list_cart[index].selected = !selected;
    console.log(list_cart[index].selected.length+"fdsafsadfaf")
    var selectAllStatus = this.data.selectAllStatus;
    console.log(selectAllStatus)
    this.getTotalPrice();   //重新获取总价格
    var t = this.getTotalPrice();
    console.log(index)
    if(t== list_cart.length){
      console.log(1111111);
      this.data.selectAllStatus=false;
    } else{
      this.data.selectAllStatus =true;
    }
    this.setData({
      list_cart: list_cart,
      selectAllStatus: this.data.selectAllStatus
    });
  },

  /**
   * 当前商品全选事件
   */
  selectAll: function (e) {
    var selectAllStatus = this.data.selectAllStatus;
    selectAllStatus = !selectAllStatus;
    var list_cart = this.data.list_cart;
    for (var i = 0; i < list_cart.length ; i++){
      list_cart[i].selected = selectAllStatus;
    }
    this.setData({
      selectAllStatus:selectAllStatus,
      list_cart:list_cart
    });
    this.getTotalPrice();
  },

  /**
   * 数量的加的事件绑定
   */
  addCount:function(e){
    var index = e.currentTarget.dataset.index;  //获取当前的下标
    var list_cart = this.data.list_cart;
    var num = parseInt(list_cart[index].num);
    num = num + 1;
    list_cart[index].num = num
    this.setData({
      list_cart: list_cart
    });
    this.getTotalPrice();
  },


  /**
   * 数量的减的事件绑定
   */
  subCount:function(e){
    var index = e.currentTarget.dataset.index;
    var list_cart = this.data.list_cart;
    var num = parseInt(list_cart[index].num);
    if(num <= 1){
      return false;
    }
    num = num - 1;
    list_cart[index].num = num;
    this.setData({
      list_cart: list_cart
    });
    this.getTotalPrice();
  },


  /**
   * 计算总价
   */
  getTotalPrice(){
    var list_cart = this.data.list_cart  //获取购物车列表
    var total = 0;
    var aa = 0;
    var bb = 0;
    for (var i = 0; i < list_cart.length; i++) {   // 循环列表得到每个数据
      if (!list_cart[i].selected){    //判断选中才会计算价格
        if(list_cart[i].pri != false){
          aa +=  list_cart[i].pri*list_cart[i].num;
        }
        bb = bb + 1;
        total += parseInt(list_cart[i].num)*list_cart[i].mon;
      }
    }
    this.setData({    // 最后赋值到data中渲染到页面
      list_cart: list_cart,
      mons_total: total.toFixed(2),
      freight:aa.toFixed(2),
      check_num:bb.toFixed(0)
    })
    return bb;
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
 
  },

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

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

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

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

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

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
 
  }
});
 
 
shopping_cart.wxss页面:
 
/* pages/shopping_cart/shopping_cart.wxss */
.top{
height:70rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0rpx 40rpx;
border-bottom: 1rpx solid #706565;
}
.top_bg{
width: 18rpx;
height: 33rpx;
}
.top_index{
font-size: 32rpx;
color: #222222;
}
.top_edit{
font-size: 30rpx;
color: #222222;
}
.total{
width: 750rpx;
height: 68rpx;
display: flex;
flex-direction: row;
">#F6F6F6;
align-items: center;
}
.allSelect{
display: flex;
flex-direction: row;
align-items: center;
padding-left:25rpx;
}
.allSelect-text{
font-size: 29rpx;
color: #666666;
padding-left:20rpx;
}
.commSelect{
height: 270rpx;
display: flex;
flex-direction: row;
align-items: center;
padding-left:25rpx;
padding-bottom: 40rpx;
}
.commSelects{
width: 610rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.commSelect_left{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.commSelect_right{
width: 375rpx;
padding-top: 35rpx;
}
.text{
font-size: 22rpx;
color: #FD7070;
}
.msg{
font-size: 26rpx;
color: #222222;
box-shadow: #000000;
}
.commSelect_left_bg{
width: 202rpx;
height: 217rpx;
}

.mon_num{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 28rpx;
  padding: 30rpx 0rpx 20rpx 0rpx;
  color: #222222;
  box-shadow: #000000;
}
.num{
  width: 145rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.pri_storage{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 22rpx;
  color: #9B9580;
}
.all{
  position: relative;
}
.fulls{
  width: 662rpx;
  border-top: 1rpx solid #9B9580;
  position: absolute;
  left: 91rpx;
  top: 413rpx;
}
.full{
  width: 460rpx;
  height: 40rpx;
  font-size: 26rpx;
  ">#EBEAE6;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top:20rpx; 
  color: #9B9580;
}

/*结算 s  */
.settlement{
  display: flex;
  flex-direction: row;
  position: fixed;
  left: 0rpx;
  top: 1100rpx;
  ">#F6F6F6;
}
.settlement_left{
  width: 530rpx;
  height: 90rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.mons_total{
  margin: 0rpx 30rpx 0rpx 30rpx;
}
.settlement_right{
  width: 220rpx;
  height: 90rpx;
  ">#9B9580;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #ffffff;
}
/*结算 e  */