MiniPrograms/subpkg/calendar/calendar.vue

<template>
	<view>
		<back :text="'打卡详情'"></back>

		<view class="card-box">

			<view class="card-item" v-if="topInfo === false">
				<view class="total">
					<view class="total-title">本月打卡</view>
					<view class="total-content">
						<view class="number-box">
							<view class="number" style="color: #4169E1;">{{calendar.isAttendNum}}</view>
							<view class="number-detail">打卡次数</view>
						</view>
						<view class="number-box">
							<view class="number" style="color: #ff5959;">{{calendar.noAttendNum}}</view>
							<view class="number-detail">缺卡次数</view>
						</view>
						<view class="number-box">
							<text class="number"
								:style="{color: monthAttendQuality==='优秀'?'#4169E1':(monthAttendQuality === '良好'?'#f9c752':'#3B4144')}">{{monthAttendQuality}}</text>
							<view class="number-detail">出勤质量</view>
						</view>
					</view>
				</view>
				<!-- <view class="flex" style="justify-content: center;" >
					<view class="image" :style="{backgroundImage:`url(${image})`}"></view>
				</view> -->
			</view>

			<view class="card-item">
				<view class="calendar_container">
					<zsyCalendar :sundayIndex="6" @chooseDate="chooseDate" @change="change" />
				</view>
				<view class="state-box">
					<view class="state"
						:style="{backgroundColor: attendance==='已打卡'?'#4169E1':(attendance === '未打卡'?'#f9c752':'#bebebe')}">
						<view class="state-text">{{attendance}}</view>
					</view>
					<view class="msg-box">
						<view class="flex">
							<text class="msg-text" style="font-weight: normal;font-size: 28rpx;">打卡时间:</text>
							<text class="msg-text">{{attendanceTime}}</text>
						</view>
						<view class="flex">
							<text class="msg-text" style="font-weight: normal;font-size: 28rpx;">出勤效率:</text>
							<text class="msg-text"
								:style="{color: attendanceQuality==='优秀'?'#4169E1':(attendanceQuality === '良好'?'#f9c752':'#3B4144')}">{{attendanceQuality}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import zsyCalendar from '@/subpkg/z-calendar/zsy-calendar.vue'
	export default {
		name: 'Calendar',
		components: {
			zsyCalendar
		},
		computed: {
			...mapState('m_children', ['records', 'calendar']),
		},
		data() {
			return {
				// image: 'https://image.meiye.art/pic_1632658822816Dw1wc8QoTOnItNvJI76v6',
				topInfo: false,
				//当日打卡信息
				attendance: '',
				attendanceTime: '',
				attendanceQuality: '',
				//当月天数
				// monthDates: '',
				monthAttendQuality: '',
				//当月
				month: '',
			};
		},
		onLoad(options) {
			this.getTodayAttendance()
			this.getMonthAttendQuality()
		},
		methods: {
			//选中日期改变回调
			change(e) {
				if(e.month != this.month){
					this.topInfo = true
				}else{
					this.topInfo = false
				}
			},
			//今日打卡
			getTodayAttendance() {
				//获取当月
				this.month = new Date().getMonth() + 1
				//获得当前时间时间戳
				let timeNow = (new Date()).format("yyyy-M-dd")
				let timeArr = timeNow.split("-")
				let info = this.records.filter(x => x.year == timeArr[0] && x.month == timeArr[1] && x.date == timeArr[2])
				if (info.length === 0) {
					//出勤状况
					this.attendance = '未打卡',
						//打卡时间
						this.attendanceTime = '未记录',
						//出勤质量
						this.attendanceQuality = '未记录'
				} else {
					this.attendance = '已打卡'
					this.attendanceTime = info[0].time
					this.attendanceQuality = info[0].time <= '08:15' ? '优秀' : (info[0].time <= '08:25' ? '良好' : '较差')
				}
			},
			//判断本月出勤质量
			getMonthAttendQuality() {
				this.monthAttendQuality = this.calendar.noAttendNum <= 3 ? '优秀' : (this.calendar.noAttendNum <= 6 ? '良好' :
					'较差')
			},
			//选择日期
			chooseDate(dateInfo, dateIndex) {
				// console.log(dateInfo);
				if (dateInfo.isAttend === 1) {
					this.attendance = '已打卡'
					this.attendanceTime = this.records.filter(x => x.date === dateInfo.date && x.month === dateInfo
						.month && x.year === x.year)[0].time
					// console.log(info);
					this.attendanceQuality = this.attendanceTime <= '08:15' ? '优秀' : (this.attendanceTime <= '08:25' ?
						'良好' : '较差')
				}
				if (dateInfo.isAttend === 0) {
					this.attendance = '未打卡'
					this.attendanceTime = '未记录'
					this.attendanceQuality = '未记录'
				}
				if (dateInfo.isAttend === -1) {
					this.attendance = '未到日期'
					this.attendanceTime = '未记录'
					this.attendanceQuality = '未记录'
				}
			},

		}
	}
</script>

<style lang="scss">
	.card-box {
		display: flex;
		flex-flow: column wrap;
		margin: 0 20rpx 0 20rpx;
		justify-content: space-between;

		.card-item {
			margin: 2% 0;
			width: 100%;
			height: auto;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			background-color: #FFF;
			border-radius: $card-border-radius;

			//日历组件
			.calendar_container {
				height: 100%;
				width: 100%;
				background-color: #FFF;
				margin: 0 auto;
				box-sizing: border-box;
				border-radius: $card-border-radius;
			}
		}
	}

	.total {
		height: 250rpx;
		width: 100%;

		.total-title {
			font-size: 32rpx;
			font-weight: bold;
			color: $color-title;
			margin: 30rpx 30rpx 0rpx 30rpx;
		}

		.total-content {
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 175rpx;

			.number-box {
				display: flex;
				flex-direction: column;
				align-items: center;

				.number {
					font-size: 46rpx;
					font-weight: bold;
					color: $color-title;
				}

				.number-detail {
					margin-top: 10rpx;
					font-size: 28rpx;
					color: #afafaf;
				}
			}

		}
	}

	.state-box {
		display: flex;
		align-items: center;
		height: 200rpx;
		width: 100%;

		.state {
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 100%;
			margin: 20rpx;
			height: 150rpx;
			width: 150rpx;

			.state-text {
				font-size: 32rpx;
				font-weight: bold;
				color: #FFF;
			}
		}

		.msg-box {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			height: 150rpx;
			width: auto;

			.msg-text {
				color: $color-title;
				font-weight: bold;
				font-size: 36rpx;
				margin-left: 20rpx;
			}
		}
	}

	.flex {
		display: flex;
		align-items: center;
	}
	.image {
		width: 45%;
		height: 250rpx;
		border-radius: $card-border-radius;
		background-size: 100%;
		background-repeat: no-repeat;
	}
</style>