微信小程序如何实现购物车功能_小程序点击商品到购物车逻辑

一、微信小程序的购物车功能

1. 在商品列表页 index.wxml 中，给下单按钮绑定一个添加购物车的事件 addCart，使用 catchtap 是不会冒泡，同时传入 data-item，当前的商品，代码如下所示：

    <view class="order" catchtap="addCart" data-item="{{ item }}">下单</view>
1

2. 在 index.js 中，在 Page 中，定义 addCart事件。对此，可以分析一下当点击按钮以后添加购物车的逻辑：

• 拿到点击要添加入到购物车的商品
• 判断该商品在不在购物车里面
• 如果不在, 把该商品添加到购物车里面, 并且新加一个字段 num = 1
• 如果在，修改改商品的num值 累加

3. 在 addCart 中，第一步拿到该商品，通过 e.currentTarget.dataset获取。第二步，判断该商品在不在购物车里面，根据 _id 尝试从购物车里面获取数据，看能不能获取的到。使用 try...catch，在有值的情况下，把购物车里面的该商品的 num 值累加
   ，并且进行下单成功的提示；在没有值，把商品添加到购物车里面，并且进行下单成功的提示，最后调用 setTabBar() 方法修改底部购物车 tabBar 的数值，代码如下所示：

// 加入购物车
  async addCart (e) {


    let { item } = e.currentTarget.dataset


    try {
      let res = await carts_col.doc('').get()
      console.log('有值', res)

      await carts_col.doc(item._id).update({
        data: {
          num: db.command.inc(1)
        }
      })

      wx.showToast({
        title: '下单成功',
      })

    } catch (err) {
      console.log('没有值')
    
      await carts_col.add({
        data: {
          _id: item.id,
          imageSrc: item.imageSrc,
          price: item.price,
          title: item.title,
          num: 1
        }
      })

      wx.showToast({
        title: '下单成功',
      })
    }
    this.setTabBar()

  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

4. 在 Page 中，定义 setTabBar 事件，修改 tabBar 右上角数字。定义商品的总数 total 为 0，获取购物车接口的数据，对购物车中商品数量进行遍历，获得商品数量。如果商品总数为 0，说明当前购物车商品数据为空，反之，则有数据。通过 wx.setTabBarBadge 这个 api 可以设置 tabBar 右上角数字，index表示 tabBar 的索引，text 就是显示的内容，这里显示的是购物车商品的数量，代码如下所示：

// 修改 tabBar 右上角数字
  async setTabBar () {
    let total = 0
    let res = await carts_col.get()


    res.data.forEach(v => {
      total += v.num
    })

    if (total === 0) return 
    
    wx.setTabBarBadge({
      index: 1,
      text: total + '',
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

5. 在购物车页面 cart.js 中，在 Page 中，调用 onTabItemTap() ，点击当前页面对应的 tab，通过 wx.setTabBarBadge 这个 api，取消购物车右上角的数字，代码如下所示：

// 点击当前页面对应的 tab
  onTabItemTap() {
    
    wx.setTabBarBadge({
      index: 1,
      text: '',
    })
  }
1
2
3
4
5
6
7
8

6. 在 cart.wxml 中，定义 totalPrice 总价格，totalCount 总数量，代码如下所示：

<view class="tool">
  <view class="tool-l">总价格 : ¥ {{ totalPrice }}</view>
  <view bindtap="startpay" class="tool-r">支付 : ({{ totalCount }})</view>
</view>
1
2
3
4

7. 在 cart.js 中，在 Page 中，定义所需的 data数据，购物车数据carts，总数量totalCount，总价格totalPrice，代码如下所示：

data: {
    carts: [], 
    totalCount: 0, 
    totalPrice: 0 
 }
1
2
3
4
5

8. 在 onLoad 生命周期函数中，在页面一切入显示的时候，调用 loadCartsData() 函数，加载购物车数据，代码如下所示：

onLoad () {
    this.loadCartsData()
  }
1
2
3

9. 在 Page 中，定义 loadCartsData 函数，使用 async和 await 异步获取数据，将获取到的数据赋值通过 this.setData 赋值给 data 中的 carts，调用 setCart 方法，统计购物车中商品的总价格和总数量，代码如下所示：

// 加载购物车数据
  async loadCartsData () {
    let res = await carts_col.get()
    console.log('购物车数据', res)
    this.setData({
      carts: res.data
    })

    this.setCart(res.data)
 }
1
2
3
4
5
6
7
8
9
10

10. 在 Page 中，定义 setCart 方法，传入购物车数据。初始化设置总数量和总价格为 0，对购物车的数据进行遍历，得到总数量和总价格，修改 data 中的总数量和总价格，totalCount 和 totalPrice 的值，代码如下所示：

// 统计总价格和总数量
  setCart(carts) {
    let totalCount = 0
    let totalPrice = 0

    carts.forEach(v => {
      totalCount += v.num
      totalPrice += v.num * v.price
    })

    this.setData({
      totalCount,
      totalPrice
    })
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

11. 在 cart.wxml 中，在点击购物车商品增加的按钮中，通过 catchtap 绑定 addCount 点击添加的数量的事件，并且传入该商品的 id 值，代码如下所示：

  <view catchtap="addCount" data-id="{{ item._id }}" class="order">+</view>
1

12. 在 cart.js 中，在 Page 中，定义 addCount 事件，通过e.currentTarget.dataset.id获取 id 值。使用 async 和 await 异步获取该商品的数量 num 值，进行修改 num的值。当点击添加数量增加 1 成功以后，修改当前 data 中的 carts 数据，最后再次调用 setCart 方法，统计购物车的总数量和总价格，代码如下所示：

// 点击添加 +
  async addCount(e) {
    let id = e.currentTarget.dataset.id

    let res = await carts_col.doc(id).update({
      data: {
        num: db.command.inc(1)
      }
    })
    console.log('+1', res)
    
    let newCarts = this.data.carts
    let goods = newCarts.find(v => v._id == id)
    goods.num += 1
    this.setData({
      carts: newCarts
    })

    await ml_showToastSuccess('累加成功')

    this.setCart(newCarts)
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22