kitchendDevice/pageTwo/me/foodlist.vue

<template>
	<view class="content">
		<!-- 搜索 -->
		<search @handleSearch="handleSearch"></search>

		<view class="box menu">
			<!-- 左侧菜单栏 -->
			<view class="left" :class="[ActiveList.length?'maxheight':'']">
				<view class="name" v-for="(ite,ind) in menu" :key="ind" :class="[index==ind?'active':'']"
					@click="handleToggle(ind)">
					{{ite.name}}
				</view>
			</view>

			<!-- 右侧商品 -->
			<view class="right" :class="[ActiveList.length?'C':'']">
				<view class="right_list" v-for="(ite,ind) in menulist" :key="ind">
					<view class="title">
						<view>{{ite.name}}</view>
					</view>
					<view class="list">
						<view class="item" v-for="(it,id) in ite.list" :key="id" @click="handleDetail(it)"
							:class="[ActiveList.indexOf(it)!=-1?'active0':'']">
							<text>{{it.name}}</text>
							<icon class="iconfont" :class="[ActiveList.indexOf(it)!=-1?'icon-xuanzhong':'icon-add']">
							</icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 选中区 -->
		<view class="activeList" v-if="ActiveList.length">
			<view class="list">
				<view class="item" v-for="(ite,ind) in ActiveList" :key="ind">
					<text>{{ite.name}}</text>
					<icon class="iconfont icon-quxiao" @click="handleDetail(ite)"></icon>
				</view>
			</view>
			<view class="groupbtn">
				<view @click="handledelete">清空</view>
				<view class="subbtn" @click="handlesubbtn"> 确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import search from "../../components/search.vue"
	export default {
		components: {
			search
		},
		data() {
			return {
				text: "",
				index: 0,
				menu: [],
				menulist: [],
				ActiveList: [],
				type: "",
			};
		},
		onLoad() {
			let that = this
			that.menu = that.$json.food
			that.menulist = that.$json.foodlist
		},
		methods: {
			// 左侧切换
			handleToggle(index) {
				let that = this
				that.index = index
			},
			// 商品清空
			handledelete() {
				this.ActiveList = []
			},
			// 商品选择
			handleDetail(ite) {
				var that = this;
				if (that.ActiveList.indexOf(ite) == -1) {
					that.ActiveList.push(ite);
				} else {
					that.ActiveList.splice(that.ActiveList.indexOf(ite), 1);
				}
			},
			// 商品提交
			handlesubbtn() {
				let that = this
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2]
				prevPage.$vm.getAddFood(that.ActiveList)
				uni.navigateBack({
					delta: 1
				})
			},
			// 搜索
			handleSearch(ite) {
				console.log("食材库搜索", ite)
			},

		}
	}
</script>

<style lang="scss" scoped>
	.right {
		.item {
			width: 30%;
			border: 1px solid #f7f7f7;
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 28px;
			border-radius: 8px;
			margin-bottom: 10px;

			text {
				margin-bottom: 0 !important;
			}
		}

		.icon-xuanzhong {
			color: $mainColor;
		}

		.active0 {
			border: 1px solid $mainColor;
		}
	}

	.activeList {
		position: fixed;
		bottom: 0px;
		left: 0;
		right: 0;
		z-index: 999;
		background: #fff;
		padding: 10px 10px 0 0;
		border-radius: 10px 10px 0 0;
		box-shadow: 0px 1px 5px 2px #dfe2e1fc;

		.list {
			height: 340rpx;
			overflow: scroll;
			padding-bottom: 55px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-content: end;

			.item {
				width: 46%;
				border: 1px solid $mainColor;
				display: flex;
				justify-content: space-around;
				height: 28px;
				border-radius: 5px;
				align-items: center;
				margin-bottom: 10px;
				margin-left: 1%;
				float: left;

				icon {
					color: $mainColor;
					font-size: 16px;
				}
			}
		}

		.groupbtn {
			display: flex;
			justify-content: space-between;
			position: absolute;
			left: 0px;
			right: 0px;
			bottom: 0px;
			padding: 10px;
			background: #fff;
			border-top: 1px solid #f7f7f7;

			view {
				width: 40%;
				text-align: center;
				border: 1px solid #dfdfdf;
				border-radius: 10px;
				height: 31px;
				line-height: 31px;
			}

			.subbtn {
				color: #fff;
				border-color: $mainColor;
				background-color: $mainColor;
			}
		}
	}

	.maxheight {
		height: calc(100vh - 500rpx);
	}
</style>