概述
微信小程序购物车列表demo
详细
需求
-
显示食物名称、价格、数量。
-
点击相应商品增加按钮,购买数量增加1,点击食物减少按钮,购买数量减一
-
显示购买总数和总金额
-
查看当前购买的商品
效果图(数据来自本地模拟)
目录结构
实现过程
主要wxml
<view class='foods'><view class='left-food-menu'><scroll-view class='scroll-view' scroll-y="true" style='height:{{screenHeight-150}}px'><!-- 渲染类别名称 --><view wx:key="id" wx:for="{{AllFoodList}}" data-index='{{index}}' bindtap='changeTypeSelected' class="{{nowFoodTypeSelectIndex==index ? 'food-type-title food-type-title-selected ' : 'food-type-title'}}"><view wx:if='{{nowFoodTypeSelectIndex==index}}' class='line'></view><text >{{item.foodTitle}}</text></view></scroll-view></view><!-- 渲染食物列表 --><view wx:key="id" wx:for="{{AllFoodList}}" wx:for-index="idx" data-index='{{idx}}' hidden='{{nowFoodTypeSelectIndex==idx?false:true}}' class='food-list'><scroll-view class="scroll" scroll-y="true"><!-- 渲染这个分类下所有食物 --><view wx:key="id" wx:for="{{item.foodList}}" wx:for-index="foodindex"><view class="cart_container"><image mode='aspectFill' class="item-image" src="{{item.goodPerview}}"></image><view class="column"><view class='food-info'><text class="food-title">{{item.goodName}}</text><text class="colmun-margin sales">月销: {{item.goodSales}} 单</text><view class="colmun-margin row"><view><text class="sku-price">¥</text><text class="sku-price">{{item.goodPrice}}</text></view><view class="{{item.buyNum>0?'add_border':'food-item-add'}}"><image bindtap='funFoodReduce' data-type_index='{{idx}}' data-food_index="{{foodindex}}" hidden='{{item.buyNum>0?false:true}}' class='img food-subtract' src='/imgs/ic_food_subtract.png'></image><text hidden='{{item.buyNum>0?false:true}}' class='food-item-number'>{{item.buyNum}}</text><image bindtap='funFoodAdd' data-type_index='{{idx}}' data-food_index="{{foodindex}}" class='img food-addto' src='/imgs/ic_food_item_add.png'></image></view></view></view></view></view><view class="separate"></view></view></scroll-view></view>
</view>
点击商品增加按钮
funFoodAdd: function (e) {this.calculationMoney;var foodIndex = e.currentTarget.dataset.food_indexvar typeIndex = e.currentTarget.dataset.type_indexvar nowNum = this.data.AllFoodList[typeIndex].foodList[foodIndex].buyNumnowNum = nowNum + 1var tempBuyTotal = this.data.buyTotal;this.data.AllFoodList[typeIndex].foodList[foodIndex].buyNum = nowNumthis.setData({AllFoodList: this.data.AllFoodList, buyTotal: tempBuyTotal + 1})this.calculationMoney();},
点击商品减少按钮
//减去食物
funFoodReduce: function (e) {var foodIndex = e.currentTarget.dataset.food_indexvar typeIndex = e.currentTarget.dataset.type_indexvar nowNum = this.data.AllFoodList[typeIndex].foodList[foodIndex].buyNumif (nowNum == 0) {return;}nowNum = nowNum - 1var tempBuyTotal = this.data.buyTotal;this.data.AllFoodList[typeIndex].foodList[foodIndex].buyNum = nowNumthis.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
})},