kitchendDevice/pageTwo/me/foodlist.vue

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

		<!-- 头部1级菜单栏 -->
		<view class="tab_list">
			<scroll-view class="scroll-menu" scroll-x="true" style="white-space: nowrap;">
				<view class="tabbar" v-for="(ite,ind) in menuTop" :key="ind" @click="handleToggle(ind)">
					<view :class="[index ==ind?'active':'']">{{ite.name}}</view>
				</view>
			</scroll-view>
		</view>

		<view class="box menu" :class="[ActiveList.length?'maxheight':'']">
			<!-- 左侧2级商品 -->
			<view class="left">
				<view class="name" v-for="(ite,ind) in menu2" :key="ind" :class="[leftInd==ind?'active':'']"
					@click="handleToggleLeft(ind)">
					{{ite.name}}
				</view>
			</view>
			<!-- 右侧3级 -->
			<view class="right">
				<view class="list mt-15">
					<view class="item" v-for="(ite,ind) in menu3" :key="ind" @click="handleDetail(ite,1)"
						:class="[ActiveList.indexOf(ite)!=-1?'active0':'']">
						<text class="overflow">{{ite.name}}</text>
						<icon class="iconfont" :class="[ActiveList.indexOf(ite)!=-1?'icon-xuanzhong':'icon-add']" />
					</view>
          <!-- <div class="slot" style="width: 100%;height: 340rpx;" v-if="ActiveList.length>0"></div> -->
				</view>
				<view v-if="!menu3.length" class="nolist">
					<icon class="iconfont icon-wancan"></icon>
					<text>还没有数据哦！</text>
				</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,2)"></icon>
				</view>
			</view>
			<view class="groupbtn">
				<view @click="handledelete">清空</view>
				<view class="subbtn" @click="handlesubbtn"> 确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import search from "../../components/search.vue"
	export default {
		components: {
			search
		},
		data() {
			return {
				text: "",
				index: 0,
				leftInd: 0,
				menu: [],
				menu2: [],
				menu3: [],
				menulist: [],
				ActiveList: [],
				page: 1,
				type: "",
				name: "",
				lastPage: "",
			};
		},
		computed: {
			...mapState(["foodList"]),
			menuTop() {
				this.menu2 = this.foodList.length ? this.foodList[0].list : [],
				  console.log([...this.foodList, {
				    id: 4,
				    list: [],
				    name: '搜索'
				  }])
				return [...this.foodList, {
				  id: 4,
				  list: [],
				  name: '搜索'
				}]
			},
		},
		onLoad(options) {
			let that = this
			if (options && options.list) {
				let list = JSON.parse(options.list)
				console.log("11111111", list)
			}
			that.handleHomeInfo()
		},
		onPullDownRefresh() {
			let that = this
			if (!this.lastPage || this.page >= this.lastPage) {
				uni.showToast({
					title: '没有更多数据！',
					icon: 'none'
				})
				return
			}
			this.page++
			if (that.menu2.length) {
				that.handleHomeInfo()
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {
			handleHomeInfo() {
				let that = this
				that.$model.getCookFoodList({
					food_level2_id: that.menu2[that.leftInd].id,
					page: that.page,
					search_data: that.name
				}).then(res => {
					if (res.code != 0) return
					that.lastPage = res.data.page_total
					that.menu3 = that.menu3.concat(res.data.content_list)
				})
			},
			// 头部切换
			handleToggle(ind) {
				let that = this
				that.index = ind
				that.leftInd = 0
				that.menu2 = that.menuTop[ind].list
				that.menu3 = []
				that.page = 1
				if (that.menu2.length) {
					that.handleHomeInfo()
				}
			},
			// 左侧切换
			handleToggleLeft(ind) {
				let that = this
				that.leftInd = ind
				that.menu3 = []
				that.page = 1
				that.handleHomeInfo()
			},
			// 商品选择
			handleDetail(ite, ind) {
				var that = this;
				let list = []
				if (ind == 1) {
					list.push(ite)
					that.ActiveList = that.$tools.mergeAndDeduplicate(that.ActiveList, list, 'name')
				} else {
					for (var n = 0; n < that.ActiveList.length; n++) {
						if (ite.name == that.ActiveList[n].name) {
							that.ActiveList.splice(n, 1)
						}
					}
				}
			},
			// 商品清空
			handledelete() {
				this.ActiveList = []
			},
			// 商品提交
			handlesubbtn() {
				let that = this
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2]
				prevPage.$vm.getAddFood(that.ActiveList)
				uni.navigateBack({
					delta: 1
				})
			},
			// 搜索
			handleSearch(name) {
				let that = this
				let list = []
				if (name != "") {
					that.$model.getFoodSearch({
					  food_name: name
					}).then(res => {
					  if (res.code != 0) {
					    uni.showToast({
					      title: res.msg,
					      icon: 'error'
					    })
					    return
					  }
					  that.index = 3
            that.menu2 = []
					  that.menu3 = res.data
					})
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.tab_list {
		display: flex;
		top: 50px;
		width: 100%;
		position: fixed;
		z-index: 99;
		height: 45px;
		background: #FFF;
		justify-content: space-between;

		.scroll-menu {
			width: 100%;

			.tabbar {
				padding: 10px;
				display: inline-block;

				view {
					display: inline-block;
				}
			}
		}

		.active {
			color: #fff;
			padding: 5px 8px;
			border-radius: 5px;
			background-color: #ff4c4f;
		}
	}

	.menu {
		width: 100%;
		position: relative;
		margin-top: 101px;
		height: calc(100vh - 101px) !important;
    
    .left {
    	top: 101px !important;
    	position: fixed;
    	background-color: #f7f7f7;
      height: calc(100vh - 100px);
    }
    
    .right {
    	top: 0px !important;
      height: calc(100vh - 100px);
    
    	.list {
    		display: flex;
    		flex-wrap: wrap;
    	}
    
    	.item {
    		width: 29%;
    		border: 1px solid #dfdfdf;
    		display: flex;
    		align-items: center;
    		box-sizing: border-box;
    		justify-content: space-between;
    		height: 30px;
    		border-radius: 5px;
    		margin: 0 2% 10px;
    		padding: 0 5px;
    
    		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 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;

			.item {
				border: 1px solid $maincolor;
				display: flex;
				justify-content: space-between;
				height: 28px;
				box-sizing: border-box;
				border-radius: 5px;
				align-items: center;
				margin: 0 2% 10px;
				float: left;
				padding: 0 10px;

				icon {
					color: $maincolor;
					font-size: 16px;
          margin-left: 10rpx;
				}
			}
		}

		.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 {
		.left {
			height: calc(100vh - 680rpx);
		}
    .right {
      height: calc(100vh - 680rpx);
    }
	}
</style>