yexuejc007/PlayEdu-frontend
1
0
Fork 0
mirror of https://github.com/PlayEdu/frontend.git synced 2025-06-09 19:24:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

课程详情学习记录优化

Browse Source
This commit is contained in:
禺狨 2023-03-27 14:52:27 +08:00
parent 2ba923d89d
commit aa4fdc4927
2 changed files with 27 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/pages/course/compenents/hour.tsx
View File

@ -1,9 +1,6 @@
import React, { useState, useEffect } from "react"; import React, { useState } from "react";
import { Image, Progress } from "antd";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import styles from "./hour.module.scss"; import styles from "./hour.module.scss";
import mediaIcon from "../../../assets/images/commen/icon-medal.png";
import { Navigate } from "react-router-dom";
import { durationFormat } from "../../../utils/index"; import { durationFormat } from "../../../utils/index";
import { VideoModel } from "./video"; import { VideoModel } from "./video";
@ -24,7 +21,7 @@ export const HourCompenent: React.FC<PropInterface> = ({
record, record,
progress, progress,
}) => { }) => {
const navigate = useNavigate(); // const navigate = useNavigate();
const [visible, setVisible] = useState<boolean>(false); const [visible, setVisible] = useState<boolean>(false);
return ( return (
<div className={styles["item"]}> <div className={styles["item"]}>
@ -57,7 +54,7 @@ export const HourCompenent: React.FC<PropInterface> = ({
{progress !== 0 && ( {progress !== 0 && (
<> <>
<div className={styles["record"]}> <div className={styles["record"]}>
上次学习到{durationFormat(Number(duration))} 上次学习到{durationFormat(Number(record.duration || 0))}
</div> </div>
<div <div
className={styles["link"]} className={styles["link"]}

23
src/pages/course/index.tsx
View File

@ -14,7 +14,6 @@ const CoursePage = () => {
const [hours, setHours] = useState<any>({}); const [hours, setHours] = useState<any>({});
const [learnRecord, setLearnRecord] = useState<any>({}); const [learnRecord, setLearnRecord] = useState<any>({});
const [learnHourRecord, setLearnHourRecord] = useState<any>({}); const [learnHourRecord, setLearnHourRecord] = useState<any>({});
const [progress, setprogresP] = useState(20);
useEffect(() => { useEffect(() => {
getDetail(); getDetail();
@ -57,7 +56,7 @@ const CoursePage = () => {
{course.is_required === 0 && ( {course.is_required === 0 && (
<div className={styles["active-type"]}>选修课</div> <div className={styles["active-type"]}>选修课</div>
)} )}
{progress === 100 && ( {learnRecord.progress === 100 && (
<div className={styles["success"]}> <div className={styles["success"]}>
<Image <Image
width={24} width={24}
@ -77,7 +76,7 @@ const CoursePage = () => {
trailColor="#F6F6F6" trailColor="#F6F6F6"
size={90} size={90}
strokeWidth={8} strokeWidth={8}
percent={progress} percent={learnRecord.progress}
format={(percent) => `${percent}%`} format={(percent) => `${percent}%`}
/> />
</div> </div>
@ -97,9 +96,9 @@ const CoursePage = () => {
id={item.id} id={item.id}
cid={item.course_id} cid={item.course_id}
title={item.title} title={item.title}
record={item.rid} record={learnHourRecord[item.id]}
duration={item.duration} duration={item.duration}
progress={progress} progress={learnHourRecord[item.id].progress}
></HourCompenent> ></HourCompenent>
</div> </div>
))} ))}
@ -112,14 +111,26 @@ const CoursePage = () => {
<div className={styles["chapter-name"]}>{item.name}</div> <div className={styles["chapter-name"]}>{item.name}</div>
{hours[item.id].map((it: any) => ( {hours[item.id].map((it: any) => (
<div key={it.id} className={styles["hours-it"]}> <div key={it.id} className={styles["hours-it"]}>
{learnHourRecord[it.id] && (
<HourCompenent <HourCompenent
id={it.id} id={it.id}
cid={item.course_id} cid={item.course_id}
title={it.title} title={it.title}
record={it.rid} record={learnHourRecord[it.id]}
duration={it.duration}
progress={learnHourRecord[it.id].progress}
></HourCompenent>
)}
{!learnHourRecord[it.id] && (
<HourCompenent
id={it.id}
cid={item.course_id}
title={it.title}
record={null}
duration={it.duration} duration={it.duration}
progress={0} progress={0}
></HourCompenent> ></HourCompenent>
)}
</div> </div>
))} ))}
</div> </div>