From b24e4e09b1a1291c677c4b99c088ad292691df1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com>
Date: Fri, 24 Mar 2023 15:27:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=BF=A1=E6=81=AF=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E5=88=9D=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/compenents/change-password/index.tsx   |  2 +-
 src/compenents/header/index.module.scss    |  1 +
 src/compenents/header/index.tsx            | 11 ++-
 src/compenents/index.ts                    |  1 +
 src/compenents/user-info/index.module.scss |  0
 src/compenents/user-info/index.tsx         | 93 ++++++++++++++++++++++
 6 files changed, 105 insertions(+), 3 deletions(-)
 create mode 100644 src/compenents/user-info/index.module.scss
 create mode 100644 src/compenents/user-info/index.tsx

diff --git a/src/compenents/change-password/index.tsx b/src/compenents/change-password/index.tsx
index 7a35721..10764eb 100644
--- a/src/compenents/change-password/index.tsx
+++ b/src/compenents/change-password/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Modal, Select, Form, Input, message } from "antd";
+import { Modal, Form, Input, message } from "antd";
 import styles from "./index.module.less";
 import { user } from "../../api/index";
 
diff --git a/src/compenents/header/index.module.scss b/src/compenents/header/index.module.scss
index 11240ea..1bfa1de 100644
--- a/src/compenents/header/index.module.scss
+++ b/src/compenents/header/index.module.scss
@@ -7,6 +7,7 @@
   height: 60px;
   background: #ffffff;
   box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04);
+  z-index: 100;
   .main-header {
     width: 1200px;
     height: 60px;
diff --git a/src/compenents/header/index.tsx b/src/compenents/header/index.tsx
index 5dac552..c638761 100644
--- a/src/compenents/header/index.tsx
+++ b/src/compenents/header/index.tsx
@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { Link, useNavigate } from "react-router-dom";
 import { logoutAction } from "../../store/user/loginUserSlice";
 import { ChangePasswordModel } from "../change-password";
+import { UserInfoModel } from "../user-info";
 import { ExclamationCircleFilled } from "@ant-design/icons";
 const { confirm } = Modal;
 
@@ -16,9 +17,9 @@ export const Header: React.FC = () => {
     (state: any) => state.loginUser.value.departments
   );
   const config = useSelector((state: any) => state.systemConfig.value);
-
   const [changePasswordVisiale, setChangePasswordVisiale] =
     useState<boolean>(false);
+  const [userInfoVisiale, setUserInfoVisiale] = useState<boolean>(false);
 
   const onClick: MenuProps["onClick"] = ({ key }) => {
     if (key === "login_out") {
@@ -40,7 +41,7 @@ export const Header: React.FC = () => {
     } else if (key === "change_password") {
       setChangePasswordVisiale(true);
     } else if (key === "user_info") {
-      navigate("/user_info");
+      setUserInfoVisiale(true);
     }
   };
 
@@ -107,6 +108,12 @@ export const Header: React.FC = () => {
               setChangePasswordVisiale(false);
             }}
           ></ChangePasswordModel>
+          <UserInfoModel
+            open={userInfoVisiale}
+            onCancel={() => {
+              setUserInfoVisiale(false);
+            }}
+          ></UserInfoModel>
         </div>
       </div>
     </div>
diff --git a/src/compenents/index.ts b/src/compenents/index.ts
index 4c8b5b8..f890b50 100644
--- a/src/compenents/index.ts
+++ b/src/compenents/index.ts
@@ -3,3 +3,4 @@ export * from "./no-footer";
 export * from "./no-header";
 export * from "./header";
 export * from "./change-password";
+export * from "./user-info"
diff --git a/src/compenents/user-info/index.module.scss b/src/compenents/user-info/index.module.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/compenents/user-info/index.tsx b/src/compenents/user-info/index.tsx
new file mode 100644
index 0000000..efd8373
--- /dev/null
+++ b/src/compenents/user-info/index.tsx
@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from "react";
+import { Modal, Image, Form, Input, message } from "antd";
+import styles from "./index.module.less";
+import { user } from "../../api/index";
+
+interface PropInterface {
+  open: boolean;
+  onCancel: () => void;
+}
+
+export const UserInfoModel: React.FC<PropInterface> = ({ open, onCancel }) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState<boolean>(true);
+  const [avatar, setAvatar] = useState<string>("");
+
+  useEffect(() => {
+    getUser();
+  }, [form, open]);
+
+  const getUser = () => {
+    user.detail().then((res: any) => {
+      setAvatar(res.data.user.avatar);
+      form.setFieldsValue({
+        name: res.data.user.name,
+      });
+    });
+  };
+
+  const onFinish = (values: any) => {
+    user.password(avatar, values.name).then((res: any) => {
+      message.success("保存成功！");
+      onCancel();
+    });
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log("Failed:", errorInfo);
+  };
+
+  return (
+    <>
+      <Modal
+        title="个人信息"
+        centered
+        forceRender
+        open={open}
+        width={416}
+        onOk={() => form.submit()}
+        onCancel={() => onCancel()}
+        maskClosable={false}
+      >
+        <div className="float-left mt-24">
+          <Form
+            form={form}
+            name="user-info"
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 16 }}
+            initialValues={{ remember: true }}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+            autoComplete="off"
+          >
+            <Form.Item
+              label="学员头像"
+              labelCol={{ style: { marginTop: 15, marginLeft: 52 } }}
+              name="avatar"
+            >
+              <div className="d-flex">
+                {avatar && (
+                  <Image
+                    width={60}
+                    height={60}
+                    style={{ borderRadius: "50%" }}
+                    src={avatar}
+                    preview={false}
+                  />
+                )}
+                <div className="d-flex ml-16">更换头像</div>
+              </div>
+            </Form.Item>
+            <Form.Item label="修改姓名" name="name">
+              <Input
+                style={{ width: 200 }}
+                autoComplete="off"
+                placeholder="请输入姓名"
+              />
+            </Form.Item>
+          </Form>
+        </div>
+      </Modal>
+    </>
+  );
+};