mirror of
https://github.com/PlayEdu/frontend.git
synced 2025-06-29 00:02:55 +08:00
详情页加载优化
This commit is contained in:
禺狨
parent
135a9ee561
commit
5ce52c520a
@ -1,5 +1,5 @@
|
||||
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 { useParams } from "react-router-dom";
|
||||
import { course as Course } from "../../api/index";
|
||||
@ -9,7 +9,7 @@ import { Empty } from "../../compenents";
|
||||
|
||||
const CoursePage = () => {
|
||||
const params = useParams();
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [course, setCourse] = useState<any>({});
|
||||
const [chapters, setChapters] = useState<any>([]);
|
||||
const [hours, setHours] = useState<any>({});
|
||||
@ -23,177 +23,159 @@ const CoursePage = () => {
|
||||
|
||||
const getDetail = () => {
|
||||
setLoading(true);
|
||||
Course.detail(Number(params.courseId)).then((res: any) => {
|
||||
setCourse(res.data.course);
|
||||
setChapters(res.data.chapters);
|
||||
setHours(res.data.hours);
|
||||
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);
|
||||
});
|
||||
Course.detail(Number(params.courseId))
|
||||
.then((res: any) => {
|
||||
setCourse(res.data.course);
|
||||
setChapters(res.data.chapters);
|
||||
setHours(res.data.hours);
|
||||
if (res.data.learn_record) {
|
||||
setLearnRecord(res.data.learn_record);
|
||||
}
|
||||
setTotalHours(arr);
|
||||
}
|
||||
setLoading(false);
|
||||
});
|
||||
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);
|
||||
}
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((e) => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className={styles["top-cont"]}>
|
||||
<div className="j-b-flex">
|
||||
<div className="d-flex">
|
||||
<Image
|
||||
width={120}
|
||||
height={90}
|
||||
style={{ borderRadius: 10 }}
|
||||
preview={false}
|
||||
src={course.thumb}
|
||||
/>
|
||||
<div className={styles["info"]}>
|
||||
<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>
|
||||
{loading && (
|
||||
<Row
|
||||
style={{
|
||||
width: 1200,
|
||||
margin: "0 auto",
|
||||
paddingTop: 14,
|
||||
minHeight: 301,
|
||||
}}
|
||||
>
|
||||
<div className="float-left d-j-flex mt-50">
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
</Row>
|
||||
)}
|
||||
{!loading && (
|
||||
<>
|
||||
<div className={styles["top-cont"]}>
|
||||
<div className="j-b-flex">
|
||||
<div className="d-flex">
|
||||
<Image
|
||||
width={120}
|
||||
height={90}
|
||||
style={{ borderRadius: 10 }}
|
||||
preview={false}
|
||||
src={course.thumb}
|
||||
/>
|
||||
<div className={styles["info"]}>
|
||||
<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>
|
||||
{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>
|
||||
{course.short_desc && (
|
||||
<div className={styles["desc"]}>{course.short_desc}</div>
|
||||
)}
|
||||
</div>
|
||||
{JSON.stringify(learnRecord) === "{}" &&
|
||||
JSON.stringify(learnHourRecord) === "{}" && (
|
||||
<Progress
|
||||
type="circle"
|
||||
strokeColor="#FF4D4F"
|
||||
trailColor="#F6F6F6"
|
||||
size={90}
|
||||
strokeWidth={8}
|
||||
percent={0}
|
||||
format={(percent) => `${percent}%`}
|
||||
/>
|
||||
<div className={styles["chapters-hours-cont"]}>
|
||||
{chapters.length === 0 && JSON.stringify(hours) === "{}" && (
|
||||
<Empty />
|
||||
)}
|
||||
{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>
|
||||
{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] && (
|
||||
{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={it.id}
|
||||
id={item.id}
|
||||
cid={item.course_id}
|
||||
title={it.title}
|
||||
record={learnHourRecord[it.id]}
|
||||
title={item.title}
|
||||
record={learnHourRecord[item.id]}
|
||||
records={learnHourRecord}
|
||||
duration={it.duration}
|
||||
duration={item.duration}
|
||||
progress={
|
||||
(learnHourRecord[it.id].finished_duration * 100) /
|
||||
learnHourRecord[it.id].total_duration
|
||||
(learnHourRecord[item.id].finished_duration * 100) /
|
||||
learnHourRecord[item.id].total_duration
|
||||
}
|
||||
onChange={() => getDetail()}
|
||||
totalHours={totalHours}
|
||||
onChange={() => getDetail()}
|
||||
></HourCompenent>
|
||||
)}
|
||||
{!learnHourRecord[it.id] && (
|
||||
{!learnHourRecord[item.id] && (
|
||||
<HourCompenent
|
||||
id={it.id}
|
||||
id={item.id}
|
||||
cid={item.course_id}
|
||||
title={it.title}
|
||||
title={item.title}
|
||||
record={null}
|
||||
records={learnHourRecord}
|
||||
duration={it.duration}
|
||||
duration={item.duration}
|
||||
progress={0}
|
||||
totalHours={totalHours}
|
||||
onChange={() => getDetail()}
|
||||
@ -202,10 +184,52 @@ const CoursePage = () => {
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user