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,6 +185,29 @@ const CoursePage = () => {
         </div>
       </div>
       <div className={styles["other-content"]}>
+        <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 && (
+          <>
             {course?.short_desc && (
               <>
                 <div className={styles["desc"]}>{course.short_desc}</div>
@@ -126,7 +218,10 @@ const CoursePage = () => {
               {chapters.length === 0 && !hours && <Empty />}
 
               {chapters.length === 0 && hours && (
-            <div className={styles["hours-list-box"]} style={{ marginTop: 10 }}>
+                <div
+                  className={styles["hours-list-box"]}
+                  style={{ marginTop: 10 }}
+                >
                   {hours[0].map((item: CourseHourModel) => (
                     <div key={item.id} className={styles["hours-it"]}>
                       <HourCompenent
@@ -168,6 +263,38 @@ const CoursePage = () => {
                 </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={styles["child-item"]}>
             <div
-            key={item.key}
               className={
                 item.key === categoryId
-                ? styles["active-child-item"]
-                : styles["child-item"]
+                  ? styles["act-category-child-tit"]
+                  : styles["category-child-tit"]
               }
-          >
-            <div
-              className={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,24 +65,34 @@ const routes: RouteObject[] = [
     children: [
       {
         path: "/",
-        element: <PrivateRoute Component={<IndexPage />} />,
-      },
+        element: <WithFooter />,
+        children: [
           {
-        path: "/login",
-        element: <LoginPage />,
+            path: "/",
+            element: <PrivateRoute Component={<IndexPage />} />,
           },
           {
             path: "/member",
             element: <PrivateRoute Component={<MemberPage />} />,
           },
-      {
-        path: "/change-password",
-        element: <PrivateRoute Component={<ChangePasswordPage />} />,
-      },
           {
             path: "/study",
             element: <PrivateRoute Component={<StudyPage />} />,
           },
+        ],
+      },
+      {
+        path: "/",
+        element: <WithoutFooter />,
+        children: [
+          {
+            path: "/login",
+            element: <LoginPage />,
+          },
+          {
+            path: "/change-password",
+            element: <PrivateRoute Component={<ChangePasswordPage />} />,
+          },
           {
             path: "/change-department",
             element: <PrivateRoute Component={<ChangeDepartmentPage />} />,
@@ -85,6 +107,8 @@ const routes: RouteObject[] = [
           },
         ],
       },
+    ],
+  },
 ];
 
 export default routes;

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/);
+}