feat: P2阶段完成 - listings和auth模块迁移
## P2.1: 商品浏览模块（listings）✅ ### 完整迁移（23个文件） - API: listings.ts, listingOptions.ts, homeConfig.ts - Views: 5个页面（HomeView, ListingsView, ListingDetailView + 移动端2个） - Composables: 3个（useHomeFilters, useFilterOptions, useListingQuery） - Components: 9个（ListingCard, 各种过滤器组件） - Tests: 2个测试文件 **功能：** - 首页浏览、商品列表、详情查看 - 高级筛选（服务器、等级、哈夫币、皮肤等） - 排序和分区功能 - 横幅、公告、统计展示 **技术改进：** - 更新所有导入路径到 @/shared/ - 建立清晰的模块导出 --- ## P2.2: 用户认证模块（auth）✅ ### 完整迁移（12个文件） - API: auth.ts, realname.ts, notifications.ts - Views: 8个页面（登录、注册、个人资料、实名认证、通知 + 移动端） - 模块导出 **功能：** - 用户注册、登录、Token管理 - 实名认证、风险检查 - 个人资料编辑、头像上传 - 消息/通知中心 **技术改进：** - 统一 API 导入路径 - 类型安全增强 --- ## 里程碑 🎉 **P2 阶段完成！** **累计完成：** 6个模块 - ✅ P0: shared（基础设施）- 22个文件 - ✅ P1: wallet, chats, orders - 24个文件 - ✅ P2: listings, auth - 35个文件 **总计：** 81个文件已迁移 **剩余：** P3阶段（seller, disputes, admin）+ 清理工作 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
yml2213
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
f415832c19
commit
405abfa4f7
@@ -0,0 +1,266 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { showToast, showDialog } from "vant";
|
||||
import {
|
||||
getRealnameStatus,
|
||||
startRealname,
|
||||
type RealnameStatus,
|
||||
} from "@/api/realname";
|
||||
import { realnameStatusLabel } from "@/utils/statusLabels";
|
||||
import { useSessionStore } from "@/stores/session";
|
||||
import { formatDateTime } from "@/utils/time";
|
||||
|
||||
const session = useSessionStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const loading = ref(false);
|
||||
const status = ref<RealnameStatus | null>(null);
|
||||
const form = reactive({
|
||||
name: "",
|
||||
idNo: "",
|
||||
});
|
||||
|
||||
onMounted(loadStatus);
|
||||
|
||||
function redirectAfterVerified() {
|
||||
const redirect =
|
||||
typeof route.query.redirect === "string" ? route.query.redirect : "";
|
||||
if (redirect) {
|
||||
router.replace(redirect);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadStatus() {
|
||||
if (!session.token) return;
|
||||
try {
|
||||
status.value = await getRealnameStatus();
|
||||
if (status.value.status === "verified") {
|
||||
await session.loadMe();
|
||||
redirectAfterVerified();
|
||||
}
|
||||
} catch {
|
||||
status.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!form.name.trim()) {
|
||||
showToast({ message: "请输入真实姓名", icon: "warning-o" });
|
||||
return;
|
||||
}
|
||||
if (!form.idNo.trim() || form.idNo.length < 15) {
|
||||
showToast({ message: "请输入有效的证件号", icon: "warning-o" });
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
status.value = await startRealname(form.name, form.idNo);
|
||||
await session.loadMe();
|
||||
showDialog({
|
||||
title: "认证成功",
|
||||
message: "实名认证已通过",
|
||||
confirmButtonText: "好的",
|
||||
}).then(() => {
|
||||
redirectAfterVerified();
|
||||
});
|
||||
} catch (error: unknown) {
|
||||
const msg =
|
||||
typeof error === "object" && error && "response" in error
|
||||
? (
|
||||
error as {
|
||||
response?: { data?: { message?: string } };
|
||||
}
|
||||
).response?.data?.message || "实名认证失败"
|
||||
: "实名认证失败";
|
||||
showToast({ message: msg, icon: "cross" });
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="mobile-realname">
|
||||
<header class="page-header">
|
||||
<button class="back-btn" @click="router.back()">
|
||||
<van-icon name="arrow-left" :size="20" />
|
||||
</button>
|
||||
<h1>实名认证</h1>
|
||||
<span class="header-spacer"></span>
|
||||
</header>
|
||||
|
||||
<!-- 未登录提示 -->
|
||||
<van-empty
|
||||
v-if="!session.token"
|
||||
description="请先登录后再实名认证"
|
||||
image="search"
|
||||
/>
|
||||
|
||||
<template v-else>
|
||||
<!-- 认证状态 -->
|
||||
<section v-if="status" class="status-card">
|
||||
<div class="status-row">
|
||||
<span class="status-label">当前状态</span>
|
||||
<van-tag
|
||||
:type="status.status === 'verified' ? 'success' : 'warning'"
|
||||
size="medium"
|
||||
round
|
||||
>
|
||||
{{ realnameStatusLabel(status.status) }}
|
||||
</van-tag>
|
||||
</div>
|
||||
<p v-if="status.masked_name" class="status-detail">
|
||||
姓名：{{ status.masked_name }}
|
||||
</p>
|
||||
<p v-if="status.masked_id_no" class="status-detail">
|
||||
证件号：{{ status.masked_id_no }}
|
||||
</p>
|
||||
<p v-if="status.verified_at" class="status-detail">
|
||||
通过时间：{{ formatDateTime(status.verified_at) }}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- 认证表单 -->
|
||||
<section v-if="status?.status !== 'verified'" class="form-card">
|
||||
<h2>提交认证</h2>
|
||||
<p class="form-hint">
|
||||
号主发布前必须完成实名认证，提交合法姓名和身份证号即可认证。
|
||||
</p>
|
||||
<van-field
|
||||
v-model="form.name"
|
||||
label="姓名"
|
||||
placeholder="请输入真实姓名"
|
||||
clearable
|
||||
class="realname-field"
|
||||
/>
|
||||
<van-field
|
||||
v-model="form.idNo"
|
||||
label="身份证号"
|
||||
placeholder="请输入18位身份证号"
|
||||
maxlength="18"
|
||||
clearable
|
||||
class="realname-field"
|
||||
/>
|
||||
<van-button
|
||||
type="primary"
|
||||
block
|
||||
round
|
||||
:loading="loading"
|
||||
class="submit-btn"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
提交认证
|
||||
</van-button>
|
||||
</section>
|
||||
</template>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mobile-realname {
|
||||
min-height: 100dvh;
|
||||
background: #f5f7fa;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* ========== 顶部导航 ========== */
|
||||
.page-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
padding: 0 12px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
display: grid;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
place-items: center;
|
||||
border: none;
|
||||
background: none;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-spacer {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
/* ========== 认证状态 ========== */
|
||||
.status-card {
|
||||
margin: 16px 12px;
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.status-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #1a202c;
|
||||
}
|
||||
|
||||
.status-detail {
|
||||
margin: 8px 0 0;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* ========== 认证表单 ========== */
|
||||
.form-card {
|
||||
margin: 0 12px 16px;
|
||||
padding: 18px 16px;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.form-card h2 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
margin: 0 0 16px;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.realname-field {
|
||||
margin-bottom: 12px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
margin-top: 8px;
|
||||
background: #1477ff;
|
||||
border-color: transparent;
|
||||
font-weight: 800;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user