实名认证 移动端适配

frontend/components.d.ts

@@ -14,14 +14,24 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VanButton: typeof import('vant/es')['Button']
+    VanCell: typeof import('vant/es')['Cell']
+    VanCellGroup: typeof import('vant/es')['CellGroup']
     VanCheckbox: typeof import('vant/es')['Checkbox']
+    VanDropdownItem: typeof import('vant/es')['DropdownItem']
+    VanDropdownMenu: typeof import('vant/es')['DropdownMenu']
     VanEmpty: typeof import('vant/es')['Empty']
     VanField: typeof import('vant/es')['Field']
+    VanGrid: typeof import('vant/es')['Grid']
+    VanGridItem: typeof import('vant/es')['GridItem']
     VanIcon: typeof import('vant/es')['Icon']
+    VanImage: typeof import('vant/es')['Image']
     VanLoading: typeof import('vant/es')['Loading']
     VanNoticeBar: typeof import('vant/es')['NoticeBar']
+    VanPopup: typeof import('vant/es')['Popup']
     VanPullRefresh: typeof import('vant/es')['PullRefresh']
     VanSearch: typeof import('vant/es')['Search']
+    VanTabbar: typeof import('vant/es')['Tabbar']
+    VanTabbarItem: typeof import('vant/es')['TabbarItem']
     VanTag: typeof import('vant/es')['Tag']
   }
 }

frontend/src/router/index.ts

