第 2 阶段：实名认证,mock测试ok

2026-05-22 15:29:24 +08:00
parent 9a79603e10
commit b3205cf2a5
14 changed files with 559 additions and 1 deletions
@@ -1,9 +1,77 @@
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { onMounted, reactive, ref } from 'vue'
+
+import { getRealnameStatus, startRealname, type RealnameStatus } from '@/api/realname'
+import { useSessionStore } from '@/stores/session'
+
+const session = useSessionStore()
+const loading = ref(false)
+const status = ref<RealnameStatus | null>(null)
+const form = reactive({
+  name: '',
+  idNo: '',
+})
+
+onMounted(loadStatus)
+
+async function loadStatus() {
+  if (!session.token) return
+  try {
+    status.value = await getRealnameStatus()
+  } catch {
+    status.value = null
+  }
+}
+
+async function handleSubmit() {
+  loading.value = true
+  try {
+    status.value = await startRealname(form.name, form.idNo)
+    await session.loadMe()
+    ElMessage.success('实名认证已通过')
+  } catch (error) {
+    ElMessage.error(readError(error, '实名认证失败'))
+  } finally {
+    loading.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="page">
    <div class="page-header">
      <p class="eyebrow">Realname</p>
      <h1>实名认证</h1>
-      <p>号主发布前必须完成实名认证。</p>
+      <p>号主发布前必须完成实名认证。当前是开发态 mock 认证，提交合法姓名和身份证号会直接通过。</p>
    </div>
+
+    <el-alert v-if="!session.token" class="notice" type="warning" :closable="false" title="请先登录后再实名认证" />
+
+    <div v-if="status" class="status-panel">
+      <span>当前状态</span>
+      <strong>{{ 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">通过时间：{{ status.verified_at }}</p>
+    </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>
  </section>
 </template>