Merge pull request #154 from j10ccc/refactor/settings

refactor(settings): rewrite settings itself and related pages

src/pages/setting/changePassword/index.scss

@@ -14,3 +14,8 @@
     border-radius: 0.2rem;
   }
 }
+
+.warning-text {
+  color: var(--wjh-color-red-600);
+  font-size: 0.875rem;
+}

src/pages/setting/changePassword/index.vue

@@ -6,20 +6,33 @@
         <card title="修改密码" class="input-card">
           <text>身份证号码</text>
           <view>
-            <input v-model="iid" password placeholder="请输入您的身份证号码">
+            <input v-model="iid" placeholder="请输入您的身份证号码">
           </view>
           <text>学号</text>
           <view>
-            <input v-model="stuid" password placeholder="请输入您的学号">
+            <input v-model="stuid" placeholder="请输入您的学号">
           </view>
           <text>新密码</text>
           <view>
-            <input v-model="password" password placeholder="请输入您的新密码">
+            <input
+              v-model="password"
+              type="password"
+              placeholder="请输入您的新密码"
+              @blur="handleValidateForm"
+            >
           </view>
           <text>确认新密码</text>
           <view>
-            <input v-model="passwordAgain" password placeholder="请重复输入您的新密码">
+            <input
+              v-model="passwordAgain"
+              type="password"
+              placeholder="请重复输入您的新密码"
+              @blur="handleValidateForm"
+            >
           </view>
+          <text v-if="warningText" class="warning-text">
+            {{ warningText }}
+          </text>
           <template #footer>
             <w-button block @tap="isShowConfirm = true">
               确认修改
@@ -38,7 +51,7 @@
           },
           confirm: {
             label: '确定',
-            callback: changePasswordClick
+            callback: handleSubmit
           }
         }"
       />
@@ -52,72 +65,53 @@ import { Card, ThemeConfig, TitleBar, WButton, WModal } from "@/components";
 import "./index.scss";
 import Taro from "@tarojs/taro";
 import { UserService } from "@/services";
-import { useRequest } from "@/hooks";
 import { helpText } from "@/constants/copywriting";
+import { RequestError } from "@/utils";
 
 const iid = ref("");
 const stuid = ref("");
 const password = ref("");
 const passwordAgain = ref("");
 const isShowConfirm = ref(false);
+const warningText = ref("");
 
