小程序全套购物车（全选 单选 反选 删除 价格计算）

<!-- 最外层视图pages --><view class="pages"><view wx:if="{{hasList}}"><!-- 编辑 --><view class='cartHeader'><view class='logo'><image src='http://192.168.3.30/images/imageTu/logo.png'></image><text>天兰茶府自营</text></view><view class='edit'><label class='edit_btn' bindtap='btn_edit'>{{edit_name}}</label></view></view><!-- 列表 --><view class="list" wx:for="{{list}}" wx:key="{{index}}"><image class='dele_edit' bindtap='deletes' data-index='{{index}}' style='display:{{edit_show}}' src='http://192.168.3.30/images/imageTu/enshrine.png'></image><!-- radio选择IOCN --><icon wx:if="{{item.selected}}" type="success" color="#405A8F;" data-index="{{index}}" size='18' class="radio_chek" bindtap="selectList" /><icon wx:else type="circle" class="radio_chek" data-index="{{index}}" size='18' bindtap="selectList" /><!-- 列表标题 --><text class="list_name">{{item.title}}</text><!-- 列表商品图片 --><image class="list_img" src="{{item.image}}"></image><!-- 规格 --><text class="cart_g_name">规格 : {{item.pro_name}}</text><!-- 价格 --><text class="list_price">￥{{item.price}}</text><!-- 商品数量加减 style='display:{{show_edit}}'--><view style='display:{{show_edit}}'><view class="carts-num"><!--减按钮 --><lable class="minus" bindtap="btn_minus" data-obj="{{obj}}" data-index="{{index}}">-</lable><!-- 文本框值 --><label class="view_text_center" bindinput='input_num' data-index="{{index}}">{{item.num}}</label><!-- 加按钮--><lable class="plus" bindtap="btn_add" data-index="{{index}}">+</lable></view></view></view></view><view wx:else><view class="list_none">购物车是空的哦~</view></view></view><!-- 固定底部 --><view class="cont_bot"><!-- 全选ICON --><icon wx:if="{{selectAllStatus}}" type="success" color="#405A8F;" size='20' class="total-select" bindtap="selectAll" /><!-- else --><icon wx:else type="circle" color="#999" class="total-select" size='20' bindtap="selectAll" /><!-- 全选标题 --><text class='sel_count_name'>全选</text><!-- 合计金额 --><lable class="count_price"><view> <text>不含运费</text></view><view>合计：<text>￥{{totalPrice}}</text></view></lable><!-- 提交订单 --><label class='submit' bindtap='btn_submit_order'>去结算（1）</label></view>

