Merge pull request #11 from PlayEdu/dev

弹窗组件open外置并使用三元运算

src/App.tsx

@@ -11,7 +11,7 @@ if (G_ID) {
 }
 
 const App = () => {
-  const Views = () => useRoutes(routes);
+  const views = useRoutes(routes);
 
   const location = useLocation();
   useEffect(() => {
@@ -23,7 +23,7 @@ const App = () => {
 
   return (
     <Suspense fallback={<LoadingPage />}>
-      <Views />
+      {views}
     </Suspense>
   );
 };

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,10 +56,13 @@ export class HttpClient {
           GoLogin();
         } else if (status === 404) {
           // 跳转到404页面
+          GoError();
         } else if (status === 403) {
           // 跳转到无权限页面
+          GoError();
         } else if (status === 500) {
           // 跳转到500异常页面
+          GoError();
         }
         return Promise.reject(error.response);
       }

src/api/login.ts

@@ -1,16 +1,9 @@
 import client from "./internal/httpClient";
 
-export function login(
-  email: string,
-  password: string,
-  captchaKey: string,
-  captchaVal: string
-) {
+export function login(email: string, password: string) {
   return client.post("/api/v1/auth/login/password", {
     email: email,
     password: password,
-    captcha_key: captchaKey,
-    captcha_val: captchaVal,
   });
 }
 

src/compenents/change-password/index.tsx

@@ -40,63 +40,65 @@ export const ChangePasswordModel: React.FC<PropInterface> = ({
 
   return (
     <>
-      <Modal
-        title="修改密码"
-        centered
-        forceRender
-        open={open}
-        width={416}
-        onOk={() => form.submit()}
-        onCancel={() => onCancel()}
-        maskClosable={false}
-      >
-        <div className="float-left mt-24">
-          <Form
-            form={form}
-            name="change-password"
-            labelCol={{ span: 8 }}
-            wrapperCol={{ span: 16 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
-          >
-            <Form.Item
-              label="请输入原密码"
-              name="old_password"
-              rules={[{ required: true, message: "请输入原密码!" }]}
+      {open ? (
+        <Modal
+          title="修改密码"
+          centered
+          forceRender
+          open={true}
+          width={416}
+          onOk={() => form.submit()}
+          onCancel={() => onCancel()}
+          maskClosable={false}
+        >
+          <div className="float-left mt-24">
+            <Form
+              form={form}
+              name="change-password"
+              labelCol={{ span: 8 }}
+              wrapperCol={{ span: 16 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <Input.Password
-                style={{ width: 200 }}
-                autoComplete="off"
-                placeholder="请输入原密码"
-              />
-            </Form.Item>
-            <Form.Item
-              label="输入新密码"
-              name="new_password"
-              rules={[{ required: true, message: "请输入新密码!" }]}
-            >
-              <Input.Password
-                style={{ width: 200 }}
-                autoComplete="off"
-                placeholder="请输入新密码"
-              />
-            </Form.Item>
-            <Form.Item
-              label="再次输入新密码"
-              name="again_new_password"
-              rules={[{ required: true, message: "再次输入新密码!" }]}
-            >
-              <Input.Password
-                style={{ width: 200 }}
-                autoComplete="off"
-                placeholder="再次输入新密码"
-              />
-            </Form.Item>
-          </Form>
-        </div>
-      </Modal>
+              <Form.Item
+                label="请输入原密码"
+                name="old_password"
+                rules={[{ required: true, message: "请输入原密码!" }]}
+              >
+                <Input.Password
+                  style={{ width: 200 }}
+                  autoComplete="off"
+                  placeholder="请输入原密码"
+                />
+              </Form.Item>
+              <Form.Item
+                label="输入新密码"
+                name="new_password"
+                rules={[{ required: true, message: "请输入新密码!" }]}
+              >
+                <Input.Password
+                  style={{ width: 200 }}
+                  autoComplete="off"
+                  placeholder="请输入新密码"
+                />
+              </Form.Item>
+              <Form.Item
+                label="再次输入新密码"
+                name="again_new_password"
+                rules={[{ required: true, message: "再次输入新密码!" }]}
+              >
+                <Input.Password
+                  style={{ width: 200 }}
+                  autoComplete="off"
+                  placeholder="再次输入新密码"
+                />
+              </Form.Item>
+            </Form>
+          </div>
+        </Modal>
+      ) : null}
     </>
   );
 };

src/compenents/user-info/index.tsx

@@ -75,60 +75,62 @@ export const UserInfoModel: React.FC<PropInterface> = ({ open, onCancel }) => {
 
   return (
     <>
-      <Modal
-        title="个人信息"
-        centered
-        forceRender
-        open={open}
-        width={416}
-        onCancel={() => onCancel()}
-        maskClosable={false}
-        footer={null}
-      >
-        <div className="mt-24">
-          <Form
-            form={form}
-            name="user-info"
-            labelCol={{ span: 8 }}
-            wrapperCol={{ span: 16 }}
-            initialValues={{ remember: true }}
-            autoComplete="off"
-          >
-            <Form.Item
-              label="学员头像"
-              labelCol={{ style: { marginTop: 15, marginLeft: 52 } }}
+      {open ? (
+        <Modal
+          title="个人信息"
+          centered
+          forceRender
+          open={true}
+          width={416}
+          onCancel={() => onCancel()}
+          maskClosable={false}
+          footer={null}
+        >
+          <div className="mt-24">
+            <Form
+              form={form}
+              name="user-info"
+              labelCol={{ span: 8 }}
+              wrapperCol={{ span: 16 }}
+              initialValues={{ remember: true }}
+              autoComplete="off"
             >
-              <div className="d-flex">
-                {avatar && (
-                  <Image
-                    loading="lazy"
-                    width={60}
-                    height={60}
-                    style={{ borderRadius: "50%" }}
-                    src={avatar}
-                    preview={false}
-                  />
-                )}
-                <div className="d-flex ml-16">
-                  <Upload {...props} showUploadList={false}>
-                    <Button>更换头像</Button>
-                  </Upload>
+              <Form.Item
+                label="学员头像"
+                labelCol={{ style: { marginTop: 15, marginLeft: 52 } }}
+              >
+                <div className="d-flex">
+                  {avatar && (
+                    <Image
+                      loading="lazy"
+                      width={60}
+                      height={60}
+                      style={{ borderRadius: "50%" }}
+                      src={avatar}
+                      preview={false}
+                    />
+                  )}
+                  <div className="d-flex ml-16">
+                    <Upload {...props} showUploadList={false}>
+                      <Button>更换头像</Button>
+                    </Upload>
+                  </div>
                 </div>
-              </div>
-            </Form.Item>
-            {name && (
-              <Form.Item label="学员姓名">
-                <div>{name}</div>
               </Form.Item>
-            )}
-            {idCard && (
-              <Form.Item label="身份证号" style={{ marginBottom: 16 }}>
-                <div>{idCard}</div>
-              </Form.Item>
-            )}
-          </Form>
-        </div>
-      </Modal>
+              {name && (
+                <Form.Item label="学员姓名">
+                  <div>{name}</div>
+                </Form.Item>
+              )}
+              {idCard && (
+                <Form.Item label="身份证号" style={{ marginBottom: 16 }}>
+                  <div>{idCard}</div>
+                </Form.Item>
+              )}
+            </Form>
+          </div>
+        </Modal>
+      ) : null}
     </>
   );
 };

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";
+
+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 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,78 +181,136 @@ const CoursePage = () => {
               <div className={styles["desc"]}>{course.short_desc}</div>
             )}
           </div>
-          <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 className={styles["tabs"]}>
+            {items.map((item: any) => (
+              <div
+                key={item.key}
+                className={
+                  item.key === tabKey
+                    ? styles["tab-active-item"]
+                    : styles["tab-item"]
+                }
+                onClick={() => {
+                  onChange(item.key);
+                }}
+              >
+                <div className={styles["tit"]}>{item.label}</div>
+                {item.key === tabKey && (
+                  <Image
+                    className={styles["banner"]}
+                    width={40}
+                    height={8}
+                    preview={false}
+                    src={iconRoute}
+                    style={{ marginTop: -16 }}
+                  />
+                )}
               </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].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}.{item.ext}
+                    </span>
+                  </div>
+                  <div
+                    className={styles["download"]}
+                    onClick={() => downLoadFile(item.course_id, item.id)}
+                  >
+                    下载
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
         </>
       )}
     </div>

src/pages/course/video.module.scss

@@ -49,7 +49,7 @@
     overflow-y: auto;
     .video-title {
       width: 100%;
-      height: 36px;
+      height: auto;
       font-size: 20px;
       font-weight: 600;
       color: rgba(255, 255, 255, 0.88);

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

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { Row, Col, Spin, Tree, Popover, Space, Image } from "antd";
-import type { MenuProps } from "antd";
+import { useNavigate, useLocation } from "react-router-dom";
 import { user } from "../../api/index";
 import styles from "./index.module.scss";
 import { useSelector } from "react-redux";
@@ -12,22 +12,24 @@ import iconRoute from "../../assets/images/commen/icon-route.png";
 import { studyTimeFormat } from "../../utils/index";
 
 const IndexPage = () => {
+  const navigate = useNavigate();
+  const result = new URLSearchParams(useLocation().search);
   const systemConfig = useSelector((state: any) => state.systemConfig.value);
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState<boolean>(false);
-  const [tabKey, setTabKey] = useState(0);
+  const [tabKey, setTabKey] = useState(Number(result.get("tab") || 0));
   const [coursesList, setCoursesList] = useState<any>([]);
   const [categories, setCategories] = useState<any>([]);
-  const [categoryId, setCategoryId] = useState<number>(0);
-  const [categoryText, setCategoryText] = useState<string>("所有分类");
+  const [categoryId, setCategoryId] = useState<number>(
+    Number(result.get("cid") || 0)
+  );
+  const [categoryText, setCategoryText] = useState<string>(
+    String(result.get("catName") || "所有分类")
+  );
   const [selectKey, setSelectKey] = useState<any>([0]);
   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
   );
@@ -36,6 +38,12 @@ const IndexPage = () => {
     getParams();
   }, []);
 
+  useEffect(() => {
+    let arr = [];
+    arr.push(Number(result.get("cid") || 0));
+    setSelectKey(arr);
+  }, [result.get("cid")]);
+
   useEffect(() => {
     if (currentDepId === 0) {
       return;
@@ -163,17 +171,38 @@ const IndexPage = () => {
 
   const onChange = (key: number) => {
     setTabKey(key);
+    navigate(
+      "/?cid=" + categoryId + "&catName=" + categoryText + "&tab=" + key
+    );
   };
 
   const onSelect = (selectedKeys: any, info: any) => {
     setCategoryId(selectedKeys[0]);
     if (info.node.key === 0) {
       setCategoryText(info.node.title);
+      setSelectKey(selectedKeys);
+      hide();
+      navigate(
+        "/?cid=" +
+          selectedKeys[0] +
+          "&catName=" +
+          info.node.title +
+          "&tab=" +
+          tabKey
+      );
     } else {
       setCategoryText(info.node.title.props.children);
+      setSelectKey(selectedKeys);
+      hide();
+      navigate(
+        "/?cid=" +
+          selectedKeys[0] +
+          "&catName=" +
+          info.node.title.props.children +
+          "&tab=" +
+          tabKey
+      );
     }
-    setSelectKey(selectedKeys);
-    hide();
   };
 
   const handleOpenChange = (newOpen: boolean) => {

src/pages/init/index.tsx

@@ -1,14 +1,12 @@
 import { useState, useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { Outlet } from "react-router-dom";
-// import styles from "./index.module.scss";
 import {
   SystemConfigStoreInterface,
   saveConfigAction,
 } from "../../store/system/systemConfigSlice";
 import { loginAction } from "../../store/user/loginUserSlice";
-import { Header, NoHeader, Footer } from "../../compenents";
-import { useParams, useLocation } from "react-router-dom";
+import { isMobile } from "../../utils/index";
 
 interface Props {
   loginData?: any;
@@ -16,30 +14,8 @@ interface Props {
 }
 
 export const InitPage = (props: Props) => {
-  const pathname = useLocation().pathname;
-  const params = useParams();
   const dispatch = useDispatch();
-  const [showHeader, setShowHeader] = useState<boolean>(true);
-  const [showNoHeader, setShowNoHeader] = useState<boolean>(false);
-  const [showFooter, setShowFooter] = useState<boolean>(true);
   const [init, setInit] = useState<boolean>(false);
-  useEffect(() => {
-    if (pathname) {
-      if (pathname === "/login") {
-        setShowNoHeader(true);
-        setShowHeader(false);
-        setShowFooter(false);
-      } else if (!params.hourId) {
-        setShowNoHeader(false);
-        setShowHeader(true);
-        setShowFooter(true);
-      } else {
-        setShowNoHeader(false);
-        setShowHeader(false);
-        setShowFooter(false);
-      }
-    }
-  }, [pathname, params]);
 
   useEffect(() => {
     if (props.loginData) {
@@ -72,6 +48,10 @@ export const InitPage = (props: Props) => {
           props.configData["player-bullet-secret-opacity"],
       };
       dispatch(saveConfigAction(config));
+      if (isMobile() && props.configData["system-h5-url"] !== "") {
+        let url = props.configData["system-h5-url"];
+        window.location.href = url;
+      }
     }
     setInit(true);
   }, [props]);
@@ -79,11 +59,8 @@ export const InitPage = (props: Props) => {
   return (
     <>
       {init && (
-        <div>
-          {showNoHeader && <NoHeader></NoHeader>}
-          {showHeader && <Header></Header>}
+        <div style={{ minHeight: 900 }}>
           <Outlet />
-          {showFooter && <Footer></Footer>}
         </div>
       )}
     </>

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

@@ -0,0 +1,18 @@
+import { Outlet } from "react-router-dom";
+import { Footer, Header } from "../../../compenents";
+import { Suspense } from "react";
+import LoadingPage from "../../loading";
+
+const WithHeaderWithFooter = () => {
+  return (
+    <>
+      <Header></Header>
+      <Suspense fallback={<LoadingPage height="100vh" />}>
+        <Outlet />
+      </Suspense>
+      <Footer></Footer>
+    </>
+  );
+};
+
+export default WithHeaderWithFooter;

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

@@ -0,0 +1,17 @@
+import { Outlet } from "react-router-dom";
+import { NoHeader } from "../../../compenents";
+import { Suspense } from "react";
+import LoadingPage from "../../loading";
+
+const WithHeaderWithoutFooter = () => {
+  return (
+    <>
+      <NoHeader></NoHeader>
+      <Suspense fallback={<LoadingPage height="100vh" />}>
+        <Outlet />
+      </Suspense>
+    </>
+  );
+};
+
+export default WithHeaderWithoutFooter;

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

@@ -0,0 +1,17 @@
+import { Outlet } from "react-router-dom";
+import { Footer } from "../../../compenents";
+import { Suspense } from "react";
+import LoadingPage from "../../loading";
+
+const WithoutHeaderWithFooter = () => {
+  return (
+    <>
+      <Suspense fallback={<LoadingPage height="100vh" />}>
+        <Outlet />
+      </Suspense>
+      <Footer></Footer>
+    </>
+  );
+};
+
+export default WithoutHeaderWithFooter;

src/pages/layouts/without-header-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 height="100vh" />}>
+      <Outlet />
+    </Suspense>
+  );
+};
+
+export default WithoutHeaderWithoutFooter;

src/pages/loading/index.module.scss

@@ -1,10 +1,6 @@
-.loadingBox {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 99;
-  text-align: center;
+.loading-box {
+  width: 100vw;
   line-height: 100vh;
+  text-align: center;
+  background-color: #f4fafe;
 }

src/pages/loading/index.tsx

@@ -1,11 +1,20 @@
 import { Spin } from "antd";
 import styles from "./index.module.scss";
 
-const LoadingPage = () => {
+interface PropsInterface {
+  height?: string;
+}
+
+const LoadingPage = (props: PropsInterface) => {
   return (
-    <div className={styles.loadingBox}>
-      <Spin />
-    </div>
+    <>
+      <div
+        className={styles["loading-box"]}
+        style={{ height: props.height || "100vh" }}
+      >
+        <Spin size="large" />
+      </div>
+    </>
   );
 };
 

src/pages/login/index.module.scss

@@ -47,7 +47,7 @@
         height: 100%;
         box-sizing: border-box;
         border-left: 1px solid #d8d8d8;
-        padding: 0px 60px;
+        padding: 50px 60px;
         display: flex;
         flex-direction: column;
         .captcha-box {

src/pages/login/index.tsx

@@ -1,11 +1,11 @@
-import { Spin, Input, Button, message } from "antd";
+import { Input, Button, message } from "antd";
 import React, { useState, useEffect } from "react";
 import styles from "./index.module.scss";
 import banner from "../../assets/images/login/banner.png";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { loginAction, logoutAction } from "../../store/user/loginUserSlice";
-import { login, system, user } from "../../api/index";
+import { loginAction } from "../../store/user/loginUserSlice";
+import { login, user } from "../../api/index";
 import { setToken } from "../../utils/index";
 import { NoFooter } from "../../compenents";
 
@@ -13,25 +13,8 @@ const LoginPage: React.FC = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const [loading, setLoading] = useState<boolean>(false);
-  const [image, setImage] = useState<string>("");
   const [email, setEmail] = useState<string>("");
   const [password, setPassword] = useState<string>("");
-  const [captchaVal, setCaptchaVal] = useState<string>("");
-  const [captchaKey, setCaptchaKey] = useState<string>("");
-  const [captchaLoading, setCaptchaLoading] = useState(true);
-
-  useEffect(() => {
-    fetchImageCaptcha();
-  }, []);
-
-  const fetchImageCaptcha = () => {
-    setCaptchaLoading(true);
-    system.imageCaptcha().then((res: any) => {
-      setImage(res.data.image);
-      setCaptchaKey(res.data.key);
-      setCaptchaLoading(false);
-    });
-  };
 
   const loginSubmit = (e: any) => {
     if (!email) {
@@ -42,14 +25,6 @@ const LoginPage: React.FC = () => {
       message.error("请输入密码");
       return;
     }
-    if (!captchaVal) {
-      message.error("请输入图形验证码");
-      return;
-    }
-    if (captchaVal.length < 4) {
-      message.error("图形验证码错误");
-      return;
-    }
     if (loading) {
       return;
     }
@@ -68,7 +43,7 @@ const LoginPage: React.FC = () => {
     }
     setLoading(true);
     login
-      .login(email, password, captchaKey, captchaVal)
+      .login(email, password)
       .then((res: any) => {
         const token = res.data.token;
         setToken(token);
@@ -76,8 +51,6 @@ const LoginPage: React.FC = () => {
       })
       .catch((e) => {
         setLoading(false);
-        setCaptchaVal("");
-        fetchImageCaptcha();
       });
   };
 
@@ -118,33 +91,8 @@ const LoginPage: React.FC = () => {
                 }}
                 style={{ width: 400, height: 54 }}
                 placeholder="请输入密码"
-              />
-            </div>
-            <div className="login-box d-flex mt-50">
-              <Input
-                value={captchaVal}
-                style={{ width: 260, height: 54 }}
-                placeholder="请输入图形验证码"
-                onChange={(e) => {
-                  setCaptchaVal(e.target.value);
-                }}
                 onKeyUp={(e) => keyUp(e)}
               />
-              <div className={styles["captcha-box"]}>
-                {captchaLoading && (
-                  <div className={styles["catpcha-loading-box"]}>
-                    <Spin size="small" />
-                  </div>
-                )}
-
-                {!captchaLoading && (
-                  <img
-                    className={styles["captcha"]}
-                    onClick={fetchImageCaptcha}
-                    src={image}
-                  />
-                )}
-              </div>
             </div>
             <div className="login-box d-flex mt-50">
               <Button

src/routes/index.tsx

@@ -1,15 +1,25 @@
 import { lazy } from "react";
 import { RouteObject } from "react-router-dom";
 import { system, user } from "../api";
-import { SystemConfigStoreInterface } from "../store/system/systemConfigSlice";
-
 import { getToken } from "../utils";
+// 页面加载
 import { InitPage } from "../pages/init";
-import CoursePage from "../pages/course/index";
-import CoursePlayPage from "../pages/course/video";
-import IndexPage from "../pages/index";
-import LatestLearnPage from "../pages/latest-learn";
 import LoginPage from "../pages/login";
+import WithHeaderWithFooter from "../pages/layouts/with-header-with-footer";
+import WithHeaderWithoutFooter from "../pages/layouts/with-header-without-footer";
+import WithoutHeaderWithFooter from "../pages/layouts/without-header-with-footer";
+import WithoutHeaderWithoutFooter from "../pages/layouts/without-header-without-footer";
+
+//主页
+const IndexPage = lazy(() => import("../pages/index"));
+//课程相关
+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";
 
 let RootPage: any = null;
@@ -30,14 +40,20 @@ if (getToken()) {
     });
   });
 } else {
-  RootPage = <InitPage />;
-}
+  RootPage = lazy(async () => {
+    return new Promise<any>(async (resolve) => {
+      try {
+        let configRes: any = await system.config();
 
-// 懒加载
-// const LoginPage = lazy(() => import("../pages/login"));
-// const IndexPage = lazy(() => import("../pages/index"));
-// const CoursePage = lazy(() => import("../pages/course"));
-// const LatestLearnPage = lazy(() => import("../pages/latest-learn"));
+        resolve({
+          default: <InitPage configData={configRes.data} />,
+        });
+      } catch (e) {
+        console.error("系统初始化失败", e);
+      }
+    });
+  });
+}
 
 const routes: RouteObject[] = [
   {
@@ -46,23 +62,51 @@ const routes: RouteObject[] = [
     children: [
       {
         path: "/",
-        element: <PrivateRoute Component={<IndexPage />} />,
+        element: <WithHeaderWithFooter />,
+        children: [
+          {
+            path: "/",
+            element: <PrivateRoute Component={<IndexPage />} />,
+          },
+
+          {
+            path: "/course/:courseId",
+            element: <PrivateRoute Component={<CoursePage />} />,
+          },
+
+          {
+            path: "/latest-learn",
+            element: <PrivateRoute Component={<LatestLearnPage />} />,
+          },
+        ],
       },
       {
-        path: "/login",
-        element: <LoginPage />,
+        path: "/",
+        element: <WithHeaderWithoutFooter />,
+        children: [
+          {
+            path: "/login",
+            element: <LoginPage />,
+          },
+        ],
       },
       {
-        path: "/course/:courseId",
-        element: <PrivateRoute Component={<CoursePage />} />,
-      },
-      {
-        path: "/course/:courseId/hour/:hourId",
-        element: <PrivateRoute Component={<CoursePlayPage />} />,
-      },
-      {
-        path: "/latest-learn",
-        element: <PrivateRoute Component={<LatestLearnPage />} />,
+        path: "/",
+        element: <WithoutHeaderWithoutFooter />,
+        children: [
+          {
+            path: "/course/:courseId/hour/:hourId",
+            element: <PrivateRoute Component={<CoursePlayPage />} />,
+          },
+          {
+            path: "/error",
+            element: <ErrorPage />,
+          },
+          {
+            path: "*",
+            element: <ErrorPage />,
+          },
+        ],
       },
     ],
   },

src/utils/index.ts

@@ -104,3 +104,10 @@ export function changeAppUrl(str: string) {
     return str + "/";
   }
 }
+
+export function isMobile() {
+  let flag = navigator.userAgent.match(
+    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+  );
+  return flag;
+}