MiniPrograms/subpkg/calendar/calendar.vue

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

		<view class="card-box">

			<view class="card-item">
				<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 === '较差'?'#ff5959':'#f9c752')}">{{monthAttendQuality}}</text>
							<view class="number-detail">本月出勤</view>
						</view>
					</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 === '未打卡'?'#ff5959':'#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.replace('0','')}}</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 class="image" v-if="currentTodayData.isAttend === 1" :style="{backgroundImage:`url(${imageWorkday})`}"></view>
					<view class="image" v-if="currentTodayData.isAttend === 7" :style="{backgroundImage:`url(${imageWeekend})`}"></view>
					<view class="image" v-if="currentTodayData.isAttend === 0" :style="{backgroundImage:`url(${imageNoAttend})`}"></view>
					<view class="image" v-if="currentTodayData.isAttend === -1" :style="{backgroundImage:`url(${imageNoArrive})`}"></view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} 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 {
				//当日打卡信息
				attendance: '',
				attendanceTime: '',
				attendanceQuality: '',
				monthAttendQuality: '',
				//点击当日信息
				currentTodayData: '',
				//日历月份
				calendarMonth: '',
				//控制事件参数
				isFirst: false,
				//当日时间参数
				todayData: '',
				imageWorkday: 'https://ouch-cdn2.icons8.com/z39mAYlsJUS2hKCBbkK_ktOIjma_qhkc5J0ANdyfiKU/rs:fit:912:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvMTA3/L2FlZjQ4NmM4LTAz/NTYtNGRhNS04ZWQ2/LTBhMGIzMzdhZjNm/Mi5zdmc.png',
				imageWeekend: 'https://ouch-cdn2.icons8.com/NJDdGibHzZkGZzgqe55ESzJ6_BrcgHO2bkz_vFG6PoY/rs:fit:912:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvNTg2/L2RlMmJhZDI4LTAz/NTQtNDMwNS1hNmQ2/LTU3Y2Y1ODJjNjc3/YS5zdmc.png',
				imageNoAttend: 'https://ouch-cdn2.icons8.com/ehPeP69ypvrLonk6YkqIzV_WfKM1G-Ls9J7PuZvxRr8/rs:fit:912:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvMzY3/L2QzZGNmODA5LTY3/ODUtNGFkOC1hOWVi/LWI4OWYyM2ZiMzNi/Yi5zdmc.png',
				imageNoArrive: 'https://ouch-cdn2.icons8.com/WfSBIzy4iTGDtprvhW0wA2S8lPNRoqeZqvFsNbKsraw/rs:fit:912:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvODQ3/LzI1NDY1ZDdhLTVj/NDEtNGIzMy1iN2Q1/LTRhYjgwOGU2NDk5/OS5zdmc.png'
			};
		},
		watch: {
			calendarMonth() {
				this.getMonthAttendQuality()
			}
		},
		onLoad(options) {
			this.getTodayAttendance()
			this.getMonthAttendQuality()
		},
		methods: {
			...mapMutations('m_children', ['updateNoAttendNum', 'updateIsAttendNum']),
			//选中日期改变回调
			change(e) {
				//存入当前时间
				if (this.isFirst === false) {
					this.todayData = e
					this.isFirst = true
				}
				//点击当日信息
				this.currentTodayData = e
				console.log("日历点击",this.currentTodayData);
				//日历月份
				this.calendarMonth = e.month
				//当前日历月份打卡数
				let isAttendArr = this.records.filter(x => x.month === e.month && x.year === e.year).length
				// 当前日历月统计
				this.updateIsAttendNum(isAttendArr)
				// 当前日历月天数
				let monthDays = new Date(e.year, e.month, 0).getDate()
				//在本年当前月之前
				if (e.year === this.todayData.year && e.month < this.todayData.month) {
					let weekendDates = 0
					for (let i = 1; i <= monthDays; i++) {
						if (new Date(`${e.year}-${e.month}-${i}`).getDay() === 0 ||
							new Date(`${e.year}-${e.month}-${i}`).getDay() === 6) {
							weekendDates++
						}
					}
					let noAttendArr = monthDays - isAttendArr - weekendDates
					this.updateNoAttendNum(noAttendArr)
				}
				//之前年份
				if (e.year < this.todayData.year) {
					let weekendDates = 0
					for (let i = 1; i <= monthDays; i++) {
						if (new Date(`${e.year}-${e.month}-${i}`).getDay() === 0 ||
							new Date(`${e.year}-${e.month}-${i}`).getDay() === 6) {
							weekendDates++
						}
					}
					let noAttendArr = monthDays - isAttendArr - weekendDates
					this.updateNoAttendNum(noAttendArr)
				}
				//在本月
				if (e.year === this.todayData.year && e.month === this.todayData.month) {
					let weekendDates = 0
					for (let i = 1; i <= this.todayData.date; i++) {
						if (new Date(`${e.year}-${e.month}-${i}`).getDay() === 0 ||
							new Date(`${e.year}-${e.month}-${i}`).getDay() === 6) {
							weekendDates++
						}
					}
					let noAttendArr = this.todayData.date - isAttendArr - weekendDates
					this.updateNoAttendNum(noAttendArr)
				}
				//在本年当月之后
				if (e.year === this.todayData.year && e.month > this.todayData.month) {
					this.updateNoAttendNum('暂无')
					this.updateIsAttendNum('暂无')
				}
				//之后年份
				if (e.year > this.todayData.year) {
					this.updateNoAttendNum('暂无')
					this.updateIsAttendNum('暂无')
				}

			},
			//今日打卡
			getTodayAttendance() {
				//获得当前时间时间戳
				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 / 30 <= 0.1 ? '优秀' : (this.calendar.noAttendNum / 30 <=
					0.2 ? '良好' : '较差')
				if (this.calendar.noAttendNum === '暂无' && this.calendar.isAttendNum === '暂无') {
					this.monthAttendQuality = '暂无'
				}
			},
			//选择日期
			chooseDate(dateInfo, dateIndex) {
				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
					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 = '无记录'
				}
				if (dateInfo.isAttend === 7) {
					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 {
		margin-left: 30rpx;
		width: 200rpx;
		height: 200rpx;
		border-radius: $card-border-radius;
		background-size: 100%;
		background-repeat: no-repeat;
	}
</style>