微信小程序购物车-多商家-多商品

主要看一下购物车的计算过程实现后的基本样式

# 具体代码主要看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