课程详情增加课件下载

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/api/internal/httpClient.ts

@@ -7,6 +7,10 @@ const GoLogin = () => {
   window.location.href = "/login";
 };
 
+const GoError = () => {
+  window.location.href = "/error";
+};
+
 export class HttpClient {
   axios: Axios;
 
@@ -52,13 +56,13 @@ export class HttpClient {
           GoLogin();
         } else if (status === 404) {
           // 跳转到404页面
-          GoLogin();
+          GoError();
         } else if (status === 403) {
           // 跳转到无权限页面
-          GoLogin();
+          GoError();
         } else if (status === 500) {
           // 跳转到500异常页面
-          GoLogin();
+          GoError();
         }
         return Promise.reject(error.response);
       }

src/pages/course/index.module.scss

@@ -92,13 +92,67 @@
   }
 }
 
+.tabs {
+  width: 1200px;
+  height: 48px;
+  margin: 0 auto;
+  margin-top: 24px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  .tab-item {
+    width: 64px;
+    height: 48px;
+    margin-right: 50px;
+    transition: all 0.2s;
+    position: relative;
+    cursor: pointer;
+    &:hover {
+      opacity: 0.8;
+      .tit {
+        color: #ff4d4f;
+      }
+    }
+    .tit {
+      width: 64px;
+      height: 40px;
+      font-size: 16px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.88);
+      line-height: 40px;
+    }
+  }
+  .tab-active-item {
+    width: 64px;
+    height: 48px;
+    cursor: pointer;
+    margin-right: 50px;
+    transition: all 0.2s;
+
+    &:hover {
+      opacity: 0.8;
+    }
+    .tit {
+      width: 64px;
+      height: 40px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #ff4d4f;
+      line-height: 40px;
+    }
+    .banner {
+      animation: scaleTransX 0.3s;
+    }
+  }
+}
+
 .chapters-hours-cont {
   width: 100%;
   height: auto;
   background: #ffffff;
   box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.04);
   border-radius: 12px;
-  margin-top: 30px;
+  margin-top: 24px;
   box-sizing: border-box;
   padding: 24px;
   .hours-list-box {
@@ -135,3 +189,58 @@
     }
   }
 }
+
+.attachments-cont {
+  width: 100%;
+  height: auto;
+  background: #ffffff;
+  box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.04);
+  border-radius: 12px;
+  margin-top: 24px;
+  box-sizing: border-box;
+  padding: 24px;
+  .attachments-item {
+    width: 100%;
+    height: 56px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0px 24px;
+    margin-bottom: 8px;
+    text-align: left;
+    &:last-child {
+      margin-bottom: 0px;
+    }
+    .left-cont {
+      flex: 1;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .title {
+        flex: 1;
+        font-size: 14px;
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.88);
+        line-height: 24px;
+        margin-right: 10px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    }
+    .download {
+      width: auto;
+      height: 24px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #ff4d4f;
+      line-height: 24px;
+      cursor: pointer;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+}

src/pages/course/index.tsx

@@ -1,20 +1,41 @@
 import { useEffect, useState } from "react";
-import { Row, Col, Spin, Image, Progress } from "antd";
+import { Row, Spin, Image, Progress } from "antd";
 import styles from "./index.module.scss";
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate, useLocation } from "react-router-dom";
 import { course as Course } from "../../api/index";
 import mediaIcon from "../../assets/images/commen/icon-medal.png";
 import { HourCompenent } from "./compenents/hour";
 import { Empty } from "../../compenents";
