sh-app/pages/mine/index.vue

<template>
	<view class="mine">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-info">
				<u-avatar :size="120" icon="account" bgColor="#e0e7ff"></u-avatar>
				<view class="user-detail">
					<text class="user-name">{{ userInfo?.PersonName || '未登录' }}</text>
					<text class="user-account">账号：{{ userInfo?.Account || '-' }}</text>
					<text class="user-company">{{ userInfo?.UnitName || '暂无公司信息' }}</text>
					<!-- <text class="user-phone">{{ userInfo?.Telephone || '暂无手机号' }}</text> -->
				</view>
			</view>
			<u-button v-if="!token" size="large" shape="circle" @click="goLogin">
				立即登录
			</u-button>
		</view>

		<!-- 项目信息 -->
		<view class="project-card" v-if="currentProject?.ProjectId">
			<view class="card-title">
				<u-icon name="home" :size="36" color="#2979ff"></u-icon>
				<text>当前项目</text>
			</view>
			<view class="project-info">
				<text class="project-name">{{ currentProject.ProjectName }}</text>
			</view>
		</view>

		<!-- 功能菜单 -->
<!-- 		<view class="menu-list">
			<view class="menu-item" @click="handleMenuClick('profile')">
				<view class="menu-left">
					<u-icon name="setting" :size="40" color="#2979ff"></u-icon>
					<text>个人设置</text>
				</view>
				<u-icon name="arrow-right" :size="28" color="#ccc"></u-icon>
			</view>

			<view class="menu-item" @click="handleMenuClick('password')">
				<view class="menu-left">
					<u-icon name="lock" :size="40" color="#2979ff"></u-icon>
					<text>修改密码</text>
				</view>
				<u-icon name="arrow-right" :size="28" color="#ccc"></u-icon>
			</view>

			<view class="menu-item" @click="handleMenuClick('about')">
				<view class="menu-left">
					<u-icon name="info-circle" :size="40" color="#2979ff"></u-icon>
					<text>关于我们</text>
				</view>
				<u-icon name="arrow-right" :size="28" color="#ccc"></u-icon>
			</view>
		</view> -->

		<!-- 退出登录 -->
		<view class="logout-btn" v-if="token">
			<u-button text="退出登录" @click="handleLogout"></u-button>
		</view>
	</view>
</template>

<script setup>
	import {
		computed
	} from 'vue'
	import {
		useUserStore
	} from '@/store'
	import {
		storeToRefs
	} from 'pinia'

	const userStore = useUserStore()
	const {
		logout
	} = userStore
	const {
		userInfo,
		token,
		currentProject
	} = storeToRefs(userStore)

	// 跳转登录
	const goLogin = () => {
		uni.reLaunch({
			url: '/pages/login/index'
		})
	}

	// 切换项目
	const handleSwitchProject = () => {
		// TODO: 打开项目选择弹窗
		uni.showToast({
			title: '项目选择功能开发中',
			icon: 'none'
		})
	}

	// 菜单点击
	const handleMenuClick = (type) => {
		const menuMap = {
			profile: '个人设置',
			password: '修改密码',
			about: '关于我们'
		}
		uni.showToast({
			title: `${menuMap[type]}功能开发中`,
			icon: 'none'
		})
	}

	// 退出登录
	const handleLogout = () => {
		uni.showModal({
			title: '提示',
			content: '确定要退出登录吗？',
			success: (res) => {
				if (res.confirm) {
					logout()
					uni.reLaunch({
						url: '/pages/login/index'
					})
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.mine {
		min-height: 100vh;
		background: #f5f6f8;
		padding: 32rpx;
	}

	// 用户信息卡片
	.user-card {
		background: linear-gradient(135deg, #2979ff 0%, #6ba7ff 100%);
		border-radius: 24rpx;
		padding: 40rpx 32rpx;
		margin-bottom: 24rpx;
		color: #ffffff;

		.user-info {
			display: flex;
			align-items: flex-start;
			margin-bottom: 32rpx;

			.user-detail {
				margin-left: 24rpx;
				display: flex;
				flex-direction: column;
				flex: 1;

				.user-name {
					font-size: 36rpx;
					font-weight: 600;
					margin-bottom: 8rpx;
				}

				.user-account,
				.user-company,
				.user-phone {
					font-size: 24rpx;
					opacity: 0.85;
					margin-bottom: 4rpx;
				}

				.user-account {
					color: rgba(255, 255, 255, 0.9);
				}

				.user-company {
					color: rgba(255, 255, 255, 0.9);
				}

				.user-phone {
					color: rgba(255, 255, 255, 0.8);
				}
			}
		}

		.u-button {
			background: rgba(255, 255, 255, 0.2);
			border: none;
			color: #ffffff;

			&::after {
				border: none;
			}
		}
	}

	// 项目信息卡片
	.project-card {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

		.card-title {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 24rpx;

			.u-icon {
				margin-right: 12rpx;
			}
		}

		.project-info {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.project-name {
				font-size: 28rpx;
				color: #666;
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

	// 功能菜单
	.menu-list {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 0 32rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

		.menu-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx 0;
			border-bottom: 1rpx solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.menu-left {
				display: flex;
				align-items: center;

				.u-icon {
					margin-right: 16rpx;
				}

				text {
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}

	// 退出登录
	.logout-btn {
		margin-top: 48rpx;

		.u-button {
			height: 88rpx;
			font-size: 30rpx;
			border-radius: 44rpx;
		}
	}
</style>