refactor(mine): 恢复个人中心页面优化

- 修复暗黑模式图标颜色问题 - 优化页面布局，新增系统设置入口 - 重构异步代码为 async/await 模式
2026-05-15 23:27:56 +08:00
parent c9fbc441bd
commit 1bfe7964b3
6 changed files with 63 additions and 331 deletions
--- a/src/pages/mine/account/index.vue
+++ b/src/pages/mine/account/index.vue
@@ -273,58 +273,56 @@ const handleOpenDialog = (type: DialogType) => {
 * @param contactType 联系方式类型 MOBILE: 手机号码  EMAIL: 邮箱
 */
 const handleSendVerificationCode = async (contactType: string) => {
-  if (contactType === "MOBILE") {
-    mobileBindingFormRef.value.validate("mobile").then(({ valid }: { valid: boolean }) => {
+  try {
+    if (contactType === "MOBILE") {
+      const { valid } = await mobileBindingFormRef.value.validate("mobile");
      if (valid) {
-        UserAPI.sendVerificationCode(mobileBindingForm.mobile!, "MOBILE").then(() => {
-          uni.showToast({ title: "验证码已发送", icon: "none" });
-          startMobileCountdown();
-        });
+        await UserAPI.sendVerificationCode(mobileBindingForm.mobile!, "MOBILE");
+        uni.showToast({ title: "验证码已发送", icon: "none" });
+        startMobileCountdown();
      }
-    });
-  } else if (contactType === "EMAIL") {
-    emailBindingFormRef.value.validate("email").then(({ valid }: { valid: boolean }) => {
+    } else if (contactType === "EMAIL") {
+      const { valid } = await emailBindingFormRef.value.validate("email");
      if (valid) {
-        UserAPI.sendVerificationCode(emailBindingForm.email!, "EMAIL").then(() => {
-          uni.showToast({ title: "验证码已发送", icon: "none" });
-          startEmailCountdown();
-        });
+        await UserAPI.sendVerificationCode(emailBindingForm.email!, "EMAIL");
+        uni.showToast({ title: "验证码已发送", icon: "none" });
+        startEmailCountdown();
      }
-    });
+    }
+  } catch (error) {
+    console.error("发送验证码失败:", error);
  }
 };

 // 提交表单
-function handleSubmit() {
-  if (dialog.type === DialogType.PASSWORD) {
-    passwordChangeFormRef.value.validate().then(({ valid }: { valid: boolean }) => {
+async function handleSubmit() {
+  try {
+    if (dialog.type === DialogType.PASSWORD) {
+      const { valid } = await passwordChangeFormRef.value.validate();
      if (valid) {
-        UserAPI.changePassword(passwordChangeForm).then(() => {
-          uni.showToast({ title: "密码修改成功", icon: "none" });
-          dialog.visible = false;
-        });
+        await UserAPI.changePassword(passwordChangeForm);
+        uni.showToast({ title: "密码修改成功", icon: "none" });
+        dialog.visible = false;
      }
-    });
-  } else if (dialog.type === DialogType.MOBILE) {
-    mobileBindingFormRef.value.validate().then(({ valid }: { valid: boolean }) => {
+    } else if (dialog.type === DialogType.MOBILE) {
+      const { valid } = await mobileBindingFormRef.value.validate();
      if (valid) {
-        UserAPI.bindMobile(mobileBindingForm).then(() => {
-          uni.showToast({ title: "手机号绑定成功", icon: "none" });
-          dialog.visible = false;
-          loadUserProfile();
-        });
+        await UserAPI.bindMobile(mobileBindingForm);
+        uni.showToast({ title: "手机号绑定成功", icon: "none" });
+        dialog.visible = false;
+        loadUserProfile();
      }
-    });
-  } else if (dialog.type === DialogType.EMAIL) {
-    emailBindingFormRef.value.validate().then(({ valid }: { valid: boolean }) => {
+    } else if (dialog.type === DialogType.EMAIL) {
+      const { valid } = await emailBindingFormRef.value.validate();
      if (valid) {
-        UserAPI.bindEmail(emailBindingForm).then(() => {
-          uni.showToast({ title: "邮箱绑定成功", icon: "none" });
-          dialog.visible = false;
-          loadUserProfile();
-        });
+        await UserAPI.bindEmail(emailBindingForm);
+        uni.showToast({ title: "邮箱绑定成功", icon: "none" });
+        dialog.visible = false;
+        loadUserProfile();
      }
-    });
+    }
+  } catch (error) {
+    console.error("提交表单失败:", error);
  }
 }

--- a/src/pages/mine/index.vue
+++ b/src/pages/mine/index.vue
@@ -159,9 +159,19 @@
      <view class="section-card">
        <text class="section-title">帮助与支持</text>
        <view class="menu-list menu-list--flat">
+          <view class="menu-row" @click="openSettings">
+            <view class="menu-row__icon menu-row__icon--primary">
+              <wd-icon name="setting" size="18" :color="`rgba(77, 128, 240, 0.12)`" />
+            </view>
+            <view class="menu-row__main">
+              <text class="menu-row__title">系统设置</text>
+              <text class="menu-row__desc">主题、语言、通知等设置</text>
+            </view>
+            <wd-icon name="arrow-right" size="16" color="var(--color-text-placeholder)" />
+          </view>
          <view class="menu-row" @click="openUserAgreement">
            <view class="menu-row__icon menu-row__icon--success">
-              <wd-icon name="secured" size="18" color="var(--color-success-dark)" />
+              <wd-icon name="secured" size="18" :color="`rgba(52, 209, 157, 0.12)`" />
            </view>
            <view class="menu-row__main">
              <text class="menu-row__title">用户协议</text>
@@ -171,7 +181,7 @@
          </view>
          <view class="menu-row" @click="openAbout">
            <view class="menu-row__icon menu-row__icon--teal">
-              <wd-icon name="info-circle" size="18" color="var(--color-success-dark)" />
+              <wd-icon name="info-circle" size="18" :color="`rgba(52, 209, 157, 0.12)`" />
            </view>
            <view class="menu-row__main">
              <text class="menu-row__title">关于系统</text>
@@ -182,10 +192,6 @@
          </view>
        </view>
      </view>
-
-      <view v-if="isLogin" class="logout-section">
-        <wd-button custom-class="logout-btn" plain @click="handleLogout">退出登录</wd-button>
-      </view>
    </view>

    <wd-loading
@@ -332,6 +338,11 @@ const openThemeSettings = () => {
  router.push({ path: "/pages/mine/settings/theme/index" });
 };

+// 系统设置
+const openSettings = () => {
+  router.push({ path: "/pages/mine/settings/index" });
+};
+
 // 用户协议
 const openUserAgreement = () => {
  router.push({ path: "/pages/mine/settings/agreement/index" });
@@ -844,6 +855,10 @@ const openOfficialAccount = () => {
  height: 72rpx;
  border-radius: 22rpx;

+  &--primary {
+    background: rgba(77, 128, 240, 0.12);
+  }
+
  &--warning {
    background: var(--color-warning-light);
  }
@@ -853,11 +868,11 @@ const openOfficialAccount = () => {
  }

  &--success {
-    background: var(--color-success-light);
+    background: rgba(52, 209, 157, 0.12);
  }

  &--teal {
-    background: var(--color-success-light);
+    background: rgba(52, 209, 157, 0.12);
  }
 }

--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -146,7 +146,7 @@ page {
  --color-text-secondary: #9ca3af;
  --color-text-placeholder: #6b7280;
  --color-text-disabled: #4b5563;
-  --color-text-inverse: #1f2937;
+  --color-text-inverse: #ffffff;

  // -----------------------------------------------------------------------
  // 边框颜色