用vue实现微信小程序的点餐首页-纯前端效果

一、效果图

图片来源于网络

二、代码

<template>
	<view class="container">
		<view class="top">
			<image src="../../static/img/home.png" class="home"></image>
		</view>
		<view class="content">
			<view class="scroll">
				<scroll-view scroll-y="auto">
					<ul class="ul">
						<li v-for="(item, index) in cakes" :key="index" :class="{ li: true, active_li: index == checkedIndex }" @click="checkedLI(index)">
							{
  { item.name }}
						</li>
					</ul>
				</scroll-view>
			</view>
			<view class="cake">
				<view v-for="(item, index) in current_cakes" :key="index">
					<view v-for="(item2, index2) in item.detail" :key="index2">
						<view class="item">
							<view style="display: flex">
								<image :src="item2.src" class="img_cake"></image>
								<view class="flex_center" style="flex-direction: column; margin-left: 20px">
									<view>{
  { item2.name }}</view>
									<view style="color: #ff5722; font-weight: bold; font-size: 16px">￥{
  { item2.money }}</view>
								</view>
							</view>
							<view class="flex_center number">
								<u-icon name="minus-circle" @click="reduce(index, index2)" size="50" style="margin-right: 10px"></u-icon>
								<span style="font-size: 18px">{
  { item2.number }}</span>
								<u-icon name="plus-circle" @click="add(index, index2)" size="50" style="margin-left: 10px"></u-icon>
							</view>
						</view>

						<u-gap height="10" bg-color="#e2e2e2" style="width: 100%"></u-gap>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom">
			<image src="/static/img/gwc.png" class="gwc_img"></image>
			<view style="display: flex; align-items: center; margin-left: 30px; width: 75%; justify-content: space-between">
				<view>总计：{
  { money }}元，共：{
  { number }}件</view>
				<u-button style="margin-right: 10px" type="primary">选好了</u-button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cakes: [
				{ name: '蛋糕分类', id: '' },
				{
					name: '生日蛋糕',
					id: 'srdg',
					detail: [
						{ src: '/static/img/1.png', name: '动物乐园', money: '126', number: 0 },
						{ src: '/static/img/2.png', name: '森林莓莓', money: '160', number: 0 },
						{ src: '/static/img/3.png', name: '北海道', money: '178', number: 0 }
					]
				},
				{
					name: '休闲一刻',
					id: 'xxyk',
					detail: [
						{ src: '/static/img/2.png', name: '森林莓莓', money: '160', number: 0 },
						{ src: '/static/img/3.png', name: '北海道', money: '178', number: 0 }
					]
				}
			],
			money: 0,
			number: 0,
			checkedIndex: 1,
			current_cakes: []
		};
	},
	onLoad() {
		this.current_cakes = [];
		this.current_cakes.push(this.cakes[this.checkedIndex]);
		console.log(JSON.stringify(this.current_cakes));
	},
	onshow() {
		console.log('onshow');
	},
	methods: {
		checkedLI(index) {
			this.checkedIndex = index;
			this.current_cakes = [];
			this.current_cakes.push(this.cakes[this.checkedIndex]);
		},
		reduce(index, index2) {
			if (this.cakes[index+1].detail[index2].number > 0) {
				this.cakes[index+1].detail[index2].number--;
				this.money -= parseFloat(this.cakes[index+1].detail[index2].money);
				this.number--;
			}
		},
		add(index, index2) {
			this.cakes[index+1].detail[index2].number++;
			this.money += parseFloat(this.cakes[index+1].detail[index2].money);
			this.number++;
		}
	}
};
</script>

<style lang="less">
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	width: 100%;
	.top {
		height: 30%;
		width: 100%;
		.home {
			width: 100%;
			height: 100%;
		}
	}
	.content {
		height: 60%;
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 3fr;
		.scroll {
			background: #ece9e9;
			.ul {
				padding: 10rpx 10rpx;
				.li {
					text-align: center;
					height: 50px;
					line-height: 50px;
				}
				.li:first-child {
					font-size: 18px;
				}
				.active_li {
					background: #fff;
				}
			}
		}
		.cake {
			// display: grid;
			// grid-template-columns: 2fr 1fr;
			.item {
				margin: 10px 5px;
				display: flex;
				align-items: center;
				display: grid;
				grid-template-columns: 2fr 1fr;
			}
			.img_cake {
				width: 80px;
				height: 80px;
			}
			.flex_center {
				justify-content: center;
				display: flex;
				align-items: center;
			}
			.number {
			}
		}
	}
	.bottom {
		height: 10%;
		width: 100%;
		display: flex;
		align-items: center;
		border-top: 1px dashed #ff9800;
		.gwc_img {
			width: 80px;
			height: 80px;
		}
	}
}
</style>