我的页面设置弹窗以及退出登录功能

This commit is contained in:
禺狨 2023-06-25 16:56:12 +08:00
parent b6b9c3514a
commit 6e2b2beba8
2 changed files with 82 additions and 12 deletions

View File

@ -150,3 +150,42 @@
}
}
}
.dialog-body {
position: fixed;
bottom: 0px;
left: 20px;
right: 20px;
height: 253px;
.dialog-box {
width: 100%;
height: 162px;
background: #ffffff;
border-radius: 8px;
box-sizing: border-box;
padding: 0px 20px;
.button-item {
width: 100%;
height: 54px;
font-size: 16px;
font-weight: 400;
color: rgba(0, 0, 0, 0.88);
line-height: 54px;
text-align: left;
}
}
.dialog-button {
width: 100%;
height: 54px;
background: #ffffff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
line-height: 54px;
margin-top: 10px;
}
}

View File

@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { Button, Toast, SpinLoading, Input, Image } from "antd-mobile";
import { Button, Toast, Mask, Image } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { user as member } from "../../api/index";
import {
setDepKey,
@ -7,19 +8,20 @@ import {
getDepName,
studyTimeFormat,
} from "../../utils/index";
import { logoutAction } from "../../store/user/loginUserSlice";
import styles from "./index.module.scss";
import { useSelector } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import { TabBarFooter } from "../../components";
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<boolean>(false);
const [tabKey, setTabKey] = useState(0);
const [departmentsMenu, setDepartmentsMenu] = useState<any>([]);
const [currentDepartment, setCurrentDepartment] = useState<string>("");
const [learnCourseRecords, setLearnCourseRecords] = useState<any>({});
const [learnCourseHourCount, setLearnCourseHourCount] = useState<any>({});
const [visible, setVisible] = useState(false);
const [stats, setStats] = useState<any>({});
const user = useSelector((state: any) => state.loginUser.value.user);
const departments = useSelector(
@ -60,21 +62,19 @@ const MemberPage = () => {
return;
}
getData();
}, [tabKey, currentDepId]);
}, [currentDepId, user]);
const getData = () => {
setLoading(true);
member.courses(currentDepId, 0).then((res: any) => {
const records = res.data.learn_course_records;
setStats(res.data.stats);
setLearnCourseRecords(records);
setLearnCourseHourCount(res.data.user_course_hour_count);
setLoading(false);
});
};
const setClick = () => {};
const setClick = () => {
setVisible(true);
};
const getTotal = (num1: number, num2: number) => {
let value = 0;
@ -96,7 +96,6 @@ const MemberPage = () => {
{user && user.name && (
<>
<Image
loading="lazy"
style={{
width: 100,
height: 100,
@ -230,6 +229,38 @@ const MemberPage = () => {
</div>
</div>
<div className={styles["support-box"]}>PlayEdu提供技术支持</div>
<Mask
visible={visible}
onMaskClick={() => {
setVisible(false);
}}
>
<div className={styles["dialog-body"]}>
<div className={styles["dialog-box"]}>
<div className={styles["button-item"]}></div>
<div className={styles["button-item"]}></div>
<div
className={styles["button-item"]}
onClick={() => {
setVisible(false);
navigate("/change-password");
}}
>
</div>
</div>
<div
className={styles["dialog-button"]}
onClick={() => {
setVisible(false);
dispatch(logoutAction());
window.location.href = "/login";
}}
>
退
</div>
</div>
</Mask>
<TabBarFooter></TabBarFooter>
</div>
);