主页:写程序的小王叔叔的博客欢迎来访👀
支持:点赞收藏关注
1、效果
2、wxml
3、wxjs
varbase=getApp(); varpreview=require('../../utils/preview.js'); Page({ data: { WxMemberCart: [], total: 0, his: "", plist:[], loaded: true, adminShow: true,//编辑或完成 totalPrice: 0,//总金额 allselect: false,//是否全选 selectArr: [], //已选择的商品 hadOnShow: false, }, onLoad: function (e) { _this.onShow(); }, onShow: function (e) { let_this=thisif (_this.data.hadOnShow) { return } _this.setData({ hadOnShow: true }) }, goBack: function () { var_this=this; wx.navigateTo({ url: _this.data.his }) }, //-------------------------//计算价格calculateTotal: function () { varselectArr=this.data.selectArr; //已选择的商品vartotalPrice=0; if (selectArr.length) { //如果存在商品就计算价格for (vari=0; i<selectArr.length; i++) { totalPrice+=selectArr[i].wx_goodsNum*selectArr[i].wx_productPrice; } totalPrice=totalPrice.toFixed(2); //乘法有点问题, 需要保留一下小数console.log("计算价格:", totalPrice) this.setData({ totalPrice: totalPrice }) } else { //不存在商品就把总价格置为 0this.setData({ totalPrice: 0 }) } }, //判断是否为全选 judgmentAll: function () { varWxMemberCart=this.data.WxMemberCart; //初始数据varselectArr=this.data.selectArr; //已选择的商品if (selectArr.length==WxMemberCart.length) { //长度相等就是全部选上了this.setData({ allselect: true }) } else { this.setData({ allselect: false }) } }, //全选allcheckTap: function () { varthat=this; varWxMemberCart=that.data.WxMemberCart; //初始数据varselectArr= []; //定义空数组varallselect=!that.data.allselect; //data里的是否全选先改变状态存着if (allselect) { //如果为真, 初始数据里的每条checked变为true, 然后push到定义的空数组里for (vari=0; i<WxMemberCart.length; i++) { WxMemberCart[i].checked=true; selectArr.push(WxMemberCart[i]) } } else { //不为真就变成false, 定义的数组再置空一次for (vari=0; i<WxMemberCart.length; i++) { WxMemberCart[i].checked=false; } selectArr= []; } that.setData({ //重新设置数据WxMemberCart: WxMemberCart, //初始的数据allselect: allselect, //全选的状态selectArr: selectArr//已选择的商品 }) that.calculateTotal(); // 最后计算一次价格 (计算价格放到重置数据之前会出问题) }, //单个商品选择checkTap: function (e) { varindex=e.currentTarget.dataset.index; //取到渲染的下标varWxMemberCart=this.data.WxMemberCart; //初始数据varselectArr=this.data.selectArr; //已选择的商品数组WxMemberCart[index].checked=!WxMemberCart[index].checked//没选中的就要选中, 选中了的就取消选中状态if (WxMemberCart[index].checked) { //如果选中了, 就放到一选择的商品数组里for (vari=0; i<WxMemberCart.length; i++) { if (WxMemberCart[i] ==WxMemberCart[index]) { selectArr.push(WxMemberCart[index]) } } this.judgmentAll(); //计算价格 } else { //取消选中就从已选择的商品数组里移除for (vari=0; i<selectArr.length; i++) { if (selectArr[i].id==WxMemberCart[index].id) { selectArr.splice(i, 1) } } this.judgmentAll(); //选择的时候要判断是不是已经选择了全部的 } this.calculateTotal(); //计算一次价格console.log("已选择的商品:", selectArr) this.setData({ //重置数据WxMemberCart: WxMemberCart, selectArr: selectArr }) }, //数量加减numchangeTap: function (e) { vartypes=e.currentTarget.dataset.types; //加和减的两张图片上分别设置了types属性 varindex=e.currentTarget.dataset.index; //获取下标varWxMemberCart=this.data.WxMemberCart; //初始数据if (types=='minus') { //减varwx_goodsNum=WxMemberCart[index].wx_goodsNum; if (wx_goodsNum<=1) { //不允许商品数量小于1 , 都添加到购物车了还要减到0是几个意思? 反正有个删除按钮return; } else { WxMemberCart[index].wx_goodsNum--; this.setData({ WxMemberCart: WxMemberCart }) this.calculateTotal(); //计算价格 } } if (types=="add") { //加WxMemberCart[index].wx_goodsNum++; //加就不判断了, 加到二十二世纪去都行this.setData({ WxMemberCart: WxMemberCart }) this.calculateTotal(); //计算价格 } //购物车实时更新某个商品的数量 }, //删除商品 deleteshopTap: function () { var_this=this; varWxMemberCart=this.data.WxMemberCart; //初始数据varselectArr=this.data.selectArr; //已选择的商品数组if (selectArr.length) { //如果以选择的商品数组里有长度for (vari=0; i<WxMemberCart.length; i++) { for (varj=0; j<selectArr.length; j++) { if (WxMemberCart[i].id==selectArr[j].id) { //把初始数据的对应id的数据删掉就好了WxMemberCart.splice(i, 1); //后台同步删除当前购物车商品信息 } } } this.setData({ //重置一下数据WxMemberCart: WxMemberCart, selectArr: [] //已选择的数组置空 }) this.calculateTotal(); //计算价格 } }, //编辑或完成adminTap: function () { //切换四个按钮的显示this.setData({ adminShow: !this.data.adminShow }) }, //结算toApply: function () { console.log("已选择的商品:", this.data.selectArr) if (this.data.selectArr.length>0) { wx.navigateTo({ url: '../order/order?from=cart' }) } else { base.modal({ title: '未选择商品', showCancel: false }) } }, });
4、wxss
page { padding: 0055px; background-color: #f3f3f3; } .tit { border-bottom: 1rpxsolid#ddd; padding: 20rpx25rpx; display: flex; align-items: center; background-color: #f0f0f0; } .tit-back { flex: 1; text-align: left; color: #576b95; } .tit-text { font-size: 11pt; color: #999; flex: 2; } .tit-tool { flex: 1; text-align: right; color: #576b95; } .fs_12{ font-size: 12pt; } .fs_14{ font-size: 14pt; } .cart_body{ box-sizing: border-box; /* padding: 0 32rpx; */} .cart_item{ box-sizing: border-box; padding-bottom: 100rpx; } .check_img{ width: 40rpx; height: 40rpx; margin-top: 32rpx; } label{ display: flex; padding: 26rpx0; background-color: #fff; border-bottom: 1rpxsolid#eee; } .cart_item_w{ display: flex; width:94vw; margin:0auto; } .cart_image{ /* width: 192rpx; */width: 110rpx; height: 110rpx; margin-left: 32rpx; } .cart_img{ width: 100%; height: 100%; border-radius: 8rpx; } .cart_content{ margin-left: 20rpx; flex:1; display: flex; flex-flow: columnwrap; justify-content: space-between; } .content_title{ overflow: hidden; text-overflow: ellipsis; display: box; line-clamp:2; line-clamp: 2; box-orient: vertical; } .quans{ width: 20vw; display: flex; color:#999; justify-content: flex-start; } .content_price{ /* width: 40vw; *//* float: right; */display: flex; justify-content: space-between; } .goods_number_container{ width: 170rpx; display: flex; /* justify-content: space-between; */justify-content: flex-end; } .goods_number_icon_container{ width: 50rpx; height:50rpx; } .goods_number_icon{ width:100%; height:100%; } .goods_number{ height: 50rpx; width: 50rpx; flex:1; text-align: center; } .ft_color{ color: #ff6a00; } .cart_total_container{ font-size: 30rpx; height: 100rpx; line-height: 88rpx; background: #fff; position: fixed; bottom:0; left:0; right:0; box-sizing: border-box; padding: 12rpx32rpx; display: flex; } .checkAllBox{ border-radius: 50%; height: 40rpx; width: 40rpx; margin-top: 23rpx; margin-right: 8rpx; } .totalPrice{ flex:1; margin-left: 40rpx; } .clearingBox{ width: 300rpx; display: flex; justify-content: space-between; } .btn{ width: 140rpx; text-align: center; border-radius: 36rpx; line-height: 72rpx; } .editbtn{ border: 1pxsolid#666666; background: #fff; } .clearbtn{ /* background: #ff5c4d; color: #fff; */flex: 1; height: 40px; line-height: 40px; text-align: center; border-radius: 3px; background-color: #576b95; border: 1rpxsolid#576b95; color: #fff; margin: 00rpx010rpx; }
转载声明:本文为博主原创文章,未经博主允许不得转载
⚠️注意 ~
💯本期内容就结束了,如果内容有误,麻烦大家评论区指出!
如有疑问❓可以在评论区💬或私信💬,尽我最大能力🏃♀️帮大家解决👨🏫!
如果我的文章有帮助到您,欢迎点赞+关注✔️鼓励博主🏃,您的鼓励是我分享的动力🏃🏃🏃~