概要
WeChat ミニ プログラムのショッピング カート リストのデモ
詳しい
必要
-
食品名、価格、数量を表示します。
-
該当商品の増加ボタンをクリックすると購入数量が1つ増加します。食品減少ボタンをクリックすると購入数量が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_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
})
},