pc版本增加个人资料
This commit is contained in:
yml2213
@@ -1,11 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { computed, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import {
|
||||
ArrowDown,
|
||||
ChatDotRound,
|
||||
CirclePlus,
|
||||
DocumentChecked,
|
||||
EditPen,
|
||||
House,
|
||||
Search,
|
||||
Service,
|
||||
@@ -30,6 +32,19 @@ const navItems = [
|
||||
const showUserDropdown = ref(false);
|
||||
const supportLoading = ref(false);
|
||||
|
||||
const realnameBadge = computed(() => {
|
||||
switch (session.realnameStatus) {
|
||||
case "verified":
|
||||
return { text: "已实名", tone: "verified" };
|
||||
case "pending":
|
||||
return { text: "认证中", tone: "pending" };
|
||||
case "rejected":
|
||||
return { text: "认证失败", tone: "rejected" };
|
||||
default:
|
||||
return { text: "未实名", tone: "unverified" };
|
||||
}
|
||||
});
|
||||
|
||||
function handleLogout() {
|
||||
session.logout();
|
||||
showUserDropdown.value = false;
|
||||
@@ -120,12 +135,23 @@ async function handleSupportClick() {
|
||||
<span v-else class="pc-avatar-text">{{ session.avatarText }}</span>
|
||||
</span>
|
||||
<span class="pc-user-name">{{ session.displayName }}</span>
|
||||
<span class="pc-realname-badge" :class="`is-${realnameBadge.tone}`">
|
||||
{{ realnameBadge.text }}
|
||||
</span>
|
||||
<el-icon class="arrow-icon" :class="{ rotated: showUserDropdown }"><ArrowDown /></el-icon>
|
||||
</button>
|
||||
|
||||
<Transition name="dropdown">
|
||||
<div v-if="showUserDropdown" class="pc-user-dropdown-container">
|
||||
<div class="pc-user-dropdown">
|
||||
<RouterLink
|
||||
class="dropdown-item"
|
||||
to="/profile"
|
||||
@click="showUserDropdown = false"
|
||||
>
|
||||
<el-icon><EditPen /></el-icon>
|
||||
<span>个人资料</span>
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item"
|
||||
to="/orders"
|
||||
@@ -150,6 +176,17 @@ async function handleSupportClick() {
|
||||
<el-icon><CirclePlus /></el-icon>
|
||||
<span>发布账号</span>
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
class="dropdown-item"
|
||||
to="/realname"
|
||||
@click="showUserDropdown = false"
|
||||
>
|
||||
<el-icon><DocumentChecked /></el-icon>
|
||||
<span>实名认证</span>
|
||||
<span class="dropdown-status" :class="`is-${realnameBadge.tone}`">
|
||||
{{ realnameBadge.text }}
|
||||
</span>
|
||||
</RouterLink>
|
||||
<div class="dropdown-divider"></div>
|
||||
<button class="dropdown-item logout" @click="handleLogout">
|
||||
<el-icon><SwitchButton /></el-icon>
|
||||
@@ -469,6 +506,44 @@ async function handleSupportClick() {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pc-realname-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 48px;
|
||||
height: 22px;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pc-realname-badge.is-verified,
|
||||
.dropdown-status.is-verified {
|
||||
background: #ecfdf3;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.pc-realname-badge.is-pending,
|
||||
.dropdown-status.is-pending {
|
||||
background: #fff7ed;
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.pc-realname-badge.is-rejected,
|
||||
.dropdown-status.is-rejected {
|
||||
background: #fff1f2;
|
||||
color: #e11d48;
|
||||
}
|
||||
|
||||
.pc-realname-badge.is-unverified,
|
||||
.dropdown-status.is-unverified {
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 12px;
|
||||
color: #8b9cb5;
|
||||
@@ -514,6 +589,21 @@ async function handleSupportClick() {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.dropdown-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 54px;
|
||||
height: 22px;
|
||||
margin-left: auto;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background: #fff3e8;
|
||||
color: #ff6a00;
|
||||
@@ -569,4 +659,10 @@ async function handleSupportClick() {
|
||||
padding: 20px 24px;
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.pc-realname-badge {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -12,6 +12,12 @@ export const accountRoutes: RouteRecordRaw[] = [
|
||||
component: () => import('@/views/account/OrderCreateView.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
name: 'profile',
|
||||
component: () => import('@/views/account/ProfileView.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
},
|
||||
{
|
||||
path: '/orders',
|
||||
name: 'orders',
|
||||
|
||||
@@ -0,0 +1,512 @@
|
||||
<script setup lang="ts">
|
||||
import { Camera, CircleCheckFilled, EditPen, Postcard, RefreshRight, User, WarningFilled } from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import { uploadFile } from '@/api/files'
|
||||
import { useSessionStore } from '@/stores/session'
|
||||
import { realnameStatusLabel } from '@/utils/statusLabels'
|
||||
|
||||
const session = useSessionStore()
|
||||
const router = useRouter()
|
||||
const saving = ref(false)
|
||||
const uploadingAvatar = ref(false)
|
||||
const avatarFileInput = ref<HTMLInputElement | null>(null)
|
||||
const form = reactive({
|
||||
nickname: '',
|
||||
avatar_url: '',
|
||||
})
|
||||
|
||||
const displayName = computed(() => session.displayName)
|
||||
const maskedPhone = computed(() => {
|
||||
if (!session.phone) return '未绑定手机号'
|
||||
return `${session.phone.slice(0, 3)}****${session.phone.slice(-4)}`
|
||||
})
|
||||
const avatarText = computed(() => (form.nickname || displayName.value || 'U').slice(0, 1))
|
||||
const realnameTone = computed(() => {
|
||||
if (session.realnameStatus === 'verified') return 'verified'
|
||||
if (session.realnameStatus === 'pending') return 'pending'
|
||||
if (session.realnameStatus === 'rejected') return 'rejected'
|
||||
return 'unverified'
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
if (!session.phone) {
|
||||
await session.loadMe()
|
||||
}
|
||||
resetForm()
|
||||
})
|
||||
|
||||
function resetForm() {
|
||||
form.nickname = session.nickname || session.displayName
|
||||
form.avatar_url = session.avatarUrl || ''
|
||||
}
|
||||
|
||||
function resolveAvatarURL(url: string | undefined | null) {
|
||||
if (!url) return ''
|
||||
if (url.includes('/api/files/object?key=avatar/')) {
|
||||
return url.replace('/api/files/object', '/api/public/files/object')
|
||||
}
|
||||
return url
|
||||
}
|
||||
|
||||
function triggerAvatarUpload() {
|
||||
avatarFileInput.value?.click()
|
||||
}
|
||||
|
||||
async function handleAvatarFileChange(event: Event) {
|
||||
const input = event.target as HTMLInputElement
|
||||
const file = input.files?.[0]
|
||||
input.value = ''
|
||||
if (!file) return
|
||||
|
||||
uploadingAvatar.value = true
|
||||
try {
|
||||
const uploaded = await uploadFile(file, 'avatar')
|
||||
form.avatar_url = uploaded.url
|
||||
ElMessage.success('头像上传成功')
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '头像上传失败'))
|
||||
} finally {
|
||||
uploadingAvatar.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function saveProfile() {
|
||||
const nickname = form.nickname.trim()
|
||||
const avatarURL = form.avatar_url.trim()
|
||||
if (!nickname) {
|
||||
ElMessage.warning('请输入昵称')
|
||||
return
|
||||
}
|
||||
if (nickname.length > 24) {
|
||||
ElMessage.warning('昵称不能超过 24 个字符')
|
||||
return
|
||||
}
|
||||
|
||||
saving.value = true
|
||||
try {
|
||||
await session.updateProfile({ nickname, avatar_url: avatarURL })
|
||||
resetForm()
|
||||
ElMessage.success('个人资料已保存')
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '资料更新失败'))
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function readError(error: unknown, fallback: string) {
|
||||
if (typeof error === 'object' && error && 'response' in error) {
|
||||
const response = (error as { response?: { data?: { message?: string } } }).response
|
||||
return response?.data?.message || fallback
|
||||
}
|
||||
return fallback
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="profile-page">
|
||||
<div class="profile-hero">
|
||||
<div class="hero-avatar">
|
||||
<img v-if="session.avatarUrl" :src="resolveAvatarURL(session.avatarUrl)" alt="" />
|
||||
<span v-else>{{ session.avatarText }}</span>
|
||||
</div>
|
||||
<div class="hero-copy">
|
||||
<span class="eyebrow">Profile</span>
|
||||
<h1>个人资料</h1>
|
||||
<p>{{ displayName }} · {{ maskedPhone }}</p>
|
||||
</div>
|
||||
<button class="hero-realname" :class="`is-${realnameTone}`" type="button" @click="router.push('/realname')">
|
||||
<el-icon><CircleCheckFilled v-if="session.realnameStatus === 'verified'" /><WarningFilled v-else /></el-icon>
|
||||
<span>{{ realnameStatusLabel(session.realnameStatus) }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="profile-layout">
|
||||
<section class="edit-panel">
|
||||
<div class="panel-head">
|
||||
<div class="panel-icon">
|
||||
<el-icon><EditPen /></el-icon>
|
||||
</div>
|
||||
<div>
|
||||
<h2>资料编辑</h2>
|
||||
<p>修改昵称和头像后会同步展示在顶部用户信息中。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="avatar-editor">
|
||||
<button class="avatar-preview" type="button" @click="triggerAvatarUpload">
|
||||
<img v-if="form.avatar_url" :src="resolveAvatarURL(form.avatar_url)" alt="" />
|
||||
<span v-else>{{ avatarText }}</span>
|
||||
<i><el-icon><Camera /></el-icon></i>
|
||||
</button>
|
||||
<div class="avatar-actions">
|
||||
<strong>{{ form.nickname || displayName }}</strong>
|
||||
<p>支持上传本地图片，也可以直接填写头像 URL。</p>
|
||||
<el-button :icon="Camera" :loading="uploadingAvatar" @click="triggerAvatarUpload">上传头像</el-button>
|
||||
<input ref="avatarFileInput" type="file" accept="image/*" hidden @change="handleAvatarFileChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form class="profile-form" label-position="top">
|
||||
<el-form-item label="昵称">
|
||||
<el-input v-model="form.nickname" :prefix-icon="User" maxlength="24" placeholder="请输入昵称" size="large" />
|
||||
</el-form-item>
|
||||
<el-form-item label="头像地址">
|
||||
<el-input
|
||||
v-model="form.avatar_url"
|
||||
:prefix-icon="Postcard"
|
||||
maxlength="512"
|
||||
placeholder="可填写图片 URL，留空使用文字头像"
|
||||
size="large"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div class="form-actions">
|
||||
<el-button size="large" :icon="RefreshRight" @click="resetForm">重置</el-button>
|
||||
<el-button type="primary" size="large" :icon="EditPen" :loading="saving" @click="saveProfile">保存资料</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</section>
|
||||
|
||||
<aside class="account-card">
|
||||
<span class="card-kicker">账号信息</span>
|
||||
<dl>
|
||||
<div>
|
||||
<dt>用户 ID</dt>
|
||||
<dd>{{ session.userId || '-' }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>手机号</dt>
|
||||
<dd>{{ maskedPhone }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>实名状态</dt>
|
||||
<dd :class="`is-${realnameTone}`">{{ realnameStatusLabel(session.realnameStatus) }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<button class="realname-shortcut" type="button" @click="router.push('/realname')">
|
||||
<span>查看实名认证</span>
|
||||
<el-icon><CircleCheckFilled /></el-icon>
|
||||
</button>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.profile-page {
|
||||
width: min(1180px, 100%);
|
||||
margin: 0 auto;
|
||||
padding: 10px 0 40px;
|
||||
}
|
||||
|
||||
.profile-hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
padding: 30px 34px;
|
||||
border: 1px solid #eef1f5;
|
||||
border-radius: 18px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 106, 0, 0.12), rgba(37, 99, 235, 0.08)),
|
||||
#ffffff;
|
||||
box-shadow: 0 16px 36px rgba(23, 35, 61, 0.08);
|
||||
}
|
||||
|
||||
.hero-avatar,
|
||||
.avatar-preview {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: #ff6a00;
|
||||
color: #ffffff;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.hero-avatar {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
font-size: 28px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.hero-avatar img,
|
||||
.avatar-preview img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: #ff6a00;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero-copy h1 {
|
||||
margin: 8px 0 0;
|
||||
color: #17233d;
|
||||
font-size: 34px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hero-copy p {
|
||||
margin: 10px 0 0;
|
||||
color: #64748b;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hero-realname {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 40px;
|
||||
padding: 0 14px;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hero-realname.is-verified,
|
||||
.account-card dd.is-verified {
|
||||
background: #ecfdf3;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.hero-realname.is-pending,
|
||||
.account-card dd.is-pending {
|
||||
background: #fff7ed;
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.hero-realname.is-rejected,
|
||||
.account-card dd.is-rejected {
|
||||
background: #fff1f2;
|
||||
color: #e11d48;
|
||||
}
|
||||
|
||||
.hero-realname.is-unverified,
|
||||
.account-card dd.is-unverified {
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.profile-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 360px;
|
||||
gap: 22px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.edit-panel,
|
||||
.account-card {
|
||||
border: 1px solid #eef1f5;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 10px 28px rgba(23, 35, 61, 0.06);
|
||||
}
|
||||
|
||||
.edit-panel {
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.panel-icon {
|
||||
display: grid;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
place-items: center;
|
||||
border-radius: 12px;
|
||||
background: #fff3e8;
|
||||
color: #ff6a00;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.panel-head h2 {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.panel-head p {
|
||||
margin: 6px 0 0;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.avatar-editor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
max-width: 640px;
|
||||
padding: 20px;
|
||||
border-radius: 14px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.avatar-preview {
|
||||
position: relative;
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
border: none;
|
||||
font-size: 30px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar-preview i {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
bottom: 4px;
|
||||
display: grid;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: #ffffff;
|
||||
color: #ff6a00;
|
||||
box-shadow: 0 4px 12px rgba(23, 35, 61, 0.16);
|
||||
}
|
||||
|
||||
.avatar-actions strong {
|
||||
display: block;
|
||||
color: #17233d;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.avatar-actions p {
|
||||
margin: 6px 0 12px;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.profile-form {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
max-width: 640px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.profile-form :deep(.el-form-item__label) {
|
||||
color: #475569;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.profile-form :deep(.el-input__wrapper) {
|
||||
min-height: 48px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 0 1px #dbe3ee inset;
|
||||
}
|
||||
|
||||
.profile-form :deep(.el-input__wrapper.is-focus) {
|
||||
box-shadow: 0 0 0 1px #ff6a00 inset, 0 0 0 4px rgba(255, 106, 0, 0.08);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.form-actions .el-button {
|
||||
height: 46px;
|
||||
border-radius: 10px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.form-actions .el-button--primary {
|
||||
border: none;
|
||||
background: #ff6a00;
|
||||
box-shadow: 0 10px 20px rgba(255, 106, 0, 0.18);
|
||||
}
|
||||
|
||||
.account-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.card-kicker {
|
||||
color: #8b9cb5;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.account-card dl {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin: 18px 0 0;
|
||||
}
|
||||
|
||||
.account-card dl div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
min-height: 48px;
|
||||
padding: 0 14px;
|
||||
border-radius: 10px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.account-card dt {
|
||||
color: #8b9cb5;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.account-card dd {
|
||||
margin: 0;
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.realname-shortcut {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
min-height: 44px;
|
||||
margin-top: 18px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
color: #475569;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.realname-shortcut:hover {
|
||||
border-color: #ff6a00;
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.profile-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
CircleCheckFilled,
|
||||
CreditCard,
|
||||
DocumentChecked,
|
||||
Lock,
|
||||
Postcard,
|
||||
RefreshRight,
|
||||
User,
|
||||
WarningFilled,
|
||||
} from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
import { getRealnameStatus, startRealname, type RealnameStatus } from '@/api/realname'
|
||||
@@ -18,6 +28,42 @@ const form = reactive({
|
||||
idNo: '',
|
||||
})
|
||||
|
||||
const currentStatus = computed(() => status.value?.status || 'unverified')
|
||||
const statusMeta = computed(() => {
|
||||
switch (currentStatus.value) {
|
||||
case 'verified':
|
||||
return {
|
||||
icon: CircleCheckFilled,
|
||||
tone: 'verified',
|
||||
title: '认证已完成',
|
||||
summary: '可发布账号并参与需要实名的交易流程。',
|
||||
}
|
||||
case 'pending':
|
||||
return {
|
||||
icon: DocumentChecked,
|
||||
tone: 'pending',
|
||||
title: '认证处理中',
|
||||
summary: '认证结果返回后会自动同步到账号状态。',
|
||||
}
|
||||
case 'rejected':
|
||||
return {
|
||||
icon: WarningFilled,
|
||||
tone: 'rejected',
|
||||
title: '认证未通过',
|
||||
summary: status.value?.fail_reason || '请核对姓名与身份证号后重新提交。',
|
||||
}
|
||||
default:
|
||||
return {
|
||||
icon: Postcard,
|
||||
tone: 'unverified',
|
||||
title: '等待认证',
|
||||
summary: '提交真实姓名与身份证号后即可完成核验。',
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const canSubmit = computed(() => !!session.token && currentStatus.value !== 'verified')
|
||||
|
||||
onMounted(loadStatus)
|
||||
|
||||
function redirectAfterVerified() {
|
||||
@@ -72,31 +118,467 @@ function readError(error: unknown, fallback: string) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<div class="page-header">
|
||||
<p class="eyebrow">Realname</p>
|
||||
<h1>实名认证</h1>
|
||||
<p>号主发布前必须完成实名认证。当前是开发态 mock 认证，提交合法姓名和身份证号会直接通过。</p>
|
||||
<section class="realname-page">
|
||||
<div class="realname-hero">
|
||||
<div class="hero-copy">
|
||||
<span class="eyebrow">Realname</span>
|
||||
<h1>实名认证</h1>
|
||||
<p>完成实名后可发布账号、进入交易流程，并提升账号可信度。</p>
|
||||
</div>
|
||||
<div class="hero-status" :class="`is-${statusMeta.tone}`">
|
||||
<el-icon><component :is="statusMeta.icon" /></el-icon>
|
||||
<div>
|
||||
<span>当前状态</span>
|
||||
<strong>{{ realnameStatusLabel(currentStatus) }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-alert v-if="!session.token" class="notice" type="warning" :closable="false" title="请先登录后再实名认证" />
|
||||
<el-alert
|
||||
v-if="!session.token"
|
||||
class="login-alert"
|
||||
type="warning"
|
||||
:closable="false"
|
||||
title="请先登录后再实名认证"
|
||||
/>
|
||||
|
||||
<div v-if="status" class="status-panel">
|
||||
<span>当前状态</span>
|
||||
<strong>{{ realnameStatusLabel(status.status) }}</strong>
|
||||
<p v-if="status.masked_name">姓名：{{ status.masked_name }}</p>
|
||||
<p v-if="status.masked_id_no">证件号：{{ status.masked_id_no }}</p>
|
||||
<p v-if="status.verified_at">通过时间：{{ formatDateTime(status.verified_at) }}</p>
|
||||
<div class="realname-layout">
|
||||
<section class="verify-panel">
|
||||
<div class="panel-head">
|
||||
<div class="panel-icon">
|
||||
<el-icon><CreditCard /></el-icon>
|
||||
</div>
|
||||
<div>
|
||||
<h2>{{ currentStatus === 'verified' ? '实名信息' : '提交认证' }}</h2>
|
||||
<p>{{ currentStatus === 'verified' ? '实名信息已完成脱敏展示。' : '请使用本人真实身份信息完成核验。' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="currentStatus === 'verified'" class="verified-summary">
|
||||
<div class="verified-mark">
|
||||
<el-icon><CircleCheckFilled /></el-icon>
|
||||
</div>
|
||||
<div class="verified-copy">
|
||||
<strong>认证通过</strong>
|
||||
<span>{{ status?.verified_at ? formatDateTime(status.verified_at) : '已完成实名核验' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form v-else class="verify-form" label-position="top">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.name" :prefix-icon="User" placeholder="请输入真实姓名" size="large" />
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号">
|
||||
<el-input
|
||||
v-model="form.idNo"
|
||||
:prefix-icon="Postcard"
|
||||
maxlength="18"
|
||||
placeholder="请输入 18 位身份证号"
|
||||
size="large"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
:icon="DocumentChecked"
|
||||
:disabled="!canSubmit"
|
||||
:loading="loading"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
提交认证
|
||||
</el-button>
|
||||
</el-form>
|
||||
</section>
|
||||
|
||||
<aside class="status-card" :class="`is-${statusMeta.tone}`">
|
||||
<div class="status-visual">
|
||||
<el-icon><component :is="statusMeta.icon" /></el-icon>
|
||||
</div>
|
||||
<div class="status-content">
|
||||
<span class="status-kicker">认证状态</span>
|
||||
<h2>{{ statusMeta.title }}</h2>
|
||||
<p>{{ statusMeta.summary }}</p>
|
||||
</div>
|
||||
|
||||
<dl class="status-details">
|
||||
<div>
|
||||
<dt>姓名</dt>
|
||||
<dd>{{ status?.masked_name || '待提交' }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>证件号</dt>
|
||||
<dd>{{ status?.masked_id_no || '待提交' }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>通过时间</dt>
|
||||
<dd>{{ status?.verified_at ? formatDateTime(status.verified_at) : '暂无' }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div class="security-note">
|
||||
<el-icon><Lock /></el-icon>
|
||||
<span>身份信息仅用于实名核验，页面只展示脱敏结果。</span>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<el-form class="login-form" label-position="top">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.name" placeholder="请输入真实姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号">
|
||||
<el-input v-model="form.idNo" maxlength="18" placeholder="请输入 18 位身份证号" />
|
||||
</el-form-item>
|
||||
<el-button type="primary" :disabled="!session.token" :loading="loading" @click="handleSubmit">提交认证</el-button>
|
||||
</el-form>
|
||||
<div class="realname-actions">
|
||||
<RouterLink class="secondary-action" to="/seller/listings/create">
|
||||
<el-icon><RefreshRight /></el-icon>
|
||||
<span>返回发布账号</span>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.realname-page {
|
||||
width: min(1180px, 100%);
|
||||
margin: 0 auto;
|
||||
padding: 10px 0 40px;
|
||||
}
|
||||
|
||||
.realname-hero {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
min-height: 156px;
|
||||
padding: 34px 36px;
|
||||
border: 1px solid #eef1f5;
|
||||
border-radius: 18px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 106, 0, 0.12) 0%, rgba(22, 163, 74, 0.08) 52%, rgba(37, 99, 235, 0.08) 100%),
|
||||
#ffffff;
|
||||
box-shadow: 0 16px 36px rgba(23, 35, 61, 0.08);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
color: #ff6a00;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero-copy h1 {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 36px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hero-copy p {
|
||||
margin: 14px 0 0;
|
||||
color: #64748b;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
min-width: 210px;
|
||||
padding: 18px;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 12px 28px rgba(23, 35, 61, 0.08);
|
||||
}
|
||||
|
||||
.hero-status .el-icon {
|
||||
display: grid;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
place-items: center;
|
||||
border-radius: 12px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.hero-status span,
|
||||
.status-kicker {
|
||||
color: #8b9cb5;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.hero-status strong {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: #17233d;
|
||||
font-size: 22px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hero-status.is-verified .el-icon,
|
||||
.status-card.is-verified .status-visual {
|
||||
background: #ecfdf3;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.hero-status.is-pending .el-icon,
|
||||
.status-card.is-pending .status-visual {
|
||||
background: #fff7ed;
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.hero-status.is-rejected .el-icon,
|
||||
.status-card.is-rejected .status-visual {
|
||||
background: #fff1f2;
|
||||
color: #e11d48;
|
||||
}
|
||||
|
||||
.hero-status.is-unverified .el-icon,
|
||||
.status-card.is-unverified .status-visual {
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.login-alert {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.realname-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 380px;
|
||||
gap: 22px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.verify-panel,
|
||||
.status-card {
|
||||
border: 1px solid #eef1f5;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 10px 28px rgba(23, 35, 61, 0.06);
|
||||
}
|
||||
|
||||
.verify-panel {
|
||||
min-height: 430px;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.panel-icon {
|
||||
display: grid;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
place-items: center;
|
||||
border-radius: 12px;
|
||||
background: #fff3e8;
|
||||
color: #ff6a00;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.panel-head h2,
|
||||
.status-content h2 {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 22px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.panel-head p,
|
||||
.status-content p {
|
||||
margin: 6px 0 0;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.verify-form {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
max-width: 620px;
|
||||
}
|
||||
|
||||
.verify-form :deep(.el-form-item__label) {
|
||||
color: #475569;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.verify-form :deep(.el-input__wrapper) {
|
||||
min-height: 48px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 0 1px #dbe3ee inset;
|
||||
}
|
||||
|
||||
.verify-form :deep(.el-input__wrapper.is-focus) {
|
||||
box-shadow: 0 0 0 1px #ff6a00 inset, 0 0 0 4px rgba(255, 106, 0, 0.08);
|
||||
}
|
||||
|
||||
.verify-form .el-button {
|
||||
width: 168px;
|
||||
height: 46px;
|
||||
margin-top: 8px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background: #ff6a00;
|
||||
font-weight: 900;
|
||||
box-shadow: 0 10px 20px rgba(255, 106, 0, 0.18);
|
||||
}
|
||||
|
||||
.verified-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
max-width: 620px;
|
||||
padding: 24px;
|
||||
border-radius: 14px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.verified-mark {
|
||||
display: grid;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
place-items: center;
|
||||
border-radius: 16px;
|
||||
background: #ecfdf3;
|
||||
color: #16a34a;
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.verified-copy strong {
|
||||
display: block;
|
||||
color: #17233d;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.verified-copy span {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.status-visual {
|
||||
display: grid;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
place-items: center;
|
||||
border-radius: 16px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.status-content {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.status-details {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin: 24px 0 0;
|
||||
}
|
||||
|
||||
.status-details div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
min-height: 46px;
|
||||
padding: 0 14px;
|
||||
border-radius: 10px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.status-details dt {
|
||||
color: #8b9cb5;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.status-details dd {
|
||||
margin: 0;
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.security-note {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
margin-top: 22px;
|
||||
padding: 14px;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.security-note .el-icon {
|
||||
margin-top: 2px;
|
||||
color: #2563eb;
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.realname-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.secondary-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 40px;
|
||||
padding: 0 16px;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
color: #475569;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.secondary-action:hover {
|
||||
border-color: #ff6a00;
|
||||
color: #ff6a00;
|
||||
box-shadow: 0 8px 18px rgba(255, 106, 0, 0.08);
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.realname-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.realname-hero {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero-status {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user