39 lines
4.5 KiB
Plaintext
39 lines
4.5 KiB
Plaintext
<template>
|
|
<view class="page">
|
|
<AppHeader title="个人中心" :back="false" />
|
|
<scroll-view scroll-y class="profile-scroll">
|
|
<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><text class="stat-number">1</text><text class="stat-label">申请中</text></view><view><text class="stat-number">3</text><text class="stat-label">已匹配</text></view><view><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 AppHeader from '@/components/AppHeader.uvue'
|
|
import BottomNav from '@/components/BottomNav.uvue'
|
|
import AppIcon from '@/components/AppIcon.uvue'
|
|
const menus = [
|
|
{ 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 = () => { uni.reLaunch({ url: '/pages/login/login' }) }
|
|
</script>
|
|
|
|
<style>
|
|
.profile-scroll { height: calc(100vh - var(--status-bar-height) - 226rpx); }.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>
|