420 lines
14 KiB
Vue
420 lines
14 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="While foods">
|
||
<image class="foods-img" :src="foodData.cover" mode="aspectFill"></image>
|
||
<view class="foods-cont">
|
||
<view class="foods-name">
|
||
{{ foodData.name }}
|
||
</view>
|
||
<view class="foods-text">
|
||
{{ foodData.explain }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="While levels">
|
||
<view class="levels-name">
|
||
嘌呤含量
|
||
</view>
|
||
<view class="levels-tips">
|
||
<view class="levels-number">
|
||
{{ foodData.number }}
|
||
</view>
|
||
<view class="levels-text">
|
||
<view class="levels-unit">毫克</view>
|
||
<view class="levels-usable">每100克（可食部分）</view>
|
||
</view>
|
||
</view>
|
||
<view class="line">
|
||
<view class="line-label" :class="{active : orderId == item.order}" v-for="(item, index) in count.options" :key="index">
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
<view class="tips">
|
||
<block v-if="orderId == 1">( 该食物可放心食用 )</block>
|
||
<block v-else-if="orderId == 2">( 该食物可少量食用 )</block>
|
||
<block v-else>( 该食物谨慎食用 )</block>
|
||
</view>
|
||
</view>
|
||
<view class="While vote">
|
||
<view class="vote-title">
|
||
<text>一共有{{ count.vote_users }}位痛友参与投票</text>
|
||
每个人体质不同，食物对身体的影响也会有差异！
|
||
</view>
|
||
<view class="vote-number">
|
||
<view class="vote-label" v-for="(item, index) in count.options" :key="index">
|
||
<view class="vote-number-ticket">{{ item.count }}</view>
|
||
<view class="vote-number-name">
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="vote-assess">
|
||
你吃了吗怎么样？
|
||
</view>
|
||
<view class="vote-btn">
|
||
<view class="vote-btn-label" :class="{active : item.is_my_vote}" v-for="(item, index) in count.options" :key="index" @click="voteClick(item.id)">
|
||
<image v-if="item.order == 1" class="vote-label-icon" src="/static/icons/lookIcon_00.png" mode=""></image>
|
||
<image v-else-if="item.order == 2" class="vote-label-icon" src="/static/icons/lookIcon_01.png" mode=""></image>
|
||
<image v-else class="vote-label-icon" src="/static/icons/lookIcon_02.png" mode=""></image>
|
||
<view class="vote-label-name">
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="While other">
|
||
<view class="other-title">
|
||
其他营养含量
|
||
</view>
|
||
<view class="other-list" v-if="foodData.pabulum">
|
||
<view class="other-label">
|
||
<view class="other-name">
|
||
脂肪
|
||
</view>
|
||
<view class="other-number">
|
||
{{ foodData.pabulum.fat ? foodData.pabulum.fat : 0 }}g
|
||
</view>
|
||
</view>
|
||
<view class="other-label">
|
||
<view class="other-name">
|
||
碳水
|
||
</view>
|
||
<view class="other-number">
|
||
{{ foodData.pabulum.carbohydrate ? foodData.pabulum.carbohydrate : 0 }}g
|
||
</view>
|
||
</view>
|
||
<view class="other-label">
|
||
<view class="other-name">
|
||
蛋白质
|
||
</view>
|
||
<view class="other-number">
|
||
{{ foodData.pabulum.protein ? foodData.pabulum.protein : 0 }}g
|
||
</view>
|
||
</view>
|
||
<view class="other-label">
|
||
<view class="other-name">
|
||
纤维素
|
||
</view>
|
||
<view class="other-number">
|
||
{{ foodData.pabulum.cellulose ? foodData.pabulum.cellulose : 0 }}g
|
||
</view>
|
||
</view>
|
||
<view class="other-label">
|
||
<view class="other-name">
|
||
热量
|
||
</view>
|
||
<view class="other-number">
|
||
{{ foodData.pabulum.calories ? foodData.pabulum.calories : 0 }}kcal
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="While other">
|
||
<view class="other-title">
|
||
食物评价
|
||
</view>
|
||
<view class="evaluate">
|
||
{{ foodData.description }}
|
||
</view>
|
||
</view>
|
||
<view class="While other">
|
||
<view class="other-title">
|
||
痛风患者怎么吃
|
||
</view>
|
||
<view class="evaluate">
|
||
{{ foodData.remark }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { foodDet, foodVote } from '@/apis/interfaces/gout'
|
||
export default {
|
||
data() {
|
||
return {
|
||
foodData: '', //食物数据
|
||
count : '',
|
||
orderId : '', //评价id
|
||
canVote : '', //是否投票
|
||
}
|
||
},
|
||
onShow() {
|
||
// 获取食物详情
|
||
this.foodInfo();
|
||
},
|
||
methods: {
|
||
// 食物详情
|
||
foodInfo() {
|
||
foodDet(this.$Route.query.id).then(res => {
|
||
this.foodData = res
|
||
this.count = res.count
|
||
this.orderId = res.count.grade
|
||
this.canVote = res.can.vote
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
|
||
// 投票
|
||
voteClick(id) {
|
||
if(this.$store.getters.getToken) {
|
||
if(!this.canVote) {
|
||
uni.showToast({
|
||
title: '您已经投过票了',
|
||
icon: "none"
|
||
})
|
||
return
|
||
}
|
||
// 进行投票
|
||
foodVote(this.$Route.query.id, id).then(res => {
|
||
uni.showToast({
|
||
title: res,
|
||
icon: "none"
|
||
})
|
||
|
||
// 获取食物详情
|
||
this.foodInfo();
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
|
||
return
|
||
}
|
||
this.$Router.push({ name: 'Login' });
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content{
|
||
overflow: hidden;
|
||
background: #f3f4f6;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.While {
|
||
border-radius: 10rpx;
|
||
margin-bottom: 30rpx;
|
||
background-color: #FFFFFF;
|
||
padding:30rpx;
|
||
box-sizing: border-box;
|
||
box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
|
||
}
|
||
|
||
// 食物
|
||
.foods {
|
||
position: relative;
|
||
.foods-img {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
.foods-cont {
|
||
position: absolute;
|
||
width: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
padding: 30rpx 30rpx 30rpx 150rpx;
|
||
box-sizing: border-box;
|
||
.foods-name {
|
||
font-weight: 600;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.foods-text {
|
||
font-size: 26rpx;
|
||
color: #919191;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 含量
|
||
.levels {
|
||
.levels-name {
|
||
font-size: 28rpx;
|
||
color: #919191;
|
||
text-align: center;
|
||
}
|
||
.levels-tips {
|
||
background: linear-gradient(to left, #6d79ec, #8591ff);
|
||
color: #FFFFFF;
|
||
padding: 20rpx 20rpx 20rpx 40rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 10rpx;
|
||
margin: 30rpx 100rpx;
|
||
display: flex;
|
||
.levels-number {
|
||
font-size: 60rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
.levels-text {
|
||
font-size: 26rpx;
|
||
padding-top: 8rpx;
|
||
.levels-usable {
|
||
font-size: 24rpx;
|
||
opacity: .9;
|
||
}
|
||
}
|
||
}
|
||
.line {
|
||
display: flex;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
.line-label {
|
||
flex: 3;
|
||
margin: 0 5rpx;
|
||
text-align: center;
|
||
position: relative;
|
||
padding-bottom: 20rpx;
|
||
font-size: 24rpx;
|
||
color: #919191;
|
||
&::after,
|
||
&::before{
|
||
position: absolute;
|
||
content: '';
|
||
}
|
||
&::after {
|
||
left: 0;
|
||
bottom: 0;
|
||
border-radius: 10rpx;
|
||
width: 100%;
|
||
height: 6rpx;
|
||
}
|
||
&::before {
|
||
left: calc(50% - 8rpx);
|
||
bottom: -6rpx;
|
||
z-index: 9;
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
border-radius: 50%;
|
||
background: #fff9ee;
|
||
border-style: solid;
|
||
border-width: 6rpx;
|
||
display: none;
|
||
}
|
||
&.active::before {
|
||
display: block;
|
||
}
|
||
&:nth-child(1)::after {
|
||
background: #5dcd7b;
|
||
}
|
||
&:nth-child(2)::after {
|
||
background: #e9ce49;
|
||
}
|
||
&:nth-child(3)::after {
|
||
background: #f58054;
|
||
}
|
||
&:nth-child(1)::before {
|
||
border-color: #5dcd7b;
|
||
}
|
||
&:nth-child(2)::before {
|
||
border-color: #e9ce49;
|
||
}
|
||
&:nth-child(3)::before {
|
||
border-color: #f58054;
|
||
}
|
||
}
|
||
}
|
||
.tips {
|
||
text-align: center;
|
||
padding-top: 20rpx;
|
||
font-size: 26rpx;
|
||
color: #919191;
|
||
}
|
||
}
|
||
|
||
// 投票
|
||
.vote {
|
||
.vote-title {
|
||
font-size: 26rpx;
|
||
color: #919191;
|
||
text {
|
||
color: #000000;
|
||
display: block;
|
||
font-size: 32rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
}
|
||
.vote-number {
|
||
display: flex;
|
||
margin: 40rpx 0;
|
||
.vote-label {
|
||
flex: 3;
|
||
text-align: center;
|
||
.vote-number-ticket {
|
||
color: #6d79ec;
|
||
font-weight: 600;
|
||
}
|
||
.vote-number-name {
|
||
font-size: 28rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.vote-assess {
|
||
margin-bottom: 30rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.vote-btn {
|
||
display: flex;
|
||
.vote-btn-label {
|
||
flex: 3;
|
||
margin: 0 10rpx;
|
||
background-color: #f3f4f6;
|
||
color: #262729;
|
||
border-radius: 30rpx;
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
.vote-label-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin: 10rpx 15rpx 0 20rpx;
|
||
}
|
||
&.active {
|
||
background-color: #a2aaff;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 其他含量
|
||
.other {
|
||
.other-title {
|
||
margin-bottom: 30rpx;
|
||
font-weight: 600;
|
||
}
|
||
.other-list {
|
||
display: flex;
|
||
.other-label {
|
||
flex: 5;
|
||
text-align: center;
|
||
width: 20%;
|
||
font-size: 26rpx;
|
||
.other-number {
|
||
font-size: 24rpx;
|
||
color: #919191;
|
||
padding-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 食物评价
|
||
.evaluate {
|
||
line-height: 42rpx;
|
||
color: #585858;
|
||
font-size: 26rpx;
|
||
}
|
||
</style>
|