yexuejc007/PlayEdu-frontend
1
0
Fork 0
mirror of https://github.com/PlayEdu/frontend.git synced 2025-07-16 02:57:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

详情页加载优化

Browse Source
This commit is contained in:
禺狨 2023-04-04 09:13:59 +08:00
parent 135a9ee561
commit 5ce52c520a
1 changed files with 178 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

332
src/pages/course/index.tsx
View File

@ -1,5 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Image, Progress } from "antd"; import { Row, Col, Spin, Image, Progress } from "antd";
import styles from "./index.module.scss"; import styles from "./index.module.scss";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { course as Course } from "../../api/index"; import { course as Course } from "../../api/index";
@ -9,7 +9,7 @@ import { Empty } from "../../compenents";
const CoursePage = () => { const CoursePage = () => {
const params = useParams(); const params = useParams();
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(true);
const [course, setCourse] = useState<any>({}); const [course, setCourse] = useState<any>({});
const [chapters, setChapters] = useState<any>([]); const [chapters, setChapters] = useState<any>([]);
const [hours, setHours] = useState<any>({}); const [hours, setHours] = useState<any>({});
@ -23,177 +23,159 @@ const CoursePage = () => {
const getDetail = () => { const getDetail = () => {
setLoading(true); setLoading(true);
Course.detail(Number(params.courseId)).then((res: any) => { Course.detail(Number(params.courseId))
setCourse(res.data.course); .then((res: any) => {
setChapters(res.data.chapters); setCourse(res.data.course);
setHours(res.data.hours); setChapters(res.data.chapters);
if (res.data.learn_record) { setHours(res.data.hours);
setLearnRecord(res.data.learn_record); if (res.data.learn_record) {
} setLearnRecord(res.data.learn_record);
if (res.data.learn_hour_records) {
setLearnHourRecord(res.data.learn_hour_records);
}
if (res.data.chapters.length === 0) {
setTotalHours(res.data.hours[0]);
} else if (res.data.chapters.length > 0) {
const arr: any = [];
for (let key in res.data.hours) {
res.data.hours[key].map((item: any) => {
arr.push(item);
});
} }
setTotalHours(arr); if (res.data.learn_hour_records) {
} setLearnHourRecord(res.data.learn_hour_records);
setLoading(false); }
}); if (res.data.chapters.length === 0) {
setTotalHours(res.data.hours[0]);
} else if (res.data.chapters.length > 0) {
const arr: any = [];
for (let key in res.data.hours) {
res.data.hours[key].map((item: any) => {
arr.push(item);
});
}
setTotalHours(arr);
}
setLoading(false);
})
.catch((e) => {
setLoading(false);
});
}; };
return ( return (
<div className="container"> <div className="container">
<div className={styles["top-cont"]}> {loading && (
<div className="j-b-flex"> <Row
<div className="d-flex"> style={{
<Image width: 1200,
width={120} margin: "0 auto",
height={90} paddingTop: 14,
style={{ borderRadius: 10 }} minHeight: 301,
preview={false} }}
src={course.thumb} >
/> <div className="float-left d-j-flex mt-50">
<div className={styles["info"]}> <Spin size="large" />
<div className={styles["title"]}>{course.title}</div> </div>
<div className={styles["status"]}> </Row>
{course.is_required === 1 && ( )}
<div className={styles["type"]}>必修课</div> {!loading && (
)} <>
{course.is_required === 0 && ( <div className={styles["top-cont"]}>
<div className={styles["active-type"]}>选修课</div> <div className="j-b-flex">
)} <div className="d-flex">
{learnRecord.progress / 100 >= 100 && ( <Image
<div className={styles["success"]}> width={120}
<Image height={90}
width={24} style={{ borderRadius: 10 }}
height={24} preview={false}
src={mediaIcon} src={course.thumb}
preview={false} />
/> <div className={styles["info"]}>
<span className="ml-8">恭喜你学完此课程!</span> <div className={styles["title"]}>{course.title}</div>
<div className={styles["status"]}>
{course.is_required === 1 && (
<div className={styles["type"]}>必修课</div>
)}
{course.is_required === 0 && (
<div className={styles["active-type"]}>选修课</div>
)}
{learnRecord.progress / 100 >= 100 && (
<div className={styles["success"]}>
<Image
width={24}
height={24}
src={mediaIcon}
preview={false}
/>
<span className="ml-8">恭喜你学完此课程!</span>
</div>
)}
</div> </div>
)} </div>
</div> </div>
{JSON.stringify(learnRecord) === "{}" &&
JSON.stringify(learnHourRecord) === "{}" && (
<Progress
type="circle"
strokeColor="#FF4D4F"
trailColor="#F6F6F6"
size={90}
strokeWidth={8}
percent={0}
format={(percent) => `${percent}%`}
/>
)}
{JSON.stringify(learnRecord) === "{}" &&
JSON.stringify(learnHourRecord) !== "{}" && (
<Progress
type="circle"
strokeColor="#FF4D4F"
trailColor="#F6F6F6"
size={90}
strokeWidth={8}
percent={1}
format={(percent) => `${percent}%`}
/>
)}
{JSON.stringify(learnRecord) !== "{}" &&
JSON.stringify(learnHourRecord) !== "{}" && (
<Progress
type="circle"
strokeColor="#FF4D4F"
trailColor="#F6F6F6"
size={90}
strokeWidth={8}
percent={learnRecord.progress / 100}
format={(percent) => `${percent}%`}
/>
)}
</div> </div>
{course.short_desc && (
<div className={styles["desc"]}>{course.short_desc}</div>
)}
</div> </div>
{JSON.stringify(learnRecord) === "{}" && <div className={styles["chapters-hours-cont"]}>
JSON.stringify(learnHourRecord) === "{}" && ( {chapters.length === 0 && JSON.stringify(hours) === "{}" && (
<Progress <Empty />
type="circle"
strokeColor="#FF4D4F"
trailColor="#F6F6F6"
size={90}
strokeWidth={8}
percent={0}
format={(percent) => `${percent}%`}
/>
)} )}
{JSON.stringify(learnRecord) === "{}" && {chapters.length === 0 && JSON.stringify(hours) !== "{}" && (
JSON.stringify(learnHourRecord) !== "{}" && ( <div className={styles["hours-list-box"]}>
<Progress {hours[0].map((item: any, index: number) => (
type="circle" <div key={item.id} className={styles["hours-it"]}>
strokeColor="#FF4D4F" {learnHourRecord[item.id] && (
trailColor="#F6F6F6"
size={90}
strokeWidth={8}
percent={1}
format={(percent) => `${percent}%`}
/>
)}
{JSON.stringify(learnRecord) !== "{}" &&
JSON.stringify(learnHourRecord) !== "{}" && (
<Progress
type="circle"
strokeColor="#FF4D4F"
trailColor="#F6F6F6"
size={90}
strokeWidth={8}
percent={learnRecord.progress / 100}
format={(percent) => `${percent}%`}
/>
)}
</div>
{course.short_desc && (
<div className={styles["desc"]}>{course.short_desc}</div>
)}
</div>
<div className={styles["chapters-hours-cont"]}>
{chapters.length === 0 && JSON.stringify(hours) === "{}" && <Empty />}
{chapters.length === 0 && JSON.stringify(hours) !== "{}" && (
<div className={styles["hours-list-box"]}>
{hours[0].map((item: any, index: number) => (
<div key={item.id} className={styles["hours-it"]}>
{learnHourRecord[item.id] && (
<HourCompenent
id={item.id}
cid={item.course_id}
title={item.title}
record={learnHourRecord[item.id]}
records={learnHourRecord}
duration={item.duration}
progress={
(learnHourRecord[item.id].finished_duration * 100) /
learnHourRecord[item.id].total_duration
}
totalHours={totalHours}
onChange={() => getDetail()}
></HourCompenent>
)}
{!learnHourRecord[item.id] && (
<HourCompenent
id={item.id}
cid={item.course_id}
title={item.title}
record={null}
records={learnHourRecord}
duration={item.duration}
progress={0}
totalHours={totalHours}
onChange={() => getDetail()}
></HourCompenent>
)}
</div>
))}
</div>
)}
{chapters.length > 0 && JSON.stringify(hours) !== "{}" && (
<div className={styles["hours-list-box"]}>
{chapters.map((item: any, index: number) => (
<div key={item.id} className={styles["chapter-it"]}>
<div className={styles["chapter-name"]}>{item.name}</div>
{hours[item.id].map((it: any, int: number) => (
<div key={it.id} className={styles["hours-it"]}>
{learnHourRecord[it.id] && (
<HourCompenent <HourCompenent
id={it.id} id={item.id}
cid={item.course_id} cid={item.course_id}
title={it.title} title={item.title}
record={learnHourRecord[it.id]} record={learnHourRecord[item.id]}
records={learnHourRecord} records={learnHourRecord}
duration={it.duration} duration={item.duration}
progress={ progress={
(learnHourRecord[it.id].finished_duration * 100) / (learnHourRecord[item.id].finished_duration * 100) /
learnHourRecord[it.id].total_duration learnHourRecord[item.id].total_duration
} }
onChange={() => getDetail()}
totalHours={totalHours} totalHours={totalHours}
onChange={() => getDetail()}
></HourCompenent> ></HourCompenent>
)} )}
{!learnHourRecord[it.id] && ( {!learnHourRecord[item.id] && (
<HourCompenent <HourCompenent
id={it.id} id={item.id}
cid={item.course_id} cid={item.course_id}
title={it.title} title={item.title}
record={null} record={null}
records={learnHourRecord} records={learnHourRecord}
duration={it.duration} duration={item.duration}
progress={0} progress={0}
totalHours={totalHours} totalHours={totalHours}
onChange={() => getDetail()} onChange={() => getDetail()}
@ -202,10 +184,52 @@ const CoursePage = () => {
</div> </div>
))} ))}
</div> </div>
))} )}
{chapters.length > 0 && JSON.stringify(hours) !== "{}" && (
<div className={styles["hours-list-box"]}>
{chapters.map((item: any, index: number) => (
<div key={item.id} className={styles["chapter-it"]}>
<div className={styles["chapter-name"]}>{item.name}</div>
{hours[item.id].map((it: any, int: number) => (
<div key={it.id} className={styles["hours-it"]}>
{learnHourRecord[it.id] && (
<HourCompenent
id={it.id}
cid={item.course_id}
title={it.title}
record={learnHourRecord[it.id]}
records={learnHourRecord}
duration={it.duration}
progress={
(learnHourRecord[it.id].finished_duration * 100) /
learnHourRecord[it.id].total_duration
}
onChange={() => getDetail()}
totalHours={totalHours}
></HourCompenent>
)}
{!learnHourRecord[it.id] && (
<HourCompenent
id={it.id}
cid={item.course_id}
title={it.title}
record={null}
records={learnHourRecord}
duration={it.duration}
progress={0}
totalHours={totalHours}
onChange={() => getDetail()}
></HourCompenent>
)}
</div>
))}
</div>
))}
</div>
)}
</div> </div>
)} </>
</div> )}
</div> </div>
); );
}; };