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>
|