微信小程序实现电商的购物车页面

效果如图：

思路讲解：
{id:1,name:‘西瓜’,src:‘…/…/img/01.png’,color:‘white’,dprice:40,zprice:0,num:0},

通过颜色来判断是否被选中，color为白色表示没有被选中，green表示选中，dprice表示单价，zprice:0表示总价，单价*数量就是总价，点击一次+或者-钱的总量就+或者-单价，num表示商品的数量

Page({
  data: {
    //sum用来计算钱的总量
    sum:0,
    //k用来判断是否已经全选
    k:0,
    //t用来判断单选点击了几个
    t:0,
    //color用来控制全选的背景色
    color:'white',
    list:[
      {id:1,name:'西瓜',src:'../../img/01.png',color:'white',dprice:40,zprice:0,num:0},
      {id:2,name:'冰淇淋',src:'../../img/02.png',color:'white',dprice:40,zprice:0,num:0},
      {id:3,name:'虾',src:'../../img/03.png',color:'white',dprice:40,zprice:0,num:0},
      {id:4,name:'汉堡',src:'../../img/11.png',color:'white',dprice:40,zprice:0,num:0},
      {id:5,name:'蜂蜜',src:'../../img/09.png',color:'white',dprice:40,zprice:0,num:0},
      {id:6,name:'樱桃',src:'../../img/06.png',color:'white',dprice:40,zprice:0,num:0},
      {id:7,name:'酒水',src:'../../img/07.png',color:'white',dprice:40,zprice:0,num:0},
      {id:8,name:'口红',src:'../../img/08.png',color:'white',dprice:40,zprice:0,num:0},
    ]
  },
  select:function(e){
    console.log('选择了某个商品');
    //获取当前点击的id
    var id = e.currentTarget.dataset.id-1;
    //拼接数组对象的color属性的字符串
    var color = "list[" + id + "].color";
    //获取当前商品的总价
    var znum = this.data.list[id].zprice;
    


    //获取当前的总金额
    var sumx = this.data.sum;
    //选择某个商品
    if(this.data.list[id].color == 'white'){

      var cs = this.data.t+1;
      console.log(cs);
      this.setData({
        t:cs
      })

      //单选次数等于列表的数量，表示全选
      if(this.data.t==this.data.list.length){
        this.setData({
          color:'green'
        })
      }

      //总金额加上当前商品的金额
      sumx = sumx+znum;
      //设置属性
      this.setData({
        sum:sumx,
        [color] : "green"
      })
    }
    //取消选择
    else{
      
      var cs = this.data.t-1;
      
      this.setData({
        t:cs
      })
      
      //单选次数等于列表的数量，表示全选
      if(this.data.t!=this.data.list.length){
        this.setData({
          color:'white'
        })
      }

      //总金额减去当前商品的金额
      sumx = sumx-znum;
      //设置属性
     //获取当前列表商品的单价字符串
     var dprice = "list[" + id + "].dprice";
     //获取当前列表商品的总价字符串
      var zprice = "list[" + id + "].zprice";
      var num = "list[" + id + "].num";
      this.setData({
        sum:sumx,
        [color] : "white",
        [zprice]:0,
        [num]:0
      })


    }

    //判断选择了几个（判断商品的总价格）
  },
  //全选
  selectall:function(){
    var money=0;
    //k==0表示没有全选
    if(this.data.k==0){
      
      //获取全部列表的属性
      var list = this.data.list;
      //len为列表的长度
      var len = list.length;
      console.log(len);
      //把全部列表的属性背景色变成绿色
      for(var i=0;i<list.length;i++){
        //获取当前商品的总价
        var num = this.data.list[i].zprice;
        //拼接数组对象的color属性的字符串
        var color = "list[" + i + "].color";
           //计算总金额
           money+=num;
          this.setData({
            //k设置为1
            k:1,
            [color] : "green",
            t:len
          })
      }
      this.setData({
        color:'green',
        sum:money
     })
    }
    else{
      //获取全部列表的属性
      var list = this.data.list;
      
      //把全部列表的属性背景色变成绿色
      for(var i=0;i<list.length;i++){
        //获取当前商品的金额
        var num = this.data.list[i].price;
        //计算总金额
        money-=num;
        //拼接数组对象的color属性的字符串
        var color = "list[" + i + "].color";
        //获取当前列表商品的总价字符串
        var zprice = "list[" + i + "].zprice";
        var num = "list[" + i + "].num";
          this.setData({
            //k设置为0
            k:0,
            [color] : "white",
            [zprice]:0,
            [num]:0,
            cs:0
          })
      }
      this.setData({
        color:'white',
        sum:0
     })
    }
  },


  add:function(e){
    console.log('add');
    //获取当前列表元素的id
    var id = e.currentTarget.dataset.id-1;
    //获取当前列表商品的数量字符串和数量+1
    var num = "list[" + id + "].num";
    var k=this.data.list[id].num+1;
    console.log(k);
    //获取当前列表商品的单价字符串
    var dprice = "list[" + id + "].dprice";
    //获取当前列表商品的总价字符串
    var zprice = "list[" + id + "].zprice";
    //把金额设置为数量*单价
    var money=this.data.list[id].dprice*k;
    //获取当前的总价钱
    var t=this.data.sum;
    //总价钱加单价
    t=t+this.data.list[id].dprice;
    //拼接数组对象的color属性的字符串
    var color = "list[" + id + "].color";

    if(this.data.list[id].color=='white'){
      var cs = this.data.t+1;
      console.log(cs);
      this.setData({
        t:cs
      })
      //单选次数等于列表的数量，表示全选
      if(this.data.t==this.data.list.length){
        this.setData({
          color:'green'
        })
      }

    }
    this.setData({
      [color]:'green',
      [num]:k,
      [zprice]:money,
      sum:t,
    })
  },

  jian:function(e){
     //获取当前列表元素的id
     var id = e.currentTarget.dataset.id-1;
     //获取当前列表商品的数量字符串和数量-1
     var num = "list[" + id + "].num";
     var k=this.data.list[id].num-1;
     //获取当前列表商品的单价
    var dprice = "list[" + id + "].dprice";
    //获取当前列表商品的总价
    var zprice = "list[" + id + "].zprice";
    //把金额设置为数量*单价
    var money=this.data.list[id].dprice*k;
    //获取当前的总价钱
    var t=this.data.sum;
    //总价钱减去单价
    if(this.data.list[id].color=='green'){
      var cs = this.data.t-1;
      this.setData({
        t:cs
      })
       //单选次数等于列表的数量，表示全选
       if(this.data.t!=this.data.list.length){
        this.setData({
          color:'white'
        })
      }
    }
   if(k>=0){
      t=t-this.data.list[id].dprice;
    } 
    if(t<0){
      t=0;
    }
    //拼接数组对象的color属性的字符串
    var color = "list[" + id + "].color";
    if(k<=0){
      this.setData({
        [color]:'white',
        [num]:0,
        [zprice]:0,
        sum:t,
      })
    }else{
      this.setData({
        [num]:k,
        [zprice]:money,
        sum:t
      })
    }
  }

})

