297 lines
6.5 KiB
Vue
297 lines
6.5 KiB
Vue
<template>
|
||
<view class="profile-page">
|
||
<view class="bg-decoration">
|
||
<view class="aurora-top"></view>
|
||
<view class="aurora-bottom"></view>
|
||
</view>
|
||
|
||
<scroll-view class="content" scroll-y :style="{ paddingTop: safeAreaTop + 20 + 'px', paddingBottom: safeAreaBottom + 20 + 'px' }">
|
||
<view class="user-card">
|
||
<view class="avatar-box">
|
||
<image class="avatar" :src="userAvatar" mode="aspectFill" />
|
||
<view class="verified-badge">✓</view>
|
||
</view>
|
||
|
||
<view class="user-info">
|
||
<text class="nickname font-serif">{{ userProfile.nickname || '未同步系统' }}</text>
|
||
<text class="user-tags">{{ userTags }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="stats-row">
|
||
<view class="stat-card glass-card">
|
||
<text class="stat-label">觉醒深度</text>
|
||
<text class="stat-value">Lv.4</text>
|
||
</view>
|
||
<view class="stat-card glass-card">
|
||
<text class="stat-label">星历契合</text>
|
||
<text class="stat-value">98%</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="menu-list">
|
||
<view class="menu-item glass-card" @click="editProfile">
|
||
<view class="menu-left">
|
||
<text class="menu-icon">👤</text>
|
||
<text class="menu-title">个人档案设置</text>
|
||
</view>
|
||
<text class="menu-arrow">›</text>
|
||
</view>
|
||
|
||
<view class="menu-item glass-card">
|
||
<view class="menu-left">
|
||
<text class="menu-icon">🔄</text>
|
||
<text class="menu-title">多账号切换</text>
|
||
</view>
|
||
<text class="menu-arrow">›</text>
|
||
</view>
|
||
|
||
<view class="menu-item glass-card">
|
||
<view class="menu-left">
|
||
<text class="menu-icon">📧</text>
|
||
<text class="menu-title">与开发者对话</text>
|
||
</view>
|
||
<text class="menu-arrow">↗</text>
|
||
</view>
|
||
</view>
|
||
|
||
<button class="logout-btn" @click="handleLogout">
|
||
TERMINATE LIFE HARMONY
|
||
</button>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, ref, onMounted } from 'vue'
|
||
import { useAppStore } from '../../stores/app.js'
|
||
|
||
const store = useAppStore()
|
||
|
||
const safeAreaTop = ref(uni.getStorageSync('safeAreaTop') || 20)
|
||
const safeAreaBottom = ref(uni.getStorageSync('safeAreaBottom') || 0)
|
||
|
||
onMounted(() => {
|
||
const systemInfo = uni.getSystemInfoSync()
|
||
safeAreaTop.value = systemInfo.safeAreaInsets?.top || systemInfo.statusBarHeight || 20
|
||
safeAreaBottom.value = systemInfo.safeAreaInsets?.bottom || 0
|
||
})
|
||
|
||
const userProfile = computed(() => store.userProfile || {})
|
||
|
||
const userAvatar = computed(() => {
|
||
const nickname = userProfile.value.nickname || 'user'
|
||
return `https://api.dicebear.com/7.x/avataaars/svg?seed=${nickname}&backgroundColor=A855F7`
|
||
})
|
||
|
||
const userTags = computed(() => {
|
||
const { mbti, zodiac, profession } = userProfile.value
|
||
const tags = [mbti || 'QUESTER', zodiac || 'STAR', profession || '星民']
|
||
return tags.join(' · ')
|
||
})
|
||
|
||
const editProfile = () => {
|
||
uni.navigateTo({ url: '/pages/onboarding/index?edit=1' })
|
||
}
|
||
|
||
const handleLogout = () => {
|
||
uni.showModal({
|
||
title: '确认退出',
|
||
content: '确定要退出登录吗？',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
await store.logout()
|
||
uni.reLaunch({ url: '/pages/login/index' })
|
||
}
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.profile-page {
|
||
min-height: 100vh;
|
||
background: linear-gradient(180deg, #0F071A 0%, #1A0B2E 50%, #0F071A 100%);
|
||
position: relative;
|
||
}
|
||
|
||
.bg-decoration {
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.aurora-top {
|
||
position: absolute;
|
||
top: -10%;
|
||
left: -10%;
|
||
width: 120%;
|
||
height: 60%;
|
||
background: rgba(168, 85, 247, 0.08);
|
||
filter: blur(120rpx);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.aurora-bottom {
|
||
position: absolute;
|
||
bottom: -10%;
|
||
right: -10%;
|
||
width: 100%;
|
||
height: 50%;
|
||
background: rgba(139, 92, 246, 0.05);
|
||
filter: blur(100rpx);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.content {
|
||
position: relative;
|
||
z-index: 1;
|
||
padding: 40rpx;
|
||
padding-top: calc(60rpx + constant(safe-area-inset-top));
|
||
padding-top: calc(60rpx + env(safe-area-inset-top));
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
.user-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 48rpx 0;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.avatar-box {
|
||
position: relative;
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 50%;
|
||
border: 4rpx solid rgba(168, 85, 247, 0.3);
|
||
padding: 8rpx;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.avatar {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
background: rgba(168, 85, 247, 0.1);
|
||
}
|
||
|
||
.verified-badge {
|
||
position: absolute;
|
||
bottom: 8rpx;
|
||
right: 8rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background: #9333EA;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20rpx;
|
||
color: white;
|
||
border: 4rpx solid #0F071A;
|
||
}
|
||
|
||
.user-info {
|
||
text-align: center;
|
||
}
|
||
|
||
.nickname {
|
||
display: block;
|
||
font-size: 40rpx;
|
||
font-weight: 300;
|
||
color: rgba(255, 255, 255, 0.95);
|
||
margin-bottom: 16rpx;
|
||
letter-spacing: 4rpx;
|
||
}
|
||
|
||
.user-tags {
|
||
display: block;
|
||
font-size: 18rpx;
|
||
color: rgba(168, 85, 247, 0.6);
|
||
letter-spacing: 4rpx;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.stats-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 24rpx;
|
||
margin-bottom: 48rpx;
|
||
}
|
||
|
||
.stat-card {
|
||
padding: 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 18rpx;
|
||
color: rgba(255, 255, 255, 0.35);
|
||
letter-spacing: 4rpx;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 36rpx;
|
||
font-weight: 300;
|
||
color: rgba(243, 232, 255, 0.9);
|
||
}
|
||
|
||
.menu-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
margin-bottom: 64rpx;
|
||
}
|
||
|
||
.menu-item {
|
||
padding: 32rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.menu-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.menu-icon {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.menu-title {
|
||
font-size: 26rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
.menu-arrow {
|
||
font-size: 32rpx;
|
||
color: rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.logout-btn {
|
||
width: 100%;
|
||
padding: 32rpx;
|
||
background: transparent;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 24rpx;
|
||
color: rgba(255, 255, 255, 0.3);
|
||
font-size: 20rpx;
|
||
letter-spacing: 6rpx;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.logout-btn:active {
|
||
color: rgba(168, 85, 247, 0.5);
|
||
border-color: rgba(168, 85, 247, 0.2);
|
||
}
|
||
</style>
|