实名认证 移动端适配

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%' }"
     >
-      退出登录
-    </van-button>
+      <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;
 }
 
 /* ========== 底部导航 - 手写原生 ========== */