个人信息修改和切花部门

src/compenents/user-info/index.tsx

@@ -1,7 +1,12 @@
 import React, { useState, useEffect } from "react";
-import { Modal, Image, Form, Input, message } from "antd";
+import { Modal, Image, Form, message, Upload, Button } from "antd";
 import styles from "./index.module.less";
 import { user } from "../../api/index";
+import { useDispatch } from "react-redux";
+import { loginAction } from "../../store/user/loginUserSlice";
+import type { UploadProps } from "antd";
+import config from "../../js/config";
+import { getToken } from "../../utils/index";
 
 interface PropInterface {
   open: boolean;
@@ -9,9 +14,12 @@ interface PropInterface {
 }
 
 export const UserInfoModel: React.FC<PropInterface> = ({ open, onCancel }) => {
+  const dispatch = useDispatch();
   const [form] = Form.useForm();
   const [loading, setLoading] = useState<boolean>(true);
   const [avatar, setAvatar] = useState<string>("");
+  const [name, setName] = useState<string>("");
+  const [idCard, setIdCard] = useState<string>("");
 
   useEffect(() => {
     getUser();
@@ -20,21 +28,41 @@ export const UserInfoModel: React.FC<PropInterface> = ({ open, onCancel }) => {
   const getUser = () => {
     user.detail().then((res: any) => {
       setAvatar(res.data.user.avatar);
-      form.setFieldsValue({
-        name: res.data.user.name,
-      });
+      setName(res.data.user.name);
+      setIdCard(res.data.user.id_card);
+      dispatch(loginAction(res.data));
     });
   };
 
-  const onFinish = (values: any) => {
-    user.password(avatar, values.name).then((res: any) => {
-      message.success("保存成功！");
-      onCancel();
-    });
-  };
-
-  const onFinishFailed = (errorInfo: any) => {
-    console.log("Failed:", errorInfo);
+  const props: UploadProps = {
+    name: "file",
+    multiple: false,
+    method: "PUT",
+    action: config.app_url + "/api/v1/user/avatar",
+    headers: {
+      Accept: "application/json",
+      authorization: "Bearer " + getToken(),
+    },
+    beforeUpload: (file) => {
+      const isPNG = file.type === ("image/png" || "image/jpg");
+      if (!isPNG) {
+        message.error(`${file.name}不是图片文件`);
+      }
+      return isPNG || Upload.LIST_IGNORE;
+    },
+    onChange(info: any) {
+      const { status, response } = info.file;
+      if (status === "done") {
+        if (response.code === 0) {
+          message.success(`${info.file.name} 上传成功`);
+          getUser();
+        } else {
+          message.error(response.msg);
+        }
+      } else if (status === "error") {
+        message.error(`${info.file.name} 上传失败`);
+      }
+    },
   };
 
   return (
@@ -45,25 +73,22 @@ export const UserInfoModel: React.FC<PropInterface> = ({ open, onCancel }) => {
         forceRender
         open={open}
         width={416}
-        onOk={() => form.submit()}
         onCancel={() => onCancel()}
         maskClosable={false}
+        footer={null}
       >
-        <div className="float-left mt-24">
+        <div className="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 && (
@@ -75,15 +100,18 @@ export const UserInfoModel: React.FC<PropInterface> = ({ open, onCancel }) => {
                     preview={false}
                   />
                 )}
-                <div className="d-flex ml-16">更换头像</div>
+                <div className="d-flex ml-16">
+                  <Upload {...props} showUploadList={false}>
+                    <Button>更换头像</Button>
+                  </Upload>
+                </div>
               </div>
             </Form.Item>
-            <Form.Item label="修改姓名" name="name">
-              <Input
-                style={{ width: 200 }}
-                autoComplete="off"
-                placeholder="请输入姓名"
-              />
+            <Form.Item label="学员姓名">
+              <div>{name}</div>
+            </Form.Item>
+            <Form.Item label="身份证号" style={{ marginBottom: 16 }}>
+              <div>{idCard}</div>
             </Form.Item>
           </Form>
         </div>