mirror of
https://github.com/PlayEdu/h5.git
synced 2025-06-21 20:52:46 +08:00
343 lines
14 KiB
TypeScript
343 lines
14 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { Image, ProgressBar, Skeleton } from "antd-mobile";
|
|
import styles from "./index.module.scss";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { course } from "../../api/index";
|
|
import { TabBarFooter, Empty } from "../../components";
|
|
import mediaIcon from "../../assets/images/commen/icon-medal.png";
|
|
import moment from "moment";
|
|
|
|
const StudyPage = () => {
|
|
const navigate = useNavigate();
|
|
const [loading, setLoading] = useState<boolean>(false);
|
|
const [todayCourses, setTodayCourses] = useState<any>([]);
|
|
const [yesterdayCourses, setYesterdayCourses] = useState<any>([]);
|
|
const [courses, setCourses] = useState<any>([]);
|
|
|
|
useEffect(() => {
|
|
document.title = "最近学习";
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
getCourses();
|
|
}, []);
|
|
|
|
const getCourses = () => {
|
|
setLoading(true);
|
|
course.latestLearn().then((res: any) => {
|
|
let data = res.data;
|
|
let today: any = [];
|
|
let yesterday: any = [];
|
|
let box: any = [];
|
|
if (data && data.length > 0) {
|
|
data.map((item: any) => {
|
|
if (
|
|
item.hour_record &&
|
|
moment(item.hour_record.updated_at).isSame(moment(), "day")
|
|
) {
|
|
today.push(item);
|
|
} else if (
|
|
item.hour_record &&
|
|
moment(item.hour_record.updated_at).isSame(
|
|
moment().subtract(1, "day"),
|
|
"day"
|
|
)
|
|
) {
|
|
yesterday.push(item);
|
|
} else {
|
|
box.push(item);
|
|
}
|
|
setTodayCourses(today);
|
|
setYesterdayCourses(yesterday);
|
|
setCourses(box);
|
|
});
|
|
}
|
|
setLoading(false);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="main-body">
|
|
<div className={styles["title"]}>最近学习</div>
|
|
<div className={styles["list-box"]}>
|
|
{loading &&
|
|
Array.from({ length: 2 }).map((_, i) => (
|
|
<div className={styles["item"]} key={i}>
|
|
<Skeleton
|
|
animated
|
|
style={{
|
|
width: 100,
|
|
height: 75,
|
|
borderRadius: 8,
|
|
marginRight: 15,
|
|
}}
|
|
/>
|
|
<div className={styles["item-info"]}>
|
|
<Skeleton animated style={{ width: "100%", height: 21 }} />
|
|
<Skeleton animated style={{ width: "100%", height: 24 }} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
{!loading && courses.length === 0 && <Empty></Empty>}
|
|
{/* <div className={styles["label"]}>更早</div> */}
|
|
{!loading && (
|
|
<>
|
|
{todayCourses.length > 0 && (
|
|
<>
|
|
<div className={styles["label"]}>今日</div>
|
|
{todayCourses.map((item: any, index: number) => (
|
|
<div key={index} style={{ width: "100%" }}>
|
|
{item.course && (
|
|
<div
|
|
className={styles["item"]}
|
|
onClick={() => {
|
|
navigate(`/course/${item.course.id}`);
|
|
}}
|
|
>
|
|
<Image
|
|
src={item.course.thumb}
|
|
width={100}
|
|
height={75}
|
|
style={{ borderRadius: 8, marginRight: 15 }}
|
|
/>
|
|
<div className={styles["item-info"]}>
|
|
<div className={styles["item-title"]}>
|
|
{item.course.title}
|
|
</div>
|
|
<div className={styles["item-record"]}>
|
|
{item.course.is_required === 1 && (
|
|
<div className={styles["type"]}>必修课</div>
|
|
)}
|
|
{item.course.is_required === 0 && (
|
|
<div className={styles["active-type"]}>
|
|
选修课
|
|
</div>
|
|
)}
|
|
{item.record && (
|
|
<>
|
|
{item.record.progress < 10000 && (
|
|
<ProgressBar
|
|
percent={Math.floor(
|
|
item.record.progress / 100
|
|
)}
|
|
text
|
|
style={{
|
|
flex: 1,
|
|
"--fill-color": "#FF4D4F",
|
|
"--track-color": "#F6F6F6",
|
|
"--track-width": "8px",
|
|
"--text-width": "27px",
|
|
}}
|
|
/>
|
|
)}
|
|
{item.record.progress >= 10000 && (
|
|
<>
|
|
<Image
|
|
width={20}
|
|
height={20}
|
|
src={mediaIcon}
|
|
/>
|
|
<span className={styles["tip"]}>
|
|
恭喜你学完此课程!
|
|
</span>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
{!item.record && (
|
|
<ProgressBar
|
|
percent={1}
|
|
text
|
|
style={{
|
|
flex: 1,
|
|
"--fill-color": "#FF4D4F",
|
|
"--track-color": "#F6F6F6",
|
|
"--track-width": "8px",
|
|
"--text-width": "27px",
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</>
|
|
)}
|
|
{yesterdayCourses.length > 0 && (
|
|
<>
|
|
<div className={styles["label"]}>昨日</div>
|
|
{yesterdayCourses.map((item: any, index: number) => (
|
|
<div key={index} style={{ width: "100%" }}>
|
|
{item.course && (
|
|
<div
|
|
className={styles["item"]}
|
|
onClick={() => {
|
|
navigate(`/course/${item.course.id}`);
|
|
}}
|
|
>
|
|
<Image
|
|
src={item.course.thumb}
|
|
width={100}
|
|
height={75}
|
|
style={{ borderRadius: 8, marginRight: 15 }}
|
|
/>
|
|
<div className={styles["item-info"]}>
|
|
<div className={styles["item-title"]}>
|
|
{item.course.title}
|
|
</div>
|
|
<div className={styles["item-record"]}>
|
|
{item.course.is_required === 1 && (
|
|
<div className={styles["type"]}>必修课</div>
|
|
)}
|
|
{item.course.is_required === 0 && (
|
|
<div className={styles["active-type"]}>
|
|
选修课
|
|
</div>
|
|
)}
|
|
{item.record && (
|
|
<>
|
|
{item.record.progress < 10000 && (
|
|
<ProgressBar
|
|
percent={Math.floor(
|
|
item.record.progress / 100
|
|
)}
|
|
text
|
|
style={{
|
|
flex: 1,
|
|
"--fill-color": "#FF4D4F",
|
|
"--track-color": "#F6F6F6",
|
|
"--track-width": "8px",
|
|
"--text-width": "27px",
|
|
}}
|
|
/>
|
|
)}
|
|
{item.record.progress >= 10000 && (
|
|
<>
|
|
<Image
|
|
width={20}
|
|
height={20}
|
|
src={mediaIcon}
|
|
/>
|
|
<span className={styles["tip"]}>
|
|
恭喜你学完此课程!
|
|
</span>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
{!item.record && (
|
|
<ProgressBar
|
|
percent={1}
|
|
text
|
|
style={{
|
|
flex: 1,
|
|
"--fill-color": "#FF4D4F",
|
|
"--track-color": "#F6F6F6",
|
|
"--track-width": "8px",
|
|
"--text-width": "27px",
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</>
|
|
)}
|
|
{courses.length > 0 && (
|
|
<>
|
|
<div className={styles["label"]}>更早</div>
|
|
{courses.map((item: any, index: number) => (
|
|
<div key={index} style={{ width: "100%" }}>
|
|
{item.course && (
|
|
<div
|
|
className={styles["item"]}
|
|
onClick={() => {
|
|
navigate(`/course/${item.course.id}`);
|
|
}}
|
|
>
|
|
<Image
|
|
src={item.course.thumb}
|
|
width={100}
|
|
height={75}
|
|
style={{ borderRadius: 8, marginRight: 15 }}
|
|
/>
|
|
<div className={styles["item-info"]}>
|
|
<div className={styles["item-title"]}>
|
|
{item.course.title}
|
|
</div>
|
|
<div className={styles["item-record"]}>
|
|
{item.course.is_required === 1 && (
|
|
<div className={styles["type"]}>必修课</div>
|
|
)}
|
|
{item.course.is_required === 0 && (
|
|
<div className={styles["active-type"]}>
|
|
选修课
|
|
</div>
|
|
)}
|
|
{item.record && (
|
|
<>
|
|
{item.record.progress < 10000 && (
|
|
<ProgressBar
|
|
percent={Math.floor(
|
|
item.record.progress / 100
|
|
)}
|
|
text
|
|
style={{
|
|
flex: 1,
|
|
"--fill-color": "#FF4D4F",
|
|
"--track-color": "#F6F6F6",
|
|
"--track-width": "8px",
|
|
"--text-width": "27px",
|
|
}}
|
|
/>
|
|
)}
|
|
{item.record.progress >= 10000 && (
|
|
<>
|
|
<Image
|
|
width={20}
|
|
height={20}
|
|
src={mediaIcon}
|
|
/>
|
|
<span className={styles["tip"]}>
|
|
恭喜你学完此课程!
|
|
</span>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
{!item.record && (
|
|
<ProgressBar
|
|
percent={1}
|
|
text
|
|
style={{
|
|
flex: 1,
|
|
"--fill-color": "#FF4D4F",
|
|
"--track-color": "#F6F6F6",
|
|
"--track-width": "8px",
|
|
"--text-width": "27px",
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
<TabBarFooter></TabBarFooter>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StudyPage;
|