本文主要围绕购物车 cart.js 进行讲解，更多购物车代码细节可参见 cart.js 配置 和 前端页面 cart.wxml。
调用 wx.cloud.database().collection() 方法访问云端购物车数据库，将数据显示出来。 ::: js async loadCartsData(){ let res = await carts_col.get() console.log('carts' , res) this.setData({ carts : res.data }) this.setCart(res.data)//统计总数 }, :::
将加载购物车数据库函数中，购物车的数据传入计算商品总价格与总个数的函数中，调用 forEach() 方法计算商品总价格与总个数。总价格是通过遍历购物车数据库中的元素，计算每一个商品的个数与其单价的乘积的总和得到的；总个数是通过遍历购物车数据库中每个商品的个数的总和来得到的。最后通过 setData() 来设置购物车页面中显示的总价格与总商品个数。 ::: js //统计总数 setCart(carts){ let totalCount=0 let totalPrice=0
carts.forEach(v =>{
totalCount += v.num
totalPrice += v.num*v.price
})
this.setData({
totalCount,
totalPrice,
})
}, :::
通过点击购物车页面的加减号按钮，调用 bindtap 属性触发对应添加购物车商品与减少购物车商品的功能函数，传入被点击商品的 ID，在功能函数中通过 ID 过滤购物车数据库中的商品，再调用 update() 方法，对指定商品的 num 的值进行加减操作。 ::: JS //加一 async addCount(e){ //获取id let id = e.currentTarget.dataset.id //修改num数量 let res =await carts_col.doc(id).update({ data:{ num :db.command.inc(1) } }) this.loadCartsData() await ml_showSuccess('添加成功') }, //删除商品 async deleteCount(e){ //获取商品id let id = e.currentTarget.dataset.id //修改num数量 let res =await carts_col.doc(id).update({ data:{ num :db.command.inc(-1) } }) console.log('res ----',res) console.log('id-------',e.currentTarget.dataset.num) await ml_showSuccess('删除成功') let num=await carts_col.doc(id).num console.log('num的值',num) if( num === 0 ) { console.log('商品数量为0') } this.loadCartsData() }, ::: 效果如图所示：
