yexuejc007/PlayEdu-h5
1
0
Fork 0
mirror of https://github.com/PlayEdu/h5.git synced 2025-06-23 07:22:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

最近学习页面优化

Browse Source
This commit is contained in:
禺狨 2023-07-03 10:44:44 +08:00
parent 50ee81a826
commit fca99f3ad6
2 changed files with 282 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/member/index.tsx
View File

@ -273,7 +273,7 @@ const MemberPage = () => {
</div> </div>
) : ( ) : (
<div className={styles["value"]}> <div className={styles["value"]}>
已学完{" "}<strong>0 </strong>/ 0 已学完 <strong>0 </strong>/ 0
</div> </div>
)} )}
</div> </div>

224
src/pages/study/index.tsx
View File

@ -5,10 +5,13 @@ import { useNavigate } from "react-router-dom";
import { course } from "../../api/index"; import { course } from "../../api/index";
import { TabBarFooter, Empty } from "../../components"; import { TabBarFooter, Empty } from "../../components";
import mediaIcon from "../../assets/images/commen/icon-medal.png"; import mediaIcon from "../../assets/images/commen/icon-medal.png";
import moment from "moment";
const StudyPage = () => { const StudyPage = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(false);
const [todayCourses, setTodayCourses] = useState<any>([]);
const [yesterdayCourses, setYesterdayCourses] = useState<any>([]);
const [courses, setCourses] = useState<any>([]); const [courses, setCourses] = useState<any>([]);
useEffect(() => { useEffect(() => {
@ -22,7 +25,33 @@ const StudyPage = () => {
const getCourses = () => { const getCourses = () => {
setLoading(true); setLoading(true);
course.latestLearn().then((res: any) => { 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); setLoading(false);
}); });
}; };
@ -51,9 +80,12 @@ const StudyPage = () => {
))} ))}
{!loading && courses.length === 0 && <Empty></Empty>} {!loading && courses.length === 0 && <Empty></Empty>}
{/* <div className={styles["label"]}>更早</div> */} {/* <div className={styles["label"]}>更早</div> */}
{!loading && {!loading && (
courses.length > 0 && <>
courses.map((item: any, index: number) => ( {todayCourses.length > 0 && (
<>
<div className={styles["label"]}>今日</div>
{todayCourses.map((item: any, index: number) => (
<div key={index} style={{ width: "100%" }}> <div key={index} style={{ width: "100%" }}>
{item.course && ( {item.course && (
<div <div
@ -77,13 +109,17 @@ const StudyPage = () => {
<div className={styles["type"]}>必修课</div> <div className={styles["type"]}>必修课</div>
)} )}
{item.course.is_required === 0 && ( {item.course.is_required === 0 && (
<div className={styles["active-type"]}>选修课</div> <div className={styles["active-type"]}>
选修课
</div>
)} )}
{item.record && ( {item.record && (
<> <>
{item.record.progress < 10000 && ( {item.record.progress < 10000 && (
<ProgressBar <ProgressBar
percent={Math.floor(item.record.progress / 100)} percent={Math.floor(
item.record.progress / 100
)}
text text
style={{ style={{
flex: 1, flex: 1,
@ -96,7 +132,11 @@ const StudyPage = () => {
)} )}
{item.record.progress >= 10000 && ( {item.record.progress >= 10000 && (
<> <>
<Image width={20} height={20} src={mediaIcon} /> <Image
width={20}
height={20}
src={mediaIcon}
/>
<span className={styles["tip"]}> <span className={styles["tip"]}>
恭喜你学完此课程! 恭喜你学完此课程!
</span> </span>
@ -123,6 +163,176 @@ const StudyPage = () => {
)} )}
</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> </div>
<TabBarFooter></TabBarFooter> <TabBarFooter></TabBarFooter>
</div> </div>