云开发 CloudBase
文档捉虫大赛：人工智能与机器学习专题> HOT
文档中心 > 云开发 CloudBase > 示例教程 > 小程序 > 商店小程序开发实践 > 步骤4：搭建购物车

步骤4：搭建购物车

最近更新时间：2023-01-12 10:18:59

我的收藏

本页目录：

本文主要围绕购物车 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()
  },

效果如图所示：


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