wxml:

<view class="pay">
  <view class="selectAll">
    <view bindtap="selectall" style="background-color: {{color}};"></view>
  </view>
  <view class="priceSum">合计:{{sum}}</view>
  <view class="money">去结算</view>
</view>
<view class="v1">
  <scroll-view scroll-y="true" style="height: 400px;">
    <block wx:for="{{list}}" wx:key="id">

      <view class="v2">
        <view class="v21">
          <view class="v211" bindtap="select" style="background-color:{{item.color}};" data-id="{{item.id}}" data-num="{{item.num}}"></view>
        </view>
        <view class="v22">
          <image src="{{item.src}}"></image>
        </view>
        <view class="v23">
          <view class="v231">
            {{item.name}}
          </view>
          <view class="v232">
            <view class="v2321">
            ￥：{{item.zprice}}
            <text>\n 单价：{{item.dprice}}</text>
            </view>
            <view class="v2322" bindtap="jian" data-id="{{item.id}}">-</view>
            <view class="v2323">{{item.num}}</view>
            <view class="v2324" bindtap="add" data-id="{{item.id}}">+</view>
          </view>
        </view>
      </view>
    </block>
  </scroll-view>

 
 
</view>

wxss:

.v2{
  width: 100%;
  height: 80px;
  margin-top: 20px;
  display: flex;
  border: 1px solid red;
}
.v21{
  flex: 1;
  background-color: black;
}
.v21 .v211{
  width: 15px;
  height: 15px;
  border: 1px solid green;
  cursor: pointer;
  margin-top: 30px;
  margin-left: 30px;
  border-radius: 50%;
}
.v22{
  flex: 1;
  background-color: pink;
}
.v23{
  text-align: center;
  flex: 3;
  display: flex;
  flex-direction: column;
  
}
.v23 view{
  flex: 1;
  
}
image{
  width: 100%;
  height: 100%;
}
.v231{
  background-color: gray;
  line-height: 40px;
}
.v232{
  text-align: center;
  display: flex;
  line-height: 40px;
  
}
.v232 .v2321{
  flex: 3;
  font-size: 10px;
  line-height: 20px;
  border: 1px solid green;
}
.v232 .v2322{
  flex: 1;
  border: 1px solid green;
  cursor: pointer;
}
.v232 .v2323{
  flex: 2;
  border: 1px solid green;
}
.v232 .v2324{
  flex: 1;
  border: 1px solid green;
  cursor: pointer;
}
.pay{
  width: 100%;
  height: 50px;
  bottom: 10px;
  left: 0;
  background-color: yellow;
  display: flex;
}
.pay .selectAll{

  flex: 1;
  background-color: tomato;
}
.pay .selectAll view{
  width: 20px;
  height: 20px;
  border: 1px solid black;
  border-radius: 50%;
  margin-top: 15px;
  margin-left: 5px;
  cursor: pointer;
}
.pay .priceSum{
  flex: 4;
  background-color: violet;
  line-height: 50px;
  text-align: center;
}
.pay .money{
  flex: 4;
  background-color: white;
  text-align: center;
  line-height: 50px;
  color: black;
  cursor: pointer;
  background-color: red;
}