mirror of
https://github.com/PlayEdu/h5.git
synced 2025-06-22 03:42:50 +08:00
最近学习页面优化
This commit is contained in:
禺狨
parent
50ee81a826
commit
fca99f3ad6
@ -273,7 +273,7 @@ const MemberPage = () => {
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles["value"]}>
|
||||
已学完{" "}<strong>0 </strong>/ 0
|
||||
已学完 <strong>0 </strong>/ 0
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -5,10 +5,13 @@ 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(() => {
|
||||
@ -22,7 +25,33 @@ const StudyPage = () => {
|
||||
const getCourses = () => {
|
||||
setLoading(true);
|
||||
course.latestLearn().then((res: any) => {
|
||||
setCourses(res.data);
|
||||
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);
|
||||
});
|
||||
};
|
||||
@ -51,78 +80,259 @@ const StudyPage = () => {
|
||||
))}
|
||||
{!loading && courses.length === 0 && <Empty></Empty>}
|
||||
{/* <div className={styles["label"]}>更早</div> */}
|
||||
{!loading &&
|
||||
courses.length > 0 &&
|
||||
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",
|
||||
}}
|
||||
{!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>
|
||||
<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>
|
||||
)}
|
||||
</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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user