主要看一下購物車的計算過程 實現後的基本樣式 # 具體代碼 主要看shops頁面， 前提：獲取基本的數據,由於數據太長，還請下載項目後查看，github地址：https://github.com/cxy-js/wechat-shop + shops頁面data數據 ``` data: { shops ...
主要看一下購物車的計算過程實現後的基本樣式
# 具體代碼主要看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
