kitchendDevice/pages/menu/menu.vue

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

		<view class="box menu">
			<!-- 左侧菜单栏 -->
			<view class="left">
				<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">
				<view class="right_list">
					<view class="list" v-for="(ite,ind) in menulist" :key="ind" @click="handleDetail(ite.id)"
						v-if="menulist.length">
						<image :src="ite.cover" mode="aspectFill"></image>
						<text class="overflow">{{ite.title}}</text>
					</view>
				</view>
				<view v-if="!menulist.length" class="nolist">
					<icon class="iconfont icon-wancan"></icon>
					<text>还没有记录哦</text>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import search from "../../components/search.vue"
	export default {
		components: {
			search
		},
		computed: {
			...mapState(["menuList"]),
			menu() {
				return this.menuList
			},
		},
		data() {
			return {
				page: 1,
				text: "",
				index: 0,
				lastPage: "",
				menulist: []
			};
		},
		onLoad() {
			let that = this
			that.page = 1
			that.handleCookListLabel()
		},
		onReachBottom() {
			let that = this
			if (!this.lastPage || this.page >= this.lastPage) {
				uni.showToast({
					title: '没有更多数据！',
					icon: 'none'
				})
				return
			}
			this.page++
			this.handleCookListLabel()
		},
		methods: {
			// 食材列表
			handleCookListLabel() {
				let that = this
				that.$model.getCookListLabel({
					cook_label: that.menu[that.index].id,
					page: that.page,
				}).then(res => {
					if (res.code != 0) return
					that.menulist = that.menulist.concat(res.data.content_list)
				})
			},
			// 左侧切换
			handleToggle(ind) {
				let that = this
				that.index = ind
				that.page = 1
				that.menulist = []
				that.handleCookListLabel()
			},
			// 查看更多
			handleList() {
				uni.navigateTo({
					url: "/pageTwo/me/mymenu?type=" + this.text
				})
			},
			// 商品详情
			handleDetail(id) {
				uni.navigateTo({
					url: "/pageTwo/me/menudetail?id=" + id
				})
			},
			// 搜索
			handleSearch(ite) {
				let that = this
				console.log("搜索", ite)
				that.page = 1
				that.menulist = []
				if (ite == '') {
					that.index = 0
					that.handleCookListLabel()
				} else {
					that.$model.getHomeSearch({
						search_data: ite
					}).then(res => {
						if (res.code != 0) return
						that.index = null
						that.menulist = res.data
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.right_list {
		padding: 0 !important;
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
		// justify-content: space-between;
	}

	.list {
		width: 33.3%;

		image {
			margin: auto;
			width: 140rpx;
			height: 140rpx;
			border-radius: 10px;
		}

		text {
			width: 100%;
			display: inline-block;
			text-align: center;
			margin-bottom: 10px;
		}
	}
</style>