微信小程序-购物车开发

简介: 微信小程序-购物车开发

主页:写程序的小王叔叔的博客欢迎来访👀

支持:点赞收藏关注


1、效果

image.png

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: -webkit-box;
-webkit-line-clamp:2;
line-clamp: 2;
-webkit-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;
}


转载声明:本文为博主原创文章,未经博主允许不得转载

⚠️注意 ~

💯本期内容就结束了,如果内容有误,麻烦大家评论区指出!

如有疑问❓可以在评论区💬或私信💬,尽我最大能力🏃‍♀️帮大家解决👨‍🏫!

如果我的文章有帮助到您,欢迎点赞+关注✔️鼓励博主🏃,您的鼓励是我分享的动力🏃🏃🏃~

相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
13天前
|
小程序 Android开发
|
2天前
|
小程序 云计算 Android开发
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
12 3
|
8天前
|
小程序
|
9天前
|
小程序 数据安全/隐私保护
|
8天前
|
小程序
|
14天前
|
小程序
|
14天前
|
人工智能 小程序
【一步步开发AI运动小程序】五、帧图像人体识别
随着AI技术的发展,阿里体育等公司推出的AI运动APP,如“乐动力”和“天天跳绳”,使云上运动会、线上健身等概念广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章分为四部分:初始化人体识别功能、调用人体识别功能、人体识别结果处理以及识别结果旋转矫正。下篇将继续介绍人体骨骼图绘制。
|
14天前
|
人工智能 小程序 vr&ar
AI运动小程序开发常见问题集锦二
截至当前,我们的AI运动识别小程序插件已迭代至第23个版本,广泛应用于健身、体育、体测、AR互动等场景。本文针对近期用户咨询,汇总了常见问题,帮助用户减少开发成本,提高效率。主要涵盖计时与计数模式的区别、综合排行榜生成方法、全屏模式适配及无开发能力用户的解决方案。

热门文章

最新文章