617 lines
12 KiB
Vue
617 lines
12 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="content_box">
|
||
<view class="set">
|
||
<view class="date">{{foodInfo.date}}</view>
|
||
</view>
|
||
<view class="box">
|
||
<view class="kcal2">
|
||
<view class="top">
|
||
<view class="left ">
|
||
<view class="center">
|
||
可以吃
|
||
<text>{{foodInfo.remaining_kcal}}</text>
|
||
<view class="unit">Kcal</view>
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="item border-bottom">
|
||
<text class="name">已摄入</text>
|
||
<text class="bold">
|
||
{{foodInfo.today_intake.kcal}}千卡
|
||
</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="name">碳水</text>
|
||
<text class="bold">
|
||
{{foodInfo.today_intake.carbohydrate}}/{{foodInfo.suggestion.carbohydrate}}
|
||
</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="name">脂肪</text>
|
||
<text class="bold">
|
||
{{foodInfo.today_intake.fat}}/{{foodInfo.suggestion.fat}}
|
||
</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="name">蛋白</text>
|
||
<text class="bold">
|
||
{{foodInfo.today_intake.protein}}/{{foodInfo.suggestion.protein}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- -->
|
||
<view class="tabbar-box">
|
||
<view class="list" v-if="foodInfo.list.length">
|
||
<view class="listbox" v-for="(ite,ind) in foodInfo.list" :key="ind">
|
||
<view class="left">
|
||
<view class="title">{{ite.name}}</view>
|
||
<view class="kcalval">
|
||
<text>{{ite.val}}</text>{{ite.unit}}
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="item" @click="showFoodDetail(it)" v-for="(it,id) in ite.list">
|
||
<image :src="it.pic_url" mode="aspectFill"></image>
|
||
<text>{{it.name}}</text>
|
||
<text>{{it.weight}}</text>
|
||
<text>{{it.val}}千卡</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 加餐 -->
|
||
<!-- 营养含量分析 -->
|
||
<uni-drawer ref="showRight" mode="right" width="300">
|
||
<scroll-view style="height: 100%;" scroll-y="true">
|
||
<view class="foodDetail">
|
||
<view class="foodInfo">
|
||
<image :src="activeFoodDetail.pic_url" mode="aspectFill"></image>
|
||
<view class="info">
|
||
<view class="name">{{activeFoodDetail.name}}</view>
|
||
<view class="kcal">{{activeFoodDetail.val}}千卡</view>
|
||
</view>
|
||
</view>
|
||
<view class="foodContent">
|
||
<view class="title">热量和营养</view>
|
||
<view class="progress">
|
||
<div class="chart-wrap">
|
||
<qiun-data-charts type="ring" :opts="opts" :canvas2d="true" canvasId="recordetailCharts"
|
||
:chartData="chartData2" :cHeight="250" :cWidth="250" />
|
||
<view class="uchart-kcal">{{activeFoodDetail.val}}</view>
|
||
</div>
|
||
<view class="info" v-if="activeFoodDetail.nutrients_four">
|
||
<view class="info-item" v-for="(item,index) in activeFoodDetail.nutrients_four.slice(1)"
|
||
:key="index">
|
||
<view class="color" :style="{'background-color':`${item.color}`}"></view>
|
||
<view>{{item.name}}：{{item.proportion}}%</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tips">
|
||
<text>营养素</text>
|
||
<text>{{activeFoodDetail.weight}}含量</text>
|
||
</view>
|
||
<view class="foodDetailList">
|
||
<view class="foodDetailItem" v-for="(item,index) in activeFoodDetail.nutrients_list"
|
||
:key="index">
|
||
<view class="name">{{item.name_ch}}</view>
|
||
<view class="value">{{item.value}}{{item.unit}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</uni-drawer>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState
|
||
} from "vuex";
|
||
let next = 0
|
||
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts.vue';
|
||
export default {
|
||
data() {
|
||
return {
|
||
token: "",
|
||
index: 0,
|
||
opts: {
|
||
dataLabel: false,
|
||
color: ["#5180D8", "#ED7886", "#FFB169"],
|
||
background: "transparent",
|
||
canvas: {
|
||
background: "transparent"
|
||
},
|
||
legend: {
|
||
show: false // 这个设置将隐藏图例
|
||
},
|
||
title: {
|
||
name: "",
|
||
fontSize: 20,
|
||
offsetY: -3,
|
||
color: "#333333"
|
||
},
|
||
subtitle: {
|
||
name: "千卡",
|
||
fontSize: 14,
|
||
offsetY: 12,
|
||
color: "#888888"
|
||
},
|
||
extra: {
|
||
ring: {
|
||
ringWidth: 10,
|
||
labelWidth: 0,
|
||
border: false,
|
||
// customRadius: 50
|
||
}
|
||
}
|
||
},
|
||
isShow: false,
|
||
chartData2: {},
|
||
activeFoodDetail: {},
|
||
}
|
||
},
|
||
components: {
|
||
qiunDataCharts
|
||
},
|
||
computed: {
|
||
...mapState(["user", "countFoodInfo"]),
|
||
userinfo() {
|
||
return this.user.aud_id
|
||
},
|
||
foodInfo() {
|
||
return this.countFoodInfo
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
let that = this
|
||
that.$store.dispatch("getCountFoodInfo", {
|
||
aud_id: that.user.aud_id,
|
||
time: options.time
|
||
})
|
||
},
|
||
methods: {
|
||
// 详情
|
||
showFoodDetail(item) {
|
||
console.log("item", item)
|
||
let chart_data = []
|
||
this.activeFoodDetail = item
|
||
this.$refs.showRight.open();
|
||
this.opts.color = []
|
||
for (let i = 1; i < item.nutrients_four.length; ++i) {
|
||
this.opts.color.push(item.nutrients_four[i].color)
|
||
chart_data.push({
|
||
name: item.nutrients_four[i].name,
|
||
value: Number(item.nutrients_four[i].proportion),
|
||
})
|
||
}
|
||
this.chartData2 = JSON.parse(JSON.stringify({
|
||
series: [{
|
||
data: chart_data
|
||
}]
|
||
}));
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content {
|
||
padding: 0 20rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.content_box {
|
||
width: 100%;
|
||
}
|
||
|
||
.box {
|
||
width: 100%;
|
||
}
|
||
|
||
.set {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 20rpx;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
|
||
.icon {
|
||
background: #d1f2ed;
|
||
border-radius: 50%;
|
||
font-size: 56rpx;
|
||
color: #66cccc;
|
||
text-align: center;
|
||
padding: 5px;
|
||
}
|
||
}
|
||
|
||
.kcal2 {
|
||
width: calc(100% - 40rpx);
|
||
margin-bottom: 30rpx;
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
position: relative;
|
||
margin-top: 30rpx;
|
||
background: #f3fffd;
|
||
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
||
|
||
.left {
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
position: relative;
|
||
border-radius: 50%;
|
||
background: #d1f2ed;
|
||
border: 5px solid #66cccc;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.center {
|
||
position: absolute;
|
||
text-align: center;
|
||
width: 260rpx;
|
||
height: 260rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
|
||
text {
|
||
display: inline-block;
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.right {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 0;
|
||
top: 0px;
|
||
right: 0;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 0 20rpx;
|
||
border-radius: 0 20rpx 20rpx 0;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
background: #d1f2ed;
|
||
|
||
.item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
}
|
||
|
||
.border-bottom {
|
||
border-bottom: 1px solid #dfdfdf;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tools {
|
||
width: 100%;
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx 0;
|
||
display: flex;
|
||
margin-bottom: 30rpx;
|
||
justify-content: space-between;
|
||
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
||
|
||
.type {
|
||
width: 20%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
image {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.text {
|
||
width: 100%;
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
|
||
icon {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.list {
|
||
width: 100%;
|
||
padding-bottom: 100rpx;
|
||
|
||
.listbox {
|
||
width: calc(100% - 40rpx);
|
||
padding: 20rpx;
|
||
border-radius: 20rpx;
|
||
margin: 30rpx 0px;
|
||
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
||
}
|
||
|
||
.left {
|
||
width: 100%;
|
||
margin-bottom: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
text {
|
||
font-weight: bold;
|
||
margin-right: 5px;
|
||
margin-left: 30rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.right {
|
||
background: #f3fffd;
|
||
padding: 20rpx;
|
||
border-radius: 20rpx;
|
||
|
||
|
||
.item {
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-bottom: 1px solid #f7f7f7;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 12rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
:nth-child(2) {
|
||
width: 40%;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
:nth-child(3) {
|
||
width: 20%;
|
||
text-align: right;
|
||
}
|
||
|
||
:nth-child(4) {
|
||
width: 26%;
|
||
margin-right: 6rpx;
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.nolist {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
padding: 60rpx 20rpx;
|
||
text-align: center;
|
||
width: auto;
|
||
|
||
image {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
color: #999;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
|
||
|
||
.list2 {
|
||
margin-top: 45%;
|
||
|
||
.btn {
|
||
color: #fff;
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
}
|
||
}
|
||
|
||
.addfood {
|
||
background-color: #fff;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
padding: 20rpx 20rpx 0 20rpx;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
|
||
.iconfont {
|
||
position: absolute;
|
||
right: 7px;
|
||
top: -20rpx;
|
||
background: #f7f7f7;
|
||
border-radius: 50%;
|
||
font-size: 60rpx;
|
||
}
|
||
|
||
.list {
|
||
padding-bottom: 0px;
|
||
|
||
.item {
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.name {
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
:nth-child(2).item {
|
||
border-bottom: 1px solid #dfdfdf;
|
||
border-top: 1px solid #dfdfdf;
|
||
}
|
||
}
|
||
}
|
||
|
||
.foodDetail {
|
||
background-color: #F7F7F7;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
|
||
.foodInfo {
|
||
display: flex;
|
||
width: 100%;
|
||
padding: 30rpx;
|
||
border-radius: 20rpx;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
box-sizing: 0 0 20rpx #f1f1f1;
|
||
|
||
image {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
border-radius: 15rpx;
|
||
}
|
||
|
||
.info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
margin-left: 30rpx;
|
||
|
||
.name {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.kcal {
|
||
width: 100% !important;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.foodContent {
|
||
width: 100%;
|
||
padding: 30rpx;
|
||
margin-top: 16rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 20rpx;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
box-sizing: 0 0 20rpx #f1f1f1;
|
||
|
||
.title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.progress {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.chart-wrap {
|
||
position: relative;
|
||
width: 250rpx;
|
||
height: 250rpx;
|
||
margin-top: -30rpx;
|
||
|
||
.uchart-kcal {
|
||
position: absolute;
|
||
left: 60rpx;
|
||
top: 120rpx;
|
||
width: 130rpx;
|
||
font-size: 40rpx;
|
||
text-align: center;
|
||
z-index: 9;
|
||
}
|
||
}
|
||
|
||
.info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
|
||
.color {
|
||
width: 6rpx;
|
||
height: 20rpx;
|
||
margin-right: 10rpx;
|
||
border-radius: 3rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #f1f1f1;
|
||
padding: 16rpx 0;
|
||
font-size: 24rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.foodDetailList {
|
||
margin-top: 10rpx;
|
||
|
||
.foodDetailItem {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx 0;
|
||
box-sizing: border-box;
|
||
|
||
.name {
|
||
font-size: 24rpx;
|
||
color: #777;
|
||
}
|
||
|
||
.val {
|
||
font-size: 24rpx;
|
||
font-weight: 700;
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |