kitchendDevice/pages/menu/menu.vue

<template>
	<view class="content">
		<!-- 搜索 -->
		<search></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">
				<scroll-view class="right_list" scroll-y="true" @scrolltolower="onPullDown">
					<div class="right_inner_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>
          </div>
				</scroll-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/search2.vue"
	export default {
		components: {
			search
		},
		computed: {
			...mapState(["menuList","menu_search_value"]),
			menu() {
				return [...this.menuList,{id:999,name:'搜索'}]
			},
		},
		data() {
			return {
				page: 1,
				text: "",
				index: 0,
				lastPage: "",
        loading: false,
				menulist: []
			};
		},
		onLoad(op) {
			let that = this
			that.page = 1
			that.handleCookListLabel()
		},
    onShow() {
      let that = this
      if(that.$store.state.menu_search_value != '') {
        that.handleSearch(that.$store.state.menu_search_value)
        that.$store.state.menu_search_value = ""
      }
    },
		methods: {
      onPullDown() {
      	let that = this
        if(that.loading) {
          return
        }
      	if (!this.lastPage || this.page >= this.lastPage) {
      		uni.showToast({
      			title: '没有更多数据！',
      			icon: 'none'
      		})
      		return
      	}
      	this.page++
      	this.handleCookListLabel()
      },
			// 食材列表
			handleCookListLabel() {
				let that = this
        that.loading = true
				that.$model.getCookListLabel({
					cook_label: that.menu[that.index].id,
					page: that.page,
				}).then(res => {
          that.loading = false
					if (res.code != 0) return
					that.menulist = that.menulist.concat(res.data.content_list)
          that.lastPage = res.data.page_total
          that.page = res.data.page_now
				})
			},
			// 左侧切换
			handleToggle(ind) {
				let that = this
				that.index = ind
				that.page = 1
				that.menulist = []
				that.handleCookListLabel()
			},
			// 商品详情
			handleDetail(id) {
				if (!uni.getStorageSync('token')) {
					this.$tools.msg("登录后查看等多！")
					return
				}
				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 {
          uni.showLoading({
            title: '搜索中...'
          })
					that.$model.getMenuSearch({
						food_name: ite
					}).then(res => {
            uni.hideLoading()
						if (res.code != 0) return
						that.index = that.menu.length - 1
						that.menulist = res.data.content_list
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
  .right_list {
    padding: 0 !important;
    height: 100%;
  }
	.right_inner_list {
		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>