clockIn-wechat-uniapp-241018/pages/subPack/record/record.vue

<!-- 签到记录 -->
<template>
	<view class="record">
		<!-- 自定义导航栏 -->
		<uni-nav-bar dark :fixed="true" shadow background-color="var(--main-color)" status-bar left-icon="left"
			title="签到记录" @clickLeft="$utils.navigateBack" />

		<!-- 签到日历 -->
		<view class="sign-calendar main">
			<view class="sign-user-info">
				<image class="user-img" :src="userInfo.headImage" mode="widthFix"></image>
				<view class="base">
					<view class="name"
					v-if="userInfo.auth">{{ userInfo.auth.name }}</view>
					<view class="project" 
					v-if="userInfo.team">{{ userInfo.team.name }}</view>
				</view>
			</view>

			<view>
				<view class="calendar-top">
					<view class="current-time">
						<view class="year">{{ selectDate.format('YYYY') }}年</view>
						<view class="time">{{ selectDate.format('MM') }}月</view>
					</view>
					<view class="calendar-desc">
						<view class="calendar-desc-item">正常</view>
						<view class="calendar-desc-item">缺卡</view>
						<view class="calendar-desc-item">未打卡</view>
					</view>
				</view>

				<uni-calendar class="uni-calendar--hook" 
				@monthSwitch="monthSwitch"
				@change="changeDate"
				:selected="clockTotal.date" showMonth />

				<view class="desc">
					<view style="width: 100%;justify-content: flex-start;margin-top: 30rpx;" class="calendar-desc">
						<view style="margin: 0rpx 45rpx;" class="calendar-desc-item">正常：<text>{{ clockTotal.normal }}</text></view>
						<view style="margin: 0rpx 45rpx;" class="calendar-desc-item">缺卡：<text>{{ clockTotal.noCard }}</text></view>
						<view style="margin: 0rpx 45rpx;" class="calendar-desc-item">未打卡：<text>{{ clockTotal.abnormal }}</text></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 今日打卡详情 -->
		<view class="today-detail main">
			<view class="today-detail-title">今日打卡详情</view>
			<uv-steps current="8" direction="column" dot>
				<uv-steps-item v-for="item in list" 
				:key="item.id">
					<template #title>
						<view class="today-detail-main">
							
							<!-- <image :src="item.pic"
							@click="previewImage([item.pic])" 
							mode="aspectFill"></image> -->
							
							<view class="sign-detail">
								<view class="time" v-if="item.clockInTime">{{ item.clockInTime }}</view>
								<view class="time" v-else>
									{{ selectDate.format('YYYY-MM-DD ') + item.clockStartTime }}
									<view class="tag"
									v-if="item.type != 2">
										缺卡
									</view>
								</view>
								<view class="address">{{ item.address }}</view>
							</view>
						</view>
					</template>
				</uv-steps-item>
			</uv-steps>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import mixinList from '@/mixins/list.js'
	
	export default {
		mixins : [mixinList],
		name: "Record",
		data() {
			return {//this.$dayjs().format('YYYY-MM-DD')
				// year: this.$dayjs().format('YYYY'), //年
				// monthDay: this.$dayjs().format('MM'), //月日
				selectDate : this.$dayjs(),
				selected: [ //info为1:正常 2:缺卡 3:未打卡
					// {
					// 	date: getDate(new Date(), -3).fullDate,
					// 	info: 3
					// },
					// {
					// 	date: getDate(new Date(), -2).fullDate,
					// 	info: 2
					// },
					// {
					// 	date: getDate(new Date(), -1).fullDate,
					// 	info: 1
					// }
				],
				mixinsListApi : 'clockList',
				clockTotal : {
					date : [],
				}
			}
		},
		onLoad() {
			this.queryParams.date = this.selectDate.format('YYYY-MM-DD HH:mm:ss')
		},
		computed : {
			...mapState(['teamList', 'userInfo']),
		},
		onShow() {
			this.getClockTotal()
		},
		methods: {
			getClockTotal(){
				this.$api('clockTotal', {
					date : this.selectDate.format('YYYY-MM-DD HH:mm:ss')
				}, res => {
					if(res.code == 200){
						res.result.date.forEach(n => {
							n.info = n.type + 1
						})
						
						this.clockTotal = res.result
					}
				})
			},
			//切换月份
			monthSwitch(e){
				this.selectDate = this.$dayjs(`${e.year}-${e.month}-01 01:00:10`)
				this.getClockTotal()
			},
			// 切换日期
			changeDate(e){
				this.selectDate = this.$dayjs(`${e.fulldate} 01:00:10`)
				this.queryParams.date = this.selectDate.format('YYYY-MM-DD HH:mm:ss')
				this.getData()
			},
			isShowTag(date){
				let index = new Date(date).getDay()
				return ![0, 6].includes(index)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.record {
		min-height: 100vh;
		background: #E4E4E4;
		padding-bottom: 100rpx;

		.main {
			width: 95%;
			margin: 0rpx auto;
		}

		// 签到日历
		.sign-calendar {
			background: white;
			border-radius: 30rpx;
			overflow: hidden;
			margin-top: 30rpx;
			box-sizing: border-box;
			padding: 25rpx 15rpx;

			.sign-user-info {
				display: flex;
				flex-wrap: wrap;
				border-bottom: 2rpx solid #ccc;
				padding: 15rpx 0rpx;

				.user-img {
					width: 150rpx;
					height: 150rpx;
					border-radius: 20rpx;
				}

				.base {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 25rpx 0rpx 25rpx 15rpx;
					width: calc(100% - 150rpx);

					.name {
						font-size: 36rpx;
					}

					.project {
						font-size: 30rpx;
						color: #959595;
					}
				}
			}

			.calendar-top,
			.desc {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 15rpx 0rpx 20rpx 0rpx;

				.current-time {
					display: flex;
					font-size: 32rpx;
					font-weight: bold;
					width: 35%;

					.year {
						margin-right: 15rpx;
					}

					.time {}
				}

				.calendar-desc {
					display: flex;
					justify-content: flex-end;
					width: 65%;
					color: #707070;

					.calendar-desc-item {
						position: relative;
						margin: 0rpx 35rpx;

						&::before {
							position: absolute;
							top: 10rpx;
							left: -25rpx;
							display: block;
							content: "";
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							background: #11FF00;
						}

						&:nth-child(1) {
							&::before {
								background: #11FF00;
							}
						}

						&:nth-child(2) {
							&::before {
								background: #F97D00;
							}
						}

						&:nth-child(3) {
							&::before {
								background: #FF0000;
							}
						}
					}
				}
			}

			// 修改日历样式
			&::v-deep .uni-calendar__header {
				// display: none !important;
			}
			
			&::v-deep .uni-calendar__header-text{
				display: none !important;
			}

			&::v-deep .uni-calendar-item__weeks-box {
				border-radius: 50% !important;
			}

			&::v-deep .uni-calendar-item--isDay {
				background-color: $main-color !important;
			}

			&::v-deep .uni-calendar-item--checked {
				background-color: $main-color !important;
			}
		}

		// 今日打卡详情
		.today-detail {
			border-radius: 30rpx;
			background: white;
			margin-top: 35rpx;
			box-sizing: border-box;
			padding: 25rpx 15rpx;
			overflow: hidden;

			.today-detail-title {
				font-size: 32rpx;
				font-weight: bold;
			}

			.today-detail-main {
				display: flex;
				box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, .1);
				margin: 15rpx 0rpx;
				box-sizing: border-box;
				padding: 20rpx 15rpx;
				font-size: 26rpx;

				image {
					width: 220rpx;
					border-radius: 10rpx;
					flex-shrink: 0;
					height: 150rpx;
				}
				
				.time{
					display: flex;
					align-items: center;
					.tag{
						border: 1px solid #F97D00;
						color: #F97D00;
						padding: 2rpx 6rpx;
						border-radius: 10rpx;
						font-size: 22rpx;
						margin-left: 20rpx;
					}
				}
				
				.sign-detail {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					padding-left: 15rpx;
					box-sizing: border-box;
				}
			}
		}
	}
</style>