150 lines
4.6 KiB
Vue
150 lines
4.6 KiB
Vue
<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="det"
|
|
: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="nowrap other-number">
|
|
{{ menuData.carbohydrate }}g
|
|
</view>
|
|
</view>
|
|
<view class="other-label">
|
|
<view class="other-name">
|
|
蛋白质
|
|
</view>
|
|
<view class="nowrap other-number">
|
|
{{ menuData.protein }}g
|
|
</view>
|
|
</view>
|
|
<view class="other-label">
|
|
<view class="other-name">
|
|
脂肪
|
|
</view>
|
|
<view class="nowrap other-number">
|
|
{{ menuData.cellulose }}g
|
|
</view>
|
|
</view>
|
|
<view class="other-label">
|
|
<view class="other-name">
|
|
千卡
|
|
</view>
|
|
<view class="nowrap 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>
|