@@ -42,6 +42,12 @@ const router = createRouter({
       component: () => import("@/views/mobile/MobileMessagesView.vue"),
       meta: { layout: "blank" },
     },
+    {
+      path: "/m/realname",
+      name: "mobile-realname",
+      component: () => import("@/views/mobile/MobileRealnameView.vue"),
+      meta: { layout: "blank" },
+    },
     {
       path: "/m/profile",
       name: "mobile-profile",

frontend/src/views/mobile/MobileProfileView.vue

@@ -1,12 +1,86 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useSessionStore } from "@/stores/session";
+import { showDialog, showToast } from "vant";
 
 const session = useSessionStore();
 const router = useRouter();
 const route = useRoute();
 
+/** 设置面板 */
+const showSettings = ref(false);
+
+const settingsGroups = [
+  {
+    title: "账号与安全",
+    items: [
+      { label: "资料更改", icon: "edit", action: "profile" },
+      { label: "实名认证", icon: "idcard", action: "realname" },
+      { label: "登录密码管理", icon: "lock", action: "password" },
+      { label: "注销账号", icon: "delete-o", action: "cancel-account" },
+    ],
+  },
+  {
+    title: "法律与隐私",
+    items: [
+      { label: "隐私政策", icon: "shield-o", action: "privacy" },
+      { label: "用户协议", icon: "description", action: "terms" },
+    ],
+  },
+];
+
+function onSettingClick(action: string) {
+  showSettings.value = false;
+  switch (action) {
+    case "profile":
+      showToast("资料更改功能开发中");
+      break;
+    case "realname":
+      router.push("/m/realname");
+      break;
+    case "password":
+      showToast("密码管理功能开发中");
+      break;
+    case "cancel-account":
+      showDialog({
+        title: "注销账号",
+        message: "注销后账号数据将无法恢复，确认注销吗？",
+        showCancelButton: true,
+        confirmButtonText: "确认注销",
+        confirmButtonColor: "#ee0a24",
+        cancelButtonText: "再想想",
+      })
+        .then(() => {
+          showToast("注销功能开发中");
+        })
+        .catch(() => {});
+      break;
+    case "privacy":
+      showToast("隐私政策页面开发中");
+      break;
+    case "terms":
+      showToast("用户协议页面开发中");
+      break;
+  }
+}
+
+function confirmLogout() {
+  showSettings.value = false;
+  showDialog({
+    title: "退出登录",
+    message: "确定要退出当前账号吗？",
+    showCancelButton: true,
+    confirmButtonText: "退出",
+    confirmButtonColor: "#ee0a24",
+    cancelButtonText: "取消",
+  })
+    .then(() => {
+      session.logout();
+    })
+    .catch(() => {});
+}
+
 /** 判断当前底部导航是否激活 */
 function isNavActive(path: string) {
   if (path === "/m") return route.path === "/m";
@@ -26,10 +100,6 @@ const maskedPhone = computed(() =>
     : "登录后查看手机号"
 );
 
-function logout() {
-  session.logout();
-}
-
 function goToLogin() {
   router.push("/m/login");
 }
@@ -73,6 +143,13 @@ function goToLogin() {
             <h1>{{ displayName }}</h1>
             <p>ID: {{ displayId }} · {{ maskedPhone }}</p>
           </div>
+          <button class="hero-setting-btn" @click="showSettings = true">
+            <van-icon
+              name="setting-o"
+              :size="22"
+              color="rgba(255,255,255,0.85)"
+            />
+          </button>
         </div>
       </section>
 
@@ -100,18 +177,45 @@ function goToLogin() {
       </div>
     </template>
 
-    <!-- 退出登录 -->
-    <van-button
-      v-if="isLoggedIn"
-      plain
-      type="danger"
-      size="small"
-      round
-      class="logout-btn"
-      @click="logout"
+    <!-- 设置面板 - Popup -->
+    <van-popup
+      v-model:show="showSettings"
+      position="right"
+      :style="{ width: '80%', height: '100%' }"
     >
+      <div class="settings-panel">
+        <header class="settings-header">
+          <h2>设置</h2>
+          <button class="settings-close" @click="showSettings = false">
+            <van-icon name="cross" :size="20" />
+          </button>
+        </header>
+
+        <div
+          v-for="group in settingsGroups"
+          :key="group.title"
+          class="settings-group"
+        >
+          <h3 class="settings-group-title">{{ group.title }}</h3>
+          <van-cell-group :border="false">
+            <van-cell
+              v-for="item in group.items"
+              :key="item.action"
+              :title="item.label"
+              :icon="item.icon"
+              is-link
+              @click="onSettingClick(item.action)"
+            />
+          </van-cell-group>
+        </div>
+
+        <div class="settings-logout">
+          <van-button plain type="danger" block round @click="confirmLogout">
             退出登录
           </van-button>
+        </div>
+      </div>
+    </van-popup>
 
     <!-- 底部导航 - 手写原生，和首页一致 -->
     <nav class="bottom-nav">
@@ -279,6 +383,17 @@ function goToLogin() {
   font-size: 12px;
 }
 
+.hero-setting-btn {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+  border: none;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
 /* ========== 余额卡片 - 白色浮层 ========== */
 .balance-card {
   position: relative;
@@ -335,15 +450,58 @@ function goToLogin() {
   padding: 0 20px;
 }
 
-/* ========== 退出登录 ========== */
-.logout-btn {
-  display: block;
-  margin: 20px auto;
-  padding: 0 24px;
-  border-radius: 20px;
+/* ========== 设置面板 ========== */
+.settings-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #f5f6f8;
+}
+
+.settings-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  background: #fff;
+  border-bottom: 1px solid #eee;
+}
+
+.settings-header h2 {
+  margin: 0;
+  font-size: 17px;
   font-weight: 700;
+}
+
+.settings-close {
+  display: grid;
+  width: 32px;
   height: 32px;
+  place-items: center;
+  border: none;
+  background: none;
+  color: #999;
+  cursor: pointer;
+}
+
+.settings-group {
+  margin-top: 12px;
+}
+
+.settings-group-title {
+  margin: 0 0 4px 16px;
   font-size: 13px;
+  font-weight: 600;
+  color: #999;
+}
+
+.settings-group :deep(.van-cell) {
+  font-size: 15px;
+}
+
+.settings-logout {
+  margin: auto 16px 24px;
+  padding-top: 20px;
 }
 
 /* ========== 底部导航 - 手写原生 ========== */

frontend/src/views/mobile/MobileRealnameView.vue

@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+import { showToast, showDialog } from "vant";
+import {
+  getRealnameStatus,
+  startRealname,
+  type RealnameStatus,
+} from "@/api/realname";
+import { useSessionStore } from "@/stores/session";
+
+const session = useSessionStore();
+const router = useRouter();
+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() {
+  if (!form.name.trim()) {
+    showToast("请输入真实姓名");
+    return;
+  }
+  if (!form.idNo.trim() || form.idNo.length < 15) {
+    showToast("请输入有效的证件号");
+    return;
+  }
+  loading.value = true;
+  try {
+    status.value = await startRealname(form.name, form.idNo);
+    await session.loadMe();
+    showDialog({
+      title: "认证成功",
+      message: "实名认证已通过",
+      confirmButtonText: "好的",
+    });
+  } catch (error: unknown) {
+    const msg =
+      typeof error === "object" && error && "response" in error
+        ? (
+            error as {
+              response?: { data?: { message?: string } };
+            }
+          ).response?.data?.message || "实名认证失败"
+        : "实名认证失败";
+    showToast(msg);
+  } 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
+          >
+            {{ status.status === "verified" ? "已认证" : 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">
+          通过时间：{{ 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>