xiangqinxiangmu/LiangZhiYUMao/pages/matchmaker-workbench/mine.vue

<template>
	<view class="matchmaker-mine">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack"></view>
			<text class="header-title">我的</text>
			<view class="placeholder"></view>
		</view>

		<scroll-view scroll-y class="content">
			<view class="content-container">
				<!-- 个人信息卡片 -->
				<view class="profile-card">
					<view class="profile-header">
						<view class="profile-avatar" :style="{ backgroundImage: `url(${profile.avatarUrl})` }"></view>
						<view class="profile-info">
							<text class="profile-name">{{ profile.realName }}</text>
							<view class="profile-badge">{{ profile.badge }}</view>
						</view>
					</view>

					<!-- 等级和积分 -->
					<view class="level-points">
						<view class="level-info">
							<view class="level-icon"></view>
							<text class="level-name">{{ profile.levelName }}</text>
						</view>
						<text class="points-value">{{ profile.points }}</text>
						<text class="points-label">积分</text>
					</view>

					<!-- 等级进度 -->
					<view class="level-progress">
						<text class="progress-label">距离下一等级</text>
						<view class="progress-bar">
							<view class="progress-fill" :style="{ width: profile.levelProgress + '%' }"></view>
						</view>
						<view class="progress-values">
							<text class="current-value">当前{{ profile.points }}</text>
							<text class="target-value">目标{{ profile.nextLevelPoints }}</text>
						</view>
						<view class="upgrade-tip">再获得{{ profile.pointsToNextLevel }}积分即可晋升{{ profile.nextLevelName }}等级</view>
					</view>
				</view>

				<!-- 功能菜单 -->
				<view class="function-grid">
					<view class="function-item" @click="showSignInPopup">
						<view class="function-icon calendar">22</view>
						<text class="function-text">签到</text>
					</view>
					<view class="function-item" @click="handleMyResources">
						<view class="function-icon resources"></view>
						<text class="function-text">我的资源</text>
					</view>
					<view class="function-item" @click="handleActivityCenter">
						<view class="function-icon heart-book"></view>
						<text class="function-text">我的活动</text>
					</view>
					<view class="function-item" @click="handlePointsMall">
						<view class="function-icon money"></view>
						<text class="function-text">我的积分</text>
					</view>
				</view>

				<!-- 设置选项 -->
				<view class="settings-section">
					<view class="settings-item" @click="handleEditProfile">
						<view class="settings-icon user"></view>
						<text class="settings-text">编辑资料</text>
						<view class="arrow-right"></view>
					</view>

					<view class="settings-item" @click="handleAccountSettings">
						<view class="settings-icon gear"></view>
						<text class="settings-text">账户设置</text>
						<view class="arrow-right"></view>
					</view>

					<view class="settings-item" @click="handleLogout">
						<view class="settings-icon logout"></view>
						<text class="settings-text">退出登录</text>
						<view class="arrow-right"></view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部导航 -->
		<view class="tabbar">
			<view class="tabbar-item home" @click="navigateToWorkbench">
				<view class="tabbar-icon"></view>
				<text class="tabbar-text">工作台</text>
			</view>
			<view class="tabbar-item resources" @click="navigateToMyResources">
				<view class="tabbar-icon"></view>
				<text class="tabbar-text">我的资源</text>
			</view>
			<view class="tabbar-item trophy" @click="navigateToRanking">
				<view class="tabbar-icon"></view>
				<text class="tabbar-text">排行榜</text>
			</view>
			<view class="tabbar-item message" @click="navigateToMessage">
				<view class="tabbar-icon">
					<view class="badge">3</view>
				</view>
				<text class="tabbar-text">消息</text>
			</view>
			<view class="tabbar-item mine active" @click="navigateToMine">
				<view class="tabbar-icon"></view>
				<text class="tabbar-text">我的</text>
			</view>
		</view>

		<!-- 签到弹框 -->
		<uni-popup ref="signInPopup" type="center" :mask-click="false">
			<view class="sign-in-popup">
				<view class="popup-header">
					<text class="popup-title">今日签到</text>
					<view class="close-btn" @click="closeSignInPopup"></view>
				</view>
				<view class="popup-content">
					<view class="calendar-container">
						<view class="calendar-header">
							<text class="calendar-title">{{ calendarTitle }}</text>
							<view class="calendar-icon"></view>
						</view>
						<view class="calendar-week">
							<text class="week-day">日</text>
							<text class="week-day">一</text>
							<text class="week-day">二</text>
							<text class="week-day">三</text>
							<text class="week-day">四</text>
							<text class="week-day">五</text>
							<text class="week-day">六</text>
						</view>
						<view class="calendar-days">
							<view 
								v-for="(day, index) in calendarDays" 
								:key="index"
								:class="[
									'calendar-day',
									{ 'other-month': !day.isCurrentMonth },
									{ 'today': day.isToday },
									{ 'checked': day.isChecked }
								]"
							>
								<text class="day-text">{{ day.date }}</text>
								<view v-if="day.isChecked" class="check-mark"></view>
							</view>
						</view>
					</view>
					<view class="sign-in-reward">
						<text class="reward-title">签到奖励</text>
						<text class="reward-points">+5积分</text>
					</view>
				</view>
				<view class="popup-footer">
					<button 
						:class="['sign-in-btn', { 'signed': isSignedToday }]" 
						@click="doSignIn"
						:disabled="isSignedToday"
					>
						{{ isSignedToday ? '今日已签到' : '立即签到' }}
					</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import api from '../../utils/api.js'
	export default {
		data() {
				return {
					profile: {
						realName: '',
						avatarUrl: '',
						badge: '',
						rating: 5.0,
						level: '',
						levelName: '',
						nextLevelName: '',
						points: 0,
						currentLevelPoints: 0,
						nextLevelPoints: 100,
						pointsToNextLevel: 0,
						levelProgress: 0
					},
					// 签到相关
					isSignedToday: false,
					continuousDays: 0,
					totalDays: 0,
					// 日历相关
					currentDate: new Date(),
					calendarTitle: '',
					calendarDays: []
				}
			},
		onLoad() {
			this.loadProfileData()
			this.checkSignInStatus()
			this.generateCalendar()
		},
		methods: {
			// 生成日历数据
			generateCalendar() {
				const date = this.currentDate || new Date()
				const year = date.getFullYear()
				const month = date.getMonth()
				
				// 设置日历标题
				this.calendarTitle = `${year}年·${month + 1}月`
				
				// 获取当月第一天
				const firstDay = new Date(year, month, 1)
				// 获取当月第一天是星期几（0-6，0表示周日）
				const firstDayWeek = firstDay.getDay()
				// 获取当月最后一天
				const lastDay = new Date(year, month + 1, 0)
				// 获取当月最后一天的日期
				const lastDayDate = lastDay.getDate()
				// 获取上个月最后一天的日期
				const prevMonthLastDay = new Date(year, month, 0).getDate()
				
				const days = []
				
				// 添加上个月的日期
				for (let i = firstDayWeek - 1; i >= 0; i--) {
					days.push({
						date: prevMonthLastDay - i,
						isCurrentMonth: false,
						isToday: false,
						isChecked: false
					})
				}
				
				// 添加当月的日期
				const today = new Date()
				const isCurrentMonth = today.getFullYear() === year && today.getMonth() === month
				for (let i = 1; i <= lastDayDate; i++) {
					const isToday = isCurrentMonth && today.getDate() === i
					days.push({
						date: i,
						isCurrentMonth: true,
						isToday: isToday,
						isChecked: isToday && this.isSignedToday
					})
				}
				
				// 添加下个月的日期，补满6行
				const totalDays = 42 // 6行7列
				const nextMonthDays = totalDays - days.length
				for (let i = 1; i <= nextMonthDays; i++) {
					days.push({
						date: i,
						isCurrentMonth: false,
						isToday: false,
						isChecked: false
					})
				}
				
				this.calendarDays = days
			},
			// 加载个人资料数据
			async loadProfileData() {
				try {
					// 从本地存储获取用户信息
					const userInfo = uni.getStorageSync('userInfo')
					console.log('从本地存储获取到的用户信息:', userInfo)
					
					// 模拟用户信息，用于测试
					const testUserId = 19
					const userId = userInfo && userInfo.userId ? userInfo.userId : testUserId
					console.log('使用的userId:', userId)
					
					// 调用API获取红娘信息
					console.log('开始调用API获取红娘信息...')
					const matchmakerInfo = await api.matchmaker.getByUserId(userId)
					console.log('API调用结果:', matchmakerInfo)
					
					if (matchmakerInfo) {
						// 等级名称映射
						const levelNames = ['', '青铜', '白银', '黄金', '铂金', '钻石']
						
						// 获取当前等级和下一级名称
						const currentLevel = matchmakerInfo.level || 1
						const nextLevel = currentLevel < 5 ? currentLevel + 1 : 5
						const nextLevelName = levelNames[nextLevel]
						
						// 根据性别设置默认头像
						const defaultAvatars = {
							male: 'http://115.190.125.125:9000/dynamic-comments/dynamics/5c645152-9940-41d3-83a9-69ee6e0c0aaa.png',
							female: 'http://115.190.125.125:9000/dynamic-comments/dynamics/c7fb04d7-ee4d-4b3d-bcef-f246da9c841f.png'
						}
						const avatarUrl = matchmakerInfo.gender === 1 ? defaultAvatars.male : defaultAvatars.female
						
						// 打印获取到的数据，用于调试
						console.log('获取到的红娘信息:', matchmakerInfo)
						// 更新profile数据，将下划线命名转换为驼峰命名
						this.profile = {
							realName: matchmakerInfo.real_name || '',
							avatarUrl: avatarUrl,
							badge: matchmakerInfo.type_name || '',
							rating: matchmakerInfo.rating || 5.0,
							level: currentLevel,
							levelName: matchmakerInfo.level_name || levelNames[currentLevel],
							nextLevelName: nextLevelName,
							points: matchmakerInfo.points || 0,
							currentLevelPoints: matchmakerInfo.current_level_points || 0,
							nextLevelPoints: matchmakerInfo.next_level_points || 100,
							pointsToNextLevel: matchmakerInfo.points_to_next_level || 0,
							levelProgress: matchmakerInfo.level_progress || 0
						}
						console.log('更新后的profile数据:', this.profile)
					} else {
						console.log('matchmakerInfo为空，无法更新profile数据')
					}
				} catch (error) {
					console.error('加载个人资料失败:', error)
					uni.showToast({
						title: '加载失败，请稍后重试: ' + error.message,
						icon: 'none'
					})
				}
			},
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},
			// 检查今日是否已签到
			async checkSignInStatus() {
				try {
					// 从本地存储获取用户信息
					const userInfo = uni.getStorageSync('userInfo')
					const testUserId = 19
					const userId = userInfo && userInfo.userId ? userInfo.userId : testUserId
					
					// 调用API检查签到状态
					const res = await api.matchmaker.checkinStatus(userId)
					console.log('检查签到状态返回结果:', res)
					this.isSignedToday = res || false
					
					// 获取签到统计
					const stats = await api.matchmaker.checkinStats(userId)
					console.log('获取签到统计返回结果:', stats)
					if (stats) {
						this.continuousDays = stats.continuousDays || 0
						this.totalDays = stats.totalDays || 0
					}
				} catch (error) {
					console.error('检查签到状态失败:', error)
				}
			},
			// 显示签到弹框
			showSignInPopup() {
				// 无论是否已签到，都显示签到弹框，让用户可以看到签到记录
				this.$refs.signInPopup.open()
			},
			// 关闭签到弹框
			closeSignInPopup() {
				this.$refs.signInPopup.close()
			},
			// 执行签到
			async doSignIn() {
				try {
					// 从本地存储获取用户信息
					const userInfo = uni.getStorageSync('userInfo')
					const testUserId = 19
					const userId = userInfo && userInfo.userId ? userInfo.userId : testUserId
					
					// 调用签到API
					const res = await api.matchmaker.doCheckin(userId)
					console.log('签到API返回结果:', res)
					// 直接使用返回的布尔值判断签到结果
					if (res) {
						// 签到成功
						uni.showToast({
							title: '签到成功',
							icon: 'success'
						})
						// 更新签到状态
						this.isSignedToday = true
						// 重新生成日历，更新当天签到状态
						this.generateCalendar()
						// 刷新个人资料（更新积分）
						this.loadProfileData()
						// 关闭弹框
						this.closeSignInPopup()
					} else {
						// 今日已签到
						uni.showToast({
							title: '今日已签到',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('签到失败:', error)
					uni.showToast({
						title: error.msg || '签到失败，请稍后重试',
						icon: 'none'
					})
				}
			},
			// 签到（旧方法，保持兼容）
			handleSignIn() {
				this.showSignInPopup()
			},
			// 我的资源
			handleMyResources() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/my-resources'
				})
			},
			// 活动中心
			handleActivityCenter() {
				uni.navigateTo({
					url: '/pages/activities/list'
				})
			},
			// 积分商城
			handlePointsMall() {
				console.log('积分商城')
				uni.showToast({
					title: '积分商城开发中',
					icon: 'none'
				})
			},
			// 编辑资料
			handleEditProfile() {
				console.log('编辑资料')
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/edit-profile'
				})
			},
			// 账户设置
			handleAccountSettings() {
				console.log('账户设置')
				uni.showToast({
					title: '账户设置开发中',
					icon: 'none'
				})
			},
			// 退出登录
			handleLogout() {
				uni.showModal({
					title: '退出登录',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除本地存储
							uni.removeStorageSync('token')
							uni.removeStorageSync('userInfo')
							// 跳转到登录页
							uni.navigateTo({
								url: '/pages/page3/page3'
							})
						}
					}
				})
			},
			// 导航到工作台
			navigateToWorkbench() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/index'
				})
			},
			// 导航到我的资源
			navigateToMyResources() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/my-resources'
				})
			},
			// 导航到排行榜
			navigateToRanking() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/ranking'
				})
			},
			// 导航到消息
			navigateToMessage() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/message'
				})
			},
			// 导航到我的
			navigateToMine() {
				// 已在我的页面，无需跳转
			}
		}
	}
