labor_map_miniapp/pages/my/my.vue

<template>
	<view class="my-page">
		<!-- 登录区域 -->
		<view class="login-section" @click="goToProfile">
			<!-- <button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			  <image :src="userInfo && userInfo.avatarUrl || '/static/default-avatar.png'" mode="aspectFit"></image>
			</button> -->
			<view class="avatar">
			  <!-- <image class="avatar" src="{{avatarUrl}}"></image> -->
			  <image :src="userInfo && userInfo.avatarUrl || '/static/default-avatar.png'" mode="aspectFit"></image>
			</view> 
			<view v-if="loginRes && loginRes.accessToken" class="login-text">
				<text class="login-title">{{userInfo.nickname || '默认昵称'}}</text>
				<!-- <text class="login-subtitle">登录查看更多消息</text> -->
			</view>
			<view v-else 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>
		<!-- 底部占位，避免内容被底部导航栏遮挡 -->
		<view class="bottom-space"></view>
	</view>
</template>

<script setup>
import { computed } from 'vue';
import { useUserStore } from '../../stores/user.js';
import { appUserEditAvatar } from '../../api/index.js';
const userStore = useUserStore();
const loginRes = computed(() => userStore.loginRes);
const userInfo = computed(() => userStore.userInfo);
const loginRegister = () => {
	if (loginRes.value && loginRes.value.accessToken) {
		return;
	}
	uni.navigateTo({
		url: '/pages/login/login'
	})
}

const goToProfile = () => {
	if (loginRes.value && loginRes.value.accessToken) {
		// 已登录，跳转到编辑资料页面
		uni.navigateTo({
			url: '/pages/my/editProfile'
		})
	} else {
		// 未登录，跳转到登录页面
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
}
</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;
			margin: 0;
			padding: 0;
			border-radius: 4px;
			background-color: #e6f7ff;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			margin-right: 16px;
			
			.avatar-image {
				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>