84 lines
1.8 KiB
Vue
84 lines
1.8 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" v-for="(ite,ind) in menulist" :key="ind">
|
|
<view class="title" @click="handleList(ite)">
|
|
<view>{{ite.name}}</view>
|
|
<icon class="iconfont icon-arrow-right"></icon>
|
|
</view>
|
|
<view class="list" @click="handleDetail(ite)">
|
|
<view class="item" v-for="(it,id) in ite.list" :key="id">
|
|
<image :src="it.image" mode="aspectFill"></image>
|
|
<text>{{it.name}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import search from "../../components/search.vue"
|
|
export default {
|
|
components: {
|
|
search
|
|
},
|
|
data() {
|
|
return {
|
|
text: "",
|
|
index: 0,
|
|
menu: [],
|
|
menulist: []
|
|
};
|
|
},
|
|
onLoad() {
|
|
let that = this
|
|
that.menu = that.$json.menu
|
|
that.text = that.menu[0].name
|
|
that.menulist = that.$json.menulist
|
|
},
|
|
methods: {
|
|
// 左侧切换
|
|
handleToggle(index) {
|
|
let that = this
|
|
that.index = index
|
|
that.text = that.menu[index].name
|
|
// console.log("111", that.menu[index].name)
|
|
},
|
|
// 查看更多
|
|
handleList() {
|
|
uni.navigateTo({
|
|
url: "/pageTwo/me/mymenu?type=" + this.text
|
|
})
|
|
},
|
|
// 商品详情
|
|
handleDetail() {
|
|
uni.navigateTo({
|
|
url: "/pageTwo/me/menudetail"
|
|
})
|
|
},
|
|
// 搜索
|
|
handleSearch(ite) {
|
|
console.log("菜谱搜索", ite)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style>
|