社区团购美团和多多买菜小程序购物车

概述

微信小程序购物车列表demo

详细

需求

• 显示食物名称、价格、数量。

• 点击相应商品增加按钮,购买数量增加1,点击食物减少按钮,购买数量减一

• 显示购买总数和总金额

• 查看当前购买的商品

效果图(数据来自本地模拟)

目录结构

实现过程

    主要wxml

    
    
    
    
    
    {{item.foodTitle}}
    
    
    
    
    

点击商品增加按钮

funFoodAdd: function (e) {
    this.calculationMoney;
    var foodIndex = e.currentTarget.dataset.food_index
    var typeIndex = e.currentTarget.dataset.type_index
     
    var nowNum = this.data.AllFoodList[typeIndex].foodList[foodIndex].buyNum
    nowNum = nowNum + 1
    var tempBuyTotal = this.data.buyTotal;
    this.data.AllFoodList[typeIndex].foodList[foodIndex].buyNum = nowNum
    this.setData({
    AllFoodList: this.data.AllFoodList, buyTotal: tempBuyTotal + 1
    })
    this.calculationMoney();
 
},

点击商品减少按钮

//减去食物
funFoodReduce: function (e) {
    var foodIndex = e.currentTarget.dataset.food_index
    var typeIndex = e.currentTarget.dataset.type_index
    var nowNum = this.data.AllFoodList[typeIndex].foodList[foodIndex].buyNum
    if (nowNum == 0) {
    return;
    }
    nowNum = nowNum - 1
    var tempBuyTotal = this.data.buyTotal;
     
    this.data.AllFoodList[typeIndex].foodList[foodIndex].buyNum = nowNum
    this.setData({
    AllFoodList: this.data.AllFoodList, buyTotal: tempBuyTotal - 1
    })
    this.calculationMoney();
},

计算购买商品价格

//计算总价
calculationMoney: function () {
var tempMoney = 0;
var parent = this.data.AllFoodList.length;
for (var i = 0; i < parent; i++) {
for (var j = 0; j < this.data.AllFoodList[i].foodList.length; j++) {
tempMoney = tempMoney + (this.data.AllFoodList[i].foodList[j].buyNum * this.data.AllFoodList[i].foodList[j].goodPrice)
}
 
}
this.setData({
totalMoney: tempMoney
})
 
},
//显示购物车
showCartDialog: function () {
this.setData({
cartVisible: !this.data.cartVisible
})
},
//清空购物车
funCartEmpty: function () {
var temp = this.data.AllFoodList;
for (var i = 0; i < temp.length; i++) {
for (var j = 0; j < temp[i].foodList.length; j++) {
temp[i].foodList[j].buyNum = 0;
}
}
this.calculationMoney();
this.setData({
AllFoodList: temp, buyTotal: 0
})
 
},