-const changePasswordClick = () => {
-  isShowConfirm.value = false;
-  if (password.value !== passwordAgain.value) {
-    Taro.showToast({
-      icon: "none",
-      title: "两次密码不一致!"
-    });
-    return;
-  } else if (password.value.length < 6 || password.value.length > 20) {
-    Taro.showToast({
-      icon: "none",
-      title: "密码长度必须在6~20位之间!"
-    });
-    return;
+function handleValidateForm() {
+  const hasUnfilled = [iid, stuid, password, passwordAgain].some(field => !field.value);
+  // 未完成表单情况下，不在 blur 事件中展示 warningText
+  if (hasUnfilled) return "请完成表单";
+
+  let reason = "";
+  if (password.value.length < 6 || password.value.length > 20) {
+    reason = "密码长度必须在 6~20 位之间!";
+  } else if (password.value !== passwordAgain.value) {
+    reason = "两次密码不一致!";
   }
-  Taro.showLoading({
-    title: "正在修改中",
-    mask: true
-  });
-  run({
-    iid: iid.value,
-    stuid: stuid.value,
-    password: password.value
-  });
+  warningText.value = reason;
+  return reason;
 };
 
-const { run } = useRequest(
-  UserService.changePassword, {
-    loadingDelay: 600,
-    onSuccess: (res) => {
-      if (res.data.code === 1 && res.data.msg === "OK") {
-        Taro.showToast({
-          icon: "success",
-          title: "修改密码成功"
-        });
-      } else if (res.data.code === 200510) {
-        Taro.showToast({
-          icon: "none",
-          title: "该学号或身份证不存在或者不匹配，请重新输入!"
-        });
-      } else if (res.data.code === 200511) {
-        Taro.showToast({
-          icon: "none",
-          title: "密码长度必须在6~20位之间!"
-        });
-      } else if (res.data.code === 200513) {
-        Taro.showToast({
-          icon: "none",
-          title: "学号格式不正确，请重新输入!"
-        });
-      }
-    },
-    onError: (e: Error) => {
-      return `失败\r\n${e.message || "网络错误"}`;
-    }
+async function handleSubmit() {
+  const failedReason = handleValidateForm();
+  if (failedReason) {
+    warningText.value = failedReason;
+    return;
+  }
+
+  isShowConfirm.value = false;
+  Taro.showLoading({ title: "正在修改中", mask: true });
+
+  try {
+    await UserService.changePassword({
+      iid: iid.value,
+      stuid: stuid.value,
+      password: password.value
+    });
+    Taro.showToast({ icon: "success", title: "修改密码成功" });
+  } catch (e) {
+    if (e instanceof RequestError)
+      Taro.showToast({ icon: "none", title: `修改密码失败: ${e.message}` });
   }
-);
+}
 
 const onCancel = () => {
   isShowConfirm.value = false;

src/pages/setting/index.vue

@@ -51,20 +51,12 @@ import Taro from "@tarojs/taro";
 import { Card, ThemeConfig, TitleBar, WList, WListItem } from "@/components";
 import { settingText } from "@/constants/copywriting";
 import { getCopyRight } from "@/utils";
-import { ref, watch } from "vue";
-import { serviceStore } from "@/store";
+import { ref } from "vue";
 import "./index.scss";
 
 const isEmpty = ref(true);
 const emptyText = settingText.empty;
 const copyright = getCopyRight();
-const themeMode = ref(serviceStore.theme.themeMode);
-const currentTab = ref(themeMode);
-
-watch(() => serviceStore.theme.themeMode, (newValue) => {
-  currentTab.value = newValue;
-  themeMode.value = newValue;
-});
 
 const nav2ChangePassword = () => {
   Taro.navigateTo({ url: "/pages/setting/changePassword/index" });

src/pages/setting/logout/index.vue

@@ -6,11 +6,11 @@
         <card title="注销" class="input-card">
           <text>身份证号码</text>
           <view>
-            <input v-model="iid" password placeholder="请输入您的身份证号码">
+            <input v-model="iid" type="password" placeholder="请输入您的身份证号码">
           </view>
           <text>学号</text>
           <view>
-            <input v-model="stuid" password placeholder="请输入您的学号">
+            <input v-model="stuid" type="password" placeholder="请输入您的学号">
           </view>
           <template #footer>
             <w-button block @tap="isShowConfirm = true">
@@ -35,7 +35,7 @@
           },
           confirm: {
             label: '确定',
-            callback: logoutClick
+            callback: handleLogout
           }
         }"
       />
@@ -48,61 +48,31 @@ import { ref } from "vue";
 import { Card, ThemeConfig, TitleBar, WButton, WModal } from "@/components";
 import "./index.scss";
 import Taro from "@tarojs/taro";
-import { UserService } from "@/services";
-import { useRequest } from "@/hooks";
 import { helpText } from "@/constants/copywriting";
-import store from "@/store";
+import { CookieUtils, RequestError } from "@/utils";
+import useUserStore from "@/store/service/user";
+import { UserService } from "@/services";
 
+const userStore = useUserStore();
 const iid = ref("");
 const stuid = ref("");
 const isShowConfirm = ref(false);
 
-const logoutClick = () => {
+async function handleLogout() {
   isShowConfirm.value = false;
-  Taro.showLoading({
-    title: "正在注销中",
-    mask: true
-  });
-  run({
-    iid: iid.value,
-    stuid: stuid.value
-  });
-};
+  Taro.showLoading({ title: "正在注销中", mask: true });
 
-const { run } = useRequest(
-  UserService.logout, {
-    loadingDelay: 600,
-    onSuccess: (res) => {
-      if (res.data.code === 1 && res.data.msg === "OK") {
-        Taro.showToast({
-          icon: "success",
-          title: "注销成功"
-        });
-        store.commit("clearSession");
-        store.commit("clearUserInfo");
-        setTimeout(nav2Home, 2000);
-      } else if (res.data.code === 200511) {
-        Taro.showToast({
-          icon: "none",
-          title: "密码长度必须在6~20位之间!"
-        });
-      } else if (res.data.code === 200510) {
-        Taro.showToast({
-          icon: "none",
-          title: "该学号或身份证不存在或者不匹配，请重新输入!"
-        });
-      } else if (res.data.code === 200513) {
-        Taro.showToast({
-          icon: "none",
-          title: "学号格式不正确，请重新输入!"
-        });
-      }
-    },
-    onError: (e: Error) => {
-      return `失败\r\n${e.message || "网络错误"}`;
-    }
+  try {
+    await UserService.logout({ iid: iid.value, stuid: stuid.value });
+    Taro.showToast({ icon: "success", title: "注销成功" });
+    CookieUtils.clear();
+    userStore.clearUserData();
+    setTimeout(nav2Home, 2000);
+  } catch (e) {
+    if (e instanceof RequestError)
+      Taro.showToast({ icon: "none", title: e.message });
   }
-);
+}
 
 const onCancel = () => {
   isShowConfirm.value = false;