课程详情页

src/pages/course/compenents/hour.module.scss

@@ -0,0 +1,57 @@
+.item {
+  width: 100%;
+  height: auto;
+  background: #fafafa;
+  border-radius: 7px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 10px;
+
+  .top-item {
+    width: 100%;
+    height: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    i {
+      color: rgba(0, 0, 0, 0.3);
+    }
+
+    .label {
+      height: 16px;
+      font-size: 12px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.45);
+      line-height: 16px;
+      margin-left: 5px;
+    }
+
+    .studying {
+      height: 16px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #ff4d4f;
+      line-height: 16px;
+    }
+
+    .complete {
+      height: 16px;
+      font-size: 12px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.45);
+      line-height: 16px;
+    }
+  }
+
+  .title {
+    width: 100%;
+    height: auto;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.88);
+    line-height: 20px;
+    margin-top: 15px;
+    text-align: left;
+  }
+}

src/pages/course/compenents/hour.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import styles from "./hour.module.scss";
+import { durationFormat } from "../../../utils/index";
+
+interface PropInterface {
+  id: number;
+  cid: number;
+  title: string;
+  duration: number;
+  record: any;
+  progress: number;
+}
+
+export const HourCompenent: React.FC<PropInterface> = ({
+  id,
+  cid,
+  title,
+  duration,
+  record,
+  progress,
+}) => {
+  const navigate = useNavigate();
+  return (
+    <>
+      <div
+        className={styles["item"]}
+        onClick={() => {
+          navigate(`/course/${cid}/hour/${id}`);
+        }}
+      >
+        <div className={styles["top-item"]}>
+          <div className="d-flex">
+            <i className="iconfont icon-icon-video"></i>
+            <span className={styles["label"]}>视频</span>
+          </div>
+          {progress > 0 && progress < 100 && (
+            <div className={styles["studying"]}>
+              <span>
+                学习到
+                {durationFormat(Number(record.finished_duration || 0))}
+              </span>
+            </div>
+          )}
+          {progress >= 100 && (
+            <div className={styles["complete"]}>
+              <span>已学完</span>{" "}
+            </div>
+          )}
+        </div>
+        <div className={styles["title"]}>
+          {title}({durationFormat(Number(duration))})
+        </div>
+      </div>
+    </>
+  );
+};

src/pages/course/index.module.scss

@@ -27,6 +27,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    margin-bottom: 20px;
     .info {
       flex: 1;
       display: flex;
@@ -67,3 +68,68 @@
     }
   }
 }
+
+.other-content {
+  width: 100%;
+  float: left;
+  height: auto;
+  border-radius: 16px 16px 0px 0px;
+  background-color: #ffffff;
+  box-sizing: border-box;
+  padding: 20px;
+  margin-top: -20px;
+  z-index: 10;
+  .desc {
+    width: 100%;
+    max-height: 72px;
+    font-size: 12px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.45);
+    line-height: 18px;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+  }
+  .line {
+    width: 100%;
+    height: 1px;
+    background: rgba(0, 0, 0, 0.05);
+    margin-top: 20px;
+  }
+  .chapters-hours-cont {
+    width: 100%;
+    height: auto;
+    .hours-list-box {
+      width: 100%;
+      height: auto;
+      display: flex;
+      flex-direction: column;
+      .chapter-it {
+        width: 100%;
+        height: auto;
+        margin-top: 20px;
+
+        .chapter-name {
+          width: 100%;
+          height: 15px;
+          font-size: 15px;
+          font-weight: 500;
+          color: rgba(0, 0, 0, 0.88);
+          line-height: 15px;
+          text-align: left;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+      .hours-it {
+        width: 100%;
+        height: auto;
+        margin-top: 20px;
+      }
+    }
+  }
+}

src/pages/course/index.tsx

@@ -5,6 +5,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import backIcon from "../../assets/images/commen/icon-back-n.png";
 import { course as Course } from "../../api/index";
 import { Empty } from "../../components";
+import { HourCompenent } from "./compenents/hour";
 
 const CoursePage = () => {
   const params = useParams();
@@ -75,7 +76,7 @@ const CoursePage = () => {
                   style={{
                     "--size": "80px",
                     "--fill-color": "#FFFFFF",
-                    "--track-color": "#F6F6F6",
+                    "--track-color": "#ffffff4D",
                     "--track-width": "7px",
                   }}
                 >
@@ -89,7 +90,7 @@ const CoursePage = () => {
                   style={{
                     "--size": "80px",
                     "--fill-color": "#FFFFFF",
-                    "--track-color": "#F6F6F6",
+                    "--track-color": "#ffffff4D",
                     "--track-width": "7px",
                   }}
                 >
@@ -103,7 +104,7 @@ const CoursePage = () => {
                   style={{
                     "--size": "80px",
                     "--fill-color": "#FFFFFF",
-                    "--track-color": "#F6F6F6",
+                    "--track-color": "#ffffff4D",
                     "--track-width": "7px",
                   }}
                 >
@@ -115,6 +116,85 @@ const CoursePage = () => {
           </div>
         </div>
       </div>
+      <div className={styles["other-content"]}>
+        {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) !== "{}" && (
+            <div className={styles["hours-list-box"]}>
+              {hours[0].map((item: any, index: number) => (
+                <div key={item.id} className={styles["hours-it"]}>
+                  {learnHourRecord[item.id] && (
+                    <HourCompenent
+                      id={item.id}
+                      cid={item.course_id}
+                      title={item.title}
+                      record={learnHourRecord[item.id]}
+                      duration={item.duration}
+                      progress={
+                        (learnHourRecord[item.id].finished_duration * 100) /
+                        learnHourRecord[item.id].total_duration
+                      }
+                    ></HourCompenent>
+                  )}
+                  {!learnHourRecord[item.id] && (
+                    <HourCompenent
+                      id={item.id}
+                      cid={item.course_id}
+                      title={item.title}
+                      record={null}
+                      duration={item.duration}
+                      progress={0}
+                    ></HourCompenent>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+          {chapters.length > 0 && JSON.stringify(hours) !== "{}" && (
+            <div className={styles["hours-list-box"]}>
+              {chapters.map((item: any, index: number) => (
+                <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
+                            }
+                          ></HourCompenent>
+                        )}
+                        {!learnHourRecord[it.id] && (
+                          <HourCompenent
+                            id={it.id}
+                            cid={item.course_id}
+                            title={it.title}
+                            record={null}
+                            duration={it.duration}
+                            progress={0}
+                          ></HourCompenent>
+                        )}
+                      </div>
+                    ))}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
     </div>
   );
 };

src/utils/index.ts

@@ -60,3 +60,12 @@ export function studyTimeFormat(dateStr: number) {
   value.push(d.seconds());
   return value;
 }
+
+export function durationFormat(dateStr: number) {
+  var d = moment.duration(dateStr, "seconds");
+  let hour = d.hours() === 0 ? "" : d.hours() + ":";
+  let minute = d.minutes() >= 10 ? d.minutes() + ":" : "0" + d.minutes() + ":";
+  let second = d.seconds() >= 10 ? d.seconds() : "0" + d.seconds();
+
+  return hour + minute + second;
+}