mirror of
https://github.com/PlayEdu/h5.git
synced 2025-06-22 20:36:11 +08:00
登录页面和我的页面初步
This commit is contained in:
禺狨
parent
5486507b3e
commit
b6b9c3514a
@ -1,4 +1,6 @@
|
||||
.img-box {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@ import empty from "../../assets/images/commen/empty.png";
|
||||
export const Empty: React.FC = () => {
|
||||
return (
|
||||
<div className={styles["img-box"]}>
|
||||
<Image src={empty} width={400} height={400} />
|
||||
<Image src={empty} width={250} height={250} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,4 +1,12 @@
|
||||
.support-box {
|
||||
.main-body {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-image: url("../../assets//images/login/bg.png");
|
||||
background-size: 100% 100%;
|
||||
.support-box {
|
||||
position: fixed;
|
||||
bottom: 90px;
|
||||
left: 0;
|
||||
@ -8,4 +16,137 @@
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
line-height: 12px;
|
||||
margin-top: 200px;
|
||||
}
|
||||
.content-box {
|
||||
width: 100%;
|
||||
float: left;
|
||||
height: auto;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 20px;
|
||||
.top-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
.user-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.other-cont {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.name {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
line-height: 24px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.departments {
|
||||
width: 100%;
|
||||
float: left;
|
||||
height: auto;
|
||||
margin-top: 20px;
|
||||
.department-name {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
background: rgba(255, 77, 79, 0.1);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ff4d4f;
|
||||
line-height: 24px;
|
||||
box-sizing: border-box;
|
||||
padding: 0px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.more-button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
margin-top: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 50px;
|
||||
.stat-item {
|
||||
width: auto;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 34px;
|
||||
.time {
|
||||
height: 20px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
line-height: 20px;
|
||||
strong {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.tit {
|
||||
height: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
line-height: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.records-content {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
gap: 11px;
|
||||
margin-top: 50px;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
position: relative;
|
||||
.record-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
height: 92px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 15px;
|
||||
.name {
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
line-height: 12px;
|
||||
}
|
||||
.value {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
line-height: 20px;
|
||||
margin-top: 20px;
|
||||
strong {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { user } from "../../api/index";
|
||||
import { Button, Toast, SpinLoading, Input, Image } from "antd-mobile";
|
||||
import { user as member } from "../../api/index";
|
||||
import {
|
||||
setDepKey,
|
||||
setDepName,
|
||||
getDepName,
|
||||
studyTimeFormat,
|
||||
} from "../../utils/index";
|
||||
import styles from "./index.module.scss";
|
||||
import { useSelector } from "react-redux";
|
||||
import { TabBarFooter } from "../../components";
|
||||
@ -9,6 +16,12 @@ const MemberPage = () => {
|
||||
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 [stats, setStats] = useState<any>({});
|
||||
const user = useSelector((state: any) => state.loginUser.value.user);
|
||||
const departments = useSelector(
|
||||
(state: any) => state.loginUser.value.departments
|
||||
);
|
||||
@ -20,9 +33,202 @@ const MemberPage = () => {
|
||||
document.title = "我的";
|
||||
}, []);
|
||||
|
||||
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]);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentDepId === 0) {
|
||||
return;
|
||||
}
|
||||
getData();
|
||||
}, [tabKey, currentDepId]);
|
||||
|
||||
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 getTotal = (num1: number, num2: number) => {
|
||||
let value = 0;
|
||||
if (num1) {
|
||||
value = value + num1;
|
||||
}
|
||||
if (num2 && num2 > 0) {
|
||||
value = value + num2;
|
||||
}
|
||||
|
||||
return value;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="main-body">
|
||||
<div className={styles["content-box"]}>我的</div>
|
||||
<div className={styles["main-body"]}>
|
||||
<div className={styles["content-box"]}>
|
||||
<div className={styles["top-content"]}>
|
||||
<div className={styles["user-info"]}>
|
||||
{user && user.name && (
|
||||
<>
|
||||
<Image
|
||||
loading="lazy"
|
||||
style={{
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: "50%",
|
||||
marginRight: 20,
|
||||
}}
|
||||
src={user.avatar}
|
||||
/>
|
||||
<div className={styles["other-cont"]}>
|
||||
<div className={styles["name"]}>{user.name}</div>
|
||||
<div className={styles["departments"]}>
|
||||
<div className={styles["department-name"]}>
|
||||
{currentDepartment}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Image
|
||||
className={styles["more-button"]}
|
||||
onClick={() => setClick()}
|
||||
src={moreIcon}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles["stats-content"]}>
|
||||
<div className={styles["stat-item"]}>
|
||||
<span className={styles["time"]}>
|
||||
{studyTimeFormat(stats.today_learn_duration)[0] !== 0 && (
|
||||
<>
|
||||
<strong>
|
||||
{studyTimeFormat(stats.today_learn_duration)[0] || 0}{" "}
|
||||
</strong>
|
||||
天
|
||||
</>
|
||||
)}
|
||||
{studyTimeFormat(stats.today_learn_duration)[1] !== 0 && (
|
||||
<>
|
||||
<strong>
|
||||
{" "}
|
||||
{studyTimeFormat(stats.today_learn_duration)[1] || 0}{" "}
|
||||
</strong>
|
||||
时
|
||||
</>
|
||||
)}
|
||||
<strong>
|
||||
{" "}
|
||||
{studyTimeFormat(stats.today_learn_duration)[2] || 0}{" "}
|
||||
</strong>
|
||||
分
|
||||
<strong>
|
||||
{" "}
|
||||
{studyTimeFormat(stats.today_learn_duration)[3] || 0}{" "}
|
||||
</strong>
|
||||
秒
|
||||
</span>
|
||||
<span className={styles["tit"]}>今日学习</span>
|
||||
</div>
|
||||
<div className={styles["stat-item"]}>
|
||||
<span className={styles["time"]}>
|
||||
{studyTimeFormat(stats.learn_duration || 0)[0] !== 0 && (
|
||||
<>
|
||||
<strong>
|
||||
{studyTimeFormat(stats.learn_duration || 0)[0] || 0}{" "}
|
||||
</strong>
|
||||
天
|
||||
</>
|
||||
)}
|
||||
{studyTimeFormat(stats.learn_duration || 0)[1] !== 0 && (
|
||||
<>
|
||||
<strong>
|
||||
{" "}
|
||||
{studyTimeFormat(stats.learn_duration || 0)[1] || 0}{" "}
|
||||
</strong>
|
||||
时
|
||||
</>
|
||||
)}
|
||||
<strong>
|
||||
{" "}
|
||||
{studyTimeFormat(stats.learn_duration || 0)[2] || 0}{" "}
|
||||
</strong>
|
||||
分
|
||||
<strong>
|
||||
{" "}
|
||||
{studyTimeFormat(stats.learn_duration || 0)[3] || 0}{" "}
|
||||
</strong>
|
||||
秒
|
||||
</span>
|
||||
<span className={styles["tit"]}>累计学习</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles["records-content"]}>
|
||||
<div className={styles["record-item"]}>
|
||||
<div className={styles["name"]}>所在部门</div>
|
||||
<div className={styles["value"]}>{currentDepartment}</div>
|
||||
</div>
|
||||
<div className={styles["record-item"]}>
|
||||
<div className={styles["name"]}>课时总进度</div>
|
||||
<div className={styles["value"]}>
|
||||
<strong>
|
||||
{getTotal(
|
||||
stats.required_finished_course_count,
|
||||
stats.nun_required_finished_course_count
|
||||
)}{" "}
|
||||
</strong>
|
||||
/{" "}
|
||||
{getTotal(
|
||||
stats.required_course_count,
|
||||
stats.nun_required_course_count
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles["record-item"]}>
|
||||
<div className={styles["name"]}>必修课</div>
|
||||
<div className={styles["value"]}>
|
||||
<strong>{stats.required_finished_course_count || 0} </strong>/{" "}
|
||||
{stats.required_course_count || 0}
|
||||
</div>
|
||||
</div>
|
||||
{stats.nun_required_course_count > 0 && (
|
||||
<div className={styles["record-item"]}>
|
||||
<div className={styles["name"]}>选修课</div>
|
||||
<div className={styles["value"]}>
|
||||
<strong>
|
||||
{stats.nun_required_finished_course_count || 0}{" "}
|
||||
</strong>
|
||||
/ {stats.nun_required_course_count || 0}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles["support-box"]}>「PlayEdu提供技术支持」</div>
|
||||
<TabBarFooter></TabBarFooter>
|
||||
</div>
|
||||
|
||||
@ -50,3 +50,13 @@ export function changeAppUrl(str: string) {
|
||||
return str + "/";
|
||||
}
|
||||
}
|
||||
|
||||
export function studyTimeFormat(dateStr: number) {
|
||||
var d = moment.duration(dateStr / 1000, "seconds");
|
||||
let value = [];
|
||||
value.push(Math.floor(d.asDays()));
|
||||
value.push(d.hours());
|
||||
value.push(d.minutes());
|
||||
value.push(d.seconds());
|
||||
return value;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user