343 lines
12 KiB
Vue
343 lines
12 KiB
Vue
<!--
|
||
* @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>
|