yuzhiran
262 lines
12 KiB
Vue
262 lines
12 KiB
Vue
<template>
|
||
<view class="page fade-in">
|
||
<!-- 个人中心 -->
|
||
<view class="header" v-if="isLoggedIn">
|
||
<view class="profile-section">
|
||
<image class="avatar" :src="userInfo.avatar || '/static/avatar-default.png'" mode="aspectFill" />
|
||
<view class="profile-info">
|
||
<text class="nickname">{{ userInfo.nickname || '未设置昵称' }}</text>
|
||
<text class="user-id">ID: {{ maskedId }}</text>
|
||
<view class="plan-badge">{{ userInfo.plan || '免费版' }}</view>
|
||
</view>
|
||
<text class="header-arrow">›</text>
|
||
</view>
|
||
<view class="stats-bar">
|
||
<view class="stat">
|
||
<text class="stat-num">{{ stats.interviewCount || 0 }}</text>
|
||
<text class="stat-label">模拟面试</text>
|
||
</view>
|
||
<view class="stat-divider"></view>
|
||
<view class="stat">
|
||
<text class="stat-num">{{ stats.avgScore || '--' }}</text>
|
||
<text class="stat-label">平均得分</text>
|
||
</view>
|
||
<view class="stat-divider"></view>
|
||
<view class="stat">
|
||
<text class="stat-num">{{ stats.completedCount || 0 }}</text>
|
||
<text class="stat-label">已完成</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="header header-guest" v-else @click="goLogin">
|
||
<view class="guest-box">
|
||
<view class="guest-avatar"><text class="guest-icon">👤</text></view>
|
||
<view class="guest-info">
|
||
<text class="guest-name">未登录 / 点击登录</text>
|
||
</view>
|
||
<text class="header-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 配额与会员信息 -->
|
||
<view class="quota-card" v-if="isLoggedIn">
|
||
<view class="quota-row">
|
||
<view class="quota-info">
|
||
<text class="quota-plan">{{ memberInfo.planName || '免费版' }}</text>
|
||
<text class="quota-count">引力值 {{ memberInfo.gravity ?? 0 }}</text>
|
||
</view>
|
||
<view class="quota-actions">
|
||
<text class="quota-btn primary" @click="goBuyCredits">补充引力值</text>
|
||
<text class="quota-btn" :class="memberInfo.plan !== 'free' ? 'owned' : ''" @click="goUpgrade">{{ memberInfo.plan !== 'free' ? '已开通' : '升级会员' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 菜单列表 -->
|
||
<view class="menu-area">
|
||
<view class="menu-group">
|
||
<view class="menu-item" @click="requireLogin(goCareer, '择业顾问')">
|
||
<view class="menu-icon-wrap wrap-teal"><text class="menu-icon">🧭</text></view>
|
||
<text class="menu-text">择业顾问</text>
|
||
<text class="menu-tag">NEW</text>
|
||
<text class="menu-arrow">›</text>
|
||
</view>
|
||
<view class="menu-item" @click="requireLogin(goHistory, '面试记录')">
|
||
<view class="menu-icon-wrap wrap-blue"><text class="menu-icon">📋</text></view>
|
||
<text class="menu-text">面试记录</text>
|
||
<text class="menu-arrow">›</text>
|
||
</view>
|
||
<view class="menu-item" @click="requireLogin(goReviewReview, '面试复盘')">
|
||
<view class="menu-icon-wrap wrap-orange"><text class="menu-icon">🎙️</text></view>
|
||
<text class="menu-text">面试复盘</text>
|
||
<text class="menu-arrow">›</text>
|
||
</view>
|
||
<view class="menu-item" @click="goVip">
|
||
<view class="menu-icon-wrap wrap-purple"><text class="menu-icon">💎</text></view>
|
||
<text class="menu-text">会员中心</text>
|
||
<text class="menu-arrow">›</text>
|
||
</view>
|
||
<view class="menu-item" @click="requireLogin(goResume, '我的简历')">
|
||
<view class="menu-icon-wrap wrap-green"><text class="menu-icon">📄</text></view>
|
||
<text class="menu-text">我的简历</text>
|
||
<text class="menu-arrow">›</text>
|
||
</view>
|
||
<view class="menu-item" @click="requireLogin(goShare, '我的分享')">
|
||
<view class="menu-icon-wrap wrap-orange"><text class="menu-icon">📤</text></view>
|
||
<text class="menu-text">我的分享</text>
|
||
<text class="menu-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
<view class="menu-group">
|
||
<view class="menu-item" @click="goAbout">
|
||
<view class="menu-icon-wrap wrap-gray"><text class="menu-icon">ℹ️</text></view>
|
||
<text class="menu-text">关于</text>
|
||
<text class="menu-arrow">›</text>
|
||
</view>
|
||
<view class="menu-item" v-if="isAdmin" @click="goAdmin">
|
||
<view class="menu-icon-wrap wrap-gray"><text class="menu-icon">⚙️</text></view>
|
||
<text class="menu-text">管理后台</text>
|
||
<text class="menu-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
<view class="logout-wrap" v-if="isLoggedIn">
|
||
<button class="logout-btn" @click="doLogout">退出登录</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted } from 'vue'
|
||
import { onShow } from '@dcloudio/uni-app'
|
||
import { api } from '../../config'
|
||
|
||
const userInfo = ref({})
|
||
const isAdmin = ref(false)
|
||
const stats = ref({ interviewCount: 0, avgScore: '--', completedCount: 0 })
|
||
const token = ref('')
|
||
const memberInfo = ref({ plan: 'free', planName: '免费版', remaining: 0, gravity: 0 })
|
||
|
||
const isLoggedIn = computed(() => !!token.value)
|
||
const maskedId = computed(() => {
|
||
const id = userInfo.value.id || ''
|
||
return id.length > 6 ? `****${id.slice(-6)}` : id || '--'
|
||
})
|
||
|
||
const refreshState = () => {
|
||
token.value = uni.getStorageSync('token') || ''
|
||
if (!token.value) return
|
||
try { const s = uni.getStorageSync('userInfo'); if (s) userInfo.value = JSON.parse(s) } catch(e) {}
|
||
loadStats()
|
||
loadMemberStatus()
|
||
checkAdmin()
|
||
fetchUserInfo()
|
||
}
|
||
|
||
const fetchUserInfo = async () => {
|
||
try {
|
||
const res = await uni.request({ url: api('/user/info'), method: 'GET', header: { 'Authorization': `Bearer ${token.value}` } })
|
||
if (res.statusCode === 200 && res.data) {
|
||
userInfo.value = res.data
|
||
uni.setStorageSync('userInfo', JSON.stringify(res.data))
|
||
}
|
||
} catch(e) { /* silent */ }
|
||
}
|
||
|
||
onMounted(refreshState)
|
||
onShow(refreshState)
|
||
|
||
const loadMemberStatus = async () => {
|
||
if (!token.value) return
|
||
try {
|
||
const res = await uni.request({ url: api('/member/status'), method: 'GET', header: { 'Authorization': `Bearer ${token.value}` } })
|
||
if (res.statusCode >= 200 && res.statusCode < 300 && res.data) {
|
||
memberInfo.value = { plan: res.data.plan || 'free', planName: res.data.planName || '免费版', remaining: res.data.remaining ?? 0, gravity: res.data.gravity ?? 0 }
|
||
}
|
||
} catch(e) { /* silent */ }
|
||
}
|
||
|
||
const loadStats = async () => {
|
||
try {
|
||
const res = await uni.request({ url: api('/interview/stats/mine'), method: 'GET', header: { 'Authorization': `Bearer ${token.value}` } })
|
||
if (res.statusCode === 200) stats.value = res.data
|
||
} catch(e) { console.error(e) }
|
||
}
|
||
|
||
const requireLogin = (action, name) => {
|
||
if (isLoggedIn.value) { action(); return }
|
||
uni.showModal({
|
||
title: '请先登录',
|
||
content: `需要登录后才能使用${name}功能`,
|
||
confirmText: '去登录',
|
||
success: (r) => { if (r.confirm) uni.navigateTo({ url: '/pages/login/login' }) }
|
||
})
|
||
}
|
||
|
||
const checkAdmin = () => {
|
||
isAdmin.value = userInfo.value.role === 'admin'
|
||
}
|
||
|
||
const goLogin = () => uni.navigateTo({ url: '/pages/login/login' })
|
||
const goBuyCredits = () => uni.navigateTo({ url: '/pages/member/member?buy=interview' })
|
||
const goUpgrade = () => {
|
||
if (memberInfo.value.plan !== 'free') return // already on a paid plan
|
||
uni.navigateTo({ url: '/pages/member/member' })
|
||
}
|
||
const goCareer = () => uni.navigateTo({ url: '/pages/career/career' })
|
||
const goHistory = () => uni.switchTab({ url: '/pages/history/history' })
|
||
const goReviewReview = () => uni.navigateTo({ url: '/pages/review/review' })
|
||
const goVip = () => uni.navigateTo({ url: '/pages/member/member' })
|
||
const goResume = () => uni.navigateTo({ url: '/pages/resume/resume' })
|
||
const goShare = () => uni.navigateTo({ url: '/pages/share/share' })
|
||
const goAdmin = () => uni.navigateTo({ url: '/pages/admin/admin' })
|
||
const goAbout = () => uni.navigateTo({ url: '/pages/about/about' })
|
||
|
||
const doLogout = () => {
|
||
uni.showModal({
|
||
title: '退出登录', content: '确定要退出登录吗？',
|
||
success: (r) => { if (r.confirm) { uni.removeStorageSync('token'); uni.removeStorageSync('userInfo'); token.value = '' } }
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page { height: 100%; overflow-y: auto; background: var(--color-bg); }
|
||
|
||
.header {
|
||
background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-mid) 50%, var(--color-gradient-end) 100%);
|
||
padding: 48rpx 32rpx 72rpx; border-radius: 0 0 48rpx 48rpx; min-height: 90rpx;
|
||
}
|
||
.profile-section { display: flex; align-items: center; margin-bottom: 36rpx; }
|
||
.avatar { width: 104rpx; height: 104rpx; border-radius: 50%; margin-right: 24rpx; border: 3rpx solid rgba(255,255,255,0.4); flex-shrink: 0; }
|
||
.profile-info { flex: 1; display: flex; flex-direction: column; }
|
||
.nickname { font-size: 34rpx; font-weight: 700; color: #FFFFFF; }
|
||
.plan-badge { font-size: 20rpx; color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.2); padding: 4rpx 14rpx; border-radius: 8rpx; align-self: flex-start; margin-top: 8rpx; }
|
||
.user-id { font-size: 20rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; }
|
||
.header-arrow { font-size: 36rpx; color: rgba(255,255,255,0.5); }
|
||
.stats-bar { display: flex; align-items: center; background: rgba(255,255,255,0.15); border-radius: var(--radius-lg); padding: 24rpx 0; }
|
||
.stat { flex: 1; display: flex; flex-direction: column; align-items: center; }
|
||
.stat-num { font-size: 34rpx; font-weight: 700; color: #FFFFFF; }
|
||
.stat-label { font-size: 20rpx; color: rgba(255,255,255,0.7); margin-top: 6rpx; }
|
||
.stat-divider { width: 1rpx; height: 44rpx; background: rgba(255,255,255,0.2); }
|
||
|
||
.header-guest { padding: 36rpx 32rpx 72rpx; min-height: 90rpx; }
|
||
.guest-box { display: flex; align-items: center; }
|
||
.guest-avatar { width: 96rpx; height: 96rpx; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; margin-right: 24rpx; flex-shrink: 0; }
|
||
.guest-icon { font-size: 40rpx; }
|
||
.guest-info { flex: 1; }
|
||
.guest-name { font-size: 30rpx; font-weight: 600; color: #FFFFFF; }
|
||
|
||
.quota-card { margin: -48rpx 32rpx 16rpx; background: #FFFFFF; border-radius: var(--radius-lg); padding: 28rpx 24rpx; box-shadow: var(--shadow-sm); position: relative; z-index: 1; }
|
||
.quota-row { display: flex; align-items: center; justify-content: space-between; }
|
||
.quota-info { display: flex; flex-direction: column; gap: 4rpx; }
|
||
.quota-plan { font-size: 28rpx; font-weight: 700; color: var(--color-text); }
|
||
.quota-count { font-size: 22rpx; color: #6B7280; }
|
||
.quota-actions { display: flex; gap: 12rpx; }
|
||
.quota-btn { font-size: 22rpx; padding: 8rpx 20rpx; border-radius: var(--radius-sm); font-weight: 500; white-space: nowrap; }
|
||
.quota-btn.primary { background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-mid)); color: #FFF; }
|
||
.quota-btn.owned { background: #F3F4F6; color: #9CA3AF; }
|
||
.quota-btn:not(.primary):not(.owned) { background: #FEF3C7; color: #92400E; border: 2rpx solid #F59E0B; }
|
||
|
||
.menu-area { padding: 0 32rpx 32rpx; margin-top: 8rpx; }
|
||
.menu-group { background: #FFFFFF; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 24rpx; box-shadow: var(--shadow-sm); }
|
||
.menu-item { display: flex; align-items: center; padding: 28rpx 32rpx; border-bottom: 1rpx solid var(--color-border); }
|
||
.menu-item:last-child { border-bottom: none; }
|
||
.menu-item:active { background: #F9FAFB; }
|
||
.menu-icon-wrap { width: 60rpx; height: 60rpx; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-right: 20rpx; flex-shrink: 0; }
|
||
.menu-icon { font-size: 28rpx; }
|
||
.menu-text { flex: 1; font-size: 28rpx; color: var(--color-text); font-weight: 500; }
|
||
.menu-tag { font-size: 18rpx; color: #fff; background: var(--color-primary); padding: 2rpx 12rpx; border-radius: 20rpx; margin-right: 12rpx; }
|
||
.menu-arrow { font-size: 32rpx; color: #D1D5DB; }
|
||
.wrap-blue { background: #EEF2FF; }
|
||
.wrap-purple { background: #F5F3FF; }
|
||
.wrap-green { background: #ECFDF5; }
|
||
.wrap-orange { background: #FFF7ED; }
|
||
.wrap-gray { background: #F3F4F6; }
|
||
.wrap-teal { background: #E6FFFA; }
|
||
.logout-wrap { margin-top: 8rpx; }
|
||
.logout-btn { background: #FFFFFF; color: var(--color-error); font-size: 28rpx; font-weight: 500; border-radius: var(--radius-md); height: 88rpx; line-height: 88rpx; border: 2rpx solid #FECACA; }
|
||
.logout-btn:active { background: #FEF2F2; transform: scale(0.96); }
|
||
</style>
|