yexuejc007/PlayEdu-frontend
1
0
Fork 0
mirror of https://github.com/PlayEdu/frontend.git synced 2025-07-15 19:27:38 +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

32
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,7 +23,8 @@ const CoursePage = () => {
const getDetail = () => { const getDetail = () => {
setLoading(true); setLoading(true);
Course.detail(Number(params.courseId)).then((res: any) => { Course.detail(Number(params.courseId))
.then((res: any) => {
setCourse(res.data.course); setCourse(res.data.course);
setChapters(res.data.chapters); setChapters(res.data.chapters);
setHours(res.data.hours); setHours(res.data.hours);
@ -45,11 +46,30 @@ const CoursePage = () => {
setTotalHours(arr); setTotalHours(arr);
} }
setLoading(false); setLoading(false);
})
.catch((e) => {
setLoading(false);
}); });
}; };
return ( return (
<div className="container"> <div className="container">
{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={styles["top-cont"]}>
<div className="j-b-flex"> <div className="j-b-flex">
<div className="d-flex"> <div className="d-flex">
@ -125,7 +145,9 @@ const CoursePage = () => {
)} )}
</div> </div>
<div className={styles["chapters-hours-cont"]}> <div className={styles["chapters-hours-cont"]}>
{chapters.length === 0 && JSON.stringify(hours) === "{}" && <Empty />} {chapters.length === 0 && JSON.stringify(hours) === "{}" && (
<Empty />
)}
{chapters.length === 0 && JSON.stringify(hours) !== "{}" && ( {chapters.length === 0 && JSON.stringify(hours) !== "{}" && (
<div className={styles["hours-list-box"]}> <div className={styles["hours-list-box"]}>
{hours[0].map((item: any, index: number) => ( {hours[0].map((item: any, index: number) => (
@ -206,6 +228,8 @@ const CoursePage = () => {
</div> </div>
)} )}
</div> </div>
</>
)}
</div> </div>
); );
}; };