diff --git a/src/api/user.ts b/src/api/user.ts index 637208c..4aa23ab 100644 --- a/src/api/user.ts +++ b/src/api/user.ts @@ -24,8 +24,6 @@ export function courses(depId: number, categoryId: number) { } // 修改头像 -export function avatar(file: any) { - return client.put("/api/v1/user/avatar", { - file: file, - }); +export function avatar(params: any) { + return client.put("/api/v1/user/avatar", params); } diff --git a/src/main.scss b/src/main.scss index a7f5983..faf74ed 100644 --- a/src/main.scss +++ b/src/main.scss @@ -111,3 +111,16 @@ code { .adm-popup-body { border-radius: 0px 0px 16px 16px; } + +.adm-image-uploader { + --gap: none !important; +} + +.adm-space-item { + width: 100%; + padding-bottom: 0 !important; + margin-right: 0 !important; + .adm-image-uploader-cell { + display: none; + } +} diff --git a/src/pages/change-department/index.module.scss b/src/pages/change-department/index.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/change-department/index.tsx b/src/pages/change-department/index.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/member/index.tsx b/src/pages/member/index.tsx index a98d4a8..76fe41f 100644 --- a/src/pages/member/index.tsx +++ b/src/pages/member/index.tsx @@ -1,14 +1,10 @@ import { useEffect, useState } from "react"; -import { Button, Toast, Mask, Image } from "antd-mobile"; +import { ImageUploader, Toast, Mask, Image } from "antd-mobile"; import { useNavigate } from "react-router-dom"; import { user as member } from "../../api/index"; -import { - setDepKey, - setDepName, - getDepName, - studyTimeFormat, -} from "../../utils/index"; -import { logoutAction } from "../../store/user/loginUserSlice"; +import { getDepName, studyTimeFormat } from "../../utils/index"; +import { loginAction, logoutAction } from "../../store/user/loginUserSlice"; +import { ImageUploadItem } from "antd-mobile/es/components/image-uploader"; import styles from "./index.module.scss"; import { useDispatch, useSelector } from "react-redux"; import { TabBarFooter } from "../../components"; @@ -17,12 +13,15 @@ import moreIcon from "../../assets/images/commen/icon-more.png"; const MemberPage = () => { const dispatch = useDispatch(); const navigate = useNavigate(); - const systemConfig = useSelector((state: any) => state.systemConfig.value); const [loading, setLoading] = useState(false); - const [departmentsMenu, setDepartmentsMenu] = useState([]); const [currentDepartment, setCurrentDepartment] = useState(""); const [visible, setVisible] = useState(false); const [stats, setStats] = useState({}); + const [fileList, setFileList] = useState([ + { + url: "", + }, + ]); const user = useSelector((state: any) => state.loginUser.value.user); const departments = useSelector( (state: any) => state.loginUser.value.departments @@ -38,22 +37,6 @@ const MemberPage = () => { useEffect(() => { if (departments.length > 0) { setCurrentDepartment(getDepName() || departments[0].name); - const arr: any = [ - { - key: "1", - type: "group", - label: "部门", - children: [], - }, - ]; - departments.map((item: any) => { - arr[0].children.push({ - key: item.id, - label: item.name, - disabled: item.name === currentDepartment, - }); - }); - setDepartmentsMenu(arr); } }, [departments]); @@ -88,6 +71,48 @@ const MemberPage = () => { return value; }; + const beforeUpload = (file: File) => { + if (file.size > 2 * 1024 * 1024) { + Toast.show("超过2M限制,不允许上传"); + return null; + } + return file; + }; + + const propsUpload = async (file: File) => { + console.log(file); + member.avatar(file).then((res: any) => { + Toast.show("头像更换成功"); + getData(); + }); + }; + + const mockUpload = async (file: File) => { + setVisible(false); + const data = new FormData(); + data.append("file", file); + try { + let res = await member.avatar(data); + if (res) { + Toast.show("头像更换成功"); + getUser(); + } + } catch (e) { + console.error("上传失败", e); + } + return { + url: URL.createObjectURL(file), + }; + }; + + const getUser = () => { + member.detail().then((res: any) => { + const data = res.data; + dispatch(loginAction(data)); + setFileList([]); + }); + }; + return (
@@ -96,12 +121,13 @@ const MemberPage = () => { {user && user.name && ( <>
@@ -237,8 +263,31 @@ const MemberPage = () => { >
-
切换部门
-
更换头像
+
{ + setVisible(false); + if (departments.length === 1) { + Toast.show({ + content: "暂无可切换部门", + }); + return; + } + navigate("/change-department"); + }} + > + 切换部门 +
+ +
更换头像
+
{