xiangqinxiangmu/LiangZhiYUMao/pages/matchmaker-workbench/sign-in.vue

<template>
	<view class="sign-in-page">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<text class="header-title">签到</text>
			<view class="placeholder"></view>
		</view>

		<scroll-view scroll-y class="content">
			<!-- 签到日历标题 -->
			<view class="calendar-header">
				<text class="calendar-title">11月签到日历</text>
				<text class="calendar-subtitle">红线相系，良缘成就一生欢喜。</text>
			</view>

			<!-- 月份选择 -->
			<view class="month-selector">
				<text class="month-text">2025年 11月</text>
				<view class="streak-badge">
					<text class="streak-text">红线季良缘</text>
				</view>
				<view class="calendar-icon">📅</view>
			</view>

			<!-- 日历 -->
			<view class="calendar">
				<view class="weekdays">
					<text class="weekday">日</text>
					<text class="weekday">一</text>
					<text class="weekday">二</text>
					<text class="weekday">三</text>
					<text class="weekday">四</text>
					<text class="weekday">五</text>
					<text class="weekday">六</text>
				</view>

				<view class="days">
					<view 
						v-for="(day, index) in calendarDays" 
						:key="index" 
						class="day-item"
						:class="{ 
							'other-month': day.isOtherMonth,
							'signed': day.isSigned,
							'today': day.isToday
						}"
					>
						<text class="day-number">{{ day.day }}</text>
					</view>
				</view>
			</view>

			<!-- 签到统计 -->
			<view class="sign-stats">
				<view class="stat-item">
					<text class="stat-icon">📊</text>
					<text class="stat-text">累计签到: {{ totalSignDays }}天</text>
				</view>
				<view class="stat-item">
					<text class="stat-icon">💗</text>
					<text class="stat-text">可用积分: {{ availablePoints }}</text>
				</view>
				<view class="gift-icon">🎁</view>
			</view>

			<!-- 连续签到进度 -->
			<view class="streak-progress">
				<text class="progress-label">连续签到奖励</text>
				<text class="progress-days">连续{{ consecutiveDays }}天</text>
			</view>
			<view class="progress-bar">
				<view class="progress-fill" :style="{ width: progressWidth }"></view>
			</view>

			<!-- 签到按钮 -->
			<view class="sign-button" :class="{ disabled: isSigned }" @click="handleSignIn">
				<text class="button-text">{{ isSigned ? '今日已签到' : '今日签到 +10积分' }}</text>
			</view>

			<!-- 提示文字 -->
			<view class="tips">
				<text class="tips-text">坚持签到，缘分更近一步</text>
				<text class="tips-sub">品牌出品 | 青鸟之恋1跟平台</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentYear: 2025,
			currentMonth: 11,
			totalSignDays: 0,
			availablePoints: 0,
			consecutiveDays: 0,
			isSigned: false,
			calendarDays: [],
			signedDates: [] // 已签到的日期
		}
	},
	computed: {
		progressWidth() {
			// 假设7天为一个周期
			const progress = (this.consecutiveDays % 7) / 7 * 100
			return progress + '%'
		}
	},
	onLoad() {
		this.loadSignInData()
		this.generateCalendar()
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		async loadSignInData() {
			// 模拟加载签到数据
			this.totalSignDays = 0
			this.availablePoints = 0
			this.consecutiveDays = 0
			this.isSigned = false
			
			// 模拟已签到日期
			this.signedDates = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 30]
		},
		generateCalendar() {
			const year = this.currentYear
			const month = this.currentMonth
			
			// 获取当月第一天是星期几
			const firstDay = new Date(year, month - 1, 1).getDay()
			// 获取当月天数
			const daysInMonth = new Date(year, month, 0).getDate()
			// 获取上月天数
			const prevMonthDays = new Date(year, month - 1, 0).getDate()
			
			const days = []
			
			// 添加上月日期
			for (let i = firstDay - 1; i >= 0; i--) {
				days.push({
					day: prevMonthDays - i,
					isOtherMonth: true,
					isSigned: false,
					isToday: false
				})
			}
			
			// 添加当月日期
			const today = new Date().getDate()
			const currentMonthNow = new Date().getMonth() + 1
			
			for (let i = 1; i <= daysInMonth; i++) {
				days.push({
					day: i,
					isOtherMonth: false,
					isSigned: this.signedDates.includes(i),
					isToday: i === today && month === currentMonthNow
				})
			}
			
			// 添加下月日期补齐
			const remainingDays = 42 - days.length // 6行7列
			for (let i = 1; i <= remainingDays; i++) {
				days.push({
					day: i,
					isOtherMonth: true,
					isSigned: false,
					isToday: false
				})
			}
			
			this.calendarDays = days
		},
		handleSignIn() {
			if (this.isSigned) {
				uni.showToast({
					title: '今日已签到',
					icon: 'none'
				})
				return
			}
			
			// 执行签到
			this.isSigned = true
			this.totalSignDays++
			this.availablePoints += 10
			this.consecutiveDays++
			
			// 更新今天的签到状态
			const today = new Date().getDate()
			this.signedDates.push(today)
			this.generateCalendar()
			
			uni.showToast({
				title: '签到成功 +10积分',
				icon: 'success'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.sign-in-page {
	min-height: 100vh;
	background: linear-gradient(180deg, #F3E5F5 0%, #FFF9F9 40%);
	display: flex;
	flex-direction: column;
}

/* 顶部导航栏 */
.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	padding-top: calc(20rpx + env(safe-area-inset-top));
	background: transparent;

	.back-btn {
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.back-icon {
			font-size: 40rpx;
			color: #333;
		}
	}

	.header-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.placeholder {
		width: 50rpx;
	}
}

.content {
	flex: 1;
	padding: 10rpx 20rpx 20rpx;
}

/* 日历标题 */
.calendar-header {
	margin-bottom: 20rpx;

	.calendar-title {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

	.calendar-subtitle {
		display: block;
		font-size: 24rpx;
		color: #FF6B9D;
	}
}

/* 月份选择 */
.month-selector {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20rpx;

	.month-text {
		font-size: 28rpx;
		font-weight: bold;
		color: #7B1FA2;
	}

	.streak-badge {
		background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
		color: #FFFFFF;
		font-size: 22rpx;
		font-weight: bold;
		padding: 6rpx 14rpx;
		border-radius: 12rpx;
	}

	.calendar-icon {
		font-size: 32rpx;
	}
}

/* 日历 */
.calendar {
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

	.weekdays {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		margin-bottom: 15rpx;

		.weekday {
			text-align: center;
			font-size: 24rpx;
			color: #666;
			font-weight: bold;
		}
	}

	.days {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 8rpx;

		.day-item {
			aspect-ratio: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 12rpx;
			background: #F5F5F5;

			&.other-month {
				background: transparent;

				.day-number {
					color: #CCC;
				}
			}

			&.signed {
				background: linear-gradient(135deg, #CE93D8 0%, #BA68C8 100%);

				.day-number {
					color: #FFFFFF;
					font-weight: bold;
				}
			}

			&.today {
				border: 2rpx solid #9C27B0;
			}

			.day-number {
				font-size: 24rpx;
				color: #333;
			}
		}
	}
}

/* 签到统计 */
.sign-stats {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 15rpx 20rpx;
	margin-bottom: 15rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

	.stat-item {
		display: flex;
		align-items: center;
		gap: 8rpx;
		flex: 1;

		.stat-icon {
			font-size: 24rpx;
		}

		.stat-text {
			font-size: 24rpx;
			color: #666;
		}
	}

	.gift-icon {
		font-size: 32rpx;
	}
}

/* 连续签到进度 */
.streak-progress {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10rpx;

	.progress-label {
		font-size: 24rpx;
		color: #666;
	}

	.progress-days {
		font-size: 24rpx;
		color: #9C27B0;
		font-weight: bold;
	}
}

.progress-bar {
	width: 100%;
	height: 12rpx;
	background: #E0E0E0;
	border-radius: 6rpx;
	margin-bottom: 25rpx;
	overflow: hidden;

	.progress-fill {
		height: 100%;
		background: linear-gradient(90deg, #9C27B0 0%, #BA68C8 100%);
		border-radius: 6rpx;
		transition: width 0.3s ease;
	}
}

/* 签到按钮 */
.sign-button {
	background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
	border-radius: 16rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(156, 39, 176, 0.3);

	&.disabled {
		background: #E0E0E0;
		box-shadow: none;
	}

	.button-text {
		display: block;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
}

/* 提示文字 */
.tips {
	text-align: center;

	.tips-text {
		display: block;
		font-size: 26rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.tips-sub {
		display: block;
		font-size: 22rpx;
		color: #999;
	}
}
</style>