82 lines
2.2 KiB
Vue
82 lines
2.2 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="menu" v-for="(item, index) in menuData" :key="index">
|
|
<view class="title">
|
|
<view class="name">
|
|
{{ item.name }}
|
|
</view>
|
|
<view class="more" @click="$Router.push({name: 'menuClassify', params: {id: item.category_id, index: index + 1 }})">
|
|
查看更多<image src="/static/find/menu_more.png" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
<view class="box">
|
|
<oct-menu
|
|
v-if="item.recipes.length > 0"
|
|
:lists="item.recipes"
|
|
:btnStyle="{'padding': '30rpx'}"
|
|
@onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.recipe_id, title: $event.name }})"
|
|
/>
|
|
<u-empty
|
|
v-else
|
|
mode="list"
|
|
text="暂无食谱"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { index } from '@/apis/interfaces/menu'
|
|
export default {
|
|
data() {
|
|
return {
|
|
menuData: ''
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getMenu()
|
|
},
|
|
methods: {
|
|
getMenu(){
|
|
index().then(res => {
|
|
this.menuData = res
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: $window-color;
|
|
}
|
|
.menu {
|
|
.title {
|
|
padding: $padding $padding 0;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
margin-bottom: $margin - 10;
|
|
line-height: 50rpx;
|
|
.name {
|
|
font-weight: bold;
|
|
font-size: $title-size + 4;
|
|
flex: 1;
|
|
}
|
|
.more {
|
|
display: flex;
|
|
color: $text-gray;
|
|
image {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
margin-top: $margin - 18;
|
|
}
|
|
}
|
|
}
|
|
.box {
|
|
padding: 0 $padding;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
</style>
|