小程序购物车优化全选 反选 单选控制价格等

有需求的可以直接复制看看，几乎都会有注释

<!--pages/map/map.wxml--><view class='container'><!-- 加入的商品列表 --><view class="addGoodsList"><view class="titTop"><view class="topLeft"><image bindtap="checkBtn" src="{{checked==true?'/FuxcLrK9xqVgbhbZPtqknbFW1v5K':'/FoMPtL4s9fwsN0EJvvHVIAAJna9Q'}}"></image> <image class="tXiang" src="/@//@wine_Com_Img_size:500/500/1568130900259"></image> <text>酒闪送<text>（顺昌城内）</text></text></view><view class="topRight"><text class="wholeTwo">编辑</text></view></view><view class="containBottom" wx:for="{{goodsList}}" wx:key="{{index}}" data-index="{{index}}"><image class="wImg" catchtap="checkBtnOne" data-index="{{index}}" src="{{item.checkedOne==true?'/FuxcLrK9xqVgbhbZPtqknbFW1v5K':'/FoMPtL4s9fwsN0EJvvHVIAAJna9Q'}}"></image><view class="goodsBox goodsBoxTwo"><view class="godLst"><image class="gImg" src="/@//@wine_Com_Img_size:500/500/1568130900259"></image><view class="goodsList goodsListTwo"><text class="gTitle ">{{item.title}}</text><view class="goodsNumber"><view class="godL"><text class="zpri">¥<text class="pri">{{item.prOne}}</text></text> <text class="pri2">{{item.prTwo}}</text></view><view class="num"><image class="numImg1" bindtap="jianBtn" data-index="{{index}}" src="/Fqe7zzfze4RMeby12JlJ7iw4epGP"></image><text>{{item.num}}</text><image class="numImg2" bindtap="jiaBtn" data-index="{{index}}" src="/Fvhl1bsFLqYQMFViY2tSNm_5diTk"></image></view></view></view></view></view></view></view><!-- 加入购物车 --><view class="btnBox"><view class="Zprice"><text>¥{{price}}</text><text>含运费20元</text></view><text class="btn2">去结算</text></view><!-- 未加入购物车 --><!-- <view class="btnBox"><view class="Zprice ZpriceTwo"><text>购物车是空的</text></view><text class="btn2 needBtn">差20元起送</text><image class="gwcTwo" src="/FkYDvmvYdm09tiMW5hWon6XFLcV2"></image></view> --></view>

