课程详情增加课件下载

src/api/course.ts

@@ -31,3 +31,8 @@ export function playPing(courseId: number, hourId: number) {
 export function latestLearn() {
   return client.get(`/api/v1/user/latest-learn`, {});
 }
+
+//下载课件
+export function downloadAttachment(courseId: number, id: number) {
+  return client.get(`/api/v1/course/${courseId}/attach/${id}/download`, {});
+}

src/pages/course/index.module.scss

@@ -79,6 +79,48 @@
   padding: 20px;
   margin-top: -20px;
   z-index: 10;
+  .tabs {
+    width: 100%;
+    min-height: 24px;
+    display: flex;
+    align-items: center;
+    position: relative;
+    margin-bottom: 20px;
+    .tab-item {
+      width: auto;
+      min-height: 24px;
+      margin-right: 36px;
+      position: relative;
+      .tit {
+        font-size: 16px;
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.45);
+        line-height: 16px;
+      }
+    }
+    .tab-active-item {
+      width: auto;
+      min-height: 24px;
+      margin-right: 36px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .tit {
+        font-size: 16px;
+        font-weight: 500;
+        color: rgba(0, 0, 0, 0.88);
+        line-height: 16px;
+      }
+      .act-line {
+        margin-top: 5px;
+        display: block;
+        width: 20px;
+        height: 3px;
+        background: #ff4d4f;
+        border-radius: 2px;
+      }
+    }
+  }
   .desc {
     width: 100%;
     height: auto;
@@ -130,3 +172,63 @@
     }
   }
 }
+
+.attachments-cont {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  .attachments-item {
+    width: 100%;
+    height: 69px;
+    background: #fafafa;
+    border-radius: 7px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 10px 15px 10px 10px;
+    text-align: left;
+    margin-bottom: 10px;
+    &:last-child {
+      margin-bottom: 0px;
+    }
+    .left-cont {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      margin-right: 10px;
+      .label {
+        height: 16px;
+        display: flex;
+        align-items: center;
+        span {
+          height: 16px;
+          font-size: 12px;
+          font-weight: 400;
+          color: rgba(0, 0, 0, 0.45);
+          line-height: 16px;
+        }
+      }
+      .title {
+        margin-top: 15px;
+        height: 14px;
+        font-size: 14px;
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.88);
+        line-height: 14px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    }
+    .download {
+      width: auto;
+      font-size: 12px;
+      font-weight: 400;
+      color: #ff4d4f;
+      line-height: 16px;
+    }
+  }
+}

src/pages/course/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Image, ProgressCircle } from "antd-mobile";
 import styles from "./index.module.scss";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useLocation, useParams } from "react-router-dom";
 import backIcon from "../../assets/images/commen/icon-back-n.png";
 import { course as vod } from "../../api/index";
 import { isEmptyObject } from "../../utils/index";
@@ -16,10 +16,25 @@ type LocalCourseHour = {
   [key: number]: CourseHourModel[];
 };
 
