优化代码

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 [chapters, setChapters] = useState<any>([]);
-  const [hours, setHours] = useState<any>({});
-  const [learnRecord, setLearnRecord] = useState<any>({});
-  const [learnHourRecord, setLearnHourRecord] = useState<any>({});
+
+  const [course, setCourse] = useState<CourseModel | null>(null);
+  const [chapters, setChapters] = useState<ChapterModel[]>([]);
+  const [hours, setHours] = useState<LocalCourseHour | null>(null);
+  const [learnRecord, setLearnRecord] = useState<UserLearnRecordModel | null>(
+    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;
-      setCourse(res.data.course);
+      let courseItem: CourseModel = 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,77 +95,40 @@ 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"]}>必修课</div>
-            )}
-            {course.is_required === 0 && (
-              <div className={styles["type"]}>选修课</div>
-            )}
+            <div className={styles["type"]}>{courseTypeText}</div>
           </div>
           <div className={styles["progress-box"]}>
-            {JSON.stringify(learnRecord) === "{}" &&
-              JSON.stringify(learnHourRecord) === "{}" && (
-                <ProgressCircle
-                  percent={0}
-                  style={{
-                    "--size": "80px",
-                    "--fill-color": "#FFFFFF",
-                    "--track-color": "#ffffff4D",
-                    "--track-width": "7px",
-                  }}
-                >
-                  <span className={styles.num}>0%</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>
-              )}
+            <ProgressCircle
+              percent={userCourseProgress}
+              style={{
+                "--size": "80px",
+                "--fill-color": "#FFFFFF",
+                "--track-color": "#ffffff4D",
+                "--track-width": "7px",
+              }}
+            >
+              <span className={styles.num}>{userCourseProgress}%</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 && JSON.stringify(hours) !== "{}" && (
+          {chapters.length === 0 && !hours && <Empty />}
+
+          {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,45 +160,45 @@ 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: any, int: number) => (
-                      <div key={it.id} className={styles["hours-it"]}>
-                        {learnHourRecord[it.id] && (
-                          <HourCompenent
-                            id={it.id}
-                            cid={item.course_id}
-                            title={it.title}
-                            record={learnHourRecord[it.id]}
-                            duration={it.duration}
-                            progress={
-                              (learnHourRecord[it.id].finished_duration * 100) /
-                              learnHourRecord[it.id].total_duration
-                            }
-                            onSuccess={(cid: number, id: number) => {
-                              playVideo(cid, id);
-                            }}
-                          ></HourCompenent>
-                        )}
-                        {!learnHourRecord[it.id] && (
-                          <HourCompenent
-                            id={it.id}
-                            cid={item.course_id}
-                            title={it.title}
-                            record={null}
-                            duration={it.duration}
-                            progress={0}
-                            onSuccess={(cid: number, id: number) => {
-                              playVideo(cid, id);
-                            }}
-                          ></HourCompenent>
-                        )}
-                      </div>
-                    ))}
+                  {hours[item.id]?.map((it: CourseHourModel) => (
+                    <div key={it.id} className={styles["hours-it"]}>
+                      {learnHourRecord[it.id] && (
+                        <HourCompenent
+                          id={it.id}
+                          cid={item.course_id}
+                          title={it.title}
+                          record={learnHourRecord[it.id]}
+                          duration={it.duration}
+                          progress={
+                            (learnHourRecord[it.id].finished_duration * 100) /
+                            learnHourRecord[it.id].total_duration
+                          }
+                          onSuccess={(cid: number, id: number) => {
+                            playVideo(cid, id);
+                          }}
+                        ></HourCompenent>
+                      )}
+                      {!learnHourRecord[it.id] && (
+                        <HourCompenent
+                          id={it.id}
+                          cid={item.course_id}
+                          title={it.title}
+                          record={null}
+                          duration={it.duration}
+                          progress={0}
+                          onSuccess={(cid: number, id: number) => {
+                            playVideo(cid, id);
+                          }}
+                        ></HourCompenent>
+                      )}
+                    </div>
+                  ))}
                 </div>
               ))}
             </div>

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 {};