开发指南

API 文档

步骤4:搭建购物车

最近更新时间:2022-03-04 15:27:23

本文主要围绕购物车 cart.js 进行讲解,更多购物车代码细节可参见 cart.js 配置前端页面 cart.wxml

操作步骤

步骤1:加载购物车列表

调用 wx.cloud.database().collection() 方法访问云端购物车数据库,将数据显示出来。

async loadCartsData(){
let res = await carts_col.get()
console.log('carts' , res)
this.setData({
carts : res.data
})
this.setCart(res.data)//统计总数
},

步骤2:设置商品总价格和个数

将加载购物车数据库函数中,购物车的数据传入计算商品总价格与总个数的函数中,调用 forEach() 方法计算商品总价格与总个数。总价格是通过遍历购物车数据库中的元素,计算每一个商品的个数与其单价的乘积的总和得到的;总个数是通过遍历购物车数据库中每个商品的个数的总和来得到的。最后通过 setData() 来设置购物车页面中显示的总价格与总商品个数。

//统计总数
setCart(carts){
let totalCount=0
let totalPrice=0
carts.forEach(v =>{
totalCount += v.num
totalPrice += v.num*v.price
})

this.setData({
totalCount,
totalPrice,
})
},

步骤3:修改商品数量

通过点击购物车页面的加减号按钮,调用 bindtap 属性触发对应添加购物车商品与减少购物车商品的功能函数,传入被点击商品的 ID,在功能函数中通过 ID 过滤购物车数据库中的商品,再调用 update() 方法,对指定商品的 num 的值进行加减操作。

//加一
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()
},
效果如图所示:


至此,该小程序的全部功能已实现完成。更多详情请参见 示例代码

目录