课程详情页初步

src/pages/change-department/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Radio, Image } from "antd-mobile";
 import styles from "./index.module.scss";
 import { useNavigate } from "react-router-dom";
@@ -18,6 +18,10 @@ const ChangeDepartmentPage = () => {
     (state: any) => state.loginUser.value.currentDepId
   );
 
+  useEffect(() => {
+    document.title = "切换部门";
+  }, []);
+
   const onDepClick = (value: any) => {
     let it = departments.find((o: any) => o.id === value);
     if (it) {

src/pages/course/index.module.scss

@@ -0,0 +1,8 @@
+.top-content {
+  width: 100%;
+  float: left;
+  height: auto;
+  background-color: #ff4d4f;
+  box-sizing: border-box;
+  padding: 8px 20px 20px 20px;
+}

src/pages/course/index.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import { Image, ProgressBar, SpinLoading } from "antd-mobile";
+import styles from "./index.module.scss";
+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";
+
+const CoursePage = () => {
+  const params = useParams();
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState<boolean>(false);
+  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>({});
+
+  useEffect(() => {
+    getDetail();
+  }, [params.courseId]);
+
+  const getDetail = () => {
+    setLoading(true);
+    Course.detail(Number(params.courseId))
+      .then((res: any) => {
+        document.title = res.data.course.title;
+        setCourse(res.data.course);
+        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);
+        }
+        setLoading(false);
+      })
+      .catch((e) => {
+        setLoading(false);
+      });
+  };
+
+  return (
+    <div className="main-body">
+      <div className="main-header" style={{ backgroundColor: "#FF4D4F" }}>
+        <Image
+          className="back-icon"
+          src={backIcon}
+          onClick={() => navigate(-1)}
+        />
+      </div>
+      <div className={styles["top-content"]}></div>
+    </div>
+  );
+};
+
+export default CoursePage;

src/routes/index.tsx

@@ -10,6 +10,7 @@ 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 PrivateRoute from "../components/private-route";
 
 let RootPage: any = null;
@@ -62,6 +63,10 @@ const routes: RouteObject[] = [
         path: "/change-department",
         element: <PrivateRoute Component={<ChangeDepartmentPage />} />,
       },
+      {
+        path: "/course/:courseId",
+        element: <PrivateRoute Component={<CoursePage />} />,
+      },
     ],
   },
 ];