微信小程序实现商品加入购物车案例 |
您所在的位置：网站首页 › 微信奶茶小图标 › 微信小程序实现商品加入购物车案例 |
|
思考：购物车中的数据保存在哪里？用哪种数据结构进行保存？ 小程序中可能有多个页面需要对购物车中的数据进行操作，因此我们想到把数据存到全局中。可以使用wx.setStorageSync()储存，用wx.getStorageSync()进行获取，以数组格式方便对数据进行操作。 一、商品加入购物车单件商品信息存在{}中，在加入购物车的时候还需要加入两个字段为num代表商品数量，checked代表是否选中(购物车中可以选中商品进行支付)，加入后要重新设置购物车的状态。 doPlusNum(e) { // 选中的商品信息 let productInfo = e.currentTarget.dataset.item // 先获取缓存中的商品信息 let cart = wx.getStorageSync('cart') || [] // 判断当前商品是否第一次添加 let index = cart.findIndex(v => v.id === productInfo.id) if(index === -1) { // 第一次添加则把商品信息及初始化的数量和选中状态一起存入 cart.push({...productInfo,num: 1,checked: true}) } else { // 前面添加过的话只需要更改商品中的数量即可 cart[index].num = cart[index].num + 1 } // 把更改后的购物车数据重新存入缓存 wx.setStorageSync('cart', cart) this.setData({cartList: cart}) wx.showToast({ title: '商品已放入购物车', icon: 'none' }) // 加入购物车给购物车加一个抖动的动画 this.cartWwing() // 设置购物车状态（勾选、全选、总数、总价） this.setCart() }, 二、商品移出购物车在移出购物车的时候需要判断购物车中对应商品的状态，有多件商品则只需更改数量，只有一件商品则直接移除商品信息，最后要重新设置购物车的状态。 doMinusNum(e) { let that = this let productInfo = e.currentTarget.dataset.item let cart = wx.getStorageSync('cart') || [] // 找到缓存中对应的商品 let index = cart.findIndex(v => v.id === productInfo.id) // 商品数量大于1则直接减去数量，然后设置购物车状态 if(cart[index].num > 1) { cart[index].num--; this.setCart(cart) } else if(cart[index].num == 1) { // 商品数量为1则给出弹窗提示 cart[index].num = 0 wx.showModal({ content: '确定不要了吗？', success(res) { if(res.confirm) { // 确定移出则删除对应商品信息后设置购物车状态 cart.splice(index,1) } else if(res.cancel) { // 取消后商品数量不做改变 cart[index].num = 1 } that.setCart(cart) } }) } }, 三、购物车底部工具栏及勾选、全选、总数、总价实现 1、设置购物车状态计算商品总价时一般四舍五入保留两位，用到了getRoundeNumber方法 setCart(cart) { cart = cart ? cart : wx.getStorageSync('cart') || [] if(cart.length === 0) { this.setData({hideModal: true}) } let allChecked = true,totalNum = 0,totalPrice = 0 cart.forEach(v => { if(v.checked) { // 计算已经勾选商品的总价及总数 totalPrice += getRoundeNumber(v.price * v.num) * 1 totalNum += v.num } else { // 购物车中存在商品且没有商品被勾选，则全选按钮取消勾选 allChecked = false } }) // 购物车中不存在商品，则全选按钮取消勾选 allChecked = cart.length != 0 ? allChecked : false wx.setStorageSync('cart', cart) this.setData({ allChecked, totalNum, totalPrice, cartList: cart }) this.handleList() },附：getRoundeNumber方法如下 const getRoundeNumber = num => { if (!Number.prototype._toFixed) { Number.prototype._toFixed = Number.prototype.toFixed } Number.prototype.toFixed = function(n) { return (this + 1e-14)._toFixed(n) } return Number(num).toFixed(2) } 2、勾选 handleCheck(e) { let { id } = e.currentTarget.dataset let cartList = JSON.parse(JSON.stringify(this.data.cartList)) let index = cartList.findIndex(v => v.id === id) cartList[index].checked = !cartList[index].checked // 设置购物车状态 this.setCart(cartList) }, 3、全选 handleAllCheck() { let { cartList,allChecked } = this.data allChecked = !allChecked cartList.forEach(v => v.checked = allChecked) // 设置购物车状态 this.setCart(cartList) }, 4、清空购物车 handleClearCart() { let that = this wx.showModal({ content:'确定不要了吗？', success(res) { if(res.confirm) { that.setCart([]) } else if(res.cancel) { console.log('用户点击取消'); } } }) }, 5、已勾选商品支付成功后清除购物车中对应的数据 let newCart = wx.getStorageSync('cart').filter(v => !v.checked) this.setCart(newCart) 6、当后台管理更新商品信息时购物车中的数据要对应更新购物车中的数据是保存在本地缓存中的，如果在后台管理修改商品的信息或者删除商品，但是小程序中的缓存没有 及时更新，那么在下单的时候就会出现问题，所以需要在进入商城页面的时候就调用获取所有商品的接口跟购物车缓存中的数据进行对比，然后及时更新。 getAllProduct() { let data = {} ... goodsMallFindAll(data).then(res => { if(res.data.code === 1) { let allProduct = res.data.data let cart = wx.getStorageSync('cart') || [] let allProductId = allProduct.map(e => e.id) //过滤掉不存在的商品 cart = cart.filter(e => allProductId.includes(e.id)) //商品的数据进行更新 cart = cart.map(ele => { allProduct.map(ele2 => { if(ele.id == ele2.id) { ele = Object.assign(ele, ele2); } }) return ele }) wx.setStorageSync('cart', cart) this.setCart() } else { wx.showToast({ title: res.data.msg, icon: 'none' }) } }) }, 四、附上整体代码（1）wxml文件如下： 商品列表 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |