⼩程序如何实现购物车功能
⼀、⼩程序的购物车功能
1. 在商品列表页 index.wxml 中，给下单按钮绑定⼀个添加购物车的事件 addCart，使⽤ catchtap 是不会冒泡，同时传⼊ data-item，当
前的商品，代码如下所⽰：
<view class="order"catchtap="addCart"data-item="{{ item }}">下单</view>
2. 在 index.js 中，在 Page 中，定义 addCart事件。对此，可以分析⼀下当点击按钮以后添加购物车的逻辑：
拿到点击要添加⼊到购物车的商品
判断该商品在不在购物车⾥⾯
如果不在, 把该商品添加到购物车⾥⾯, 并且新加⼀个字段 num = 1
如果在，修改改商品的num值 累加
3. 在 addCart 中，第⼀步拿到该商品，通过 e.currentTarget.dataset获取。第⼆步，判断该商品在不在购物车⾥⾯，根据 _id 尝试从购
物车⾥⾯获取数据，看能不能获取的到。使⽤ atch，在有值的情况下，把购物车⾥⾯的该商品的 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: dbmand.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()
}
4. 在 Page 中，定义 setTabBar 事件，修改 tabBar 右上⾓数字。定义商品的总数 total 为 0，获取购物车接⼝的数据，对购物车中商
品数量进⾏遍历，获得商品数量。如果商品总数为 0，说明当前购物车商品数据为空，反之，则有数据。通过 wx.setTabBarBadge 这个 api 可以设置 tabBar 右上⾓数字，index表⽰ tabBar 的索引，text 就是显⽰的内容，这⾥显⽰的是购物车商品的数量，代码如下所⽰：
// 修改 tabBar 右上⾓数字
async setTabBar(){
let total =0
let res =await ()
res.data.forEach(v =>{
total += v.num
})
if(total ===0)return
wx.setTabBarBadge({
index:1,
text: total +'',
})
}
5. 在购物车页⾯ cart.js 中，在 Page 中，调⽤ onTabItemTap() ，点击当前页⾯对应的 tab，通过 wx.setTabBarBadge 这个 api，取消
购物车右上⾓的数字，代码如下所⽰：
// 点击当前页⾯对应的 tab
onTabItemTap(){
wx.setTabBarBadge({
index:1,
text:'',
})
}
6. 在 cart.wxml 中，定义 totalPrice 总价格，totalCount 总数量，代码如下所⽰：
<view class="tool">
<view class="tool-l">总价格 : ¥ {{ totalPrice }}</view>
<view bindtap="startpay"class="tool-r">⽀付 : ({{ totalCount }})</view>
</view>
7. 在 cart.js 中，在 Page 中，定义所需的 data数据，购物车数据carts，总数量totalCount，总价格totalPrice，代码如下所⽰：
data:{
carts:[],
totalCount:0,
totalPrice:0
}
8. 在 onLoad ⽣命周期函数中，在页⾯⼀切⼊显⽰的时候，调⽤ loadCartsData() 函数，加载购物车数据，代码如下所⽰：
onLoad(){
this.loadCartsData()
}
9. 在 Page 中，定义 loadCartsData 函数，使⽤ async和 await 异步获取数据，将获取到的数据赋值通过 this.setData 赋值给 data 中
的 carts，调⽤ setCart ⽅法，统计购物车中商品的总价格和总数量，代码如下所⽰：
// 加载购物车数据
async loadCartsData(){
let res =await ()
console.log('购物车数据', res)
this.setData({
carts: res.data
})
this.setCart(res.data)
}
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
})
}
11. 在 cart.wxml 中，在点击购物车商品增加的按钮中，通过 catchtap 绑定 addCount 点击添加的数量的事件，并且传⼊该商品的 id
值，代码如下所⽰：
<view catchtap="addCount"data-id="{{ item._id }}"class="order">+</view>
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: dbmand.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)
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。