TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

饮食健康模块新增日历查询，饮水模块新增日历查询，封装日历组件，体重新增曲线页面及接口记录，新增初始体重

Browse Source
This commit is contained in:
张冬雪
2022-02-08 17:14:39 +08:00
parent 7b932ec8e3
commit ded9bf93d4
20 changed files with 2618 additions and 1895 deletions
Download Patch File Download Diff File Expand all files Collapse all files

623
pages/record/weight.vue
View File

@@ -8,231 +8,292 @@
<template>
<view class="weight">
<!-- 体重表 -->
<view class="progress-top">
<view class="unit">
<span
:class="isJin === 2?'active':''"
@click="isJin = 1"
>斤</span>
<span
:class="isJin === 1?'active':''"
@click="isJin = 1"
>公斤</span>
</view>
<view class="progress">
<view>{{weightInfo.text}}</view>
<u-count-to
class="uCountTo"
:startVal="0"
:endVal="weightInfo.change"
:decimals="1"
color="#333"
fontSize="36"
:bold="true"
/>
<view>保持 / 塑性</view>
</view>
<view
class="add-weight"
@click="addWeightShow = true"
>记录体重</view>
<view class="des-title">以最后一次记录为主且每日只能更新一次</view>
</view>
<!-- 体重列表 -->
<view
class="weight-list"
v-if="lists.length>0"
>
<view
class="list-item"
v-for="item in lists"
:key="item.wight_id"
>
<view class="list-left">
<view class="list-title">
<span>{{item.weight}}</span>公斤
</view>
测量结果
<!-- 进度模块 -->
<block v-if="tabbarId === 0">
<!-- 体重表 -->
<view class="progress-top">
<view class="unit"> <span :class="isJin === 2?'active':''" @click="isJin = 1">斤</span> <span :class="isJin === 1?'active':''" @click="isJin = 1">公斤</span> </view>
<view class="progress">
<view>{{weightInfo.text}}</view>
<u-count-to class="uCountTo" :startVal="0" :endVal="weightInfo.change" :decimals="1" color="#333" fontSize="36" :bold="true" />
<view>保持 / 塑性</view>
</view>
<view class="list-right">
<span>开始保持 / 塑性</span>
{{item.created_at}}
<view class="add-weight" @click="addWeightShow = true">记录体重</view>
<view class="des-title">以最后一次记录为主且每日只能更新一次</view>
</view>
<!-- 体重列表 -->
<view class="weight-list" v-if="lists.length>0">
<view class="list-item">
<view class="list-left"> <view class="list-title"> <span>{{weightInfo.begin}}</span>公斤 </view> 初始体重 </view>
<view class="list-right"> <span>开始保持 / 塑性</span> {{weightInfo.first_weight_time}} </view>
</view>
<view class="list-item" v-for="item in lists" :key="item.wight_id">
<view class="list-left"> <view class="list-title"> <span>{{item.weight}}</span>公斤 </view> 测量结果 </view>
<view class="list-right"> <span>开始保持 / 塑性</span> {{item.created_at}} </view>
</view>
</view>
<view class="no-lists" v-else>还没有体重信息，记录下呗~</view>
</block>
<!-- 曲线模块 -->
<view v-if="tabbarId === 1">
<!-- 健康测评 -->
<u-image :src="require('@/static/imgs/health1.png')" class="eval-img" @click="$Router.push({ name: 'EvaluationList' })" :lazy-load="true" radius="10rpx" mode="widthFix" width="100%" />
<view class="curve">
<view class="title"> 体重 <span>单位：公斤</span> </view>
<u-icon @click="addWeightShow = true" name="edit-pen-fill" color="#34ce98" size="20" :bold="true" label="更新" labelPos="right" labelSize="13" labelColor="#999" space="4" />
</view>
<view class="charts-box"> <qiun-data-charts type="area" :chartData="chartData" background="none" /> </view>
<view class="progress-top">
<view class="add-weight" @click="addWeightShow = true">记录体重</view>
<view class="des-title">只显示最近七次测量记录</view>
</view>
</view>
<view
class="no-lists"
v-else
>还没有体重信息，记录下呗~</view>
<!-- 记录体重弹窗 -->
<u-popup
:show="addWeightShow"
:round="10"
@close="addWeightShow = false"
:closeable="true"
>
<u-popup :show="addWeightShow" :round="10" @close="addWeightShow = false" :closeable="true">
<view class="addWeightContent">
<view class="date">今天</view>
<view class='count'><span>{{weight}}</span>公斤</view>
<vue-scale
:min="10"
:max="100"
:int="false"
:single="10"
:h="80"
:styles="styles"
@scroll="scroll"
:scrollLeft="Number(weight)"
/>
<view
class="addBtn"
@click="addWeight"
>确认添加</view>
<vue-scale :min="10" :max="100" :int="false" :single="10" :h="80" :styles="styles" @scroll="scroll"
:scrollLeft="Number(weight)" />
<view class="addBtn" @click="addWeight">确认添加</view>
</view>
</u-popup>
<!-- 底部 进度 曲线菜单 -->
<u-tabbar :value="tabbarId" :fixed="true" :placeholder="false" :safeAreaInsetBottom="false"
activeColor="#34ce98">
<u-tabbar-item text="进度" :icon="tabbarId === 0 ?require('../../static/imgs/speed-2.png'):require('../../static/imgs/speed-1.png')" @click="tabbarClick" />
<u-tabbar-item text="曲线" :icon="tabbarId === 1 ?require('../../static/imgs/curve-2.png'):require('../../static/imgs/curve-1.png')" @click="tabbarClick" />
</u-tabbar>
</view>
</template>
<script>
import vueScale from "@/components/vueScale";
import { weights, addWeight } from "@/apis/interfaces/weight.js";
import moment from "moment";
import l from "../../uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center";
export default {
components: {
vueScale,
},
data() {
return {
isJin: 1, // 是公斤 2 是斤 所有用到斤的直接乘以这个字段即可
addWeightShow: false, // 是否添加体重展示
styles: {
line: "#dbdbdb",
bginner: "#fbfbfb",
bgoutside: "#ffffff",
font: "#404040",
fontColor: "#404040",
fontSize: 16,
},
weight: "",
date: "",
weightInfo: {},
lists: [],
has_more: true,
page: 1,
};
},
onShow() {
this.getWeights();
this.date = moment(new Date()).format("YYYY-MM-DD");
},
onReachBottom() {
if (!this.has_more) {
uni.showToast({
title: "没有更多啦~",
icon: "none",
});
} else {
this.page = this.page + 1;
this.getWeights();
}
},
methods: {
//获取体重首页接口
getWeights() {
weights(this.page).then((res) => {
if(res.lists.page.current === 1) {
this.lists = []
}
this.lists = this.lists.concat(res.lists.data);
this.has_more = res.lists.page.has_more;
this.weightInfo = res.weight;
this.weight = res.weight.now;
});
import vueScale from "@/components/vueScale";
import {
weights,
addWeight,
curves
} from "@/apis/interfaces/weight.js";
import moment from "moment";
import l from "../../uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center";
export default {
components: {
vueScale,
},
addWeight() {
let data = {
weight: this.weight,
date: this.date,
data() {
return {
isJin: 1, // 是公斤 2 是斤 所有用到斤的直接乘以这个字段即可
addWeightShow: false, // 是否添加体重展示
styles: {
line: "#dbdbdb",
bginner: "#fbfbfb",
bgoutside: "#ffffff",
font: "#404040",
fontColor: "#404040",
fontSize: 16,
},
weight: "",
date: "",
weightInfo: {},
lists: [],
has_more: true,
page: 1,
tabbarId: 0,
chartData: {
"categories": ["1/1","1/2","1/3","1/4","1/5","1/6","1/7"],
"series": [{"name": "最近七天进度","data": [55,51,53.3,50.3,53.3]}]
}, // 曲线部分 start
};
addWeight(data).then((res) => {
this.addWeightShow = false;
this.page = 1;
this.has_more = true;
this.lists = [];
},
onShow() {
this.getWeights();
this.getCurves();
this.date = moment(new Date()).format("YYYY-MM-DD");
},
onReachBottom() {
if (!this.has_more) {
uni.showToast({
title: "没有更多啦~",
icon: "none",
duration: 1000,
mask: true
});
} else {
this.page = this.page + 1;
this.getWeights();
});
}
},
// 滚动标尺触发事件
scroll(msg) {
this.weight = msg;
methods: {
//获取体重首页接口
getWeights() {
weights(this.page).then((res) => {
console.log(res)
if (res.lists.page.current === 1) {
this.lists = []
}
this.lists = this.lists.concat(res.lists.data);
this.has_more = res.lists.page.has_more;
this.weightInfo = res.weight;
this.weight = res.weight.now;
}).catch(err=>{
uni.showToast({
title:err.message,
icon:"none",
mask:true,
duration:2000
})
});
},
// 获取曲线
getCurves() {
curves().then((res) => {
this.chartData={
categories:res.categories,
"series": [res.series]
}
}).catch(err=>{
uni.showToast({
title:err.message,
icon:"none",
mask:true,
duration:2000
})
});
},
// 更新体重
addWeight() {
let data = {
weight: this.weight,
date: this.date
};
addWeight(data).then((res) => {
this.addWeightShow = false;
this.page = 1;
this.has_more = true;
this.lists = [];
this.getWeights();
this.getCurves();
}).catch(err=>{
uni.showToast({
title:err.message,
icon:"none",
mask:true,
duration:2000
})
});
},
// 滚动标尺触发事件
scroll(msg) {
this.weight = msg;
},
// 点击底部切换
tabbarClick(e) {
console.log(e)
this.tabbarId = Number(e)
}
},
},
};
};
</script>
<style lang="scss" scoped>
//体重top
.progress-top {
padding: $padding * 2 $padding;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-bottom: solid 1rpx #f7f7f7;
// 单位
.unit {
.charts-box{
width: 100%;
height:500rpx;
margin-top: $margin;
}
// curve
.curve{
margin-top: $margin;
padding: $padding $padding + 10;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
width: 100%;
span {
display: inline-block;
width: 100rpx;
justify-content: space-between;
box-sizing: border-box;
font-size: $title-size + 5;
color: #333;
span{
color: #cacaca;
font-size: $title-size-m;
color: $border-color;
padding: $padding * 0.5 0;
text-align: center;
border: solid 1rpx $border-color;
border-radius: 50rpx 0 0 50rpx;
}
span:nth-child(1) {
border-radius: 50rpx 0 0 50rpx;
border-style: solid;
border-color: $border-color $main-color $border-color $border-color;
}
span:nth-child(2) {
border-radius: 0 50rpx 50rpx 0;
border-style: solid;
border-color: $border-color $border-color $border-color $main-color;
}
span.active {
background-color: $main-color;
color: #fff;
border: solid 1rpx $main-color;
margin-left: 10rpx;
}
}
// 展示圈
.progress {
width: 360rpx;
height: 360rpx;
border: solid $padding * 0.7 #f7f7f7;
border-radius: 50%;
// 评测图片
.eval-img {
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
}
//体重top
.progress-top {
padding: $padding * 2 $padding;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
color: $text-gray-m;
font-size: $title-size-m;
.uCountTo {
padding: $padding * 0.5;
border-bottom: solid 1rpx #f7f7f7;
// 单位
.unit {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
width: 100%;
span {
display: inline-block;
width: 100rpx;
font-size: $title-size-m;
color: $border-color;
padding: $padding * 0.5 0;
text-align: center;
border: solid 1rpx $border-color;
border-radius: 50rpx 0 0 50rpx;
}
span:nth-child(1) {
border-radius: 50rpx 0 0 50rpx;
border-style: solid;
border-color: $border-color $main-color $border-color $border-color;
}
span:nth-child(2) {
border-radius: 0 50rpx 50rpx 0;
border-style: solid;
border-color: $border-color $border-color $border-color $main-color;
}
span.active {
background-color: $main-color;
color: #fff;
border: solid 1rpx $main-color;
}
}
}
// 记录按钮
// 展示圈
.progress {
width: 360rpx;
height: 360rpx;
border: solid $padding * 0.7 #f7f7f7;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
color: $text-gray-m;
font-size: $title-size-m;
.uCountTo {
padding: $padding * 0.5;
}
}
// 记录按钮
.add-weight {
font-size: $title-size + 2;
border-radius: $radius * 3;
@@ -242,92 +303,106 @@ export default {
margin-top: $margin * 2;
font-weight: bold;
}
.des-title {
.des-title {
padding: $padding;
color: $text-gray-m;
font-size: $title-size-m - 4;
}
}
// 列表
.weight-list {
font-size: $title-size-m;
color: #cacaca;
padding: 0 $padding;
.list-item {
display: flex;
flex-direction: row;
align-items: center;
box-sizing: border-box;
justify-content: space-between;
border-bottom: solid 1rpx #f9f9f9;
padding: 20rpx 0;
font-size: $title-size-m - 2;
.list-title {
color: #555;
font-size: $title-size-m - 2;
span {
font-size: $title-size + 10;
font-weight: 500;
margin-right: 10rpx;
}
}
.list-right {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
box-sizing: border-box;
margin-top: $margin * 0.4;
color: #999;
span {
margin-bottom: 10rpx;
}
}
}
}
.no-lists {
padding: $padding;
color: $text-gray-m;
font-size: $title-size-m - 4;
font-size: $title-size-m;
}
}
// 列表
.weight-list {
font-size: $title-size-m;
color: $text-gray-m;
padding: $padding;
.list-item {
display: flex;
flex-direction: row;
align-items: center;
// 弹窗
.addWeightContent {
width: 100%;
height: 54vh;
padding: $padding * 4 0;
box-sizing: border-box;
color: $text-gray;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
justify-content: space-between;
border-bottom: solid 1rpx #f9f9f9;
padding: $padding 0;
.list-title {
color: $text-color;
font-size: $title-size-m;
margin-bottom: $margin * 0.4;
span {
font-size: $title-size + 14;
font-weight: 500;
margin-right: 10rpx;
}
}
.list-right {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
box-sizing: border-box;
margin-top: $margin * 0.4;
span {
margin-bottom: 10rpx;
}
}
}
}
.no-lists {
padding: $padding;
color: $text-gray-m;
font-size: $title-size-m;
}
// 弹窗
.addWeightContent {
width: 100%;
height: 54vh;
padding: $padding * 4 0;
box-sizing: border-box;
color: $text-gray;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
.date {
font-size: $title-size + 9;
text-align: center;
}
.count {
color: $main-color;
text-align: center;
margin-top: $margin * 2;
margin-bottom: $margin * 0.1;
font-size: $title-size + 2;
span {
font-weight: bold;
font-size: $title-size * 2.2;
margin-right: $margin * 0.3;
.date {
font-size: $title-size + 9;
text-align: center;
}
.count {
color: $main-color;
text-align: center;
margin-top: $margin * 2;
margin-bottom: $margin * 0.1;
font-size: $title-size + 2;
span {
font-weight: bold;
font-size: $title-size * 2.2;
margin-right: $margin * 0.3;
}
}
.addBtn {
background-color: $main-color;
color: #fff;
margin-top: $margin * 2;
font-size: $title-size * 1.2;
padding: $padding * 0.7 $padding * 4;
border-radius: $radius * 3;
font-size: $title-size + 6;
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
}
}
.addBtn {
background-color: $main-color;
color: #fff;
margin-top: $margin * 2;
font-size: $title-size * 1.2;
padding: $padding * 0.7 $padding * 4;
border-radius: $radius * 3;
font-size: $title-size + 6;
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
}
}
</style>
</style>