dish.html
<view class="container flex-wrap flex-direction-row">
<!-- left aside -->
<view class="aside flex-wrap flex-direction-col">
<block wx:for="{{navList}}">
<text class="type-nav {{curNav == item.id ? 'selected' : ''}}" bindtap="selectNav" data-index="{{index}}" data-id="{{item.id}}">{{item.name}}</text>
</block>
</view>
<!-- content -->
<view class="content flex-item">
<block wx:for="{{dishesList[curIndex]}}">
<view class="dish flex-wrap flex-direction-row" catchtap="selectDish" data-dish="{{item.id}}">
<view class="flex-item">
<text class="title">{{item.name}}</text>
<p>¥{{item.price}}</p>
</view>
<view class="add-btn"><icon type="{{item.status ? 'success' : 'circle'}}" color="orange" size="30"></icon></view>
</view>
</block>
</view>
</view>
<!-- cart -->
<view class="cart">
<text class="total">訂單:{{cartTotal}}</text>
</view>
<loading hidden="{{hidden}}">玩命加載中…</loading>
dish.wxss
.aside{
width:4rem;
border-right: 1px solid #ddd;
font-size: .85rem;
}
.type-nav{
position: relative;
padding:.7rem .3rem;
text-align: center;
border-bottom: 1px solid #ddd;
z-index: 10;
}
.type-nav.selected{
margin-right: -1px;
padding-left:-1px;
color: #333;
background-color: #fff;
}
.content{
background-color: #fff;
}
.dish{
margin-left: 1rem;
padding: 1rem;
border-bottom: 1px solid #ddd;
}
.dish .title{
display: block;
font-size: 1rem;
}
.dish p{
color: orange;
font-size: .75rem;
}
.dish .add-btn{
width: 3rem;
text-align: right;
}
.cart{
display: block;
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding: 1rem;
background: #ddd;
}
dish.js
var app = getApp()
Page({
data: {
hidden:false,
curNav:1,
curIndex:0,
cart:[],
cartTotal:0,
navList:[
{
id:1,
name:'熱銷菜品'
},
{
id:2,
name:'熱菜'
},
{
id:3,
name:'涼菜'
},
{
id:4,
name:'套餐'
}
],
dishesList:[
[
{
name:"紅燒肉",
price:38,
num:1,
id:1
},
{
name:"宮保雞丁",
price:58,
num:1,
id:29
},
{
name:"水煮魚",
price:88,
num:1,
id:2
}
],
[
{
name:"小炒肉",
price:18,
num:1,
id:3
},
{
name:"烤魚",
price:58,
num:1,
id:4
}
],
[
{
name:"大拌菜",
price:18,
num:1,
id:5
},
{
name:"涼粉",
price:8,
num:1,
id:6
}
],
[
{
name:"一葷一素",
price:7,
num:1,
id:7
},
{
name:"兩葷一素",
price:9,
num:1,
id:8
}
]
],
dishes:[
]
},
loadingChange () {
setTimeout(() => {
this.setData({
hidden:true
})
},2000)
},
selectNav (event) {
let id = event.target.dataset.id,
index = parseInt(event.target.dataset.index);
self = this;
this.setData({
curNav:id,
curIndex:index
})
},
// 選擇菜品
selectDish (event) {
let dish = event.currentTarget.dataset.dish;
let flag = true;
let cart = this.data.cart;
if(cart.length > 0){
cart.forEach(function(item,index){
if(item == dish){
cart.splice(index,1);
flag = false;
}
})
}
if(flag) cart.push(dish);
this.setData({
cartTotal:cart.length
})
this.setStatus(dish)
},
setStatus (dishId) {
let dishes = this.data.dishesList;
for (let dish of dishes){
dish.forEach((item) => {
if(item.id == dishId){
item.status = !item.status || false
}
})
}
this.setData({
dishesList:this.data.dishesList
})
},
onLoad () {
this.loadingChange()
}
})