791 lines
16 KiB
Vue
791 lines
16 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view v-if="!token" class="list2" @click="handleLogin()">
|
||
<view class="nolist">
|
||
<icon class="iconfont icon-zanwushuju"></icon>
|
||
<text>登录后查看更多哦！</text>
|
||
</view>
|
||
<view class="btn">登录</view>
|
||
</view>
|
||
<view v-else class="content_box">
|
||
<view class="set" @click="handleSet">
|
||
<view class="date">{{foodInfo.date}}</view>
|
||
<view class="icon">
|
||
<icon class="iconfont icon-shezhi1"></icon>
|
||
</view>
|
||
</view>
|
||
<view class="box" v-if="userinfo">
|
||
<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="tools">
|
||
<view class="type" @click="handleAddFood(0,'早餐')">
|
||
<image src="/static/zao.png"></image>
|
||
<view class="text">
|
||
<icon class="iconfont icon-add"></icon>早餐
|
||
</view>
|
||
</view>
|
||
<view class="type" @click="handleAddFood(1,'午餐')">
|
||
<image src="/static/wu.png"></image>
|
||
<view class="text">
|
||
<icon class="iconfont icon-add"></icon>午餐
|
||
</view>
|
||
</view>
|
||
<view class="type" @click="handleAddFood(2,'晚餐')">
|
||
<image src="/static/wan.png"></image>
|
||
<view class="text">
|
||
<icon class="iconfont icon-add"></icon>晚餐
|
||
</view>
|
||
</view>
|
||
<view class="type" @click="isShow = true">
|
||
<image src="/static/jia.png"></image>
|
||
<view class="text">
|
||
<icon class="iconfont icon-add"></icon>加餐
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- -->
|
||
<view class="tabbar-box">
|
||
<view class="tabbar">
|
||
<view @click="index=0" :class="[index==0?'active':'']">饮食记录</view>
|
||
<view @click="index=1" :class="[index==1?'active':'']">历史记录</view>
|
||
</view>
|
||
<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">
|
||
<uni-swipe-action>
|
||
<uni-swipe-action-item v-for="(it,id) in ite.list" :key="id"
|
||
:right-options="actionOptions" @click="delAcitionItem(it)">
|
||
<view class="item" @click="showFoodDetail(it)">
|
||
<image :src="it.pic_url" mode="aspectFill"></image>
|
||
<text>{{it.name}}</text>
|
||
<text>{{it.weight}}</text>
|
||
<text>{{it.val}}千卡</text>
|
||
</view>
|
||
</uni-swipe-action-item>
|
||
</uni-swipe-action>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else class="nolist list">
|
||
<image src="/static/none.png"></image>
|
||
<text>暂无打卡记录</text>
|
||
<text>点击上方按钮打卡吧</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else class="list2" @click="handleEditUser()">
|
||
<view class="nolist">
|
||
<image src="/static/none.png"></image>
|
||
<text>完善资料后，记录更准确哦！</text>
|
||
</view>
|
||
<view class="btn">完善资料</view>
|
||
</view>
|
||
</view>
|
||
<!-- 加餐 -->
|
||
<view class="wrapper activeList" v-if="isShow">
|
||
<view class="bg" @click='isShow=false'>
|
||
<view class="addfood" @click.stop>
|
||
<icon class="iconfont icon-error" @click='isShow=false'></icon>
|
||
<view class="list">
|
||
<view class="item" v-for="(ite,ind) in addfoodList" :key="ind"
|
||
@click="handleAddFood(ite.id,ite.name)">
|
||
<text class="name">{{ite.name}}</text>
|
||
</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="foodCharts"
|
||
: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: {},
|
||
addfoodList: [{
|
||
name: "早加餐",
|
||
id: 3,
|
||
},
|
||
{
|
||
name: "午加餐",
|
||
id: 4,
|
||
}, {
|
||
name: "晚加餐",
|
||
id: 5,
|
||
}
|
||
],
|
||
markDays: {
|
||
warning: [],
|
||
success: [],
|
||
error: [],
|
||
},
|
||
startDay: "",
|
||
activeFoodDetail: {},
|
||
actionOptions: [{
|
||
text: '删除',
|
||
style: {
|
||
backgroundColor: '#dd524d',
|
||
borderRadius: '10rpx'
|
||
}
|
||
}]
|
||
}
|
||
},
|
||
components: {
|
||
qiunDataCharts
|
||
},
|
||
computed: {
|
||
...mapState(["user", "countFoodInfo"]),
|
||
userinfo() {
|
||
return this.user.aud_id
|
||
},
|
||
foodInfo() {
|
||
return this.countFoodInfo
|
||
}
|
||
},
|
||
onLoad() {
|
||
let that = this
|
||
that.token = uni.getStorageSync('token')
|
||
// 指定日期
|
||
if (uni.getStorageSync("startDay")) {
|
||
that.startDay = uni.getStorageSync("startDay");
|
||
uni.removeStorageSync('startDay');
|
||
} else {
|
||
that.startDay = this.$tools.getDate("start")
|
||
}
|
||
that.$store.dispatch("getCountFoodInfo", {
|
||
aud_id: that.user.aud_id,
|
||
time: that.$tools.getDate("start")
|
||
})
|
||
},
|
||
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
|
||
}]
|
||
}));
|
||
},
|
||
|
||
// 添加的食材
|
||
getAddFood(list) {
|
||
let that = this
|
||
that.list.push(list)
|
||
console.log("list", that.list, that.list.sort())
|
||
},
|
||
// 设置
|
||
handleSet() {
|
||
uni.navigateTo({
|
||
url: "/pageTwo/count/setting"
|
||
})
|
||
},
|
||
// 完善资料
|
||
handleEditUser() {
|
||
uni.navigateTo({
|
||
url: "/pageTwo/me/userEdit?type=add"
|
||
})
|
||
},
|
||
// 添加食物
|
||
handleAddFood(ind, name) {
|
||
this.isShow = false
|
||
uni.navigateTo({
|
||
url: "/pageTwo/count/search?name=" + name + '&ind=' + ind
|
||
})
|
||
},
|
||
// 去登录
|
||
handleLogin() {
|
||
uni.reLaunch({
|
||
url: "/pageTwo/login/login"
|
||
})
|
||
},
|
||
delAcitionItem(item) {
|
||
uni.showModal({
|
||
content: `是否删除[${item.name}]？`,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.$model.delCEatAction({
|
||
aud_id: this.user.aud_id,
|
||
eat_log_id: item.id
|
||
}).then(res => {
|
||
this.handleCountFoodInfo()
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content {
|
||
padding: 0 10px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.content_box {
|
||
width: 100%;
|
||
}
|
||
|
||
.box {
|
||
width: 100%;
|
||
}
|
||
|
||
.set {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 10px;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
|
||
.icon {
|
||
background: #d1f2ed;
|
||
border-radius: 50%;
|
||
font-size: 28px;
|
||
color: #66cccc;
|
||
text-align: center;
|
||
padding: 5px;
|
||
}
|
||
}
|
||
|
||
.kcal2 {
|
||
width: calc(100% - 20px);
|
||
margin-bottom: 15px;
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
padding: 10px;
|
||
position: relative;
|
||
margin-top: 15px;
|
||
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: 10px 0;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.right {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 0;
|
||
top: 0px;
|
||
right: 0;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 0 10px;
|
||
border-radius: 0 10px 10px 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: 10px;
|
||
padding: 10px 0;
|
||
display: flex;
|
||
margin-bottom: 15px;
|
||
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: 45px;
|
||
height: 45px;
|
||
}
|
||
|
||
.text {
|
||
width: 100%;
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
|
||
icon {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tabbar-box {
|
||
background: #f3fffd;
|
||
border-radius: 10px;
|
||
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
||
|
||
.tabbar {
|
||
height: 45px;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
view {
|
||
width: 50%;
|
||
line-height: 45px;
|
||
text-align: center;
|
||
}
|
||
|
||
.active {
|
||
border-radius: 10px;
|
||
color: $maincolor;
|
||
background: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.list {
|
||
width: 100%;
|
||
padding-bottom: 50px;
|
||
|
||
.listbox {
|
||
width: calc(100% - 40px);
|
||
padding: 10px;
|
||
border-radius: 10px;
|
||
background-color: #fff;
|
||
margin: 15px 10px;
|
||
}
|
||
|
||
.left {
|
||
width: 100%;
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
text {
|
||
font-weight: bold;
|
||
margin-right: 5px;
|
||
margin-left: 15px;
|
||
}
|
||
|
||
}
|
||
|
||
.right {
|
||
width: 100%;
|
||
|
||
.item {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
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: 12px;
|
||
color: #999;
|
||
padding: 30px 10px;
|
||
text-align: center;
|
||
width: auto;
|
||
|
||
image {
|
||
width: 50px;
|
||
height: 50px;
|
||
color: #999;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
|
||
|
||
.list2 {
|
||
margin-top: 45%;
|
||
|
||
.btn {
|
||
color: #fff;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
}
|
||
}
|
||
|
||
.addfood {
|
||
background-color: #fff;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
padding: 10px 10px 0 10px;
|
||
border-radius: 10px 10px 0 0;
|
||
|
||
.iconfont {
|
||
position: absolute;
|
||
right: 7px;
|
||
top: -10px;
|
||
background: #f7f7f7;
|
||
border-radius: 50%;
|
||
font-size: 30px;
|
||
}
|
||
|
||
.list {
|
||
padding-bottom: 0px;
|
||
|
||
.item {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
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> |