531 lines
10 KiB
Vue
531 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<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" canvasId="chartsId" />
|
|||
|
|
<view class="center">
|
|||
|
|
还能吃
|
|||
|
|
<text>1256</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="right">
|
|||
|
|
<text>建议摄入</text>
|
|||
|
|
<text class="num">1294</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="weight">
|
|||
|
|
<view class="item">
|
|||
|
|
<text>碳水化合物</text>
|
|||
|
|
<view class="bold">
|
|||
|
|
<view class="val" :style="{ width: percent + '%'}"></view>
|
|||
|
|
<text>12/125</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<text>蛋白质</text>
|
|||
|
|
<view class="bold">
|
|||
|
|
<view class="val" :style="{ width: percent + '%'}"></view>
|
|||
|
|
<text>12/125</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<text>脂肪</text>
|
|||
|
|
<view class="bold">
|
|||
|
|
<view class="val" :style="{ width: percent + '%'}"></view>
|
|||
|
|
<text>12/125</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.title}}</view>
|
|||
|
|
<view class="kcalval">
|
|||
|
|
<text>1250</text>kcal
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="right">
|
|||
|
|
<view class="item" v-for="(it,id) in ite.list" :key="id">
|
|||
|
|
<text>{{it.name}}</text>
|
|||
|
|
<text>{{it.weight}}{{it.unit}}</text>
|
|||
|
|
<text>{{it.kcal?it.kcal:'125'}}kcal</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="nolist list2" @click="handleEditUser()">
|
|||
|
|
<view>
|
|||
|
|
<icon class="iconfont icon-zanwushuju"></icon>
|
|||
|
|
<text>完善资料后，记录更准确哦！</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn">完善资料</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 {
|
|||
|
|
list: [],
|
|||
|
|
start: "",
|
|||
|
|
percent: 55,
|
|||
|
|
status: true,
|
|||
|
|
userinfo: {},
|
|||
|
|
isShow: false,
|
|||
|
|
chartData: {
|
|||
|
|
"series": [{
|
|||
|
|
"data": 0.8,
|
|||
|
|
"color": "#ff4c4f"
|
|||
|
|
}]
|
|||
|
|
},
|
|||
|
|
addfoodList: [{
|
|||
|
|
name: "早加餐",
|
|||
|
|
id: 3,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "午加餐",
|
|||
|
|
id: 4,
|
|||
|
|
}, {
|
|||
|
|
name: "晚加餐",
|
|||
|
|
id: 5,
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
markDays: {
|
|||
|
|
warning: ['2023-07-04'],
|
|||
|
|
success: ["2023-07-03"],
|
|||
|
|
error: ["2023-07-02"],
|
|||
|
|
},
|
|||
|
|
startDay: ""
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
RenCalendar,
|
|||
|
|
qiunDataCharts
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapState(["user"]),
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
let that = this
|
|||
|
|
that.startDay = this.$tools.getDate("start")
|
|||
|
|
that.userinfo = that.$store.state.user
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
let that = this
|
|||
|
|
let start = uni.getStorageSync("startDay")
|
|||
|
|
if (start) {
|
|||
|
|
console.log(start);
|
|||
|
|
that.startDay = start;
|
|||
|
|
uni.removeStorageSync('startDay');
|
|||
|
|
} else if (that.startDay != that.$tools.getDate("start")) {
|
|||
|
|
that.startDay = this.$tools.getDate("start")
|
|||
|
|
console.log("111")
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 选定的日期
|
|||
|
|
getstartDay(date) {
|
|||
|
|
let that = this
|
|||
|
|
that.startDay = date
|
|||
|
|
console.log("选定日期", date)
|
|||
|
|
},
|
|||
|
|
// 添加的食材
|
|||
|
|
getAddFood(list) {
|
|||
|
|
let that = this
|
|||
|
|
that.list.push(list)
|
|||
|
|
console.log("list", that.list, that.list.sort())
|
|||
|
|
},
|
|||
|
|
// 日期选择
|
|||
|
|
maskClick(e) {
|
|||
|
|
console.log('maskClick事件:', e);
|
|||
|
|
},
|
|||
|
|
onMonthClickPre(data) {
|
|||
|
|
console.log("上月", data)
|
|||
|
|
},
|
|||
|
|
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
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.content {
|
|||
|
|
padding: 0 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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: calc(100% - 20px);
|
|||
|
|
margin: 0 10px;
|
|||
|
|
|
|||
|
|
.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%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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>
|