420 lines
14 KiB
Vue
420 lines
14 KiB
Vue
<!--
|
||
* @Description:记录体重页面
|
||
* @Author: Aimee·Zhang
|
||
* @Date: 2022-01-07 12:32:50
|
||
* @LastEditors: Aimee·Zhang
|
||
* @LastEditTime: 2022-01-14 09:37:42
|
||
-->
|
||
|
||
<template>
|
||
<view class="weight">
|
||
<!-- 进度模块 -->
|
||
<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="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 v-if="chartData.categories.length>0" :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" v-if="chartData.categories.length>0">
|
||
<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" v-if="chartData.categories.length>0"> <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>
|
||
|
||
|
||
<!-- 记录体重弹窗 -->
|
||
<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>
|
||
</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,
|
||
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,
|
||
},
|
||
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]}]
|
||
categories:[],
|
||
series:[{name: "",data: []}]
|
||
}, // 曲线部分 start
|
||
};
|
||
},
|
||
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();
|
||
}
|
||
},
|
||
|
||
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;
|
||
}).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) {
|
||
this.tabbarId = Number(e)
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.charts-box{
|
||
width: 100%;
|
||
height:500rpx;
|
||
margin-top: $margin;
|
||
}
|
||
.no-weight{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
color: #999;
|
||
font-size: $title-size-m;
|
||
}
|
||
// curve
|
||
.curve{
|
||
margin-top: $margin;
|
||
padding: $padding $padding + 10;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
font-size: $title-size + 5;
|
||
color: #333;
|
||
span{
|
||
color: #cacaca;
|
||
font-size: $title-size-m;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
// 评测图片
|
||
.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;
|
||
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;
|
||
border: solid 2rpx $main-color;
|
||
color: $main-color;
|
||
padding: $padding * 0.6 $padding * 2.8;
|
||
margin-top: $margin * 2;
|
||
font-weight: bold;
|
||
}
|
||
.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;
|
||
}
|
||
|
||
// 弹窗
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.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>
|