</script>

<style lang="scss" scoped>
	.matchmaker-mine {
		min-height: 100vh;
		background: #FFF9F9;
		display: flex;
		flex-direction: column;
	}

	/* 顶部导航栏 */
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25rpx 30rpx;
		padding-top: calc(25rpx + env(safe-area-inset-top));
		background: #FFF9F9;
		border-bottom: 1rpx solid #F0F0F0;

		.back-btn {
			width: 70rpx;
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(240, 240, 240, 0.5);
			border-radius: 50%;
			background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>');
			background-size: 40rpx 40rpx;
			background-repeat: no-repeat;
			background-position: center;
		}

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

		.placeholder {
			width: 70rpx;
		}
	}

	.content {
		flex: 1;
		padding: 0;
	}

	.content-container {
		padding: 20rpx 30rpx 120rpx;
	}

	/* 个人信息卡片 */
	.profile-card {
		background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
		border-radius: 25rpx;
		padding: 35rpx;
		margin-bottom: 25rpx;
		box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
	}

	.profile-header {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;

		.profile-avatar {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center;
					margin-right: 25rpx;
					border: 2rpx solid #FFF;
					box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
				}

		.profile-info {
			flex: 1;

			.profile-name {
				display: block;
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}

			.profile-badge {
				display: inline-block;
				background: #FFD700;
				color: #FFFFFF;
				font-size: 24rpx;
				font-weight: bold;
				padding: 6rpx 16rpx;
				border-radius: 15rpx;
				margin-bottom: 10rpx;
			}

			.profile-rating {
				display: block;
				font-size: 28rpx;
				color: #666;
			}
		}
	}

	/* 等级和积分 */
	.level-points {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.level-info {
			display: flex;
			align-items: center;
			gap: 10rpx;

			.level-icon {
				width: 44rpx;
				height: 44rpx;
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFD700"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
			}

			.level-name {
				font-size: 32rpx;
				font-weight: bold;
				color: #FF9800;
			}
		}

		.points-value {
			font-size: 48rpx;
			font-weight: bold;
			color: #E91E63;
		}

		.points-label {
			font-size: 28rpx;
			color: #666;
		}
	}

	/* 等级进度 */
	.level-progress {
		.progress-label {
			display: block;
			font-size: 26rpx;
			color: #333;
			margin-bottom: 15rpx;
		}

		.progress-bar {
			width: 100%;
			height: 12rpx;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 6rpx;
			margin-bottom: 10rpx;

			.progress-fill {
				height: 100%;
				background: #FFB74D;
				border-radius: 6rpx;
			}
		}

		.progress-values {
			display: flex;
			justify-content: space-between;
			margin-bottom: 15rpx;

			.current-value,
			.target-value {
				font-size: 24rpx;
				color: #666;
			}
		}

		.upgrade-tip {
			display: block;
			background: rgba(255, 255, 255, 0.3);
			color: #E91E63;
			font-size: 26rpx;
			font-weight: bold;
			padding: 15rpx;
			border-radius: 15rpx;
			text-align: center;
		}
	}

	/* 功能菜单 */
	.function-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 25rpx;
		padding: 35rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.function-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 15rpx;

			.function-icon {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				background-size: 50rpx 50rpx;
				background-repeat: no-repeat;
				background-position: center;

				&.calendar {
					background-color: #FFF3E0;
					background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF9800"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>');
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					font-weight: bold;
					color: #FF9800;
				}

				&.resources {
					background-color: #E8F5E9;
					background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234CAF50"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
				}

				&.heart-book {
					background-color: #FFEBEE;
					background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F44336"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>');
				}

				&.money {
					background-color: #F3E5F5;
					background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>');
				}
			}

			.function-text {
				font-size: 26rpx;
				color: #333;
			}
		}
	}

	/* 设置选项 */
	.settings-section {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.settings-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 25rpx 35rpx;
			margin-bottom: 0;
			background: #FFFFFF;
			border-radius: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.settings-icon {
				width: 44rpx;
				height: 44rpx;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				margin-right: 20rpx;
			}

			.settings-icon.user {
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
			}

			.settings-icon.gear {
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>');
			}

			.settings-icon.logout {
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg>');
			}

			.settings-text {
				flex: 1;
				font-size: 30rpx;
				color: #333;
			}

			.arrow-right {
				width: 24rpx;
				height: 24rpx;
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>');
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
			}
		}
	}
	
	/* 底部导航 */
	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: #FFFFFF;
		border-top: 1rpx solid #F0F0F0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom);

		.tabbar-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8rpx;
			padding: 10rpx 0;

			.tabbar-icon {
				width: 44rpx;
				height: 44rpx;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				position: relative;

				.badge {
					position: absolute;
					top: -8rpx;
					right: -8rpx;
					background: #FF4444;
					color: #FFFFFF;
					font-size: 20rpx;
					font-weight: bold;
					width: 32rpx;
					height: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 16rpx;
				}
			}

			.tabbar-text {
				font-size: 20rpx;
				color: #999;
			}

			&.active {
				.tabbar-text {
					color: #9C27B0;
					font-weight: bold;
				}
			}

			&.home .tabbar-icon {
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>');
			}

			&.active.home .tabbar-icon {
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>');
			}

			&.resources .tabbar-icon {
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
			}

			&.active.resources .tabbar-icon {
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
			}

			&.trophy .tabbar-icon {
				background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>');
			}

			&.active.trophy .tabbar-icon {
				background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>');
			}

			&.message .tabbar-icon {
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>');
			}

			&.active.message .tabbar-icon {
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>');
			}

			&.mine .tabbar-icon {
				background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
			}
			&.mine.active .tabbar-icon {
				background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
			}
		}
	}

	/* 签到弹框样式 */
	.sign-in-popup {
		width: 600rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #F0F0F0;

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

			.close-btn {
				width: 40rpx;
				height: 40rpx;
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
			}
		}

		.popup-content {
			padding: 30rpx;

			.calendar-container {
				background: #F8F9FA;
				border-radius: 15rpx;
				padding: 20rpx;
				margin-bottom: 30rpx;

				.calendar-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					.calendar-title {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
					}

					.calendar-icon {
						width: 40rpx;
						height: 40rpx;
						background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M3 17h18v-2H3v2zm0 4h18v-2H3v2zM3 3v2h18V3H3zm0 6h18V7H3v2z"/></svg>');
						background-size: contain;
						background-repeat: no-repeat;
						background-position: center;
					}
				}

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

					.week-day {
						text-align: center;
						font-size: 24rpx;
						color: #999;
						font-weight: bold;
					}
				}

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

					.calendar-day {
						text-align: center;
						font-size: 26rpx;
						color: #333;
						background: #FFFFFF;
						border-radius: 50%;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						&.other-month {
							color: #CCCCCC;
						}

						&.today {
							background: #FFF3E0;
							color: #FF9800;
							font-weight: bold;
						}

						&.checked {
							background: #E8F5E9;
							color: #4CAF50;
							font-weight: bold;
						}
					}
				}
			}

			.sign-in-reward {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 10rpx;

				.reward-title {
					font-size: 28rpx;
					color: #666;
				}

				.reward-points {
					font-size: 48rpx;
					font-weight: bold;
					color: #E91E63;
				}
			}
		}

		.popup-footer {
				padding: 0 30rpx 30rpx;

				.sign-in-btn {
					width: 100%;
					height: 80rpx;
					background: #9C27B0;
					color: #FFFFFF;
					font-size: 32rpx;
					border-radius: 40rpx;
					border: none;
					font-weight: bold;

					&:hover {
						background: #7B1FA2;
					}

					&.signed {
						background: #E0E0E0;
						color: #9E9E9E;
						cursor: not-allowed;

						&:hover {
							background: #E0E0E0;
						}
					}
				}
			}
	}
</style>