Merge branch 'dev'

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

@@ -56,6 +56,7 @@ export class HttpClient {
           GoLogin();
         } else if (status === 404) {
           // 跳转到404页面
+          GoLogin();
         } else if (status === 403) {
           // 跳转到无权限页面
         } else if (status === 500) {

src/components/bar-footer/index.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
-import { NavBar, Badge, TabBar } from "antd-mobile";
+import React from "react";
+import { TabBar } from "antd-mobile";
 import styles from "./index.module.scss";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 
 export const TabBarFooter: React.FC = () => {
   const navigate = useNavigate();

src/main.scss

@@ -155,3 +155,15 @@ code {
 .dplayer-mobile-play {
   opacity: 1 !important;
 }
+
+.course-tab-box {
+  width: 100%;
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin-bottom: 20px;
+  .adm-tabs-tab-wrapper {
+    padding: 0 36px 0 0;
+  }
+}

src/pages/course/index.module.scss

@@ -79,6 +79,14 @@
   padding: 20px;
   margin-top: -20px;
   z-index: 10;
+  .tabs {
+    width: 100%;
+    min-height: 24px;
+    display: flex;
+    align-items: center;
+    position: relative;
+    margin-bottom: 20px;
+  }
   .desc {
     width: 100%;
     height: auto;
@@ -130,3 +138,65 @@
     }
   }
 }
+
+.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 {
+      width: calc(100% - 34px);
+      display: flex;
+      flex-direction: column;
+      .label {
+        width: 100%;
+        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 {
+        width: 100%;
+        margin-top: 14px;
+        height: 16px;
+        font-size: 14px;
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.88);
+        line-height: 16px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    }
+    .download {
+      width: 34px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #ff4d4f;
+      line-height: 16px;
+      text-align: right;
+    }
+  }
+}

src/pages/course/index.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
-import { Image, ProgressCircle } from "antd-mobile";
+import { Image, ProgressCircle, Tabs, Toast } 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";
+import { isEmptyObject, isWechat, isIOS } from "../../utils/index";
 import { Empty } from "../../components";
 import { HourCompenent } from "./compenents/hour";
 
@@ -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,43 @@ 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[]>([]);
+  const [downLoadTemplateURL, setDownLoadTemplateURL] = useState("");
 
   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,13 +106,54 @@ const CoursePage = () => {
     navigate(`/course/${cid}/hour/${id}`);
   };
 
