<template>
	<view class="my-page">
		<!-- 登录区域 -->
		<view class="login-section" @click="loginRegister">
			<view class="avatar">
				<text class="avatar-icon">😊</text>
			</view>
			<view class="login-text">
				<text class="login-title">点击登录/注册</text>
				<text class="login-subtitle">登录查看更多消息</text>
			</view>
		</view>
		
		<!-- 功能区域 -->
		<view class="features-section">
			<view class="feature-item" @click="myComments">
				<view class="feature-icon">
					<text class="icon-content">📝</text>
				</view>
				<text class="feature-name">我的评价</text>
			</view>
			
			<view class="feature-item" @click="myFavorites">
				<view class="feature-icon">
					<text class="icon-content">❤️</text>
				</view>
				<text class="feature-name">收藏岗位</text>
			</view>
			
			<view class="feature-item" @click="contactService">
				<view class="feature-icon">
					<text class="icon-content">📞</text>
				</view>
				<text class="feature-name">咨询客服</text>
			</view>
		</view>123
		{{loginRes}}
		<!-- 底部占位，避免内容被底部导航栏遮挡 -->
		<view class="bottom-space"></view>
	</view>
</template>

<script setup>
import { computed } from 'vue';
import { useUserStore } from '../../stores/user.js';
const userStore = useUserStore();
const loginRes = computed(() => userStore.loginRes);

</script>

<style lang="scss">
.my-page {
	background-color: #fff;
	min-height: 100vh;
	padding-top: 12px; // 增加顶部内边距，避免内容紧贴导航栏
	
	// 登录区域
	.login-section {
		background-color: #fff;
		padding: 20px;
		display: flex;
		align-items: center;
		tap-highlight-color: transparent;
		
		.avatar {
			width: 60px;
			height: 60px;
			border-radius: 30px;
			background-color: #e6f7ff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 16px;
			
			.avatar-icon {
				font-size: 30px;
			}
		}
		
		.login-text {
			.login-title {
				font-size: 16px;
				font-weight: 500;
				color: #333;
				display: block;
				margin-bottom: 4px;
			}
			
			.login-subtitle {
				font-size: 14px;
				color: #999;
			}
		}
	}
	
	// 功能区域
	.features-section {
		background-color: #fff;
		padding: 16px 0;
		display: flex;
		justify-content: space-around;
		
		.feature-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 8px;
			tap-highlight-color: transparent;
			
			.feature-icon {
				width: 50px;
				height: 50px;
				border-radius: 12px;
				background-color: #f0f9ff;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 8px;
				
				.icon-content {
					font-size: 24px;
				}
			}
			
			.feature-name {
				font-size: 14px;
				color: #333;
			}
			
			// 为不同的功能图标设置不同的背景色
			&:nth-child(1) .feature-icon {
				background-color: #e6f7ff;
			}
			
			&:nth-child(2) .feature-icon {
				background-color: #fff1f0;
			}
			
			&:nth-child(3) .feature-icon {
				background-color: #f0f9ff;
			}
		}
	}
	
	// 底部占位，避免内容被底部导航栏遮挡
	.bottom-space {
		height: 60px;
	}
}
</style>
