优化代码

src/pages/course/index.tsx

@@ -7,15 +7,29 @@ import { course as vod } from "../../api/index";
 import { Empty } from "../../components";
 import { HourCompenent } from "./compenents/hour";
 
+type LocalUserLearnHourRecordModel = {
+  [key: number]: UserLearnHourRecordModel;
+};
+
+type LocalCourseHour = {
+  [key: number]: CourseHourModel[];
+};
+
 const CoursePage = () => {
   const { courseId } = useParams();
   const navigate = useNavigate();
-  const [loading, setLoading] = useState<boolean>(false);
+
-  const [course, setCourse] = useState<any>({});
+  const [course, setCourse] = useState<CourseModel | null>(null);
-  const [chapters, setChapters] = useState<any>([]);
+  const [chapters, setChapters] = useState<ChapterModel[]>([]);
-  const [hours, setHours] = useState<any>({});
+  const [hours, setHours] = useState<LocalCourseHour | null>(null);
-  const [learnRecord, setLearnRecord] = useState<any>({});
+  const [learnRecord, setLearnRecord] = useState<UserLearnRecordModel | null>(
-  const [learnHourRecord, setLearnHourRecord] = useState<any>({});
+    null
+  );
+  const [learnHourRecord, setLearnHourRecord] =
+    useState<LocalUserLearnHourRecordModel>({});
+
+  const [courseTypeText, setCourseTypeText] = useState("");
+  const [userCourseProgress, setUserCourseProgress] = useState(0);
 
   useEffect(() => {
     if (courseId) {
@@ -25,19 +39,40 @@ const CoursePage = () => {
 
   const getDetail = (cid: number) => {
     vod.detail(cid).then((res: any) => {
-      document.title = res.data.course.title;
+      let courseItem: CourseModel = res.data.course;
-      setCourse(res.data.course);
+
+      document.title = courseItem.title || "课程详情";
+
+      setCourse(courseItem);
       setChapters(res.data.chapters);
       setHours(res.data.hours);
+
       if (res.data.learn_record) {
         setLearnRecord(res.data.learn_record);
       }
+
       if (res.data.learn_hour_records) {
         setLearnHourRecord(res.data.learn_hour_records);
       }
     });
   };
 
+  useEffect(() => {
+    if (course) {
+      setCourseTypeText(course.is_required === 1 ? "必修课" : "选修课");
+    }
+  }, [course]);
+
+  useEffect(() => {
+    if (learnRecord?.progress) {
+      setUserCourseProgress(learnRecord.progress / 100);
+    } else if (learnHourRecord) {
+      setUserCourseProgress(1);
+    } else {
+      setUserCourseProgress(0);
+    }
+  }, [learnRecord, learnHourRecord]);
+
   const playVideo = (cid: number, id: number) => {
     navigate(`/course/${cid}/hour/${id}`);
   };
@@ -52,7 +87,7 @@ const CoursePage = () => {
         />
       </div>
       <div className={styles["top-content"]}>
-        <div className={styles["title"]}>{course.title}</div>
+        <div className={styles["title"]}>{course?.title}</div>
         <div className={styles["info-content"]}>
           <div className={styles["info"]}>
             <div className={styles["record"]}>
@@ -60,20 +95,13 @@ const CoursePage = () => {
               <strong>
                 {learnRecord ? learnRecord.finished_count || 0 : 0}
               </strong>{" "}
-              / {course.class_hour}
+              / {course?.class_hour}
             </div>
-            {course.is_required === 1 && (
+            <div className={styles["type"]}>{courseTypeText}</div>
-              <div className={styles["type"]}>必修课</div>
-            )}
-            {course.is_required === 0 && (
-              <div className={styles["type"]}>选修课</div>
-            )}
           </div>
           <div className={styles["progress-box"]}>
-            {JSON.stringify(learnRecord) === "{}" &&
-              JSON.stringify(learnHourRecord) === "{}" && (
             <ProgressCircle
-                  percent={0}
+              percent={userCourseProgress}
               style={{
                 "--size": "80px",
                 "--fill-color": "#FFFFFF",
@@ -81,56 +109,26 @@ const CoursePage = () => {
                 "--track-width": "7px",
               }}
             >
-                  <span className={styles.num}>0%</span>
+              <span className={styles.num}>{userCourseProgress}%</span>
             </ProgressCircle>
-              )}
-            {JSON.stringify(learnRecord) === "{}" &&
-              JSON.stringify(learnHourRecord) !== "{}" && (
-                <ProgressCircle
-                  percent={1}
-                  style={{
-                    "--size": "80px",
-                    "--fill-color": "#FFFFFF",
-                    "--track-color": "#ffffff4D",
-                    "--track-width": "7px",
-                  }}
-                >
-                  <span className={styles.num}>1%</span>
-                </ProgressCircle>
-              )}
-            {JSON.stringify(learnRecord) !== "{}" &&
-              JSON.stringify(learnHourRecord) !== "{}" && (
-                <ProgressCircle
-                  percent={Math.floor(learnRecord.progress / 100)}
-                  style={{
-                    "--size": "80px",
-                    "--fill-color": "#FFFFFF",
-                    "--track-color": "#ffffff4D",
-                    "--track-width": "7px",
-                  }}
-                >
-                  <span className={styles.num}>
-                    {Math.floor(learnRecord.progress / 100)}%
-                  </span>
-                </ProgressCircle>
-              )}
           </div>
         </div>
       </div>
       <div className={styles["other-content"]}>
-        {course.short_desc && (
+        {course?.short_desc && (
           <>
             <div className={styles["desc"]}>{course.short_desc}</div>
             <div className={styles["line"]}></div>
           </>
         )}
         <div className={styles["chapters-hours-cont"]}>
-          {chapters.length === 0 && JSON.stringify(hours) === "{}" && <Empty />}{" "}
+          {chapters.length === 0 && !hours && <Empty />}
-          {chapters.length === 0 && JSON.stringify(hours) !== "{}" && (
+
+          {chapters.length === 0 && hours && (
             <div className={styles["hours-list-box"]} style={{ marginTop: 10 }}>
-              {hours[0].map((item: any, index: number) => (
+              {hours[0].map((item: CourseHourModel) => (
                 <div key={item.id} className={styles["hours-it"]}>
-                  {learnHourRecord[item.id] && (
+                  {learnHourRecord[item.id] ? (
                     <HourCompenent
                       id={item.id}
                       cid={item.course_id}
@@ -145,8 +143,7 @@ const CoursePage = () => {
                         playVideo(cid, id);
                       }}
                     ></HourCompenent>
-                  )}
+                  ) : (
-                  {!learnHourRecord[item.id] && (
                     <HourCompenent
                       id={item.id}
                       cid={item.course_id}
@@ -163,13 +160,13 @@ const CoursePage = () => {
               ))}
             </div>
           )}
-          {chapters.length > 0 && JSON.stringify(hours) !== "{}" && (
+
+          {chapters.length > 0 && hours && (
             <div className={styles["hours-list-box"]}>
-              {chapters.map((item: any, index: number) => (
+              {chapters.map((item: ChapterModel) => (
                 <div key={item.id} className={styles["chapter-it"]}>
                   <div className={styles["chapter-name"]}>{item.name}</div>
-                  {hours[item.id] &&
+                  {hours[item.id]?.map((it: CourseHourModel) => (
-                    hours[item.id].map((it: any, int: number) => (
                     <div key={it.id} className={styles["hours-it"]}>
                       {learnHourRecord[it.id] && (
                         <HourCompenent

src/playedu.d.ts

@@ -0,0 +1,58 @@
+declare global {
+  interface CourseModel {
+    id: number;
+    title: string;
+    thumb: string;
+    short_desc: string;
+    is_required: number;
+    charge: number;
+    class_hour: number;
+  }
+
+  interface ChapterModel {
+    id: number;
+    name: string;
+    course_id: number;
+    sort: number;
+  }
+
+  interface CourseHourModel {
+    id: number;
+    course_id: number;
+    chapter_id: number;
+    duration: number;
+    rid: number;
+    sort: number;
+    title: string;
+    type: string;
+  }
+
+  interface UserLearnRecordModel {
+    id: number;
+    user_id: number;
+    course_id: number;
+    hour_count: number;
+    finished_at: string;
+    finished_count: number;
+    is_finished: number;
+    progress: number;
+    created_at: string;
+    updated_at: string;
+  }
+
+  interface UserLearnHourRecordModel {
+    id: number;
+    user_id: number;
+    course_id: number;
+    hour_id: number;
+    is_finished: number;
+    finished_duration: number;
+    real_duration: number;
+    total_duration: number;
+    finished_at: string;
+    created_at: string;
+    updated_at: string;
+  }
+}
+
+export {};