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

342
components/date-template/index.vue Normal file
View File

@@ -0,0 +1,342 @@
<!--
* @Description:日历模板
* @Author: Aimee·Zhang
* @Date: 2022-02-08 09:06:45
* @LastEditors: Aimee·Zhang
* @LastEditTime: 2022-02-08 09:06:45
-->
<template>
<view class="date">
<u-popup :show="dateShow" zIndex="10099890" @close="closeDate" mode="bottom" :safeAreaInsetBottom="true">
<view class="date-content">
<view class="title"><span @click="datePreNext('before')">上一月</span>{{month}}<span
@click="datePreNext('after')">下一月</span></view>
<view class="date-item">
<view class="week">
<view class="week-item" v-for="(item,index) in weekList" :key="index">{{item}}</view>
</view>
<!-- 饮食模块 -->
<block v-if="type === 'foods'">
<view class="week" style="padding-top: 30rpx;">
<view v-for="item in lists" :key="item.today" @click="dateClick(item)"
:class="['week-item',{'is_past':!item.is_month},{'is_today':item.today === today},{'is_intake0':item.intake === 1},{'is_intake1':item.intake === 2},{'is_intake2':item.intake === 3}]">
{{item.day}}
</view>
</view>
<view class="des">
<block>
<view class="des-item">吃少了</view>
<view class="des-item">正好</view>
<view class="des-item">吃多了</view>
</block>
<view class="back" @click="backDate"> 回今天 </view>
</view>
</block>
<!-- 喝水模块 -->
<block v-if="type === 'drink'">
<view class="week" style="padding-top: 30rpx;">
<view v-for="item in lists" :key="item.today" @click="dateClick(item)"
:class="['week-item',{'is_past':!item.is_month},{'is_today':item.today === today}]">
{{item.day}}
<u-image class='waterIcon' :src="require('@/static/imgs/water-1.png')"
v-if="item.drink === 2" :lazy-load="true" width="20rpx" radius="10rpx"
mode="widthFix" />
<u-image class='waterIcon' :src="require('@/static/imgs/water-2.png')"
v-if="item.drink === 1" :lazy-load="true" width="20rpx" radius="10rpx"
mode="widthFix" />
</view>
</view>
<view class="drink">
<block>
<view class="drink-item">
<u-image class='waterIcon' :src="require('@/static/imgs/water-1.png')"
:lazy-load="true" width="22rpx" radius="10rpx" mode="widthFix" />未完成指标
</view>
<view class="drink-item">
<u-image class='waterIcon' :src="require('@/static/imgs/water-2.png')"
:lazy-load="true" width="22rpx" radius="10rpx" mode="widthFix" />
完成指标
</view>
</block>
<view class="back" @click="backDate"> 回今天 </view>
</view>
</block>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import moment from 'moment';
export default {
data() {
return {
weekList: ['日', '一', '二', '三', '四', '五', '六'],
};
},
props: {
/**
* lists 传过来的列表
* type foods（食物运动） drink（饮水）weight（体重）
* today 勾选时间
* month 勾选日期
* dateShow 页面是否显示
**/
lists: {
type: Array,
default: [],
},
type: {
type: String,
default: "",
},
today: {
type: String,
default: moment(new Date()).format('YYYY-MM-DD')
},
month: {
type: String,
default: moment(new Date()).format('YYYY-MM')
},
dateShow: {
type: Boolean,
default: false
}
},
methods: {
// 选择日期
dateClick(item) {
this.$emit('dateClick', item)
},
// 返回今天
backDate() {
this.$emit('backDate', '')
},
// 点击上一个月或者下一个月 before 上一月 after下一个月
datePreNext(type) {
this.$emit('datePreNext', type)
},
// 关闭日历
closeDate() {
this.$emit('closeDate')
}
},
};
</script>
<style lang="scss" scoped>
.date {
// 日历弹窗
.date-content {
width: 100%;
padding: $padding *2;
min-height: 800rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
.title {
font-size: $title-size + 4;
color: #20845f;
font-weight: bold;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
span {
display: inline-block;
padding: $padding;
font-size: $title-size-m;
color: #cacaca;
font-weight: normal;
}
}
.date-item {
padding-top: $padding;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
.drink {
display: flex;
color: #cacaca;
flex-direction: row;
align-items: center;
box-sizing: border-box;
font-size: $title-size-m;
justify-content: center;
margin-top: $margin;
width: 100%;
.drink-item {
padding-right: 40rpx;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
u-image{
padding-right: 10rpx;
}
}
}
.des {
display: flex;
color: #cacaca;
flex-direction: row;
align-items: center;
box-sizing: border-box;
font-size: $title-size-m;
justify-content: center;
margin-top: $margin;
width: 100%;
.des-item {
padding-left: 40rpx;
padding-right: 10rpx;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
&:before {
content: '';
position: absolute;
left: 14rpx;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background: #fa624d;
}
&:nth-child(2):before {
background: #fbbf0f;
}
&:nth-child(1):before {
background: #02c7bd;
}
}
}
.back {
margin-left: 100rpx;
background-color: rgba($color: $main-color, $alpha: 1);
color: #fff;
padding: 10rpx $padding;
border-radius: $radius + 10;
}
}
.week {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
flex-wrap: wrap;
width: 100%;
.week-item {
width: 14.28%;
height: 90rpx;
line-height: 90rpx;
font-size: $title-size-m + 2;
color: #888;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
&::before {
content: '';
width: 14rpx;
height: 14rpx;
border-radius: 50%;
position: absolute;
bottom: 0;
// background: #02c7bd;
}
}
.waterIcon {
position: absolute;
width: 30rpx !important;
bottom: -12rpx;
padding-left: 10rpx;
}
&:nth-child(1),
&:nth-child(7),
&:nth-child(8),
&:nth-child(14),
&:nth-child(15),
&:nth-child(21),
&:nth-child(22),
&:nth-child(28),
&:nth-child(29),
&:nth-child(35),
{
color: rgba($color: #000000, $alpha: 0.4);
}
}
// 吃饭样式
.is_intake0::before {
background: #02c7bd !important;
}
.is_intake1::before {
background: #fbbf0f !important;
}
.is_intake2::before {
background: #fa624d !important;
}
.is_today {
color: #fff !important;
position: relative;
z-index: 1;
&:after {
content: '';
width: 50rpx;
height: 50rpx;
position: absolute;
border-radius: 50%;
background-color: $main-color;
color: #Fff;
z-index: -1;
}
}
.is_past {
color: rgba($color: #000000, $alpha: 0.1) !important;
}
}
}
</style>