Merge pull request #8 from PlayEdu/dev

v1.1

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/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,14 +12,20 @@ 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>({});
@@ -36,6 +42,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 +175,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

@@ -9,6 +9,7 @@ import {
 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;
@@ -72,6 +73,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]);

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();
       });
   };
 
@@ -120,32 +93,6 @@ const LoginPage: React.FC = () => {
                 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
                 style={{ width: 400, height: 54 }}

src/routes/index.tsx

@@ -30,7 +30,19 @@ if (getToken()) {
     });
   });
 } else {
-  RootPage = <InitPage />;
+  RootPage = lazy(async () => {
+    return new Promise<any>(async (resolve) => {
+      try {
+        let configRes: any = await system.config();
+
+        resolve({
+          default: <InitPage configData={configRes.data} />,
+        });
+      } catch (e) {
+        console.error("系统初始化失败", e);
+      }
+    });
+  });
 }
 
 // 懒加载

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