+  const downLoadFile = (cid: number, id: number) => {
+    vod.downloadAttachment(cid, id).then((res: any) => {
+      if (isWechat()) {
+        if (isIOS()) {
+          Toast.show("请点击右上角···浏览器打开下载");
+        }
+        var input = document.createElement("input");
+        input.value = res.data.download_url;
+        document.body.appendChild(input);
+        input.select();
+        document.execCommand("Copy");
+        document.body.removeChild(input);
+        window.open(res.data.download_url);
+      } else {
+        if (isIOS()) {
+          setDownLoadTemplateURL(res.data.download_url);
+          setTimeout(() => {
+            let $do: any = document.querySelector("#downLoadExcel");
+            $do.click();
+          }, 500);
+        } else {
+          window.open(res.data.download_url);
+        }
+      }
+    });
+  };
+
   return (
     <div className="main-body">
+      <a
+        style={{ display: "none" }}
+        id="downLoadExcel"
+        href={downLoadTemplateURL}
+        download={true}
+      ></a>
       <div className="main-header" style={{ backgroundColor: "#FF4D4F" }}>
         <Image
           className="back-icon"
           src={backIcon}
-          onClick={() => navigate(-1)}
+          onClick={() => {
+            if (window.history.length <= 1) {
+              // 将页面跳转到首页
+              navigate("/");
+            } else {
+              // 返回到前一个页面
+              navigate(-1);
+            }
+          }}
         />
       </div>
       <div className={styles["top-content"]}>
@@ -116,47 +185,51 @@ const CoursePage = () => {
         </div>
       </div>
       <div className={styles["other-content"]}>
-        {course?.short_desc && (
+        <div className="course-tab-box">
+          <Tabs
+            activeLineMode="fixed"
+            activeKey={String(tabKey)}
+            onChange={(key: any) => {
+              setTabKey(Number(key));
+            }}
+            style={{
+              "--fixed-active-line-width": "20px",
+              "--active-line-height": "3px",
+              "--active-title-color": "rgba(0,0,0,0.88)",
+              "--active-line-border-radius": "2px",
+              "--title-font-size": "16px",
+              "--content-padding": "18px",
+            }}
+          >
+            {items.map((item) => (
+              <Tabs.Tab title={item.label} key={item.key} />
+            ))}
+          </Tabs>
+        </div>
+        {tabKey === 1 && (
           <>
-            <div className={styles["desc"]}>{course.short_desc}</div>
-            <div className={styles["line"]}></div>
-          </>
-        )}
-        <div className={styles["chapters-hours-cont"]}>
-          {chapters.length === 0 && !hours && <Empty />}
+            {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>
-          )}
-
-          {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 +237,64 @@ 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>
+                  <div className={styles["title"]}>
+                    {item.title}.{item.ext}
+                  </div>
+                </div>
+                <div
+                  className={styles["download"]}
+                  onClick={() => downLoadFile(item.course_id, item.id)}
+                >
+                  下载
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );

src/pages/index/index.module.scss

@@ -90,15 +90,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
-}
-
-.active-child-item {
-  width: 100%;
-  float: left;
-  height: auto;
-  box-sizing: border-box;
-  padding-left: 20px;
-  .category-child-tit {
+  .act-category-child-tit {
     width: 100%;
     font-size: 14px;
     font-weight: 400;

src/pages/index/index.tsx

@@ -5,7 +5,7 @@ import { user } from "../../api/index";
 import styles from "./index.module.scss";
 import { useSelector } from "react-redux";
 import { useNavigate, useLocation } from "react-router-dom";
-import { Footer, TabBarFooter, Empty } from "../../components";
+import { Footer, Empty } from "../../components";
 import { CoursesModel } from "./compenents/courses-model";
 import { isEmptyObject } from "../../utils/index";
 
@@ -163,16 +163,13 @@ const IndexPage = () => {
     return (
       <>
         {data.map((item: any) => (
-          <div
-            key={item.key}
-            className={
-              item.key === categoryId
-                ? styles["active-child-item"]
-                : styles["child-item"]
-            }
-          >
+          <div key={item.key} className={styles["child-item"]}>
             <div
-              className={styles["category-child-tit"]}
+              className={
+                item.key === categoryId
+                  ? styles["act-category-child-tit"]
+                  : styles["category-child-tit"]
+              }
               onClick={() => {
                 setCategoryId(item.key);
                 setCategoryText(item.title);
@@ -324,7 +321,6 @@ const IndexPage = () => {
           </>
         )}
       </div>
-      <TabBarFooter></TabBarFooter>
     </div>
   );
 };

src/pages/layouts/with-footer/index.tsx

@@ -0,0 +1,17 @@
+import { Suspense } from "react";
+import { Outlet } from "react-router-dom";
+import LoadingPage from "../../loading";
+import { TabBarFooter } from "../../../components";
+
+const WithoutHeaderWithoutFooter = () => {
+  return (
+    <>
+      <Suspense fallback={<LoadingPage />}>
+        <Outlet />
+      </Suspense>
+      <TabBarFooter></TabBarFooter>
+    </>
+  );
+};
+
+export default WithoutHeaderWithoutFooter;

src/pages/layouts/without-footer/index.tsx

@@ -0,0 +1,13 @@
+import { Suspense } from "react";
+import { Outlet } from "react-router-dom";
+import LoadingPage from "../../loading";
+
+const WithoutHeaderWithoutFooter = () => {
+  return (
+    <Suspense fallback={<LoadingPage />}>
+      <Outlet />
+    </Suspense>
+  );
+};
+
+export default WithoutHeaderWithoutFooter;

src/pages/member/index.module.scss

@@ -1,5 +1,5 @@
 .main-body {
-  position: fixed;
+  position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
@@ -160,7 +160,12 @@
   bottom: 0px;
   left: 20px;
   right: 20px;
-  height: 253px;
+  min-height: 253px;
+  // box-sizing: border-box;
+  // padding-bottom: calc(
+  //   53px + constant(safe-area-inset-bottom)
+  // ); /* 兼容iOS 11.0 - 11.2 */
+  // padding-bottom: calc(53px + env(safe-area-inset-bottom)); /* 兼容iOS 11.2+ */
   .dialog-box {
     width: 100%;
     height: 162px;

src/pages/member/index.tsx

@@ -7,7 +7,6 @@ import { loginAction, logoutAction } from "../../store/user/loginUserSlice";
 import { ImageUploadItem } from "antd-mobile/es/components/image-uploader";
 import styles from "./index.module.scss";
 import { useDispatch, useSelector } from "react-redux";
-import { TabBarFooter } from "../../components";
 import moreIcon from "../../assets/images/commen/icon-more.png";
 
 const MemberPage = () => {
@@ -317,7 +316,6 @@ const MemberPage = () => {
           </div>
         </div>
       </Mask>
-      <TabBarFooter></TabBarFooter>
     </div>
   );
 };

src/pages/study/index.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { Skeleton } from "antd-mobile";
 import styles from "./index.module.scss";
 import { course } from "../../api/index";
-import { TabBarFooter, Empty } from "../../components";
+import { Empty } from "../../components";
 import { CoursesModel } from "./compenents/courses-model";
 import moment from "moment";
 
@@ -143,7 +143,6 @@ const StudyPage = () => {
           </>
         )}
       </div>
-      <TabBarFooter></TabBarFooter>
     </div>
   );
 };

src/routes/index.tsx

@@ -1,17 +1,29 @@
 import { lazy } from "react";
 import { RouteObject } from "react-router-dom";
 import { system, user } from "../api";
-
 import { getToken } from "../utils";
+// 页面加载
 import { InitPage } from "../pages/init";
-import IndexPage from "../pages/index/index";
 import LoginPage from "../pages/login";
-import MemberPage from "../pages/member/index";
-import ChangePasswordPage from "../pages/change-password/index";
-import ChangeDepartmentPage from "../pages/change-department/index";
-import StudyPage from "../pages/study/index";
-import CoursePage from "../pages/course/index";
-import CoursePlayPage from "../pages/course/video";
+import WithFooter from "../pages/layouts/with-footer";
+import WithoutFooter from "../pages/layouts/without-footer";
+
+//用户中心页面
+const MemberPage = lazy(() => import("../pages/member/index"));
+//主页
+const IndexPage = lazy(() => import("../pages/index/index"));
+//修改密码页面
+const ChangePasswordPage = lazy(() => import("../pages/change-password/index"));
+//修改部门页面
+const ChangeDepartmentPage = lazy(
+  () => import("../pages/change-department/index")
+);
+//学习页面
+const StudyPage = lazy(() => import("../pages/study/index"));
+//课程页面
+const CoursePage = lazy(() => import("../pages/course/index"));
+const CoursePlayPage = lazy(() => import("../pages/course/video"));
+
 import PrivateRoute from "../components/private-route";
 
 let RootPage: any = null;
@@ -53,35 +65,47 @@ const routes: RouteObject[] = [
     children: [
       {
         path: "/",
-        element: <PrivateRoute Component={<IndexPage />} />,
+        element: <WithFooter />,
+        children: [
+          {
+            path: "/",
+            element: <PrivateRoute Component={<IndexPage />} />,
+          },
+          {
+            path: "/member",
+            element: <PrivateRoute Component={<MemberPage />} />,
+          },
+          {
+            path: "/study",
+            element: <PrivateRoute Component={<StudyPage />} />,
+          },
+        ],
       },
       {
-        path: "/login",
-        element: <LoginPage />,
-      },
-      {
-        path: "/member",
-        element: <PrivateRoute Component={<MemberPage />} />,
-      },
-      {
-        path: "/change-password",
-        element: <PrivateRoute Component={<ChangePasswordPage />} />,
-      },
-      {
-        path: "/study",
-        element: <PrivateRoute Component={<StudyPage />} />,
-      },
-      {
-        path: "/change-department",
-        element: <PrivateRoute Component={<ChangeDepartmentPage />} />,
-      },
-      {
-        path: "/course/:courseId",
-        element: <PrivateRoute Component={<CoursePage />} />,
-      },
-      {
-        path: "/course/:courseId/hour/:hourId",
-        element: <PrivateRoute Component={<CoursePlayPage />} />,
+        path: "/",
+        element: <WithoutFooter />,
+        children: [
+          {
+            path: "/login",
+            element: <LoginPage />,
+          },
+          {
+            path: "/change-password",
+            element: <PrivateRoute Component={<ChangePasswordPage />} />,
+          },
+          {
+            path: "/change-department",
+            element: <PrivateRoute Component={<ChangeDepartmentPage />} />,
+          },
+          {
+            path: "/course/:courseId",
+            element: <PrivateRoute Component={<CoursePage />} />,
+          },
+          {
+            path: "/course/:courseId/hour/:hourId",
+            element: <PrivateRoute Component={<CoursePlayPage />} />,
+          },
+        ],
       },
     ],
   },

src/utils/index.ts

@@ -80,3 +80,13 @@ export function isMobile() {
 export function isEmptyObject(obj: Object) {
   return Object.keys(obj).length === 0;
 }
+
+export function isWechat() {
+  let ua = window.navigator.userAgent.toLowerCase();
+  return /micromessenger/.test(ua);
+}
+
+export function isIOS() {
+  var u = navigator.userAgent;
+  return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+}