微信小程序-购物车开发

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

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

支持:点赞收藏关注


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;
}


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

⚠️注意 ~

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

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

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

相关文章
|
12天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
12天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
12天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
12天前
|
小程序 前端开发 安全
小程序全栈开发中的跨域问题及其解决方案
【4月更文挑战第12天】本文探讨了小程序全栈开发中的跨域问题及其解决方案。跨域问题源于浏览器安全策略,主要体现在前后端分离、第三方服务集成和数据共享上。为解决此问题,开发者可采用CORS、JSONP、代理服务器、数据交换格式和域名策略等方法。实践中需注意安全性、兼容性和性能。通过掌握这些解决方案,开发者能更好地处理小程序的跨域问题,提升用户体验。
|
12天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
12天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
12天前
|
小程序 前端开发 API
小程序全栈开发中的RESTful API设计
【4月更文挑战第12天】本文探讨了小程序全栈开发中的RESTful API设计,旨在帮助开发者理解和掌握相关技术。RESTful API基于REST架构风格,利用HTTP协议进行数据交互,遵循URI、客户端-服务器架构、无状态通信、标准HTTP方法和资源表述等原则。在小程序开发中,通过资源建模、设计API接口、定义资源表述及实现接口,实现前后端高效分离,提升开发效率和代码质量。小程序前端利用微信API与后端交互,确保数据流通。掌握这些实践将优化小程序全栈开发。
|
12天前
|
SQL 安全 小程序
探索微信小程序全栈开发的安全性问题
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的安全性问题,包括数据安全、接口安全、隐私保护和代码安全。为解决这些问题,建议采取数据加密、使用HTTPS协议、身份认证与授权、输入验证、安全审计及漏洞扫描以及安全培训等措施。通过这些方法,开发者可提升小程序安全性,保护用户隐私和数据。
|
12天前
|
小程序 前端开发 JavaScript
小程序全栈开发:前端与后端的完美结合
【4月更文挑战第12天】本文介绍了小程序全栈开发,涵盖前端和后端的关键点。前端使用WXML和WXSS进行页面结构和样式设计,JavaScript处理逻辑及组件使用;后端采用Node.js等语言处理业务逻辑、数据库设计和API接口开发。前端与后端通过数据交互实现结合,采用前后端分离模式,支持跨平台运行。调试测试后,提交微信审核并上线运营。掌握前端后端结合是小程序成功的关键。
|
14天前
|
小程序 数据库
【微信小程序7】云开发中实时聊天系统的实现方法
【微信小程序7】云开发中实时聊天系统的实现方法
22 0

热门文章

最新文章