page{height:100%;}.pages{background:#f3f3f3;width:100%;min-height:100%;border:1px solid transparent;}.pages>view{width:90%;margin: 30rpx auto;background: #fff;border-radius:25rpx;border:1px solid transparent;padding-bottom:30rpx;}/* 列表 */.list{position: relative;width: 100%;height: 185rpx;/* border-bottom: 1rpx solid #e9e9e9; */background: #FAFAFA;margin-top:20rpx;}/* 编辑 */.cartHeader{display: flex;justify-content: space-between; align-items: center;padding:10rpx 30rpx;border:1px solid transparent;position: relative;}.cartHeader .logo image{width:30rpx;height:30rpx;display: inline-block;vertical-align: middle;}.cartHeader .logo text{display: inline-block;vertical-align: middle;font-size:28rpx;font-family:NotoSansHans-Regular;font-weight:400;color:rgba(48,48,48,1);margin-left:15rpx;}.edit{height:60rpx;line-height:70rpx;font-size:24rpx;}/* 删除 */.dele_edit{position: absolute;width: 40rpx;height: 40rpx;right: 30rpx;bottom: 25rpx;}/* 编辑标题 */.edit_btn{position: absolute;font-size: 24rpx;color: #36A661;right: 30rpx;}/* 单选状态 */.radio_chek{position: absolute;left: 30rpx;top: 70rpx;width:37rpx;height: 37rpx;}/* 列表商品图片 */.list_img{position: absolute;top: 38rpx;left: 100rpx;width:118rpx;height:118rpx;}/* 列表规格 */.cart_g_name{position: absolute;left: 280rpx;font-size: 26rpx;color: #aaa;top: 75rpx;}/* 收藏 */.collert{position: absolute;font-size: 28rpx;right: 40rpx;top: 30rpx;}/* 收藏图标 */.collert_img{position: relative;top: 2rpx;width: 28rpx;height: 28rpx;}/* 列表商品名称 */.list_name{position: absolute;left: 280rpx;top: 30rpx;width: 350rpx;/* background-color: red; */font-size: 30rpx;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}/* 列表商品价格 */.list_price{position: absolute;font-size: 30rpx;color: #3CA65E;left: 280rpx;bottom: 20rpx;}/* 列表商品删除 */.list_del{position: absolute;right: 220rpx;bottom: 20rpx;width: 40rpx;height: 40rpx;line-height: 40rpx;text-align: center;font-size: 44rpx;}/* 固定底部 */.cont_bot{position: fixed;bottom: 0;width: 100%;height: 104rpx;line-height:104rpx;background: #fff;border-top: 2rpx solid #ebebeb;}/* 全选ICON */.total-select{position: absolute;left: 30rpx;top: 30rpx;width: 40rpx;height: 40rpx;}/* 全选标题 */.sel_count_name{position: absolute;left: 90rpx;top: 6rpx;font-size: 30rpx;color: #333;}/* 合计金额 */.count_price{position: absolute;font-size:28rpx;left: 230rpx;color: #aaa;}.count_price > view{height:50rpx;line-height:50rpx;color:#231D1E;}.count_price > view:first-child text{float:right;font-size:24rpx;color:#5D5D5D;}.count_price view:last-child text{font-size: 30rpx;color: #3CA65E;}/* 购物车为空 */.list_none{padding:40rpx 0;color: #999;text-align: center;}/* 提交 */.submit{position: absolute;width: 274rpx;height: 104rpx;line-height: 104rpx;right: 0rpx;font-size: 30rpx;text-align: center;color:#fff;background:linear-gradient(90deg,rgba(123,202,110,1) 0%,rgba(47,163,93,1) 100%);}.navigator-hover{background: none;}/*数量加减*/.carts-num{position: absolute;right: 30rpx;bottom: 23rpx;/* background-color: red; */display: flex; align-items: center; text-align: center;height: 50rpx;}.view_text_center{border: 1rpx solid #ebebeb;font-size: 30rpx; display: inline-block;color: #333;height: 50rpx;line-height: 50rpx;width: 76rpx;}.carts-num .minus, .carts-num .plus{margin: 10rpx; border: 1rpx solid #ebebeb;color: #000;text-align: center;height: 50rpx; line-height: 50rpx;width: 40rpx;}.carts-num .minus{font-size: 34rpx;}/* .carts-num .minus.disabled{color: red;} */.carts-num .plus{font-size: 34rpx;}

var numbers = 1;var bool = true;Page({data: {show_edit: "block",edit_name: "编辑",edit_show: "none",// list: [],// 购物车列表// hasList: false,// 列表是否有数据// 默认展示数据hasList: true,// 商品列表数据 list: [{id: 1,title: '园艺大师抗皱精华露园艺大师抗皱精华露园艺大师抗皱精华露',image: '../../images/cup.png',pro_name: "30ml",num: 1,price: 180,selected: true},{id: 2,title: '伊芙琳玫瑰护手霜',image: '../../images/cup.png',pro_name: "25g",num: 1,price: 62,selected: true},{id: 2,title: '燕麦山羊乳舒缓护手霜',image: '../../images/cup.png',pro_name: "75ml",num: 1,price: 175,selected: true}],// 金额totalPrice: 0, // 总价，初始为0// 全选状态selectAllStatus: true, // 全选状态，默认全选 },onShow() {wx.showToast({title: '加载中',icon: "loading",duration: 1000})// 价格方法this.count_price();},/*** 当前商品选中事件*/selectList(e) {var that = this;// 获取选中的radio索引var index = e.currentTarget.dataset.index;// 获取到商品列表数据var list = that.data.list;// 默认全选that.data.selectAllStatus = true;// 循环数组数据，判断----选中/未选中[selected]list[index].selected = !list[index].selected;// 如果数组数据全部为selected[true],全选for (var i = list.length - 1; i >= 0; i--) {if (!list[i].selected) {that.data.selectAllStatus = false;break;}}// 重新渲染数据 that.setData({list: list,selectAllStatus: that.data.selectAllStatus})// 调用计算金额方法 that.count_price();},// 编辑btn_edit: function () {var that = this;if (bool) {that.setData({edit_show: "block",edit_name: "取消",show_edit: "none"})bool = false;} else {that.setData({edit_show: "none",edit_name: "编辑",show_edit: "block"})bool = true;}},// 删除deletes: function (e) {var that = this;// 获取索引const index = e.currentTarget.dataset.index;// 获取商品列表数据let list = this.data.list;wx.showModal({title: '提示',content: '确认删除吗',success: function (res) {if (res.confirm) {// 删除索引从1list.splice(index, 1);// 页面渲染数据that.setData({list: list});// 如果数据为空if (!list.length) {that.setData({hasList: false});} else {// 调用金额渲染数据 that.count_price();}} else {console.log(res);}},fail: function (res) {console.log(res);}})},/*** 购物车全选事件*/selectAll(e) {// 全选ICON默认选中let selectAllStatus = this.data.selectAllStatus;// true ----- falseselectAllStatus = !selectAllStatus;// 获取商品数据let list = this.data.list;// 循环遍历判断列表中的数据是否选中for (let i = 0; i < list.length; i++) {list[i].selected = selectAllStatus;}// 页面重新渲染this.setData({selectAllStatus: selectAllStatus,list: list});// 计算金额方法this.count_price();},/*** 绑定加数量事件*/btn_add(e) {// 获取点击的索引const index = e.currentTarget.dataset.index;// 获取商品数据let list = this.data.list;// 获取商品数量let num = list[index].num;// 点击递增num = num + 1;list[index].num = num;// 重新渲染 ---显示新的数量this.setData({list: list});// 计算金额方法this.count_price();},/*** 绑定减数量事件*/btn_minus(e) {// // 获取点击的索引const index = e.currentTarget.dataset.index;// const obj = e.currentTarget.dataset.obj;// console.log(obj);// 获取商品数据let list = this.data.list;// 获取商品数量let num = list[index].num;// 判断num小于等于1 return; 点击无效if (num <= 1) {return false;}// else num大于1 点击减按钮 数量--num = num - 1;list[index].num = num;// 渲染页面this.setData({list: list});// 调用计算金额方法this.count_price();},// 提交订单btn_submit_order: function () {var that = this;console.log(that.data.totalPrice);// 调起支付// wx.requestPayment(// {//'timeStamp': '',//'nonceStr': '',//'package': '',//'signType': 'MD5',//'paySign': '',//'success': function (res) { },//'fail': function (res) { },//'complete': function (res) { }// }) wx.showModal({title: '提示',content: '合计金额-' + that.data.totalPrice + "暂未开发",})},// 收藏btn_collert: function () {wx.showToast({title: '收藏暂未开发',duration: 2000})},/*** 计算总价*/count_price() {// 获取商品列表数据let list = this.data.list;// 声明一个变量接收数组列表pricelet total = 0;// 循环列表得到每个数据for (let i = 0; i < list.length; i++) {// 判断选中计算价格if (list[i].selected) {// 所有价格加起来 count_moneytotal += list[i].num * list[i].price;}}// 最后赋值到data中渲染到页面this.setData({list: list,totalPrice: total.toFixed(2)});},})

page{ height:100%; } .pages{ background:#f3f3f3; width:100%; min-height:100%; border:1px solid transparent; } .pages>view{ width:90%; margin: 30rpx auto; background: #fff; border-radius:25rpx; border:1px solid transparent; padding-bottom:30rpx; } /* 列表 */ .list{ position: relative; width: 100%; height: 185rpx; /* border-bottom: 1rpx solid #e9e9e9; */ background: #FAFAFA; margin-top:20rpx; } /* 编辑 */ .cartHeader{ display: flex; justify-content: space-between; align-items: center; padding:10rpx 30rpx; border:1px solid transparent; position: relative; } .cartHeader .logo image{ width:30rpx; height:30rpx; display: inline-block; vertical-align: middle; } .cartHeader .logo text{ display: inline-block; vertical-align: middle; font-size:28rpx; font-family:NotoSansHans-Regular; font-weight:400; color:rgba(48,48,48,1); margin-left:15rpx; } .edit{ height:60rpx; line-height:70rpx; font-size:24rpx; } /* 删除 */ .dele_edit{ position: absolute; width: 40rpx; height: 40rpx; right: 30rpx; bottom: 25rpx; } /* 编辑标题 */ .edit_btn{ position: absolute; font-size: 24rpx; color: #36A661; right: 30rpx; } /* 单选状态 */ .radio_chek{ position: absolute; left: 30rpx; top: 70rpx; width:37rpx; height: 37rpx; } /* 列表商品图片 */ .list_img{ position: absolute; top: 38rpx; left: 100rpx; width:118rpx; height:118rpx;

} /* 列表规格 */ .cart_g_name{ position: absolute; left: 280rpx; font-size: 26rpx; color: #aaa; top: 75rpx; } /* 收藏 */ .collert{ position: absolute; font-size: 28rpx; right: 40rpx; top: 30rpx; } /* 收藏图标 */ .collert_img{ position: relative; top: 2rpx; width: 28rpx; height: 28rpx; } /* 列表商品名称 */ .list_name{ position: absolute; left: 280rpx; top: 30rpx; width: 350rpx; /* background-color: red; */ font-size: 30rpx; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } /* 列表商品价格 */ .list_price{ position: absolute; font-size: 30rpx; color: #3CA65E; left: 280rpx; bottom: 20rpx; } /* 列表商品删除 */ .list_del{ position: absolute; right: 220rpx; bottom: 20rpx; width: 40rpx; height: 40rpx; line-height: 40rpx; text-align: center; font-size: 44rpx; } /* 固定底部 */ .cont_bot{ position: fixed; bottom: 0; width: 100%; height: 104rpx; line-height:104rpx; background: #fff; border-top: 2rpx solid #ebebeb; } /* 全选ICON */ .total-select{ position: absolute; left: 30rpx; top: 30rpx; width: 40rpx; height: 40rpx; } /* 全选标题 */ .sel_count_name{ position: absolute; left: 90rpx; top: 6rpx; font-size: 30rpx; color: #333; } /* 合计金额 */ .count_price{ position: absolute; font-size:28rpx; left: 230rpx; color: #aaa; } .count_price > view{ height:50rpx; line-height:50rpx; color:#231D1E; } .count_price > view:first-child text{ float:right; font-size:24rpx; color:#5D5D5D; } .count_price view:last-child text{ font-size: 30rpx; color: #3CA65E; } /* 购物车为空 */ .list_none{ padding:40rpx 0; color: #999; text-align: center; } /* 提交 */ .submit{ position: absolute; width: 274rpx; height: 104rpx; line-height: 104rpx; right: 0rpx; font-size: 30rpx; text-align: center; color:#fff; background:linear-gradient(90deg,rgba(123,202,110,1) 0%,rgba(47,163,93,1) 100%); } .navigator-hover{ background: none; }/*数量加减*/ .carts-num{ position: absolute; right: 30rpx; bottom: 23rpx; /* background-color: red; */ display: flex; align-items: center; text-align: center; height: 50rpx; } .view_text_center{ border: 1rpx solid #ebebeb; font-size: 30rpx; display: inline-block; color: #333; height: 50rpx; line-height: 50rpx;width: 76rpx; } .carts-num .minus, .carts-num .plus{ margin: 10rpx; border: 1rpx solid #ebebeb; color: #000; text-align: center; height: 50rpx; line-height: 50rpx; width: 40rpx; } .carts-num .minus{font-size: 34rpx;} /* .carts-num .minus.disabled{color: red;} */ .carts-num .plus{font-size: 34rpx;}