333 lines
9.2 KiB
Vue
333 lines
9.2 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">
|
||
<!-- 体重表 -->
|
||
<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>
|
||
测量结果
|
||
</view>
|
||
<view class="list-right">
|
||
<span>开始保持 / 塑性</span>
|
||
{{item.created_at}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="no-lists"
|
||
v-else
|
||
>还没有体重信息，记录下呗~</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>
|
||
</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;
|
||
});
|
||
},
|
||
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();
|
||
});
|
||
},
|
||
// 滚动标尺触发事件
|
||
scroll(msg) {
|
||
this.weight = msg;
|
||
},
|
||
},
|
||
};
|
||
</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 {
|
||
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: $text-gray-m;
|
||
padding: $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: $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;
|
||
}
|
||
}
|
||
.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> |