+import iconRoute from "../../assets/images/commen/icon-route.png";
+
+interface tabModal {
+  key: number;
+  label: string;
+}
+
+interface attachModal {
+  id: number;
+  course_id: number;
+  rid: number;
+  sort: number;
+  title: string;
+  type: string;
+  url?: string;
+}
 
 const CoursePage = () => {
   const params = useParams();
+  const navigate = useNavigate();
+  const result = new URLSearchParams(useLocation().search);
   const [loading, setLoading] = useState<boolean>(true);
   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 [tabKey, setTabKey] = useState(Number(result.get("tab") || 1));
+  const [attachments, setAttachments] = useState<attachModal[]>([]);
+  const [items, setItems] = useState<tabModal[]>([]);
 
   useEffect(() => {
     getDetail();
@@ -34,6 +55,22 @@ const CoursePage = () => {
         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);
+
         setLoading(false);
       })
       .catch((e) => {
@@ -41,6 +78,17 @@ const CoursePage = () => {
       });
   };
 
+  const onChange = (key: number) => {
+    setTabKey(key);
+    navigate("/course/" + params.courseId + "?tab=" + key);
+  };
+
+  const downLoadFile = (cid: number, id: number) => {
+    Course.downloadAttachment(cid, id).then((res: any) => {
+      window.open(res.data.download_url);
+    });
+  };
+
   return (
     <div className="container">
       {loading && (
@@ -133,80 +181,134 @@ const CoursePage = () => {
               <div className={styles["desc"]}>{course.short_desc}</div>
             )}
           </div>
-          <div className={styles["chapters-hours-cont"]}>
+          <div className={styles["tabs"]}>
-            {chapters.length === 0 && JSON.stringify(hours) === "{}" && (
+            {items.map((item: any) => (
-              <Empty />
+              <div
-            )}
+                key={item.key}
-            {chapters.length === 0 && JSON.stringify(hours) !== "{}" && (
+                className={
-              <div className={styles["hours-list-box"]}>
+                  item.key === tabKey
-                {hours[0].map((item: any, index: number) => (
+                    ? styles["tab-active-item"]
-                  <div key={item.id} className={styles["hours-it"]}>
+                    : styles["tab-item"]
-                    {learnHourRecord[item.id] && (
+                }
-                      <HourCompenent
+                onClick={() => {
-                        id={item.id}
+                  onChange(item.key);
-                        cid={item.course_id}
+                }}
-                        title={item.title}
+              >
-                        record={learnHourRecord[item.id]}
+                <div className={styles["tit"]}>{item.label}</div>
-                        duration={item.duration}
+                {item.key === tabKey && (
-                        progress={
+                  <Image
-                          (learnHourRecord[item.id].finished_duration * 100) /
+                    className={styles["banner"]}
-                          learnHourRecord[item.id].total_duration
+                    width={40}
-                        }
+                    height={8}
-                      ></HourCompenent>
+                    preview={false}
-                    )}
+                    src={iconRoute}
-                    {!learnHourRecord[item.id] && (
+                    style={{ marginTop: -16 }}
-                      <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>
+          {tabKey === 1 && (
+            <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>
+          )}
+          {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"]}>
+                    <i
+                      className="iconfont icon-icon-file"
+                      style={{
+                        fontSize: 16,
+                        color: "rgba(0,0,0,0.3)",
+                        marginRight: 10,
+                      }}
+                    />
+                    <span className={styles["title"]}>{item.title}</span>
+                  </div>
+                  <div
+                    className={styles["download"]}
+                    onClick={() => downLoadFile(item.course_id, item.id)}
+                  >
+                    下载
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
         </>
       )}
     </div>

src/pages/error/index.module.scss

@@ -0,0 +1,4 @@
+.main {
+  width: 100vw;
+  height: 100vh;
+}

src/pages/error/index.tsx

@@ -0,0 +1,28 @@
+import { Button, Result } from "antd";
+import { useNavigate } from "react-router-dom";
+import styles from "./index.module.scss";
+
+const ErrorPage = () => {
+  const navigate = useNavigate();
+
+  return (
+    <Result
+      status="404"
+      title="404"
+      subTitle="您访问的页面不存在"
+      className={styles["main"]}
+      extra={
+        <Button
+          type="primary"
+          onClick={() => {
+            navigate("/", { replace: true });
+          }}
+        >
+          返回首页
+        </Button>
+      }
+    />
+  );
+};
+
+export default ErrorPage;

src/pages/index/index.tsx

@@ -30,10 +30,6 @@ const IndexPage = () => {
   const [learnCourseRecords, setLearnCourseRecords] = useState<any>({});
   const [learnCourseHourCount, setLearnCourseHourCount] = useState<any>({});
   const [stats, setStats] = useState<any>({});
-
-  const departments = useSelector(
-    (state: any) => state.loginUser.value.departments
-  );
   const currentDepId = useSelector(
     (state: any) => state.loginUser.value.currentDepId
   );

src/routes/index.tsx

@@ -17,6 +17,8 @@ const CoursePage = lazy(() => import("../pages/course/index"));
 const CoursePlayPage = lazy(() => import("../pages/course/video"));
 //最近学习
 const LatestLearnPage = lazy(() => import("../pages/latest-learn"));
+//错误页面
+const ErrorPage = lazy(() => import("../pages/error"));
 
 import PrivateRoute from "../compenents/private-route";
 
@@ -96,6 +98,14 @@ const routes: RouteObject[] = [
             path: "/course/:courseId/hour/:hourId",
             element: <PrivateRoute Component={<CoursePlayPage />} />,
           },
+          {
+            path: "/error",
+            element: <ErrorPage />,
+          },
+          {
+            path: "*",
+            element: <ErrorPage />,
+          },
         ],
       },
     ],