TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

[更新发现模块]

Browse Source
This commit is contained in:
zhangmanman
2022-01-11 11:25:41 +08:00
parent 6d4971bc5e
commit 906745fc14
33 changed files with 1806 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
pages/menu/classify.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<view class="content">
<view class="tabs">
<u-tabs :current="tabsIndex" :list="tabArr" @change="tabsClick" lineColor="#34CE98" :activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"></u-tabs>
</view>
<view class="box">
<oct-menu
:lists="menuData"
:btnStyle="{'padding': '30rpx'}"
@onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.id, title: $event.name, title: $event.index }})"
/>
</view>
</view>
</template>
<script>
import { queue, categories } from '@/apis/interfaces/menu'
export default {
data() {
return {
tabArr : [],
menuData : [],
tabsIndex : this.$Route.query.index
};
},
mounted() {
this.getTab()
this.getMenu(this.$Route.query.id)
},
methods: {
getTab(){
categories().then(res => {
this.tabArr = res
})
},
getMenu(id){
queue({
category_id: id
}).then(res => {
this.menuData = res.data
})
},
tabsClick(item) {
this.getMenu(item.category_id)
this.tabsIndex = item.index
}
}
};
</script>
<style lang="scss" scoped>
page {
background-color: $window-color;
}
.tabs {
background-color: white;
margin-bottom: $margin;
padding-bottom: $padding - 10;
}
.box {
padding: 0 $padding;
box-sizing: border-box;
}
// 34CE98
</style>

149
pages/menu/details.vue Normal file
View File

@@ -0,0 +1,149 @@
<template>
<view class="content">
<image class="backImg" :src="menuData.cover ? menuData.cover : '/static/find/default_img.png'" mode="widthFix"></image>
<view class="details">
<view class="introduce">
{{ menuData.description }}
</view>
<view class="foods">
<view class="title">
推荐搭配
</view>
<oct-menu
:lists="menuData.foods"
:isType='true'
:btnStyle="{'margin-top': '30rpx'}"
@onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.food_id, title: $event.name }})"
/>
</view>
<view class="foods">
<view class="title">
推荐搭配
</view>
<view class="other">
<view class="other-label">
<view class="other-name">
碳水化合物
</view>
<view class="other-number">
200.00g
</view>
</view>
<view class="other-label">
<view class="other-name">
蛋白质
</view>
<view class="other-number">
200.00g
</view>
</view>
<view class="other-label">
<view class="other-name">
脂肪
</view>
<view class="other-number">
200.00g
</view>
</view>
<view class="other-label">
<view class="other-name">
千卡
</view>
<view class="other-number">
{{ menuData.calory }}
</view>
</view>
</view>
</view>
<view class="foods">
<view class="title">
营养师建议
</view>
<view class="quiz">
{{ menuData.suggest }}
</view>
</view>
</view>
</view>
</template>
<script>
import { menuDet } from '@/apis/interfaces/menu'
export default {
data() {
return {
menuData: ''
}
},
onLoad() {},
mounted() {
uni.setNavigationBarTitle({
title: this.$Route.query.title
})
this.getMenu()
},
methods: {
getMenu(){
menuDet(this.$Route.query.id).then(res => {
this.menuData = res
})
}
}
};
</script>
<style lang="scss" scoped>
page {
background-color: $window-color;
}
.backImg {
width: 100%;
display: block;
}
.details {
padding: $padding;
box-sizing: border-box;
.introduce {
border-radius: $radius;
background-color: white;
padding: $padding;
box-sizing: border-box;
margin-bottom: $margin;
font-size: $title-size-lg;
line-height: 48rpx;
}
.foods {
background-color: white;
border-radius: $radius;
padding: $padding;
margin-bottom: $margin;
.title {
font-size: $title-size;
font-weight: bold;
margin-bottom: $margin;
}
.other {
display: flex;
.other-label {
text-align: center;
width: 25%;
font-size: $title-size-m;
.other-number {
color: $text-gray;
font-size: $title-size-sm;
padding-top: $padding - 20;
}
&:last-child {
font-weight: bold;
}
}
}
.quiz {
font-size: $title-size-m;
color: $text-gray;
line-height: 48rpx;
}
}
}
</style>

82
pages/menu/index.vue Normal file
View File

@@ -0,0 +1,82 @@
<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 }})">
查看更多<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>