636 lines
14 KiB
Vue
636 lines
14 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="box" v-if="userinfo&&userinfo.weight!=''">
|
||
<!-- 日期搜索 -->
|
||
<view class="calendar">
|
||
<ren-calendar ref='ren' :startDay="startDay" :markDays='markDays' @maskClick="maskClick"
|
||
@onMonthClickPre='onMonthClickPre' @onMonthClickNext="onMonthClickNext">
|
||
</ren-calendar>
|
||
</view>
|
||
<view class="kcal">
|
||
<view class="set" @click="handleSet">
|
||
<icon class="iconfont icon-shezhi1"></icon>
|
||
</view>
|
||
<view class="top">
|
||
<!-- 进度 -->
|
||
<view class="left ">
|
||
<qiun-data-charts type="arcbar" :chartData="chartData" :canvas2d="true" :cHeight="300"
|
||
:cWidth="300" canvasId="arcbar008"/>
|
||
<view class="center">
|
||
还能吃
|
||
<text>{{remaining_kcal}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<text>建议摄入</text>
|
||
<text class="num">{{suggestion.kcal}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="weight">
|
||
<view class="item">
|
||
<text>碳水化合物</text>
|
||
<view class="bold">
|
||
<view class="val" :style="{ width: carbohydratepercent + '%'}"></view>
|
||
<text>{{today_intake.carbohydrate}}/{{suggestion.carbohydrate}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<text>蛋白质</text>
|
||
<view class="bold">
|
||
<view class="val" :style="{ width: proteinpercent + '%'}"></view>
|
||
<text>{{today_intake.protein}}/{{suggestion.protein}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<text>脂肪</text>
|
||
<view class="bold">
|
||
<view class="val" :style="{ width: fatpercent + '%'}"></view>
|
||
<text>{{today_intake.fat}}/{{suggestion.fat}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- -->
|
||
<view class="tabbar">
|
||
<view class="type" @click="handleAddFood(0,'早餐')">
|
||
<icon class="t-icon t-icon-yingyangzaocan"></icon>
|
||
<view class="text">
|
||
<icon class="iconfont icon-add"></icon>早餐
|
||
</view>
|
||
</view>
|
||
<view class="type" @click="handleAddFood(1,'午餐')">
|
||
<icon class="t-icon t-icon-jiucan"></icon>
|
||
<view class="text">
|
||
<icon class="iconfont icon-add"></icon>午餐
|
||
</view>
|
||
</view>
|
||
<view class="type" @click="handleAddFood(2,'晚餐')">
|
||
<icon class="t-icon t-icon-wancan1"></icon>
|
||
<view class="text">
|
||
<icon class="iconfont icon-add"></icon>晚餐
|
||
</view>
|
||
</view>
|
||
<view class="type" @click="isShow = true">
|
||
<icon class="t-icon t-icon-jiacan"></icon>
|
||
<view class="text">
|
||
<icon class="iconfont icon-add"></icon>加餐
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- -->
|
||
<view class="list" v-if="list.length">
|
||
<view class="listbox" v-for="(ite,ind) in 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" v-for="(it,id) in ite.list" :key="id">
|
||
<text>{{it.name}}</text>
|
||
<text>{{it.weight}}</text>
|
||
<text>{{it.val}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else class="nolist list">
|
||
<icon class="iconfont icon-zanwushuju"></icon>
|
||
<text>还没有记录，点击上方按钮添加</text>
|
||
</view>
|
||
</view>
|
||
<view v-else class="list2" @click="handleEditUser()">
|
||
<view class="nolist">
|
||
<icon class="iconfont icon-zanwushuju"></icon>
|
||
<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>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState
|
||
} from "vuex";
|
||
let next = 0
|
||
import RenCalendar from '@/uni_modules/ren-calendar/ren-calendar.vue';
|
||
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts.vue';
|
||
export default {
|
||
data() {
|
||
return {
|
||
token: "",
|
||
remaining_kcal: 0, //还能吃
|
||
suggestion: { //建议摄入
|
||
fat: "",
|
||
kcal: "",
|
||
protein: "",
|
||
carbohydrate: "",
|
||
},
|
||
today_intake: { //已经摄入
|
||
fat: "",
|
||
kcal: "",
|
||
protein: "",
|
||
carbohydrate: "",
|
||
},
|
||
fatpercent: 0,
|
||
carbohydratepercent: 0,
|
||
proteinpercent: 0,
|
||
list: [],
|
||
isShow: false,
|
||
chartData: {
|
||
series: [{
|
||
data: 1,
|
||
color: "#ff4c4f"
|
||
}]
|
||
},
|
||
addfoodList: [{
|
||
name: "早加餐",
|
||
id: 3,
|
||
},
|
||
{
|
||
name: "午加餐",
|
||
id: 4,
|
||
}, {
|
||
name: "晚加餐",
|
||
id: 5,
|
||
}
|
||
],
|
||
markDays: {
|
||
warning: [],
|
||
success: [],
|
||
error: [],
|
||
},
|
||
handTrue: true,
|
||
startDay: "",
|
||
startM: "",
|
||
endM: ""
|
||
}
|
||
},
|
||
components: {
|
||
RenCalendar,
|
||
qiunDataCharts
|
||
},
|
||
computed: {
|
||
...mapState(["user"]),
|
||
userinfo() {
|
||
return this.user.weight
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
let that = this
|
||
that.startM = that.$tools.getMonth(that.$tools.getTime(), 0).substring(0, 10)
|
||
that.endM = that.$tools.getMonth(that.$tools.getTime(), 0).substring(11, 21)
|
||
that.handleList()
|
||
},
|
||
onShow() {
|
||
let that = this
|
||
that.token = uni.getStorageSync('token')
|
||
// 指定日期
|
||
if (uni.getStorageSync("startDay")) {
|
||
that.startDay = uni.getStorageSync("startDay");
|
||
uni.removeStorageSync('startDay');
|
||
let star1 = that.$tools.getMonth(that.$tools.getTime(), 0).substring(0, 10)
|
||
let star2 = that.$tools.getMonth(that.startDay, 0).substring(0, 10)
|
||
if (star2 != star1) {
|
||
that.startM = that.$tools.getMonth(that.startDay, 0).substring(0, 10)
|
||
that.endM = that.$tools.getMonth(that.startDay, 0).substring(11, 21)
|
||
that.handleList()
|
||
}
|
||
} else {
|
||
that.startDay = this.$tools.getDate("start")
|
||
}
|
||
that.handleCountFoodInfo()
|
||
},
|
||
methods: {
|
||
// 页面信息
|
||
handleCountFoodInfo() {
|
||
let that = this
|
||
that.$model.getCountFoodInfo({
|
||
aud_id: that.user.aud_id,
|
||
time: that.startDay
|
||
}).then(res => {
|
||
if (res.code != 0) return
|
||
that.list = res.data.list
|
||
that.remaining_kcal = res.data.remaining_kcal
|
||
that.suggestion = res.data.suggestion
|
||
that.today_intake = res.data.today_intake
|
||
that.fatpercent = Number(res.data.today_intake.fat) / Number(res.data.suggestion.fat) * 100
|
||
that.carbohydratepercent = Number(res.data.today_intake.carbohydrate) / Number(res.data
|
||
.suggestion.carbohydrate) * 100
|
||
that.proteinpercent = Number(res.data.today_intake.protein) / Number(res.data.suggestion
|
||
.protein) * 100
|
||
that.chartData.series[0].data = Number(res.data.today_intake.kcal) == 0 ? 1 :
|
||
Number(res.data.today_intake.kcal) / Number(res.data.suggestion.kcal)
|
||
})
|
||
},
|
||
//日期列表信息
|
||
handleList() {
|
||
let that = this
|
||
that.$model.getMyLogList({
|
||
aud_id: that.user.aud_id,
|
||
s_time: that.startM,
|
||
e_time: that.endM
|
||
}).then(res => {
|
||
console.log("11111111", res)
|
||
if (res) {
|
||
for (var i = 0; i < res.pkList.list.length; i++) {
|
||
if (Date.parse(that.endDate) == Date.parse(res.pkList.list[i].time)) {
|
||
that.infoList.push(res.pkList.list[i]);
|
||
}
|
||
if (res.pkList.list[i].describe == "超标") {
|
||
that.markDays.error.push(res.pkList.list[i].time);
|
||
}
|
||
if (res.pkList.list[i].describe == "达标") {
|
||
that.markDays.success.push(res.pkList.list[i].time);
|
||
}
|
||
if (res.pkList.list[i].describe == "不达标") {
|
||
that.markDays.warning.push(res.pkList.list[i].time);
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 添加的食材
|
||
getAddFood(list) {
|
||
let that = this
|
||
that.list.push(list)
|
||
console.log("list", that.list, that.list.sort())
|
||
},
|
||
// 日期选择
|
||
maskClick(data) {
|
||
let that = this
|
||
that.list = []
|
||
that.startDay = data.date
|
||
that.handleCountFoodInfo()
|
||
console.log('maskClick事件:', data);
|
||
},
|
||
// 上月
|
||
onMonthClickPre(data) {
|
||
let that = this
|
||
that.markDays = {
|
||
warning: [],
|
||
success: [],
|
||
error: [],
|
||
}
|
||
that.startM = data.substring(0, 10)
|
||
that.endM = data.substring(11, 21)
|
||
that.handleList()
|
||
},
|
||
onMonthClickNext(data) {
|
||
console.log("下月", data)
|
||
},
|
||
// 设置
|
||
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/food?name=" + name + '&ind=' + ind
|
||
})
|
||
},
|
||
// 去登录
|
||
handleLogin() {
|
||
uni.reLaunch({
|
||
url: "/pageTwo/login/login"
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content {
|
||
padding: 0 15px;
|
||
}
|
||
|
||
.content_box{
|
||
width: 100%;
|
||
}
|
||
|
||
.box {
|
||
width: 100%;
|
||
}
|
||
|
||
.calendar {
|
||
text-align: center;
|
||
background: #fff;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 20;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
||
}
|
||
|
||
.kcal {
|
||
width: calc(100% - 20px);
|
||
margin-bottom: 15px;
|
||
background: #fff;
|
||
border-radius: 5px;
|
||
padding: 10px;
|
||
position: relative;
|
||
margin-top: 60px;
|
||
|
||
.set {
|
||
position: absolute;
|
||
right: 15px;
|
||
width: 50px;
|
||
height: 50px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: flex-end;
|
||
font-weight: bold;
|
||
z-index: 18;
|
||
|
||
icon {
|
||
font-size: 22px;
|
||
}
|
||
}
|
||
|
||
.top {
|
||
margin-left: 5px;
|
||
position: relative;
|
||
|
||
.left {
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
position: relative;
|
||
|
||
.center {
|
||
position: absolute;
|
||
top: 0;
|
||
text-align: center;
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
text {
|
||
display: inline-block;
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
position: absolute;
|
||
left: 65%;
|
||
height: 300rpx;
|
||
top: 0;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
|
||
.num {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
width: 100%;
|
||
display: inline-block;
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.weight {
|
||
width: 100%;
|
||
display: flex;
|
||
margin-top: 25px;
|
||
margin-bottom: 5px;
|
||
justify-content: space-between;
|
||
|
||
.item {
|
||
width: 30%;
|
||
|
||
.bold {
|
||
width: 100%;
|
||
background: #eaeaea;
|
||
border-radius: 6px;
|
||
margin-top: 5px;
|
||
text-align: right;
|
||
font-weight: 500;
|
||
font-size: 12px;
|
||
height: 15px;
|
||
line-height: 15px;
|
||
position: relative;
|
||
|
||
text {
|
||
position: absolute;
|
||
z-index: 6;
|
||
right: 8px;
|
||
}
|
||
}
|
||
|
||
.val {
|
||
position: absolute;
|
||
left: 0;
|
||
background: #f9ce27;
|
||
height: 15px;
|
||
border-radius: 10px;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tabbar {
|
||
width: 100%;
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
padding: 10px 0;
|
||
display: flex;
|
||
margin-bottom: 15px;
|
||
justify-content: space-between;
|
||
|
||
.type {
|
||
width: 20%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.t-icon {
|
||
width: 35px;
|
||
height: 35px;
|
||
font-size: 28px;
|
||
}
|
||
|
||
.text {
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 5px;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
icon {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.list {
|
||
width: 100%;
|
||
padding-bottom: 50px;
|
||
|
||
.listbox {
|
||
width: calc(100% - 20px);
|
||
padding: 10px;
|
||
border-radius: 10px;
|
||
background-color: #fff;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.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: 35px;
|
||
line-height: 35px;
|
||
border-bottom: 1px solid #f7f7f7;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
:nth-child(1) {
|
||
width: 45%;
|
||
}
|
||
|
||
:nth-child(2) {
|
||
width: 25%;
|
||
text-align: left;
|
||
}
|
||
|
||
:nth-child(3) {
|
||
width: 30%;
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.nolist {
|
||
font-size: 12px;
|
||
color: #999;
|
||
padding: 30px 10px;
|
||
text-align: center;
|
||
width: auto;
|
||
|
||
icon {
|
||
font-size: 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;
|
||
}
|
||
}
|
||
}
|
||
</style> |