154 lines
3.0 KiB
Vue
154 lines
3.0 KiB
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()
|
|
},
|
|
// 商品详情
|
|
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 {
|
|
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> |