主要看一下购物车的计算过程 实现后的基本样式
具体代码
主要看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>先来看下增加的计算逻辑
代码语言：javascript复制 //增加商品数量
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()
减少的计算逻辑与增加超不多
代码语言：javascript复制 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()
}多了一个判断而已
接下来就是计算总价格
代码语言：javascript复制 //计算总价
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
});
},里面都有注释也不难看懂，就不解释了！！！
注意一切已数据为中心！！
最后点击去结算的跳转
代码语言：javascript复制 //跳转支付页面
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
