From b6b9c3514a2f0aded59331c6a3b106cc8f7379fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com> Date: Sun, 25 Jun 2023 16:29:59 +0800 Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=A1=B5=E9=9D=A2=E5=92=8C?= =?UTF-8?q?=E6=88=91=E7=9A=84=E9=A1=B5=E9=9D=A2=E5=88=9D=E6=AD=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/empty/index.module.scss | 2 + src/components/empty/index.tsx | 2 +- src/pages/member/index.module.scss | 155 +++++++++++++++++- src/pages/member/index.tsx | 212 ++++++++++++++++++++++++- src/utils/index.ts | 10 ++ 5 files changed, 370 insertions(+), 11 deletions(-) diff --git a/src/components/empty/index.module.scss b/src/components/empty/index.module.scss index be48ad6..f4d21b3 100644 --- a/src/components/empty/index.module.scss +++ b/src/components/empty/index.module.scss @@ -1,4 +1,6 @@ .img-box { width: 100%; height: auto; + display: flex; + justify-content: center; } diff --git a/src/components/empty/index.tsx b/src/components/empty/index.tsx index 98528e9..1db68b3 100644 --- a/src/components/empty/index.tsx +++ b/src/components/empty/index.tsx @@ -6,7 +6,7 @@ import empty from "../../assets/images/commen/empty.png"; export const Empty: React.FC = () => { return (
- +
); }; diff --git a/src/pages/member/index.module.scss b/src/pages/member/index.module.scss index 54e2401..01c4f96 100644 --- a/src/pages/member/index.module.scss +++ b/src/pages/member/index.module.scss @@ -1,11 +1,152 @@ -.support-box { +.main-body { position: fixed; - bottom: 90px; + bottom: 0; left: 0; right: 0; - font-size: 12px; - font-weight: 400; - color: rgba(0, 0, 0, 0.3); - line-height: 12px; - margin-top: 200px; + top: 0; + background-image: url("../../assets//images/login/bg.png"); + background-size: 100% 100%; + .support-box { + position: fixed; + bottom: 90px; + left: 0; + right: 0; + font-size: 12px; + font-weight: 400; + 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; + } + } + } + } + } } diff --git a/src/pages/member/index.tsx b/src/pages/member/index.tsx index c8d0533..e508dce 100644 --- a/src/pages/member/index.tsx +++ b/src/pages/member/index.tsx @@ -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(false); const [tabKey, setTabKey] = useState(0); + const [departmentsMenu, setDepartmentsMenu] = useState([]); + const [currentDepartment, setCurrentDepartment] = useState(""); + const [learnCourseRecords, setLearnCourseRecords] = useState({}); + const [learnCourseHourCount, setLearnCourseHourCount] = useState({}); + const [stats, setStats] = useState({}); + 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 ( -
-
我的
+
+
+
+
+ {user && user.name && ( + <> + +
+
{user.name}
+
+
+ {currentDepartment} +
+
+
+ + )} +
+ setClick()} + src={moreIcon} + /> +
+
+
+ + {studyTimeFormat(stats.today_learn_duration)[0] !== 0 && ( + <> + + {studyTimeFormat(stats.today_learn_duration)[0] || 0}{" "} + + 天 + + )} + {studyTimeFormat(stats.today_learn_duration)[1] !== 0 && ( + <> + + {" "} + {studyTimeFormat(stats.today_learn_duration)[1] || 0}{" "} + + 时 + + )} + + {" "} + {studyTimeFormat(stats.today_learn_duration)[2] || 0}{" "} + + 分 + + {" "} + {studyTimeFormat(stats.today_learn_duration)[3] || 0}{" "} + + 秒 + + 今日学习 +
+
+ + {studyTimeFormat(stats.learn_duration || 0)[0] !== 0 && ( + <> + + {studyTimeFormat(stats.learn_duration || 0)[0] || 0}{" "} + + 天 + + )} + {studyTimeFormat(stats.learn_duration || 0)[1] !== 0 && ( + <> + + {" "} + {studyTimeFormat(stats.learn_duration || 0)[1] || 0}{" "} + + 时 + + )} + + {" "} + {studyTimeFormat(stats.learn_duration || 0)[2] || 0}{" "} + + 分 + + {" "} + {studyTimeFormat(stats.learn_duration || 0)[3] || 0}{" "} + + 秒 + + 累计学习 +
+
+
+
+
所在部门
+
{currentDepartment}
+
+
+
课时总进度
+
+ + {getTotal( + stats.required_finished_course_count, + stats.nun_required_finished_course_count + )}{" "} + + /{" "} + {getTotal( + stats.required_course_count, + stats.nun_required_course_count + )} +
+
+
+
必修课
+
+ {stats.required_finished_course_count || 0} /{" "} + {stats.required_course_count || 0} +
+
+ {stats.nun_required_course_count > 0 && ( +
+
选修课
+
+ + {stats.nun_required_finished_course_count || 0}{" "} + + / {stats.nun_required_course_count || 0} +
+
+ )} +
+
「PlayEdu提供技术支持」
diff --git a/src/utils/index.ts b/src/utils/index.ts index c262712..b952b7d 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -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; +}