diff --git a/src/api/user.ts b/src/api/user.ts index 5a5c1aa..175a4e9 100644 --- a/src/api/user.ts +++ b/src/api/user.ts @@ -6,7 +6,7 @@ export function detail() { // 修改密码 export function password(oldPassword: string, newPassword: string) { - return client.put("/api/v1/user/avatar", { + return client.put("/api/v1/user/password", { old_password: oldPassword, new_password: newPassword, }); diff --git a/src/pages/change-password/index.module.scss b/src/compenents/change-password/index.module.scss similarity index 100% rename from src/pages/change-password/index.module.scss rename to src/compenents/change-password/index.module.scss diff --git a/src/compenents/change-password/index.tsx b/src/compenents/change-password/index.tsx new file mode 100644 index 0000000..7a35721 --- /dev/null +++ b/src/compenents/change-password/index.tsx @@ -0,0 +1,102 @@ +import React, { useState, useEffect } from "react"; +import { Modal, Select, Form, Input, message } from "antd"; +import styles from "./index.module.less"; +import { user } from "../../api/index"; + +interface PropInterface { + open: boolean; + onCancel: () => void; +} + +export const ChangePasswordModel: React.FC = ({ + open, + onCancel, +}) => { + const [form] = Form.useForm(); + const [loading, setLoading] = useState(true); + + useEffect(() => { + form.setFieldsValue({ + old_password: "", + new_password: "", + again_new_password: "", + }); + }, [form, open]); + + const onFinish = (values: any) => { + if (values.again_new_password !== values.new_password) { + message.error("再次输入的新密码错误"); + return; + } + user.password(values.old_password, values.new_password).then((res: any) => { + message.success("保存成功！"); + onCancel(); + }); + }; + + const onFinishFailed = (errorInfo: any) => { + console.log("Failed:", errorInfo); + }; + + return ( + <> + form.submit()} + onCancel={() => onCancel()} + maskClosable={false} + > +
+
+ + + + + + + + + +
+
+ + + ); +}; diff --git a/src/compenents/header/index.tsx b/src/compenents/header/index.tsx index 08b919b..4c0f48f 100644 --- a/src/compenents/header/index.tsx +++ b/src/compenents/header/index.tsx @@ -1,9 +1,10 @@ -import React from "react"; +import React, { useState } from "react"; import styles from "./index.module.scss"; import { Button, Dropdown, MenuProps } from "antd"; import { useDispatch, useSelector } from "react-redux"; import { Link, useNavigate } from "react-router-dom"; import { logoutAction } from "../../store/user/loginUserSlice"; +import { ChangePasswordModel } from "../change-password"; export const Header: React.FC = () => { const dispatch = useDispatch(); @@ -14,12 +15,15 @@ export const Header: React.FC = () => { ); const config = useSelector((state: any) => state.systemConfig.value); + const [changePasswordVisiale, setChangePasswordVisiale] = + useState(false); + const onClick: MenuProps["onClick"] = ({ key }) => { if (key === "login_out") { dispatch(logoutAction()); navigate("/login"); } else if (key === "change_password") { - navigate("/change-password"); + setChangePasswordVisiale(true); } else if (key === "user_info") { navigate("/user_info"); } @@ -82,6 +86,12 @@ export const Header: React.FC = () => { + { + setChangePasswordVisiale(false); + }} + > diff --git a/src/compenents/index.ts b/src/compenents/index.ts index ccd15c6..4c8b5b8 100644 --- a/src/compenents/index.ts +++ b/src/compenents/index.ts @@ -2,3 +2,4 @@ export * from "./footer"; export * from "./no-footer"; export * from "./no-header"; export * from "./header"; +export * from "./change-password"; diff --git a/src/main.tsx b/src/main.tsx index 445e4e6..eca299d 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -10,18 +10,16 @@ import App from "./App"; import "./index.scss"; //全局样式 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( - - - - - - - - - + + + + + + + ); // If you want to start measuring performance in your app, pass a function diff --git a/src/pages/change-password/index.tsx b/src/pages/change-password/index.tsx deleted file mode 100644 index d0f0c02..0000000 --- a/src/pages/change-password/index.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { Row, Col, Form, Input, Button, message } from "antd"; -import styles from "./index.module.scss"; -import { user } from "../../api/index"; -import { useNavigate } from "react-router-dom"; - -const ChangePasswordPage = () => { - const navigate = useNavigate(); - const [form] = Form.useForm(); - - const onFinish = (values: any) => { - user.password(values.old_password, values.new_password).then((res: any) => { - message.success("保存成功！"); - navigate(-1); - }); - }; - - const onFinishFailed = (errorInfo: any) => { - console.log("Failed:", errorInfo); - }; - - return ( - <> - - -
-
- - - - - - - - - -
-
- - - - ); -}; - -export default ChangePasswordPage; diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 34c14b1..39728c9 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -3,7 +3,7 @@ import { Row, Col, Empty, Spin, Tabs } from "antd"; import type { TabsProps } from "antd"; import { user } from "../../api/index"; import styles from "./index.module.scss"; -import { AnyIfEmpty, useSelector } from "react-redux"; +import { useSelector } from "react-redux"; import { CoursesModel } from "./compenents/courses-model"; import myLesoon from "../../assets/images/commen/icon-mylesoon.png"; import studyTime from "../../assets/images/commen/icon-studytime.png"; diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 9ac1b17..221a602 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -32,7 +32,6 @@ const Init = lazy(async () => { // 懒加载 const LoginPage = lazy(() => import("../pages/login")); const IndexPage = lazy(() => import("../pages/index")); -const ChangePasswordPage = lazy(() => import("../pages/change-password")); const routes: RouteObject[] = [ { @@ -47,10 +46,6 @@ const routes: RouteObject[] = [ path: "/login", element: , }, - { - path: "/change-password", - element: , - }, ], }, ];