yexuejc007/PlayEdu-h5
1
0
Fork 0
mirror of https://github.com/PlayEdu/h5.git synced 2025-06-22 05:24:57 +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 className={styles["value"]}>
已学完{" "}<strong>0 </strong>/ 0
已学完 <strong>0 </strong>/ 0
</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 { 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,9 +80,12 @@ const StudyPage = () => {
))}
{!loading && courses.length === 0 && <Empty></Empty>}
{/* <div className={styles["label"]}>更早</div> */}
{!loading &&
courses.length > 0 &&
courses.map((item: any, index: number) => (
{!loading && (
<>
{todayCourses.length > 0 && (
<>
<div className={styles["label"]}>今日</div>
{todayCourses.map((item: any, index: number) => (
<div key={index} style={{ width: "100%" }}>
{item.course && (
<div
@ -77,13 +109,17 @@ const StudyPage = () => {
<div className={styles["type"]}>必修课</div>
)}
{item.course.is_required === 0 && (
<div className={styles["active-type"]}>选修课</div>
<div className={styles["active-type"]}>
选修课
</div>
)}
{item.record && (
<>
{item.record.progress < 10000 && (
<ProgressBar
percent={Math.floor(item.record.progress / 100)}
percent={Math.floor(
item.record.progress / 100
)}
text
style={{
flex: 1,
@ -96,7 +132,11 @@ const StudyPage = () => {
)}
{item.record.progress >= 10000 && (
<>
<Image width={20} height={20} src={mediaIcon} />
<Image
width={20}
height={20}
src={mediaIcon}
/>
<span className={styles["tip"]}>
恭喜你学完此课程!
</span>
@ -123,6 +163,176 @@ const StudyPage = () => {
)}
</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>