Page({/*** 页面的初始数据*/data: {checked: true,//全选状态count:'',//加入购物车数量price:0,//总价钱goodsList:[],goodsList:[{ title:'盛堡小麦白德国啤酒德国啤',prOne:22.5,prTwo:22.5,checkedOne: true,num: 0},{title: '盛堡小麦白德国啤酒德国啤',prOne: 22.5,prTwo: 22.5,checkedOne: true,num: 0},{title: '盛堡小麦白德国啤酒德国啤',prOne: 22.5,prTwo: 22.5,checkedOne: true,num: 0},],},// 全选checkBtn: function (e) {var that = this// 全选ICON默认选中let checked = this.data.checked;// true ----- falsechecked = !checked;// 获取商品数据let goodsList = this.data.goodsList;// 循环遍历判断列表中的数据是否选中for (let i = 0; i < goodsList.length; i++) {goodsList[i].checkedOne = checked;}// 页面重新渲染this.setData({checked: checked,goodsList: goodsList});this.zPrice()},// 单选checkBtnOne:function(e){var that = this;// 获取选中的单选框索引var index = e.currentTarget.dataset.index;// 获取到商品列表数据var goodsList = that.data.goodsList;// 默认全选that.data.checked = true;// 循环数组数据，判断----选中/未选中[selected]goodsList[index].checkedOne = !goodsList[index].checkedOne;// 如果数组数据全部为selected[true],全选for (var i = goodsList.length - 1; i >= 0; i--) {if (!goodsList[i].checkedOne) {that.data.checked = false;break;}}// 重新渲染数据that.setData({goodsList: goodsList,checked: that.data.checked})this.zPrice()},// 加数量jiaBtn: function (e){var that=thislet index = e.currentTarget.dataset.indexlet goodsList=that.data.goodsListlet num = that.data.goodsList[index].numnum=num+1goodsList[index].num=numconsole.log(that.data.goodsList[index].num)that.setData({goodsList: goodsList,addGoods: true,addGooding: false,})this.zPrice()},//减数量jianBtn: function (e) {var that = thislet index=e.currentTarget.dataset.indexlet goodsList=that.data.goodsListlet num =goodsList[index].numif (num<=0){return false;}num = num - 1goodsList[index].num = numthat.setData({goodsList: goodsList,count: that.data.goodsList[index].num,})this.zPrice()},// 计算总价zPrice(){var that = thislet goodsList=that.data.goodsList;var prc = 0;for (let i = 0; i < goodsList.length; i++) {if (goodsList[i].checkedOne){prc += goodsList[i].num * goodsList[i].prOne;}}that.setData({goodsList: goodsList,price: prc,})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {// var that = this// var prc=0;// for (let i = 0; i < that.data.goodsList.length; i++) {// var money = that.data.goodsList[i].prOne;// var cot = that.data.goodsList[i].num;// prc += money * cot;// }// that.setData({// price: prc,// })},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})

/*隐藏滚动条*/::-webkit-scrollbar {width: 0;height: 0;color: transparent;}/* pages/map/map.wxss */page{background: #fff;}/* 商品 */.goodsBox{display: flex;padding-top: 30rpx;box-sizing: border-box;}.godLst{width: 100%;display: flex;border-bottom: 1px solid #EEEEEE;margin: auto 24rpx 32rpx;}.goodsBox image{width: 178rpx;height: 168rpx;margin:0 20rpx 30rpx 0rpx;}.goodsList{width: 320rpx;}.goodsList .g1{width: 320rpx;height: 32rpx;font-family: PingFangSC-Medium;font-size: 32rpx;color: #333333;line-height: 32rpx;font-weight: 600;display: flex;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1; /* 限制在一个块元素显示的文本的行数 */-webkit-box-orient: vertical; /* 垂直排列 */word-break: break-all; /* 内容自动换行 */}.goodsList .g2{display: flex;align-items: center;justify-content: center;width: 136rpx;height: 32rpx;background: #F6F6F6;font-family: PingFangSC-Regular;font-size: 20rpx;color: #2B2B2B;line-height: 20rpx;margin:18rpx 0 22rpx 0;}.goodsList .g3{font-family: PingFangSC-Regular;font-size: 20rpx;color: #999999;letter-spacing: 0;text-align: justify;line-height: 20rpx;display: flex;margin-bottom: 16rpx;}.goodsNumber{display: flex; justify-content: space-between;/* margin-top: 16rpx; */}.godL{display: flex;}.goodsNumber .zpri{font-family: PingFangSC-Medium;font-size: 24rpx;color: #FF5C4D;letter-spacing: 0;text-align: justify;line-height: 36rpx;margin-right: 14.2rpx;}.goodsNumber .pri{font-family: PingFangSC-Medium;font-size: 32rpx;color: #FF5C4D;letter-spacing: 0;text-align: justify;line-height: 36rpx;}.goodsNumber .pri2{font-family: PingFangSC-Regular;font-size: 20rpx;color: #999999;letter-spacing: 0;text-align: justify;line-height: 40rpx;text-decoration: line-through;}.num{display: flex;justify-content: center;}.num text{font-family: PingFangSC-Regular;font-size: 28rpx;color: #2B2B2B;line-height: 48rpx;margin:0 24rpx;}.num .numImg1,.num .numImg2{width: 48rpx;height: 48rpx;margin: 0;}.num .numImg2{}/* 底部按钮 */.btnBox{width:100% ;height:98rpx;display: flex;position: fixed;bottom: 0;z-index: 60;}.Zprice{width: 470rpx;height:98rpx; background: #544F4F;display: flex;flex-direction: column;justify-content: center;padding-left: 32rpx;box-sizing: border-box;}.Zprice text:first-child{font-family: PingFangSC-Medium;font-size: 32rpx;color: #FFFFFF;letter-spacing: 0;line-height: 32rpx;margin-bottom: 8rpx;}.Zprice text:last-child{font-family: PingFangSC-Regular;font-size: 20rpx;color: #999999;letter-spacing: 0;text-align: justify;line-height: 20rpx;}.btn2{width: 280rpx;height:98rpx; background-image: linear-gradient(90deg, #FF4F4F 0%, #FF8644 100%);font-family: PingFangSC-Medium;font-size: 32rpx;color: #FFFFFF;letter-spacing: 0;text-align: center;line-height: 32rpx;display: flex;justify-content: center;align-items: center;}.gwc,.gwcTwo {width: 96rpx;height: 96rpx;position: fixed;bottom: 28rpx;left: 24rpx;z-index: 120;}.addNumber{width: 32rpx;height: 32rpx;display: flex;align-self: center;justify-content: center;position: fixed;bottom: 96rpx;left: 84rpx;z-index: 121;background: #FFDF3F;border-radius: 7.5px;font-family: PingFangSC-Medium;font-size: 24rpx;color: #2B2B2B;line-height: 24rpx;}/* 未加入购物车 */.needBtn{background: #686868 !important;}.ZpriceTwo text,.needBtn{font-family: PingFangSC-Medium !important;font-size: 32rpx !important;color: #FFFFFF !important;letter-spacing: 0 !important;line-height: 32rpx !important;}/*加入的商品列表 */.addGoodsList{width: 100%;height: 480rpx;background: #FFFFFF;}.titTop{height: 98rpx;border-bottom: 1px solid #EEEEEE;display: flex;align-items: center;justify-content: space-between;padding: 0 32rpx;box-sizing: border-box;}.topLeft,.topRight{display: flex;align-items: center;}.topLeft image,.topRight image,.wImg{width: 32rpx;height: 32rpx;margin-right: 20rpx;}.titTop .tXiang{width: 48rpx !important;height: 48rpx !important;margin-right: 16rpx !important;}.topLeft text,.topRight text{font-family: PingFangSC-Regular;font-size: 32rpx;color: #2B2B2B;text-align: center;line-height: 32rpx;}.topRight .wholeTwo{font-family: PingFangSC-Regular;font-size: 28rpx;color: #666666;text-align: right;line-height: 28rpx;}.containBottom{width: 100%;display: flex;align-items: center;padding: 0 0 0 32rpx;box-sizing: border-box;}.goodsBoxTwo{width: 670rpx !important;height: 164rpx;padding-top: 16.6rpx !important;}.goodsBoxTwo .gTitle{display: flex;width: 384rpx !important;height: 32rpx ;font-family: PingFangSC-Medium ;font-size: 32rpx ;color: #333333 ;line-height: 32rpx ;margin:32rpx 0 24rpx 0;overflow : hidden;text-overflow: ellipsis;-webkit-line-clamp: 1; /* 限制在一个块元素显示的文本的行数 */-webkit-box-orient: vertical; /* 垂直排列 */word-break: break-all; /* 内容自动换行 */}.goodsBoxTwo .gImg{width: 136.8rpx;height: 130.6rpx;} .goodsListTwo{width: 460rpx !important;}