微信小程序實現一個食堂點餐

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()
	}
})