+type tabModal = {
+  key: number;
+  label: string;
+};
+
+type attachModal = {
+  id: number;
+  course_id: number;
+  rid: number;
+  sort: number;
+  title: string;
+  type: string;
+  url?: string;
+};
+
 const CoursePage = () => {
   const { courseId } = useParams();
   const navigate = useNavigate();
-
+  const result = new URLSearchParams(useLocation().search);
   const [course, setCourse] = useState<CourseModel | null>(null);
   const [chapters, setChapters] = useState<ChapterModel[]>([]);
   const [hours, setHours] = useState<LocalCourseHour | null>(null);
@@ -31,30 +46,42 @@ const CoursePage = () => {
 
   const [courseTypeText, setCourseTypeText] = useState("");
   const [userCourseProgress, setUserCourseProgress] = useState(0);
+  const [tabKey, setTabKey] = useState(Number(result.get("tab") || 1));
+  const [attachments, setAttachments] = useState<attachModal[]>([]);
+  const [items, setItems] = useState<tabModal[]>([]);
 
   useEffect(() => {
-    if (courseId) {
-      getDetail(Number(courseId));
-    }
+    getDetail();
   }, [courseId]);
 
-  const getDetail = (cid: number) => {
-    vod.detail(cid).then((res: any) => {
+  const getDetail = () => {
+    vod.detail(Number(courseId)).then((res: any) => {
       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);
       }
+      let arr = res.data.attachments;
+      let tabs = [
+        {
+          key: 1,
+          label: `课程目录`,
+        },
+      ];
+      if (arr.length > 0) {
+        tabs.push({
+          key: 2,
+          label: `课程附件`,
+        });
+        setAttachments(arr);
+      }
+      setItems(tabs);
     });
   };
 
@@ -78,6 +105,17 @@ const CoursePage = () => {
     navigate(`/course/${cid}/hour/${id}`);
   };
 
+  const onChange = (key: number) => {
+    setTabKey(key);
+    // navigate("/course/" + courseId + "?tab=" + key);
+  };
+
+  const downLoadFile = (cid: number, id: number) => {
+    vod.downloadAttachment(cid, id).then((res: any) => {
+      window.open(res.data.download_url);
+    });
+  };
+
   return (
     <div className="main-body">
       <div className="main-header" style={{ backgroundColor: "#FF4D4F" }}>
@@ -116,47 +154,48 @@ const CoursePage = () => {
         </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 && !hours && <Empty />}
-
-          {chapters.length === 0 && hours && (
-            <div className={styles["hours-list-box"]} style={{ marginTop: 10 }}>
-              {hours[0].map((item: CourseHourModel) => (
-                <div key={item.id} className={styles["hours-it"]}>
-                  <HourCompenent
-                    id={item.id}
-                    cid={item.course_id}
-                    title={item.title}
-                    record={learnHourRecord[item.id]}
-                    duration={item.duration}
-                    onSuccess={(cid: number, id: number) => {
-                      playVideo(cid, id);
-                    }}
-                  ></HourCompenent>
-                </div>
-              ))}
+        <div className={styles["tabs"]}>
+          {items.map((item: any) => (
+            <div
+              key={item.key}
+              className={
+                item.key === tabKey
+                  ? styles["tab-active-item"]
+                  : styles["tab-item"]
+              }
+              onClick={() => {
+                onChange(item.key);
+              }}
+            >
+              <div className={styles["tit"]}>{item.label}</div>
+              {item.key === tabKey && <i className={styles["act-line"]}></i>}
             </div>
-          )}
+          ))}
+        </div>
+        {tabKey === 1 && (
+          <>
+            {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 && !hours && <Empty />}
 
-          {chapters.length > 0 && hours && (
-            <div className={styles["hours-list-box"]}>
-              {chapters.map((item: ChapterModel) => (
-                <div key={item.id} className={styles["chapter-it"]}>
-                  <div className={styles["chapter-name"]}>{item.name}</div>
-                  {hours[item.id]?.map((it: CourseHourModel) => (
-                    <div key={it.id} className={styles["hours-it"]}>
+              {chapters.length === 0 && hours && (
+                <div
+                  className={styles["hours-list-box"]}
+                  style={{ marginTop: 10 }}
+                >
+                  {hours[0].map((item: CourseHourModel) => (
+                    <div key={item.id} className={styles["hours-it"]}>
                       <HourCompenent
-                        id={it.id}
+                        id={item.id}
                         cid={item.course_id}
-                        title={it.title}
-                        record={learnHourRecord[it.id]}
-                        duration={it.duration}
+                        title={item.title}
+                        record={learnHourRecord[item.id]}
+                        duration={item.duration}
                         onSuccess={(cid: number, id: number) => {
                           playVideo(cid, id);
                         }}
@@ -164,10 +203,62 @@ const CoursePage = () => {
                     </div>
                   ))}
                 </div>
-              ))}
+              )}
+
+              {chapters.length > 0 && hours && (
+                <div className={styles["hours-list-box"]}>
+                  {chapters.map((item: ChapterModel) => (
+                    <div key={item.id} className={styles["chapter-it"]}>
+                      <div className={styles["chapter-name"]}>{item.name}</div>
+                      {hours[item.id]?.map((it: CourseHourModel) => (
+                        <div key={it.id} className={styles["hours-it"]}>
+                          <HourCompenent
+                            id={it.id}
+                            cid={item.course_id}
+                            title={it.title}
+                            record={learnHourRecord[it.id]}
+                            duration={it.duration}
+                            onSuccess={(cid: number, id: number) => {
+                              playVideo(cid, id);
+                            }}
+                          ></HourCompenent>
+                        </div>
+                      ))}
+                    </div>
+                  ))}
+                </div>
+              )}
             </div>
-          )}
-        </div>
+          </>
+        )}
+        {tabKey === 2 && (
+          <div className={styles["attachments-cont"]}>
+            {attachments.map((item: any, index: number) => (
+              <div key={index} className={styles["attachments-item"]}>
+                <div className={styles["left-cont"]}>
+                  <div className={styles["label"]}>
+                    <i
+                      className="iconfont icon-icon-file"
+                      style={{
+                        fontSize: 15,
+                        color: "rgba(0,0,0,0.3)",
+                        marginRight: 5,
+                      }}
+                    />
+                    <span>课件</span>
+                  </div>
+                  <span className={styles["title"]}>{item.title}</span>
+                </div>
+                <div
+                  className={styles["download"]}
+                  onClick={() => downLoadFile(item.course_id, item.id)}
+                >
+                  下载
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );