小程序初始化
This commit is contained in:
@@ -0,0 +1,296 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user