airz-uniapp/pages/profile/profile.uvue

<template>
	<view class="page" :style="pageStyle()">
		<AppHeader title="个人中心" :back="false" />
		<scroll-view scroll-y class="profile-scroll" :style="contentStyle(226, false)">
			<view class="profile-content">
				<view class="profile-card"><view class="avatar"><text>张</text></view><view class="profile-main"><text class="profile-name">张三</text><text class="profile-phone">138****8888</text></view><view class="verified"><text>已认证</text></view></view>
				<view class="stat-row"><view class="stat-row-view"><text class="stat-number">1</text><text class="stat-label">申请中</text></view><view class="stat-row-view"><text class="stat-number">3</text><text class="stat-label">已匹配</text></view><view class="stat-row-view stat-row-view-last-child"><text class="stat-number">2680</text><text class="stat-label">积分</text></view></view>
				<view class="menu-list">
					<view class="menu-row" v-for="item in menus" :key="item.name" @click="open(item.url, item.name)"><view :class="'menu-icon ' + item.color"><AppIcon :name="item.icon" :size="40" /></view><text class="menu-name">{{ item.name }}</text><text v-if="item.note.length > 0" class="menu-note">{{ item.note }}</text><AppIcon name="chevron-right" :size="28" muted /></view>
				</view>
				<button class="logout" @click="logout">退出登录</button>
			</view>
		</scroll-view>
		<BottomNav active="profile" />
	</view>
</template>

<script setup lang="uts">
	import { usePageLayout } from '@/services/layout.uts'
	const { contentStyle, pageStyle } = usePageLayout()
	import AppHeader from '@/components/AppHeader.uvue'
	import BottomNav from '@/components/BottomNav.uvue'
	import AppIcon from '@/components/AppIcon.uvue'
	import { clearSession } from '@/services/api.uts'
	type ProfileMenu = { icon: string, name: string, note: string, color: string, url: string }
	const menus: ProfileMenu[] = [
		{ icon: 'archive', name: '我的融资档案', note: '75%', color: 'blue', url: '/pages/archive/archive' },
		{ icon: 'points', name: '积分中心', note: '2680', color: 'purple', url: '/pages/points/points' },
		{ icon: 'shield', name: '账户安全', note: '', color: 'green', url: '' },
		{ icon: 'privacy', name: '隐私设置', note: '', color: 'orange', url: '' },
		{ icon: 'help', name: '帮助与反馈', note: '', color: 'cyan', url: '/pages/assistant/assistant' },
		{ icon: 'info', name: '关于我们', note: 'V1.0.0', color: 'gray', url: '' }
	]
	const open = (url: string, name: string) => { if (url.length > 0) uni.navigateTo({ url: url }); else uni.showToast({ title: name + '功能已预留', icon: 'none' }) }
	const logout = () => { clearSession(); uni.reLaunch({ url: '/pages/login/login' }) }
</script>

<style>
	.profile-scroll {  }
	.profile-content { padding: 26rpx 28rpx 160rpx; }
	.profile-card { min-height: 170rpx; padding: 30rpx; border-radius: 18rpx 18rpx 0 0; background-color: #fff; border: 1rpx solid #e5ecf5; flex-direction: row; align-items: center; }
	.avatar { width: 92rpx; height: 92rpx; border-radius: 50%; background: linear-gradient(145deg, #2d8cff, #0c4fc6); align-items: center; justify-content: center; color: white; font-size: 36rpx; font-weight: 800; margin-right: 22rpx; }
	.profile-main { flex: 1; }
	.profile-name { font-size: 32rpx; font-weight: 800; }
	.profile-phone { color: #8390a3; font-size: 22rpx; margin-top: 10rpx; }
	.verified { padding: 8rpx 14rpx; border-radius: 9rpx; background-color: #e7f8f0; color: #0ba66e; font-size: 19rpx; }
	.stat-row { height: 140rpx; background-color: #fff; border: 1rpx solid #e5ecf5; border-top: 0; border-radius: 0 0 18rpx 18rpx; flex-direction: row; }
	.stat-row-view { flex: 1; align-items: center; justify-content: center; border-right: 1rpx solid #edf1f6; }
	.stat-row-view-last-child { border-right: 0; }
	.stat-number { font-size: 31rpx; font-weight: 800; color: #102557; }
	.stat-label { color: #8491a4; font-size: 20rpx; margin-top: 8rpx; }
	.menu-list { margin-top: 24rpx; padding: 0 24rpx; border-radius: 18rpx; background-color: #fff; border: 1rpx solid #e5ecf5; }
	.menu-row { height: 105rpx; flex-direction: row; align-items: center; border-bottom: 1rpx solid #edf1f6; }
	.menu-icon { width: 52rpx; height: 52rpx; border-radius: 16rpx; align-items: center; justify-content: center; font-size: 20rpx; font-weight: 800; margin-right: 18rpx; }
	.blue { color: #0868f7; background-color: #e8f2ff; }
	.purple { color: #7757ea; background-color: #efebff; }
	.green { color: #0ba979; background-color: #e6f8f1; }
	.orange { color: #f2751b; background-color: #fff0e5; }
	.cyan { color: #0a9eb2; background-color: #e7f8fb; }
	.gray { color: #667489; background-color: #eef2f6; }
	.menu-name { flex: 1; font-size: 25rpx; }
	.menu-note { color: #8793a6; font-size: 21rpx; margin-right: 14rpx; }
	.chevron { color: #abb5c4; font-size: 36rpx; }
	.logout { margin-top: 25rpx; height: 88rpx; line-height: 88rpx; border-radius: 16rpx; color: #ef4444; background-color: #fff; border: 1rpx solid #e5ecf5; font-size: 26rpx; }
</style>