课程详情初步

src/compenents/footer/index.tsx

@@ -9,6 +9,7 @@ export const Footer: React.FC = () => {
         backgroundColor: "#333333",
         height: 90,
         textAlign: "center",
+        marginTop: 80,
       }}
     >
       <i

src/compenents/header/index.tsx

@@ -92,7 +92,7 @@ export const Header: React.FC = () => {
           <Button.Group className={styles["button-group"]}>
             <Dropdown menu={{ items, onClick }} placement="bottomRight">
               <div className="d-flex">
-                {user.name && (
+                {user && user.name && (
                   <img
                     style={{ width: 36, height: 36, borderRadius: "50%" }}
                     src={user.avatar}

src/index.scss

@@ -217,6 +217,13 @@ h1 {
   color: $primaryColor;
 }
 
+.container {
+  width: 1200px;
+  min-height: 671px;
+  height: auto;
+  margin: 0 auto;
+}
+
 .login-box {
   .ant-btn {
     font-size: 18px !important;
@@ -247,6 +254,9 @@ h1 {
 
 .ant-progress {
   margin-bottom: 0px;
+  .ant-progress-text {
+    color: #ff4d4f !important;
+  }
 }
 
 .ant-modal-confirm-btns > .ant-btn-default:hover {

src/pages/course/compenents/hour.module.scss

@@ -0,0 +1,67 @@
+.item {
+  width: 100%;
+  height: 56px;
+  background: #ffffff;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0 24px;
+  cursor: pointer;
+  &:hover {
+    background: rgba(255, 77, 79, 0.05);
+  }
+
+  .left-item {
+    width: 900px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    i {
+      color: rgba(0, 0, 0, 0.3);
+    }
+    .title {
+      width: 850px;
+      margin-left: 10px;
+      height: 24px;
+      font-size: 14px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.88);
+      line-height: 24px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      text-align: left;
+    }
+  }
+
+  .record {
+    height: 24px;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.45);
+    line-height: 24px;
+    margin-right: 24px;
+  }
+
+  .link {
+    height: 24px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #ff4d4f;
+    line-height: 24px;
+    cursor: pointer;
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  .complete {
+    height: 24px;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.88);
+    line-height: 24px;
+  }
+}

src/pages/course/compenents/hour.tsx

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from "react";
+import { Image, Progress } from "antd";
+import { useNavigate } from "react-router-dom";
+import styles from "./hour.module.scss";
+import mediaIcon from "../../../assets/images/commen/icon-medal.png";
+import { Navigate } from "react-router-dom";
+import { durationFormat } from "../../../utils/index";
+
+interface PropInterface {
+  id: number;
+  title: string;
+  duration: number;
+  record: any;
+  progress: number;
+}
+
+export const HourCompenent: React.FC<PropInterface> = ({
+  id,
+  title,
+  duration,
+  record,
+  progress,
+}) => {
+  const navigate = useNavigate();
+  return (
+    <div className={styles["item"]}>
+      <div className={styles["left-item"]}>
+        <i className="iconfont icon-icon-video"></i>
+        <div className={styles["title"]}>
+          {title}({durationFormat(Number(duration))})
+        </div>
+      </div>
+      <div className="d-flex">
+        {progress >= 0 && progress < 100 && (
+          <>
+            <div className={styles["record"]}>
+              上次学习到{durationFormat(Number(duration))}
+            </div>
+            {progress === 0 && (
+              <div
+                className={styles["link"]}
+                onClick={() => {
+                  navigate(`/course/play/${id}`);
+                }}
+              >
+                开始学习
+              </div>
+            )}
+            {progress !== 0 && (
+              <div
+                className={styles["link"]}
+                onClick={() => {
+                  navigate(`/course/play/${id}`);
+                }}
+              >
+                继续学习
+              </div>
+            )}
+          </>
+        )}
+        {progress === 100 && <div className={styles["complete"]}>已学完</div>}
+      </div>
+    </div>
+  );
+};

src/pages/course/index.module.scss

@@ -0,0 +1,136 @@
+.top-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;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 24px;
+  .info {
+    width: 720px;
+    height: 90px;
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-left: 24px;
+    .title {
+      width: 100%;
+      height: 36px;
+      font-size: 20px;
+      font-weight: 600;
+      color: rgba(0, 0, 0, 0.88);
+      text-overflow: ellipsis;
+      line-height: 36px;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+    .status {
+      width: 100%;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      .type {
+        width: 52px;
+        height: 24px;
+        background: rgba(255, 77, 79, 0.1);
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #ff4d4f;
+        line-height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .active-type {
+        width: 52px;
+        height: 24px;
+        background: rgba(#ff9900, 0.1);
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #ff9900;
+        line-height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .success {
+        height: 24px;
+        display: flex;
+        align-items: center;
+        margin-left: 24px;
+        span {
+          height: 24px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #ff4d4f;
+          line-height: 24px;
+        }
+      }
+    }
+  }
+  .desc {
+    width: 100%;
+    height: 112px;
+    font-size: 16px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.6);
+    line-height: 28px;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    margin-top: 34px;
+  }
+}
+
+.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;
+  box-sizing: border-box;
+  padding: 24px;
+  .hours-list-box {
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+
+    .chapter-it {
+      width: 100%;
+      height: auto;
+      margin-bottom: 24px;
+      &:last-child {
+        margin-bottom: 0px;
+      }
+      .chapter-name {
+        width: 100%;
+        height: 24px;
+        font-size: 16px;
+        font-weight: 500;
+        color: rgba(0, 0, 0, 0.88);
+        line-height: 24px;
+        text-align: left;
+        margin-bottom: 24px;
+      }
+    }
+    .hours-it {
+      width: 100%;
+      height: auto;
+      margin-bottom: 8px;
+      &:last-child {
+        margin-bottom: 0px;
+      }
+    }
+  }
+}

src/pages/course/index.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useState } from "react";
+import { Image, Progress } from "antd";
+import styles from "./index.module.scss";
+import { useParams } 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";
+
+const CoursePage = () => {
+  const params = useParams();
+  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>({});
+  const [progress, setprogresP] = useState(20);
+
+  useEffect(() => {
+    getDetail();
+  }, [params.courseId]);
+
+  const getDetail = () => {
+    setLoading(true);
+    Course.detail(Number(params.courseId)).then((res: any) => {
+      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);
+    });
+  };
+
+  return (
+    <div className="container">
+      <div className={styles["top-cont"]}>
+        <div className="j-b-flex">
+          <div className="d-flex">
+            <Image
+              width={120}
+              height={90}
+              style={{ borderRadius: 10 }}
+              preview={false}
+              src={course.thumb}
+            />
+            <div className={styles["info"]}>
+              <div className={styles["title"]}>{course.title}</div>
+              <div className={styles["status"]}>
+                {course.is_required === 1 && (
+                  <div className={styles["type"]}>必修课</div>
+                )}
+                {course.is_required === 0 && (
+                  <div className={styles["active-type"]}>选修课</div>
+                )}
+                {progress === 100 && (
+                  <div className={styles["success"]}>
+                    <Image
+                      width={24}
+                      height={24}
+                      src={mediaIcon}
+                      preview={false}
+                    />
+                    <span className="ml-8">恭喜你学完此套课程!</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+          <Progress
+            type="circle"
+            strokeColor="#FF4D4F"
+            trailColor="#F6F6F6"
+            size={90}
+            strokeWidth={8}
+            percent={progress}
+            format={(percent) => `${percent}%`}
+          />
+        </div>
+        {course.short_desc && (
+          <div className={styles["desc"]}>{course.short_desc}</div>
+        )}
+      </div>
+      <div className={styles["chapters-hours-cont"]}>
+        {chapters.length === 0 && JSON.stringify(hours) !== "{}" && (
+          <div className={styles["hours-list-box"]}>
+            {hours[0].map((item: any) => (
+              <div key={item.id} className={styles["hours-it"]}>
+                <HourCompenent
+                  id={item.id}
+                  title={item.title}
+                  record={item.rid}
+                  duration={item.duration}
+                  progress={progress}
+                ></HourCompenent>
+              </div>
+            ))}
+          </div>
+        )}
+        {chapters.length > 0 && JSON.stringify(hours) !== "{}" && (
+          <div className={styles["hours-list-box"]}>
+            {chapters.map((item: any) => (
+              <div key={item.id} className={styles["chapter-it"]}>
+                <div className={styles["chapter-name"]}>{item.name}</div>
+                {hours[item.id].map((it: any) => (
+                  <div key={it.id} className={styles["hours-it"]}>
+                    <HourCompenent
+                      id={it.id}
+                      title={it.title}
+                      record={it.rid}
+                      duration={it.duration}
+                      progress={0}
+                    ></HourCompenent>
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CoursePage;

src/pages/index/compenents/courses-model.tsx

@@ -1,9 +1,12 @@
 import React, { useState, useEffect } from "react";
 import { Image, Progress } from "antd";
+import { useNavigate } from "react-router-dom";
 import styles from "./courses-model.module.scss";
 import mediaIcon from "../../../assets/images/commen/icon-medal.png";
+import { Navigate } from "react-router-dom";
 
 interface PropInterface {
+  id: number;
   title: string;
   thumb: string;
   isRequired: number;
@@ -11,13 +14,20 @@ interface PropInterface {
 }
 
 export const CoursesModel: React.FC<PropInterface> = ({
+  id,
   title,
   thumb,
   isRequired,
   progress,
 }) => {
+  const navigate = useNavigate();
   return (
-    <div className={styles["item"]}>
+    <div
+      className={styles["item"]}
+      onClick={() => {
+        navigate(`/course/${id}`);
+      }}
+    >
       <div className={styles["top-content"]}>
         <Image
           width={120}

src/pages/index/index.module.scss

@@ -79,7 +79,6 @@
   width: 1200px;
   margin: 0 auto;
   margin-top: 80px;
-  margin-bottom: 80px;
   text-align: center;
   height: 40px;
   font-size: 16px;

src/pages/index/index.tsx

@@ -188,6 +188,7 @@ const IndexPage = () => {
             <div key={item.id}>
               {learnCourseRecords[item.id] && (
                 <CoursesModel
+                  id={item.id}
                   title={item.title}
                   thumb={item.thumb}
                   isRequired={item.is_required}
@@ -196,6 +197,7 @@ const IndexPage = () => {
               )}
               {!learnCourseRecords[item.id] && (
                 <CoursesModel
+                  id={item.id}
                   title={item.title}
                   thumb={item.thumb}
                   isRequired={item.is_required}

src/routes/index.tsx

@@ -32,6 +32,7 @@ const Init = lazy(async () => {
 // 懒加载
 const LoginPage = lazy(() => import("../pages/login"));
 const IndexPage = lazy(() => import("../pages/index"));
+const CoursePage = lazy(() => import("../pages/course"));
 
 const routes: RouteObject[] = [
   {
@@ -46,6 +47,10 @@ const routes: RouteObject[] = [
         path: "/login",
         element: <LoginPage />,
       },
+      {
+        path: "/course/:courseId",
+        element: <CoursePage />,
+      },
     ],
   },
 ];

src/store/user/loginUserSlice.ts

@@ -1,13 +1,7 @@
 import { createSlice } from "@reduxjs/toolkit";
 
-type UserInterface = {
-  id: number;
-  name: string;
-  email: string;
-  avatar: string;
-};
 type UserStoreInterface = {
-  user: UserInterface | null;
+  user: null;
   departments: string[];
   isLogin: boolean;
 };

src/utils/index.ts

@@ -16,8 +16,17 @@ export function dateFormat(dateStr: string) {
   return moment(dateStr).format("YYYY-MM-DD HH:mm");
 }
 
+export function durationFormat(dateStr: number) {
+  var d = moment.duration(dateStr, "seconds");
+  let hour = d.hours() === 0 ? "" : d.hours() + ":";
+  let minute = d.minutes() >= 10 ? d.minutes() + ":" : "0" + d.minutes() + ":";
+  let second = d.seconds() >= 10 ? d.seconds() : "0" + d.seconds();
+
+  return hour + minute + second;
+}
+
 export function studyTimeFormat(dateStr: number) {
-  var d = moment.duration(dateStr/1000, "seconds");
+  var d = moment.duration(dateStr / 1000, "seconds");
   let value = [];
   value.push(Math.floor(d.asDays()));
   value.push(d.hours());