效果如图：
思路讲解：
{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('选择了某个商品');//获取当前点击的idvar 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设置为1k: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设置为0k:0,[color] : "white",[zprice]:0,[num]:0,cs:0})}this.setData({color:'white',sum:0})}},add:function(e){console.log('add');//获取当前列表元素的idvar id = e.currentTarget.dataset.id-1;//获取当前列表商品的数量字符串和数量+1var 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){//获取当前列表元素的idvar id = e.currentTarget.dataset.id-1;//获取当前列表商品的数量字符串和数量-1var 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;}
