clockIn-wechat-uniapp-241018/pages_order/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="@/static/logo.png" mode="widthFix"></image>
				<view class="base">
					<view class="name">李知意</view>
					<view class="project">高新区项目一队项目1</view>
				</view>
			</view>

			<view>
				<view class="calendar-top">
					<view class="current-time">
						<view class="year">{{ year }}</view>
						<view class="time">{{ monthDay }}</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" :selected="selected" 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>5</text></view>
						<view style="margin: 0rpx 45rpx;" class="calendar-desc-item">缺卡：<text>3</text></view>
						<view style="margin: 0rpx 45rpx;" class="calendar-desc-item">未打卡：<text>2</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 10" :key="item">
					<template #title>
						<view class="today-detail-main">
							<image src="@/static/image/center/center-bg.png" mode="widthFix"></image>
							<view class="sign-detail">
								<view class="time">2024-10-09 8:30</view>
								<view class="address">长沙市雨花区德思勤城市广场</view>
							</view>
						</view>
					</template>
				</uv-steps-item>
			</uv-steps>
		</view>
	</view>
</template>

<script>
	/**
	 * 获取任意时间
	 */
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
	export default {
		name: "Record",
		data() {
			return {
				year: '', //年
				monthDay: '', //月日
				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
					}
				]
			}
		},
		onShow() {
			this.getCurrentTime()
		},
		methods: {
			//获取打卡日期
			getCurrentTime() {
				let currentDate = new Date();
				this.year = currentDate.getFullYear();
				let currentMonth = currentDate.getMonth() + 1;
				let currentDay = currentDate.getDate();
				this.monthDay =
					`${currentMonth < 10 ? "0" + currentMonth : currentMonth}.${currentDay < 10 ? "0" + currentDay : currentDay}`
			},
			
		}
	}
</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: 15rpx;
			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;
				}

				.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-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: 15rpx;
			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;
				image {
					width: 30%;
				}
			}
		}
	}
</style>