修改密码页面

src/main.scss

@@ -40,6 +40,30 @@ code {
   float: left;
   height: auto;
 }
+.main-header {
+  position: relative;
+  width: 100%;
+  float: left;
+  height: 54px;
+  box-sizing: border-box;
+  padding: 12px 20px;
+  .main-title {
+    width: 100%;
+    text-align: center;
+    font-size: 16px;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.88);
+    line-height: 30px;
+  }
+
+  .back-icon {
+    width: 30px;
+    height: 30px;
+    position: absolute;
+    top: 12px;
+    left: 20px;
+  }
+}
 
 .adm-tab-bar-item-title {
   font-size: 11px;

src/pages/change-password/index.module.scss

@@ -0,0 +1,59 @@
+.form-box {
+  width: 100%;
+  float: left;
+  height: auto;
+  box-sizing: border-box;
+  padding: 0px 20px;
+  margin-top: 50px;
+  .input-box {
+    width: 100%;
+    height: 109px;
+    background: #f6f6f6;
+    border-radius: 8px;
+    .input-item {
+      width: 100%;
+      height: 54px;
+      font-size: 16px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.3);
+      line-height: 54px;
+      box-sizing: border-box;
+      padding: 0px 15px;
+    }
+    .line {
+      width: auto;
+      height: 1px;
+      background: rgba(0, 0, 0, 0.05);
+      margin: 0px 15px;
+    }
+  }
+  .input2-box {
+    width: 100%;
+    height: 54px;
+    background: #f6f6f6;
+    border-radius: 8px;
+    margin-top: 20px;
+    .input-item {
+      width: 100%;
+      height: 54px;
+      font-size: 16px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.3);
+      line-height: 54px;
+      box-sizing: border-box;
+      padding: 0px 15px;
+    }
+  }
+  .button-box {
+    width: 100%;
+    height: 54px;
+    margin-top: 30px;
+    .primary-button {
+      width: 100%;
+      height: 54px;
+      border-radius: 8px;
+      font-size: 16px;
+      font-weight: 600;
+    }
+  }
+}

src/pages/change-password/index.tsx

@@ -0,0 +1,131 @@
+import { useState, useEffect } from "react";
+import { Button, Toast, Input, Image } from "antd-mobile";
+import styles from "./index.module.scss";
+import { useNavigate } from "react-router-dom";
+import { user } from "../../api/index";
+import backIcon from "../../assets/images/commen/icon-back.png";
+
+const ChangePasswordPage = () => {
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState<boolean>(false);
+  const [oldPassword, setOldPassword] = useState<string>("");
+  const [newPassword, setNewPassword] = useState<string>("");
+  const [againPassword, setAgainPassword] = useState<string>("");
+
+  useEffect(() => {
+    document.title = "修改密码";
+  }, []);
+
+  const onFinish = () => {
+    if (!oldPassword) {
+      Toast.show({
+        content: "请输入原密码",
+      });
+      return;
+    }
+    if (!newPassword) {
+      Toast.show({
+        content: "请输入新密码",
+      });
+      return;
+    }
+    if (!againPassword) {
+      Toast.show({
+        content: "再次输入新密码",
+      });
+      return;
+    }
+    if (againPassword !== newPassword) {
+      Toast.show({
+        content: "再次输入的新密码错误",
+      });
+      return;
+    }
+    if (loading) {
+      return;
+    }
+    handleSubmit();
+  };
+
+  const handleSubmit = () => {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    user
+      .password(oldPassword, newPassword)
+      .then((res: any) => {
+        Toast.show({
+          content: "修改密码成功",
+        });
+        navigate(-1);
+      })
+      .catch((e) => {
+        setLoading(false);
+      });
+  };
+
+  return (
+    <div className="main-body">
+      <div className="main-header">
+        <Image
+          className="back-icon"
+          src={backIcon}
+          onClick={() => navigate(-1)}
+        />
+        <div className="main-title">修改密码</div>
+      </div>
+      <div className={styles["form-box"]}>
+        <div className={styles["input-box"]}>
+          <div className={styles["input-box"]}>
+            <Input
+              type="password"
+              className={styles["input-item"]}
+              placeholder="请输入原密码"
+              value={oldPassword}
+              onChange={(val) => {
+                setOldPassword(val);
+              }}
+            />
+            <div className={styles["line"]}></div>
+            <Input
+              type="password"
+              className={styles["input-item"]}
+              placeholder="请输入新密码"
+              value={newPassword}
+              onChange={(val) => {
+                setNewPassword(val);
+              }}
+            />
+          </div>
+        </div>
+        <div className={styles["input2-box"]}>
+          <Input
+            type="password"
+            className={styles["input-item"]}
+            placeholder="请再次输入新密码"
+            value={againPassword}
+            onChange={(val) => {
+              setAgainPassword(val);
+            }}
+          />
+        </div>
+        <div className={styles["button-box"]}>
+          <Button
+            className={styles["primary-button"]}
+            disabled={
+              oldPassword === "" || newPassword === "" || againPassword === ""
+            }
+            color="primary"
+            loading={loading}
+            onClick={onFinish}
+          >
+            确认修改
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChangePasswordPage;

src/pages/login/index.tsx

@@ -1,11 +1,11 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Button, Toast, SpinLoading, Input, Image } from "antd-mobile";
 import styles from "./index.module.scss";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { login, system, user } from "../../api/index";
 import { setToken } from "../../utils/index";
-import { loginAction, logoutAction } from "../../store/user/loginUserSlice";
+import { loginAction } from "../../store/user/loginUserSlice";
 import banner from "../../assets/images/login/banner.png";
 
 const LoginPage = () => {
@@ -18,9 +18,6 @@ const LoginPage = () => {
   const [captchaVal, setCaptchaVal] = useState<string>("");
   const [captchaKey, setCaptchaKey] = useState<string>("");
   const [captchaLoading, setCaptchaLoading] = useState(true);
-  const loginState = useSelector((state: any) => {
-    return state.loginUser.value;
-  });
 
   useEffect(() => {
     fetchImageCaptcha();
@@ -61,9 +58,6 @@ const LoginPage = () => {
       });
       return;
     }
-    if (loading) {
-      return;
-    }
     handleSubmit();
   };
 

src/routes/index.tsx

@@ -7,6 +7,7 @@ import { InitPage } from "../pages/init";
 import IndexPage from "../pages/index/index";
 import LoginPage from "../pages/login";
 import MemberPage from "../pages/member/index";
+import ChangePasswordPage from "../pages/change-password/index";
 import PrivateRoute from "../components/private-route";
 
 let RootPage: any = null;
@@ -47,6 +48,10 @@ const routes: RouteObject[] = [
         path: "/member",
         element: <PrivateRoute Component={<MemberPage />} />,
       },
+      {
+        path: "/change-password",
+        element: <PrivateRoute Component={<ChangePasswordPage />} />,
+      },
     ],
   },
 ];