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

新增记录模块页面

Browse Source
This commit is contained in:
张冬雪
2022-01-11 17:15:00 +08:00
parent c810dbdb1d
commit f7b4468119
83 changed files with 16340 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

274
pages/record/weight.vue Normal file
View File

@@ -0,0 +1,274 @@
<!--
* @Description:记录体重页面
* @Author: Aimee·Zhang
* @Date: 2022-01-07 12:32:50
* @LastEditors: Aimee·Zhang
* @LastEditTime: 2022-01-10 15:00:51
-->
<template>
<view class="weight">
<!-- 体重表 -->
<view class="progress-top">
<view class="unit">
<span
:class="isJin === 2?'active':''"
@click="isJin = 2"
>斤</span>
<span
:class="isJin === 1?'active':''"
@click="isJin = 1"
>公斤</span>
</view>
<view class="progress">
<view>比原来轻</view>
<u-count-to
class="uCountTo"
:startVal="0"
:endVal="3.2"
:decimals="1"
color="#333"
fontSize="36"
:bold="true"
/>
<view>保持 / 塑性</view>
</view>
<view
class="add-weight"
@click="addWeight"
>记录体重</view>
</view>
<!-- 体重列表 -->
<view class="weight-list">
<view
class="list-item"
v-for="item in 2"
:key="item"
>
<view class="list-left">
<view class="list-title">
<span>64.9</span>公斤
</view>
初始体重
</view>
<view class="list-right">
<span>开始保持 / 塑性</span>
2021-12-22 12:23
</view>
</view>
</view>
<!-- 记录体重弹窗 -->
<u-popup
:show="addWeightShow"
:round="10"
@close="addWeightShow = false"
@open="open"
:closeable="true"
>
<view class="addWeightContent">
<view class="date">今天</view>
<view class='count'><span>{{horizontaPointVal}}</span>公斤</view>
<vue-scale
:min="10"
:max="100"
:int="false"
:single="10"
:h="80"
:styles="styles"
@scroll="scroll"
:scrollLeft="55"
/>
<view
class="addBtn"
@click="addWeightShow = false"
>确认添加</view>
</view>
</u-popup>
</view>
</template>
<script>
import vueScale from "@/components/vueScale";
export default {
components: {
vueScale,
},
data() {
return {
isJin: 1, // 是公斤 2 是斤 所有用到斤的直接乘以这个字段即可
addWeightShow: true, // 是否添加体重展示
weight: 11,
height: 180,
styles: {
line: "#dbdbdb",
bginner: "#fbfbfb",
bgoutside: "#ffffff",
font: "#404040",
fontColor: "#404040",
fontSize: 16,
},
horizontaPointVal: "",
};
},
methods: {
addWeight() {
this.addWeightShow = true;
},
close() {},
open() {},
// 滚动标尺触发事件
scroll(msg) {
this.horizontaPointVal = 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.8 $padding * 2.8;
margin-top: $margin * 2;
font-weight: bold;
}
}
// 列表
.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;
}
}
}
}
// 弹窗
.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 * 0.8;
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>