您现在的位置是：网站首页> 编程资料编程资料
微信小程序实现简单的购物车功能_javascript技巧_
2023-05-24
356人已围观
简介 微信小程序实现简单的购物车功能_javascript技巧_
本文实例为大家分享了微信小程序实现简单购物车的具体代码，供大家参考，具体内容如下
实现一个购物车页面，需要哪些数据。整理下大概如下：
一个购物车商品列表(carts)，列表里的单个item包含：商品id(id)，商品图(image)，商品名(title)，单价(price)，数量(amount)，单选按钮(selected)；
全选按钮，需要一个字段(selectAllStatus)表示是否全选；
总价(totalPrice)；
总数量（totalNum）。
还有一个需要判断的是购物车是否为空(hasList)的字段。
购物车主要的几个功能：商品数量的加减、单选、全选、计算总价格、总数量、商品删除。
wxml代码：
{{item.prodName}} ￥{{item.prodPrice}} - {{item.amount}} + 购物车还没有商品哦~~ 去逛逛 全选 全选 合计:￥{{totalPrice}} 去结算（{{totalNum}}）
代码实现：
初始展示购物车商品
Page({ /** * 页面的初始数据 */ data: { carts: [], //购物车商品列表 hasList: false, // 列表是否有数据 totalPrice: 0, // 总价，初始为0 totalNum: 0, //去结算括号里的总数量 selectAllStatus: false, // 全选状态 userId: '', }, //根据userId得到购物车列表数据 getList: function() { let that = this let userId = that.data.userId let carts = that.data.carts wx.request({ url: 'xxx.com/api/ShoppingCar/getShoppingCar?userId=' + userId, header: { 'content-type': 'application/json' }, method: 'GET', success: function(res) { console.log(res) let items = res.data.items //当购物车不为空才进行后续判断操作 if(items !== null){ if (items.length > 0) { that.setData({ hasList: true, // 有数据了，那设为true carts: res.data.items, shoppingCarId: res.data.shoppingCarId, buyerId: res.data.buyerId }) } else { console.log('购物车没有商品') } } else{ return false } }, fail: function(res) {}, complete: function(res) {}, }) }, onShow: function(){ //onLoad 和onReady 只执行一次 所以数据放在onshow里每次打开页面都会执行 this.getList() this.calcTotalPrice() this.totalNum() } }) 商品数量的加减：点击+号，amount 加1，点击-号，如果amount > 1，则减1；利用wxml页面中绑定的type属性，直接在方法中判断是操作加号还是减号
//加减按钮操作 changeNum: function(e) { //console.log(e) let that = this let types = e.target.dataset.types, //加和减按钮上分别设置了types属性 index = e.target.dataset.index, cartsData = that.data.carts; //初始购物车列表数据 console.log(cartsData[index]) let amount = cartsData[index].amount if (types == 'minus') { if (amount <= 1) { //不允许购物车数量低于1 wx.showToast({ title: '数量不能少于1', }) return false } else { amount = amount - 1 cartsData[index].amount = amount //修改数量后重新渲染页面 that.setData({ carts: cartsData }) } } if (types == 'plus') { amount = amount + 1 cartsData[index].amount = amount that.setData({ carts: cartsData }) } that.calcTotalPrice() that.totalNum() wx.request({ url: 'xxx.com/api/ShoppingCarItem/uptTransItem', data: { "transItemId": cartsData[index].transItemId, "prodId": cartsData[index].prodId, "amount": cartsData[index].amount, "shoppingCarId": cartsData[index].shoppingCarId }, header: { 'content-type': 'application/json' }, method: 'POST', success: function(res) { console.log(res) }, fail: function(res) {}, complete: function(res) {}, }) },单选事件：
//单个商品选中事件 changeSelect: function(e) { //console.log(e) let cartsData = this.data.carts let index = e.currentTarget.dataset.index //切换选中状态 cartsData[index].selected = !cartsData[index].selected // 循环数组数据，判断----选中/未选中[selected] //新定义一个flag, 当循环商品的选中状态为true,flag+1;所有商品都为选中状态，则为全选 let flag = 0 for (let i = 0, len = cartsData.length; i < len; i++) { if (cartsData[i].selected == true) { flag += 1 } } if (cartsData.length == flag) { this.data.selectAllStatus = true; } else { this.data.selectAllStatus = false; } this.setData({ carts: cartsData, selectAllStatus: this.data.selectAllStatus }) this.calcTotalPrice() this.totalNum() },全选事件：
//购物车全选按钮 selectAll: function(e) { //console.log(e) let selectAllStatus = e.currentTarget.dataset.select; //先判断是否为全选 let cartsData = this.data.carts //将true 转为 false(所有商品未选中状态) selectAllStatus = !selectAllStatus for (let i = 0, len = cartsData.length; i < len; i++) { cartsData[i].selected = selectAllStatus } // 页面重新渲染 this.setData({ selectAllStatus: selectAllStatus, carts: cartsData }) this.calcTotalPrice() this.totalNum() },计算总价格：
//计算商品总价 //总价 = 选中的商品1的 价格 * 数量 + 选中的商品2的 价格 * 数量 + ... calcTotalPrice: function() { //获取商品列表数据 let cartsData = this.data.carts //声明一个变量接收数组列表price let total = 0 for (let i = 0, len = cartsData.length; i < len; i++) { if (cartsData[i].selected) { //判断选中才会计算价格 total += cartsData[i].amount * cartsData[i].prodPrice; } } this.setData({ // 最后赋值到data中渲染到页面 carts: cartsData, totalPrice: total.toFixed(2) }); },计算总数量：
//总数量 totalNum: function() { let cartsData = this.data.carts //新定义初始变量 let totalNum = 0 for (let i = 0, len = cartsData.length; i < len; i++) { if (cartsData[i].selected) { totalNum += cartsData[i].amount } } this.setData({ totalNum: totalNum }) },删除单个商品：
//删除商品 delItem: function(e) { //console.log(e) let that = this let cartsData = that.data.carts let index = e.currentTarget.dataset.index wx.request({ url: 'xxx.com/api/ShoppingCarItem/delTransItem?value=' + cartsData[index].transItemId, header: { 'content-type': 'application/json' }, method: 'POST', success: function(res) { console.log(res) wx.showModal({ title: '提示', content: '确认删除吗', success: function(res) { console.log(res) wx.showModal({ title: '提示', content: '确认删除吗', success: function(res) { console.log(res) if (res.confirm) { cartsData.splice(index, 1) //删除购物车列表里这个商品 that.setData({ carts: cartsData }) that.calcTotalPrice() that.totalNum() // 如果购物车为空 if (cartsData.length == 0) { that.setData({ //修改标识为false，显示购物车为空页面 hasList: false }); } } } }) }, fail: function(res) {}, complete: function(res) {}, }) },以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- JavaScript+HarmonyOS 实现一个手绘板_javascript技巧_
- Vue3解析markdown并实现代码高亮显示的详细步骤_vue.js_
- 微信小程序实现select二级下拉_javascript技巧_
- JavaScript详解使用Promise处理回调地狱与async await修饰符_javascript技巧_
- 一定有你会用到的JavaScript一行代码实用技巧总结_javascript技巧_
- jQuery事件注册的实现示范_jquery_
- 函数式组件劫持替代json封装element表格_vue.js_
- JavaScript同步与异步任务问题详解_javascript技巧_
- JavaScript前端实用的工具函数封装_JavaScript_
- vue实现虚拟列表组件解决长列表性能问题_vue.js_
点击排行
本栏推荐
