主要看一下購物車的計算過程
實現后的基本樣式
# 具體代碼
主要看shops頁面，
前提：獲取基本的數據,由於數據太長，還請下載項目后查看，github地址：https://github.com/cxy-js/wechat-shop
+ shops頁面data數據
```
data: {
shops: {}, //商品
curt: 0, //分類id
curindex: 0, //當前index
idx: 0,
ishow: 1,
cai: [], //菜的數組
allprice: 0, //總家
allnum: 0 //總商品數
},
```
```
onLoad: function (options) {
let id = options.id;
//商家詳情本地請求資源
wx.showToast({
title: '成功',
duration: 500,
success: (e) => {
if (e.errMsg === 'showToast:ok') {
this.setData({
shops: data.shops[id],
cai: data.shops[id].cai
})
console.log(this.data.cai)
} else {
console.log(e.errMsg)
}
}
})
}
```
+ id 為index頁面傳過來的商家 id；依據商家id來顯示不同商家
+ 進入商家頁面 后的布局；頭部就不看了，主要看菜的分類以及都有哪些菜
在這之前需要在商品以及評價的切換中拿到curt，curt就是分類的id
+ 菜品切換
```
<view class='left-nav'>
<view wx:for="{{shops.lefttitle}}">
<view class="shops-left-title {{curt == item.id ? 'bg' : ''}}" catchtap="goIndex" data-id="{{item.id}}" data-index="{{index}}">
<text class='t'>{{item.lefttitle}}</text>
</view>
</view>
</view>
```
+ 切換代碼就不看了，主要是拿到分類的id=>curt
### 下面就是分類下的布局
```
<scroll-view scroll-y class='scroll'>
<view class='cai'>
<!--一句curt來顯示不是菜 curt===分類id-->
<view wx:for="{{cai[curt]}}" wx:for-item="cai" wx:for-index="caiindex">
<!--具體的菜-->
<view class='right-cai'>
<image src="{{cai.img}}"></image>
<view class='middle'>
<text>{{cai.cainame}}</text>
<text class='shou'>月售{{cai.shou}}</text>
<text class='price'>￥{{cai.price}}</text>
</view>
<!--加減按鈕-->
<view class='btn'>
<text class='add' catchtap="minus" data-index="{{caiindex}}" wx:if="{{cai.num===0?false:true}}">-</text>
<text class='cainum' wx:if="{{cai.num===0?false:true}}">{{cai.num}}</text>
<text class='add' catchtap="add" data-index="{{caiindex}}">+</text>
</view>
</view>
</view>
</view>
</scroll-view>
```
#### 先來看下增加的計算邏輯
```
//增加商品數量
add(e) {
let index = e.currentTarget.dataset.index
let cai = this.data.cai;
let curt = this.data.curt;//當前是哪個分類下的菜
let num = cai[curt][index].num;//當前菜的數量
num++;
cai[curt][index].num = num //點擊后菜的數量
this.setData({
cai: cai //更新菜
})
this.getAll() //計算總計
}
```
點擊按鈕時依據哪個分類下的哪個菜來區分；每點擊一次商品數量+1；最后需要實時計算價格 this.getAll()
#### 減少的計算邏輯與增加超不多
```
minus(e) {
let index = e.currentTarget.dataset.index
let cai = this.data.cai;
let curt = this.data.curt;//當前是哪個分類下的菜
let num = cai[curt][index].num;
if (num <= 0) {
return false;
}
num--;
//重新賦值數量
cai[curt][index].num = num
this.setData({
cai: cai
})
this.getAll()
}
```
多了一個判斷而已
#### 接下來就是計算總價格
```
//計算總價
getAll() {
let cai = this.data.cai;
let total = 0;
let allnum = 0;
let allcainame=""
//循環當前類別菜數組
for (let i = 0; i < cai.length; i++) {
let c = cai[i];
for (let j = 0; j < c.length; j++) {
let num = c[j].num
let price = c[j].price;
//計算總商品數
allnum += num
//計算總價
total += num * price
}
}
this.setData({
allprice: total,
allnum: allnum
});
},
```
里面都有注釋也不難看懂，就不解釋了！！！
### 注意一切已數據為中心！！
### 最后點擊去結算的跳轉
```
//跳轉支付頁面
getAllprice() {
// console.log(this.data.shops)
//傳遞菜館名，總價
let title = this.data.shops.title;
let allprice = this.data.allprice;
let cainame = this.data.cainame;
if (this.data.allnum === 0) {
wx.showModal({
title: '商品為空！',
content: '您選擇商品了嗎？',
})
return
} else {
//商品數量不能為0
this.getAll()
wx.navigateTo({
url: '../pay/pay?allprice=' + allprice + '&title=' + title
})
}
}
```
判斷一下是否有商品
在這里傳遞的數據都可以帶入到支付頁面
## 結束需要代碼請移步到我的github
+ https://github.com/cxy-js/wechat-shop