mirror of
https://github.com/PlayEdu/frontend.git
synced 2025-06-29 05:32:47 +08:00
Compare commits
57 Commits
v1.0-beta.
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
96da44a884 | ||
|
|
39250531fb | ||
|
|
490ea214b3 | ||
|
b0d0063fc1 | ||
|
|
8614d4ebaf | ||
|
|
46bb144f0a | ||
|
|
6e920d8ea1 | ||
|
|
8154ee3130 | ||
|
|
e056775fc0 | ||
|
|
f5b4a70741 | ||
|
|
e1bca31883 | ||
|
f1985d0b8f | ||
|
|
3eafab1d41 | ||
|
|
66fd8486db | ||
|
|
30612785b5 | ||
|
|
1fbe67f228 | ||
|
|
7a64180d04 | ||
|
|
eaee82649e | ||
|
beae7f4d27 | ||
|
48e93202bf | ||
|
|
075f164147 | ||
|
|
0029e81356 | ||
|
|
3af8b4eb27 | ||
|
|
1312d4531b | ||
|
|
470c0971c3 | ||
|
|
931b9ee677 | ||
|
|
3c34f8356f | ||
|
|
9d12bf1c0d | ||
|
|
c00a7236a7 | ||
|
|
565df9891d | ||
|
|
9425cae0da | ||
|
|
fabb0dd264 | ||
|
|
b91de09c0c | ||
|
|
765f37a5eb | ||
|
|
6137916964 | ||
|
|
bf19ea66a3 | ||
|
|
90e147eb3b | ||
|
|
1159700f37 | ||
|
|
82a75f760f | ||
|
|
71673f3466 | ||
|
63219bed2c | ||
|
|
d35fddad01 | ||
|
|
bc0557569c | ||
|
|
dbaac2c785 | ||
|
|
4af407e6b9 | ||
|
|
3ea0857c2e | ||
|
|
7e81dc1a9d | ||
|
|
2949eaafda | ||
|
|
bf4404b107 | ||
|
|
d47f1a9250 | ||
|
|
25bb64a835 | ||
|
|
ccde01e6ff | ||
|
|
1996340699 | ||
|
|
c2420798d2 | ||
|
|
e04d63125a | ||
|
|
950fc74371 | ||
|
|
07cfa836a2 |
@ -1,2 +1 @@
|
|||||||
VITE_APP_URL=
|
VITE_APP_URL=
|
||||||
VITE_G_ID=
|
|
||||||
4
.gitignore
vendored
4
.gitignore
vendored
@ -32,4 +32,6 @@ yarn.lock
|
|||||||
|
|
||||||
deploy-test.sh
|
deploy-test.sh
|
||||||
deploy-prod.sh
|
deploy-prod.sh
|
||||||
deploy-demo.sh
|
deploy-demo.sh
|
||||||
|
|
||||||
|
pnpm-lock.yaml
|
||||||
@ -13,10 +13,5 @@
|
|||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
<script
|
|
||||||
crossorigin="anonymous"
|
|
||||||
integrity="sha512-oHrfR/z2wkuRuaHrdZ9NhoT/o/1kteub+QvmQgVzOKK7NTvIKQMvnY9+/RR0+eW311o4lAE/YzzLXXmP2XUvig=="
|
|
||||||
src="https://lib.baomitu.com/hls.js/1.1.4/hls.min.js"
|
|
||||||
></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
13
package.json
13
package.json
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "frontend",
|
"name": "playedu-pc-interface",
|
||||||
"private": true,
|
"private": false,
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@ -9,28 +9,31 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@ant-design/icons": "^5.3.0",
|
||||||
"@reduxjs/toolkit": "^1.9.3",
|
"@reduxjs/toolkit": "^1.9.3",
|
||||||
"add": "^2.0.6",
|
"add": "^2.0.6",
|
||||||
"antd": "^5.3.2",
|
"antd": "^5.3.2",
|
||||||
"axios": "^1.3.4",
|
"axios": "^1.3.4",
|
||||||
|
"dayjs": "^1.11.10",
|
||||||
"localforage": "^1.10.0",
|
"localforage": "^1.10.0",
|
||||||
"match-sorter": "^6.3.1",
|
"match-sorter": "^6.3.1",
|
||||||
"moment": "^2.29.4",
|
"moment": "^2.29.4",
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.8.1",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-ga": "^3.3.1",
|
|
||||||
"react-redux": "^8.0.5",
|
"react-redux": "^8.0.5",
|
||||||
"react-router-dom": "^6.9.0",
|
"react-router-dom": "^6.9.0",
|
||||||
"redux": "^4.2.1",
|
"redux": "^4.2.1",
|
||||||
"sort-by": "^1.2.0"
|
"sort-by": "^1.2.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/react": "^18.0.28",
|
"@types/react": "^18.2.0",
|
||||||
"@types/react-dom": "^18.0.11",
|
"@types/react-dom": "^18.2.0",
|
||||||
|
"@vitejs/plugin-legacy": "^4.1.1",
|
||||||
"@vitejs/plugin-react-swc": "^3.0.0",
|
"@vitejs/plugin-react-swc": "^3.0.0",
|
||||||
"rollup-plugin-gzip": "^3.1.0",
|
"rollup-plugin-gzip": "^3.1.0",
|
||||||
"sass": "^1.59.3",
|
"sass": "^1.59.3",
|
||||||
|
"terser": "^5.20.0",
|
||||||
"typescript": "^4.9.3",
|
"typescript": "^4.9.3",
|
||||||
"vite": "^4.2.0"
|
"vite": "^4.2.0"
|
||||||
}
|
}
|
||||||
|
|||||||
1
public/js/xg/hls.min.js
vendored
1
public/js/xg/hls.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
26
src/App.tsx
26
src/App.tsx
@ -1,31 +1,13 @@
|
|||||||
import { Suspense, useEffect } from "react";
|
import { Suspense } from "react";
|
||||||
import ReactGA from "react-ga";
|
import { useRoutes } from "react-router-dom";
|
||||||
import { useLocation, useRoutes } from "react-router-dom";
|
|
||||||
import routes from "./routes";
|
import routes from "./routes";
|
||||||
import "./App.scss";
|
import "./App.scss";
|
||||||
import LoadingPage from "./pages/loading";
|
import LoadingPage from "./pages/loading";
|
||||||
|
|
||||||
const G_ID = import.meta.env.VITE_G_ID || "";
|
|
||||||
if (G_ID) {
|
|
||||||
ReactGA.initialize(G_ID);
|
|
||||||
}
|
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const Views = () => useRoutes(routes);
|
const views = useRoutes(routes);
|
||||||
|
|
||||||
const location = useLocation();
|
return <Suspense fallback={<LoadingPage />}>{views}</Suspense>;
|
||||||
useEffect(() => {
|
|
||||||
if (!G_ID) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
ReactGA.pageview(location.pathname + location.search);
|
|
||||||
}, [location]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Suspense fallback={<LoadingPage />}>
|
|
||||||
<Views />
|
|
||||||
</Suspense>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
@ -31,3 +31,8 @@ export function playPing(courseId: number, hourId: number) {
|
|||||||
export function latestLearn() {
|
export function latestLearn() {
|
||||||
return client.get(`/api/v1/user/latest-learn`, {});
|
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`, {});
|
||||||
|
}
|
||||||
|
|||||||
@ -1,12 +1,23 @@
|
|||||||
import axios, { Axios, AxiosResponse } from "axios";
|
import axios, { Axios, AxiosResponse } from "axios";
|
||||||
import { message } from "antd";
|
import { message } from "antd";
|
||||||
import { getToken, clearToken } from "../../utils/index";
|
import {
|
||||||
|
getToken,
|
||||||
|
clearToken,
|
||||||
|
clearDepKey,
|
||||||
|
clearDepName,
|
||||||
|
} from "../../utils/index";
|
||||||
|
|
||||||
const GoLogin = () => {
|
const GoLogin = () => {
|
||||||
clearToken();
|
clearToken();
|
||||||
|
clearDepName();
|
||||||
|
clearDepKey();
|
||||||
window.location.href = "/login";
|
window.location.href = "/login";
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const GoError = (status: number) => {
|
||||||
|
window.location.href = "/error?status=" + status;
|
||||||
|
};
|
||||||
|
|
||||||
export class HttpClient {
|
export class HttpClient {
|
||||||
axios: Axios;
|
axios: Axios;
|
||||||
|
|
||||||
@ -52,10 +63,13 @@ export class HttpClient {
|
|||||||
GoLogin();
|
GoLogin();
|
||||||
} else if (status === 404) {
|
} else if (status === 404) {
|
||||||
// 跳转到404页面
|
// 跳转到404页面
|
||||||
|
GoError(404);
|
||||||
} else if (status === 403) {
|
} else if (status === 403) {
|
||||||
// 跳转到无权限页面
|
// 跳转到无权限页面
|
||||||
|
GoError(403);
|
||||||
} else if (status === 500) {
|
} else if (status === 500) {
|
||||||
// 跳转到500异常页面
|
// 跳转到500异常页面
|
||||||
|
GoError(500);
|
||||||
}
|
}
|
||||||
return Promise.reject(error.response);
|
return Promise.reject(error.response);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,19 +1,20 @@
|
|||||||
import client from "./internal/httpClient";
|
import client from "./internal/httpClient";
|
||||||
|
|
||||||
export function login(
|
export function login(email: string, password: string) {
|
||||||
email: string,
|
|
||||||
password: string,
|
|
||||||
captchaKey: string,
|
|
||||||
captchaVal: string
|
|
||||||
) {
|
|
||||||
return client.post("/api/v1/auth/login/password", {
|
return client.post("/api/v1/auth/login/password", {
|
||||||
email: email,
|
email: email,
|
||||||
password: password,
|
password: password,
|
||||||
captcha_key: captchaKey,
|
|
||||||
captcha_val: captchaVal,
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function logout() {
|
export function logout() {
|
||||||
return client.post("/api/v1/auth/logout", {});
|
return client.post("/api/v1/auth/logout", {});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function loginLdap(email: string, password: string) {
|
||||||
|
return client.post("/api/v1/auth/login/ldap", {
|
||||||
|
username: email,
|
||||||
|
password: password,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 64 KiB |
@ -40,63 +40,65 @@ export const ChangePasswordModel: React.FC<PropInterface> = ({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Modal
|
{open ? (
|
||||||
title="修改密码"
|
<Modal
|
||||||
centered
|
title="修改密码"
|
||||||
forceRender
|
centered
|
||||||
open={open}
|
forceRender
|
||||||
width={416}
|
open={true}
|
||||||
onOk={() => form.submit()}
|
width={416}
|
||||||
onCancel={() => onCancel()}
|
onOk={() => form.submit()}
|
||||||
maskClosable={false}
|
onCancel={() => onCancel()}
|
||||||
>
|
maskClosable={false}
|
||||||
<div className="float-left mt-24">
|
>
|
||||||
<Form
|
<div className="float-left mt-24">
|
||||||
form={form}
|
<Form
|
||||||
name="change-password"
|
form={form}
|
||||||
labelCol={{ span: 8 }}
|
name="change-password"
|
||||||
wrapperCol={{ span: 16 }}
|
labelCol={{ span: 8 }}
|
||||||
initialValues={{ remember: true }}
|
wrapperCol={{ span: 16 }}
|
||||||
onFinish={onFinish}
|
initialValues={{ remember: true }}
|
||||||
onFinishFailed={onFinishFailed}
|
onFinish={onFinish}
|
||||||
autoComplete="off"
|
onFinishFailed={onFinishFailed}
|
||||||
>
|
autoComplete="off"
|
||||||
<Form.Item
|
|
||||||
label="请输入原密码"
|
|
||||||
name="old_password"
|
|
||||||
rules={[{ required: true, message: "请输入原密码!" }]}
|
|
||||||
>
|
>
|
||||||
<Input.Password
|
<Form.Item
|
||||||
style={{ width: 200 }}
|
label="请输入原密码"
|
||||||
autoComplete="off"
|
name="old_password"
|
||||||
placeholder="请输入原密码"
|
rules={[{ required: true, message: "请输入原密码!" }]}
|
||||||
/>
|
>
|
||||||
</Form.Item>
|
<Input.Password
|
||||||
<Form.Item
|
style={{ width: 200 }}
|
||||||
label="输入新密码"
|
autoComplete="off"
|
||||||
name="new_password"
|
placeholder="请输入原密码"
|
||||||
rules={[{ required: true, message: "请输入新密码!" }]}
|
/>
|
||||||
>
|
</Form.Item>
|
||||||
<Input.Password
|
<Form.Item
|
||||||
style={{ width: 200 }}
|
label="输入新密码"
|
||||||
autoComplete="off"
|
name="new_password"
|
||||||
placeholder="请输入新密码"
|
rules={[{ required: true, message: "请输入新密码!" }]}
|
||||||
/>
|
>
|
||||||
</Form.Item>
|
<Input.Password
|
||||||
<Form.Item
|
style={{ width: 200 }}
|
||||||
label="再次输入新密码"
|
autoComplete="off"
|
||||||
name="again_new_password"
|
placeholder="请输入新密码"
|
||||||
rules={[{ required: true, message: "再次输入新密码!" }]}
|
/>
|
||||||
>
|
</Form.Item>
|
||||||
<Input.Password
|
<Form.Item
|
||||||
style={{ width: 200 }}
|
label="再次输入新密码"
|
||||||
autoComplete="off"
|
name="again_new_password"
|
||||||
placeholder="再次输入新密码"
|
rules={[{ required: true, message: "再次输入新密码!" }]}
|
||||||
/>
|
>
|
||||||
</Form.Item>
|
<Input.Password
|
||||||
</Form>
|
style={{ width: 200 }}
|
||||||
</div>
|
autoComplete="off"
|
||||||
</Modal>
|
placeholder="再次输入新密码"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
) : null}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import styles from "./index.module.scss";
|
import styles from "./index.module.scss";
|
||||||
import { Modal, Button, Dropdown } from "antd";
|
import { Modal, Button, Dropdown, Image } from "antd";
|
||||||
import type { MenuProps } from "antd";
|
import type { MenuProps } from "antd";
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import { Link, useNavigate, useLocation } from "react-router-dom";
|
import { Link, useNavigate, useLocation } from "react-router-dom";
|
||||||
@ -217,9 +217,11 @@ export const Header: React.FC = () => {
|
|||||||
<div className="d-flex" style={{ cursor: "pointer" }}>
|
<div className="d-flex" style={{ cursor: "pointer" }}>
|
||||||
{user && user.name && (
|
{user && user.name && (
|
||||||
<>
|
<>
|
||||||
<img
|
<Image
|
||||||
|
loading="lazy"
|
||||||
style={{ width: 36, height: 36, borderRadius: "50%" }}
|
style={{ width: 36, height: 36, borderRadius: "50%" }}
|
||||||
src={user.avatar}
|
src={user.avatar}
|
||||||
|
preview={false}
|
||||||
/>
|
/>
|
||||||
<span className="ml-8 c-admin">{user.name}</span>
|
<span className="ml-8 c-admin">{user.name}</span>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@ -75,59 +75,62 @@ export const UserInfoModel: React.FC<PropInterface> = ({ open, onCancel }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Modal
|
{open ? (
|
||||||
title="个人信息"
|
<Modal
|
||||||
centered
|
title="个人信息"
|
||||||
forceRender
|
centered
|
||||||
open={open}
|
forceRender
|
||||||
width={416}
|
open={true}
|
||||||
onCancel={() => onCancel()}
|
width={416}
|
||||||
maskClosable={false}
|
onCancel={() => onCancel()}
|
||||||
footer={null}
|
maskClosable={false}
|
||||||
>
|
footer={null}
|
||||||
<div className="mt-24">
|
>
|
||||||
<Form
|
<div className="mt-24">
|
||||||
form={form}
|
<Form
|
||||||
name="user-info"
|
form={form}
|
||||||
labelCol={{ span: 8 }}
|
name="user-info"
|
||||||
wrapperCol={{ span: 16 }}
|
labelCol={{ span: 8 }}
|
||||||
initialValues={{ remember: true }}
|
wrapperCol={{ span: 16 }}
|
||||||
autoComplete="off"
|
initialValues={{ remember: true }}
|
||||||
>
|
autoComplete="off"
|
||||||
<Form.Item
|
|
||||||
label="学员头像"
|
|
||||||
labelCol={{ style: { marginTop: 15, marginLeft: 52 } }}
|
|
||||||
>
|
>
|
||||||
<div className="d-flex">
|
<Form.Item
|
||||||
{avatar && (
|
label="学员头像"
|
||||||
<Image
|
labelCol={{ style: { marginTop: 15, marginLeft: 52 } }}
|
||||||
width={60}
|
>
|
||||||
height={60}
|
<div className="d-flex">
|
||||||
style={{ borderRadius: "50%" }}
|
{avatar && (
|
||||||
src={avatar}
|
<Image
|
||||||
preview={false}
|
loading="lazy"
|
||||||
/>
|
width={60}
|
||||||
)}
|
height={60}
|
||||||
<div className="d-flex ml-16">
|
style={{ borderRadius: "50%" }}
|
||||||
<Upload {...props} showUploadList={false}>
|
src={avatar}
|
||||||
<Button>更换头像</Button>
|
preview={false}
|
||||||
</Upload>
|
/>
|
||||||
|
)}
|
||||||
|
<div className="d-flex ml-16">
|
||||||
|
<Upload {...props} showUploadList={false}>
|
||||||
|
<Button>更换头像</Button>
|
||||||
|
</Upload>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</Form.Item>
|
|
||||||
{name && (
|
|
||||||
<Form.Item label="学员姓名">
|
|
||||||
<div>{name}</div>
|
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
)}
|
{name && (
|
||||||
{idCard && (
|
<Form.Item label="学员姓名">
|
||||||
<Form.Item label="身份证号" style={{ marginBottom: 16 }}>
|
<div>{name}</div>
|
||||||
<div>{idCard}</div>
|
</Form.Item>
|
||||||
</Form.Item>
|
)}
|
||||||
)}
|
{idCard && (
|
||||||
</Form>
|
<Form.Item label="身份证号" style={{ marginBottom: 16 }}>
|
||||||
</div>
|
<div>{idCard}</div>
|
||||||
</Modal>
|
</Form.Item>
|
||||||
|
)}
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
) : null}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,5 +1,3 @@
|
|||||||
@import "./assets/iconfont/iconfont.css";
|
|
||||||
|
|
||||||
$primaryColor: #ff4d4f;
|
$primaryColor: #ff4d4f;
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
@ -35,6 +33,18 @@ body {
|
|||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layout-box {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-box {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
.main-body {
|
.main-body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|||||||
@ -4,6 +4,7 @@ import store from "./store";
|
|||||||
import { BrowserRouter } from "react-router-dom";
|
import { BrowserRouter } from "react-router-dom";
|
||||||
import { ConfigProvider } from "antd";
|
import { ConfigProvider } from "antd";
|
||||||
import zhCN from "antd/locale/zh_CN";
|
import zhCN from "antd/locale/zh_CN";
|
||||||
|
import "./assets/iconfont/iconfont.css";
|
||||||
import App from "./App";
|
import App from "./App";
|
||||||
import "./index.scss"; //全局样式
|
import "./index.scss"; //全局样式
|
||||||
import AutoScorllTop from "./AutoTop";
|
import AutoScorllTop from "./AutoTop";
|
||||||
@ -21,4 +22,4 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
|||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
</ConfigProvider>
|
</ConfigProvider>
|
||||||
</Provider>
|
</Provider>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -92,13 +92,67 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
width: 1200px;
|
||||||
|
height: 48px;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
.tab-item {
|
||||||
|
min-width: 64px;
|
||||||
|
height: 48px;
|
||||||
|
margin-right: 50px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
.tit {
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tit {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: rgba(0, 0, 0, 0.88);
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tab-active-item {
|
||||||
|
min-width: 64px;
|
||||||
|
height: 48px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 50px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
.tit {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ff4d4f;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
.banner {
|
||||||
|
animation: scaleTransX 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.chapters-hours-cont {
|
.chapters-hours-cont {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.04);
|
box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.04);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
margin-top: 30px;
|
margin-top: 24px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
.hours-list-box {
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -1,20 +1,62 @@
|
|||||||
import { useEffect, useState } from "react";
|
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 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 { course as Course } from "../../api/index";
|
||||||
import mediaIcon from "../../assets/images/commen/icon-medal.png";
|
import mediaIcon from "../../assets/images/commen/icon-medal.png";
|
||||||
import { HourCompenent } from "./compenents/hour";
|
import { HourCompenent } from "./compenents/hour";
|
||||||
import { Empty } from "../../compenents";
|
import { Empty } from "../../compenents";
|
||||||
|
import iconRoute from "../../assets/images/commen/icon-route.png";
|
||||||
|
|
||||||
|
type TabModel = {
|
||||||
|
key: number;
|
||||||
|
label: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type AttachModel = {
|
||||||
|
id: number;
|
||||||
|
course_id: number;
|
||||||
|
rid: number;
|
||||||
|
sort: number;
|
||||||
|
title: string;
|
||||||
|
type: string;
|
||||||
|
url?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type HoursModel = {
|
||||||
|
[key: number]: HourModel[];
|
||||||
|
};
|
||||||
|
|
||||||
|
type ChapterModel = {
|
||||||
|
course_id: number;
|
||||||
|
created_at: string;
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
sort: number;
|
||||||
|
updated_at: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type LearnHourRecordsModel = {
|
||||||
|
[key: number]: HourRecordModel;
|
||||||
|
};
|
||||||
|
|
||||||
const CoursePage = () => {
|
const CoursePage = () => {
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const result = new URLSearchParams(useLocation().search);
|
||||||
const [loading, setLoading] = useState<boolean>(true);
|
const [loading, setLoading] = useState<boolean>(true);
|
||||||
const [course, setCourse] = useState<any>({});
|
const [course, setCourse] = useState<CourseModel | null>(null);
|
||||||
const [chapters, setChapters] = useState<any>([]);
|
const [chapters, setChapters] = useState<ChapterModel[]>([]);
|
||||||
const [hours, setHours] = useState<any>({});
|
const [hours, setHours] = useState<HoursModel>({});
|
||||||
const [learnRecord, setLearnRecord] = useState<any>({});
|
const [learnRecord, setLearnRecord] = useState<CourseRecordModel | null>(
|
||||||
const [learnHourRecord, setLearnHourRecord] = useState<any>({});
|
null
|
||||||
|
);
|
||||||
|
const [learnHourRecord, setLearnHourRecord] = useState<LearnHourRecordsModel>(
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
const [tabKey, setTabKey] = useState(Number(result.get("tab") || 1));
|
||||||
|
const [attachments, setAttachments] = useState<AttachModel[]>([]);
|
||||||
|
const [items, setItems] = useState<TabModel[]>([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getDetail();
|
getDetail();
|
||||||
@ -34,6 +76,22 @@ const CoursePage = () => {
|
|||||||
if (res.data.learn_hour_records) {
|
if (res.data.learn_hour_records) {
|
||||||
setLearnHourRecord(res.data.learn_hour_records);
|
setLearnHourRecord(res.data.learn_hour_records);
|
||||||
}
|
}
|
||||||
|
let arr: AttachModel[] = res.data.attachments;
|
||||||
|
let tabs: TabModel[] = [
|
||||||
|
{
|
||||||
|
key: 1,
|
||||||
|
label: `课程目录`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
if (arr.length > 0) {
|
||||||
|
tabs.push({
|
||||||
|
key: 2,
|
||||||
|
label: `课程附件`,
|
||||||
|
});
|
||||||
|
setAttachments(arr);
|
||||||
|
}
|
||||||
|
setItems(tabs);
|
||||||
|
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
@ -41,6 +99,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 (
|
return (
|
||||||
<div className="container">
|
<div className="container">
|
||||||
{loading && (
|
{loading && (
|
||||||
@ -67,18 +136,18 @@ const CoursePage = () => {
|
|||||||
height={90}
|
height={90}
|
||||||
style={{ borderRadius: 10 }}
|
style={{ borderRadius: 10 }}
|
||||||
preview={false}
|
preview={false}
|
||||||
src={course.thumb}
|
src={course?.thumb}
|
||||||
/>
|
/>
|
||||||
<div className={styles["info"]}>
|
<div className={styles["info"]}>
|
||||||
<div className={styles["title"]}>{course.title}</div>
|
<div className={styles["title"]}>{course?.title}</div>
|
||||||
<div className={styles["status"]}>
|
<div className={styles["status"]}>
|
||||||
{course.is_required === 1 && (
|
{course?.is_required === 1 && (
|
||||||
<div className={styles["type"]}>必修课</div>
|
<div className={styles["type"]}>必修课</div>
|
||||||
)}
|
)}
|
||||||
{course.is_required === 0 && (
|
{course?.is_required === 0 && (
|
||||||
<div className={styles["active-type"]}>选修课</div>
|
<div className={styles["active-type"]}>选修课</div>
|
||||||
)}
|
)}
|
||||||
{learnRecord.progress / 100 >= 100 && (
|
{learnRecord && learnRecord.progress / 100 >= 100 && (
|
||||||
<div className={styles["success"]}>
|
<div className={styles["success"]}>
|
||||||
<Image
|
<Image
|
||||||
width={24}
|
width={24}
|
||||||
@ -92,7 +161,8 @@ const CoursePage = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{JSON.stringify(learnRecord) === "{}" &&
|
{(!learnRecord ||
|
||||||
|
(learnRecord && JSON.stringify(learnRecord) === "{}")) &&
|
||||||
JSON.stringify(learnHourRecord) === "{}" && (
|
JSON.stringify(learnHourRecord) === "{}" && (
|
||||||
<Progress
|
<Progress
|
||||||
type="circle"
|
type="circle"
|
||||||
@ -104,7 +174,8 @@ const CoursePage = () => {
|
|||||||
format={(percent) => `${percent}%`}
|
format={(percent) => `${percent}%`}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{JSON.stringify(learnRecord) === "{}" &&
|
{(!learnRecord ||
|
||||||
|
(learnRecord && JSON.stringify(learnRecord) === "{}")) &&
|
||||||
JSON.stringify(learnHourRecord) !== "{}" && (
|
JSON.stringify(learnHourRecord) !== "{}" && (
|
||||||
<Progress
|
<Progress
|
||||||
type="circle"
|
type="circle"
|
||||||
@ -116,7 +187,8 @@ const CoursePage = () => {
|
|||||||
format={(percent) => `${percent}%`}
|
format={(percent) => `${percent}%`}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{JSON.stringify(learnRecord) !== "{}" &&
|
{learnRecord &&
|
||||||
|
JSON.stringify(learnRecord) !== "{}" &&
|
||||||
JSON.stringify(learnHourRecord) !== "{}" && (
|
JSON.stringify(learnHourRecord) !== "{}" && (
|
||||||
<Progress
|
<Progress
|
||||||
type="circle"
|
type="circle"
|
||||||
@ -129,82 +201,140 @@ const CoursePage = () => {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{course.short_desc && (
|
{course?.short_desc && (
|
||||||
<div className={styles["desc"]}>{course.short_desc}</div>
|
<div className={styles["desc"]}>{course.short_desc}</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className={styles["chapters-hours-cont"]}>
|
<div className={styles["tabs"]}>
|
||||||
{chapters.length === 0 && JSON.stringify(hours) === "{}" && (
|
{items.map((item: any) => (
|
||||||
<Empty />
|
<div
|
||||||
)}
|
key={item.key}
|
||||||
{chapters.length === 0 && JSON.stringify(hours) !== "{}" && (
|
className={
|
||||||
<div className={styles["hours-list-box"]}>
|
item.key === tabKey
|
||||||
{hours[0].map((item: any, index: number) => (
|
? styles["tab-active-item"]
|
||||||
<div key={item.id} className={styles["hours-it"]}>
|
: styles["tab-item"]
|
||||||
{learnHourRecord[item.id] && (
|
}
|
||||||
<HourCompenent
|
onClick={() => {
|
||||||
id={item.id}
|
onChange(item.key);
|
||||||
cid={item.course_id}
|
}}
|
||||||
title={item.title}
|
>
|
||||||
record={learnHourRecord[item.id]}
|
<div className={styles["tit"]}>{item.label}</div>
|
||||||
duration={item.duration}
|
{item.key === tabKey && (
|
||||||
progress={
|
<Image
|
||||||
(learnHourRecord[item.id].finished_duration * 100) /
|
className={styles["banner"]}
|
||||||
learnHourRecord[item.id].total_duration
|
width={40}
|
||||||
}
|
height={8}
|
||||||
></HourCompenent>
|
preview={false}
|
||||||
)}
|
src={iconRoute}
|
||||||
{!learnHourRecord[item.id] && (
|
style={{ marginTop: -16 }}
|
||||||
<HourCompenent
|
/>
|
||||||
id={item.id}
|
)}
|
||||||
cid={item.course_id}
|
|
||||||
title={item.title}
|
|
||||||
record={null}
|
|
||||||
duration={item.duration}
|
|
||||||
progress={0}
|
|
||||||
></HourCompenent>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</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].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>
|
</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>
|
</div>
|
||||||
|
|||||||
@ -49,7 +49,7 @@
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
.video-title {
|
.video-title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 36px;
|
height: auto;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: rgba(255, 255, 255, 0.88);
|
color: rgba(255, 255, 255, 0.88);
|
||||||
@ -64,6 +64,7 @@
|
|||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.alert-message {
|
.alert-message {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -80,6 +81,12 @@
|
|||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: white;
|
color: white;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
.des-video {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 15px;
|
||||||
|
}
|
||||||
.alert-button {
|
.alert-button {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 54px;
|
height: 54px;
|
||||||
|
|||||||
@ -5,31 +5,35 @@ import { useSelector } from "react-redux";
|
|||||||
import { course as Course } from "../../api/index";
|
import { course as Course } from "../../api/index";
|
||||||
import { ArrowLeftOutlined } from "@ant-design/icons";
|
import { ArrowLeftOutlined } from "@ant-design/icons";
|
||||||
import { message } from "antd";
|
import { message } from "antd";
|
||||||
|
import { getPlayId, savePlayId } from "../../utils";
|
||||||
|
|
||||||
declare const window: any;
|
declare const window: any;
|
||||||
|
var timer: any = null;
|
||||||
|
|
||||||
const CoursePalyPage = () => {
|
const CoursePalyPage = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
const systemConfig = useSelector((state: any) => state.systemConfig.value);
|
const systemConfig = useSelector((state: any) => state.systemConfig.value);
|
||||||
const user = useSelector((state: any) => state.loginUser.value.user);
|
const user = useSelector((state: any) => state.loginUser.value.user);
|
||||||
const [playUrl, setPlayUrl] = useState<string>("");
|
const [playUrl, setPlayUrl] = useState("");
|
||||||
const [playDuration, setPlayDuration] = useState(0);
|
const [playDuration, setPlayDuration] = useState(0);
|
||||||
const [playendedStatus, setPlayendedStatus] = useState<Boolean>(false);
|
const [playendedStatus, setPlayendedStatus] = useState(false);
|
||||||
const [lastSeeValue, setLastSeeValue] = useState({});
|
const [lastSeeValue, setLastSeeValue] = useState({});
|
||||||
const [course, setCourse] = useState<any>({});
|
const [course, setCourse] = useState<CourseModel | null>(null);
|
||||||
const [hour, setHour] = useState<any>({});
|
const [hour, setHour] = useState<HourModel | null>(null);
|
||||||
const [loading, setLoading] = useState<Boolean>(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [isLastpage, setIsLastpage] = useState<Boolean>(false);
|
const [isLastpage, setIsLastpage] = useState(false);
|
||||||
const [totalHours, setTotalHours] = useState<any>([]);
|
const [totalHours, setTotalHours] = useState<HourModel[]>([]);
|
||||||
const [playingTime, setPlayingTime] = useState(0);
|
const [playingTime, setPlayingTime] = useState(0);
|
||||||
const [watchedSeconds, setWatchedSeconds] = useState(0);
|
const [watchedSeconds, setWatchedSeconds] = useState(0);
|
||||||
const myRef = useRef(0);
|
const myRef = useRef(0);
|
||||||
const playRef = useRef(0);
|
const playRef = useRef(0);
|
||||||
const watchRef = useRef(0);
|
const watchRef = useRef(0);
|
||||||
const totalRef = useRef(0);
|
const totalRef = useRef(0);
|
||||||
|
const [checkPlayerStatus, setCheckPlayerStatus] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
timer && clearInterval(timer);
|
||||||
getCourse();
|
getCourse();
|
||||||
getDetail();
|
getDetail();
|
||||||
document.oncontextmenu = function (e) {
|
document.oncontextmenu = function (e) {
|
||||||
@ -37,7 +41,9 @@ const CoursePalyPage = () => {
|
|||||||
e = e || window.event;
|
e = e || window.event;
|
||||||
return false;
|
return false;
|
||||||
};
|
};
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
|
timer && clearInterval(timer);
|
||||||
document.oncontextmenu = function (e) {
|
document.oncontextmenu = function (e) {
|
||||||
/*恢复浏览器默认右键事件*/
|
/*恢复浏览器默认右键事件*/
|
||||||
e = e || window.event;
|
e = e || window.event;
|
||||||
@ -59,17 +65,17 @@ const CoursePalyPage = () => {
|
|||||||
}, [watchedSeconds]);
|
}, [watchedSeconds]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
totalRef.current = hour.duration;
|
totalRef.current = hour?.duration || 0;
|
||||||
}, [hour]);
|
}, [hour]);
|
||||||
|
|
||||||
const getCourse = () => {
|
const getCourse = () => {
|
||||||
Course.detail(Number(params.courseId)).then((res: any) => {
|
Course.detail(Number(params.courseId)).then((res: any) => {
|
||||||
let totalHours: any = [];
|
let totalHours: HourModel[] = [];
|
||||||
if (res.data.chapters.length === 0) {
|
if (res.data.chapters.length === 0) {
|
||||||
setTotalHours(res.data.hours[0]);
|
setTotalHours(res.data.hours[0]);
|
||||||
totalHours = res.data.hours[0];
|
totalHours = res.data.hours[0];
|
||||||
} else if (res.data.chapters.length > 0) {
|
} else if (res.data.chapters.length > 0) {
|
||||||
const arr: any = [];
|
const arr: HourModel[] = [];
|
||||||
for (let key in res.data.hours) {
|
for (let key in res.data.hours) {
|
||||||
res.data.hours[key].map((item: any) => {
|
res.data.hours[key].map((item: any) => {
|
||||||
arr.push(item);
|
arr.push(item);
|
||||||
@ -97,7 +103,7 @@ const CoursePalyPage = () => {
|
|||||||
setCourse(res.data.course);
|
setCourse(res.data.course);
|
||||||
setHour(res.data.hour);
|
setHour(res.data.hour);
|
||||||
document.title = res.data.hour.title;
|
document.title = res.data.hour.title;
|
||||||
let record = res.data.user_hour_record;
|
let record: HourRecordModel = res.data.user_hour_record;
|
||||||
let params = null;
|
let params = null;
|
||||||
if (record && record.finished_duration && record.is_finished === 0) {
|
if (record && record.finished_duration && record.is_finished === 0) {
|
||||||
params = {
|
params = {
|
||||||
@ -123,6 +129,7 @@ const CoursePalyPage = () => {
|
|||||||
(res: any) => {
|
(res: any) => {
|
||||||
setPlayUrl(res.data.url);
|
setPlayUrl(res.data.url);
|
||||||
initDPlayer(res.data.url, 0, data);
|
initDPlayer(res.data.url, 0, data);
|
||||||
|
savePlayId(String(params.courseId) + "-" + String(params.hourId));
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
@ -181,9 +188,11 @@ const CoursePalyPage = () => {
|
|||||||
setPlayingTime(0);
|
setPlayingTime(0);
|
||||||
setPlayendedStatus(true);
|
setPlayendedStatus(true);
|
||||||
playTimeUpdate(parseInt(window.player.video.currentTime), true);
|
playTimeUpdate(parseInt(window.player.video.currentTime), true);
|
||||||
|
exitFullscreen();
|
||||||
window.player && window.player.destroy();
|
window.player && window.player.destroy();
|
||||||
});
|
});
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
|
checkPlayer();
|
||||||
};
|
};
|
||||||
|
|
||||||
const playTimeUpdate = (duration: number, isEnd: boolean) => {
|
const playTimeUpdate = (duration: number, isEnd: boolean) => {
|
||||||
@ -200,6 +209,22 @@ const CoursePalyPage = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const checkPlayer = () => {
|
||||||
|
timer = setInterval(() => {
|
||||||
|
let playId = getPlayId();
|
||||||
|
if (
|
||||||
|
playId &&
|
||||||
|
playId !== String(params.courseId) + "-" + String(params.hourId)
|
||||||
|
) {
|
||||||
|
timer && clearInterval(timer);
|
||||||
|
window.player && window.player.destroy();
|
||||||
|
setCheckPlayerStatus(true);
|
||||||
|
} else {
|
||||||
|
setCheckPlayerStatus(false);
|
||||||
|
}
|
||||||
|
}, 5000);
|
||||||
|
};
|
||||||
|
|
||||||
const goNextVideo = () => {
|
const goNextVideo = () => {
|
||||||
const index = totalHours.findIndex(
|
const index = totalHours.findIndex(
|
||||||
(i: any) => i.id === Number(params.hourId)
|
(i: any) => i.id === Number(params.hourId)
|
||||||
@ -214,6 +239,18 @@ const CoursePalyPage = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const exitFullscreen = () => {
|
||||||
|
let de: any;
|
||||||
|
de = document;
|
||||||
|
if (de.fullscreenElement !== null) {
|
||||||
|
de.exitFullscreen();
|
||||||
|
} else if (de.mozCancelFullScreen) {
|
||||||
|
de.mozCancelFullScreen();
|
||||||
|
} else if (de.webkitCancelFullScreen) {
|
||||||
|
de.webkitCancelFullScreen();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles["video-mask"]}>
|
<div className={styles["video-mask"]}>
|
||||||
<div className={styles["top-cont"]}>
|
<div className={styles["top-cont"]}>
|
||||||
@ -221,6 +258,7 @@ const CoursePalyPage = () => {
|
|||||||
<div
|
<div
|
||||||
className={styles["close-btn"]}
|
className={styles["close-btn"]}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
timer && clearInterval(timer);
|
||||||
window.player && window.player.destroy();
|
window.player && window.player.destroy();
|
||||||
document.oncontextmenu = function (e) {
|
document.oncontextmenu = function (e) {
|
||||||
/*恢复浏览器默认右键事件*/
|
/*恢复浏览器默认右键事件*/
|
||||||
@ -236,13 +274,20 @@ const CoursePalyPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles["video-body"]}>
|
<div className={styles["video-body"]}>
|
||||||
<div className={styles["video-title"]}>{hour.title}</div>
|
<div className={styles["video-title"]}>{hour?.title}</div>
|
||||||
<div className={styles["video-box"]}>
|
<div className={styles["video-box"]}>
|
||||||
<div
|
<div
|
||||||
className="play-box"
|
className="play-box"
|
||||||
id="meedu-player-container"
|
id="meedu-player-container"
|
||||||
style={{ borderRadius: 8 }}
|
style={{ borderRadius: 8 }}
|
||||||
></div>
|
></div>
|
||||||
|
{checkPlayerStatus && (
|
||||||
|
<div className={styles["alert-message"]}>
|
||||||
|
<div className={styles["des-video"]}>
|
||||||
|
您已打开新视频，暂停本视频播放
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
{playendedStatus && (
|
{playendedStatus && (
|
||||||
<div className={styles["alert-message"]}>
|
<div className={styles["alert-message"]}>
|
||||||
{isLastpage && (
|
{isLastpage && (
|
||||||
|
|||||||
4
src/pages/error/index.module.scss
Normal file
4
src/pages/error/index.module.scss
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
.main {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
31
src/pages/error/index.tsx
Normal file
31
src/pages/error/index.tsx
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Button, Result } from "antd";
|
||||||
|
import { useNavigate, useLocation } from "react-router-dom";
|
||||||
|
import styles from "./index.module.scss";
|
||||||
|
|
||||||
|
const ErrorPage = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const result = new URLSearchParams(useLocation().search);
|
||||||
|
const [status, setStatus] = useState(String(result.get("status") || "404"));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Result
|
||||||
|
status="404"
|
||||||
|
title={status}
|
||||||
|
subTitle="您访问的页面不存在"
|
||||||
|
className={styles["main"]}
|
||||||
|
extra={
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
onClick={() => {
|
||||||
|
navigate("/", { replace: true });
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
返回首页
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ErrorPage;
|
||||||
@ -29,6 +29,7 @@ export const CoursesModel: React.FC<PropInterface> = ({
|
|||||||
>
|
>
|
||||||
<div className={styles["top-content"]}>
|
<div className={styles["top-content"]}>
|
||||||
<Image
|
<Image
|
||||||
|
loading="lazy"
|
||||||
width={120}
|
width={120}
|
||||||
height={90}
|
height={90}
|
||||||
style={{ borderRadius: 10 }}
|
style={{ borderRadius: 10 }}
|
||||||
@ -65,7 +66,13 @@ export const CoursesModel: React.FC<PropInterface> = ({
|
|||||||
)}
|
)}
|
||||||
{progress >= 100 && (
|
{progress >= 100 && (
|
||||||
<div className={styles["success"]}>
|
<div className={styles["success"]}>
|
||||||
<Image width={24} height={24} src={mediaIcon} preview={false} />
|
<Image
|
||||||
|
loading="lazy"
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
|
src={mediaIcon}
|
||||||
|
preview={false}
|
||||||
|
/>
|
||||||
<span className="ml-8">恭喜你学完此课程!</span>
|
<span className="ml-8">恭喜你学完此课程!</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { Row, Col, Spin, Tree, Popover, Space, Image } from "antd";
|
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 { user } from "../../api/index";
|
||||||
import styles from "./index.module.scss";
|
import styles from "./index.module.scss";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
@ -11,23 +11,49 @@ import studyTime from "../../assets/images/commen/icon-studytime.png";
|
|||||||
import iconRoute from "../../assets/images/commen/icon-route.png";
|
import iconRoute from "../../assets/images/commen/icon-route.png";
|
||||||
import { studyTimeFormat } from "../../utils/index";
|
import { studyTimeFormat } from "../../utils/index";
|
||||||
|
|
||||||
|
type StatsModel = {
|
||||||
|
learn_duration: number;
|
||||||
|
nun_required_course_count: number;
|
||||||
|
nun_required_finished_course_count: number;
|
||||||
|
nun_required_finished_hour_count: number;
|
||||||
|
nun_required_hour_count: number;
|
||||||
|
required_course_count: number;
|
||||||
|
required_finished_course_count: number;
|
||||||
|
required_finished_hour_count: number;
|
||||||
|
required_hour_count: number;
|
||||||
|
today_learn_duration: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
type LearnCourseRecordsModel = {
|
||||||
|
[key: number]: CourseRecordModel;
|
||||||
|
};
|
||||||
|
|
||||||
|
type CategoryModel = {
|
||||||
|
key: number;
|
||||||
|
title: any;
|
||||||
|
children?: CategoryModel[];
|
||||||
|
};
|
||||||
|
|
||||||
const IndexPage = () => {
|
const IndexPage = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const result = new URLSearchParams(useLocation().search);
|
||||||
const systemConfig = useSelector((state: any) => state.systemConfig.value);
|
const systemConfig = useSelector((state: any) => state.systemConfig.value);
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const [loading, setLoading] = useState<boolean>(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 [coursesList, setCoursesList] = useState<CourseModel[]>([]);
|
||||||
const [categories, setCategories] = useState<any>([]);
|
const [categories, setCategories] = useState<CategoryModel[]>([]);
|
||||||
const [categoryId, setCategoryId] = useState<number>(0);
|
const [categoryId, setCategoryId] = useState<number>(
|
||||||
const [categoryText, setCategoryText] = useState<string>("所有分类");
|
Number(result.get("cid") || 0)
|
||||||
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 [categoryText, setCategoryText] = useState<string>(
|
||||||
|
String(result.get("catName") || "所有分类")
|
||||||
|
);
|
||||||
|
const [selectKey, setSelectKey] = useState<any>([0]);
|
||||||
|
const [learnCourseRecords, setLearnCourseRecords] =
|
||||||
|
useState<LearnCourseRecordsModel>({});
|
||||||
|
const [learnCourseHourCount, setLearnCourseHourCount] = useState<any>({});
|
||||||
|
const [stats, setStats] = useState<StatsModel | null>(null);
|
||||||
const currentDepId = useSelector(
|
const currentDepId = useSelector(
|
||||||
(state: any) => state.loginUser.value.currentDepId
|
(state: any) => state.loginUser.value.currentDepId
|
||||||
);
|
);
|
||||||
@ -36,6 +62,12 @@ const IndexPage = () => {
|
|||||||
getParams();
|
getParams();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let arr = [];
|
||||||
|
arr.push(Number(result.get("cid") || 0));
|
||||||
|
setSelectKey(arr);
|
||||||
|
}, [result.get("cid")]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (currentDepId === 0) {
|
if (currentDepId === 0) {
|
||||||
return;
|
return;
|
||||||
@ -54,14 +86,14 @@ const IndexPage = () => {
|
|||||||
const getData = () => {
|
const getData = () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
user.courses(currentDepId, categoryId).then((res: any) => {
|
user.courses(currentDepId, categoryId).then((res: any) => {
|
||||||
const records = res.data.learn_course_records;
|
const records: LearnCourseRecordsModel = res.data.learn_course_records;
|
||||||
setStats(res.data.stats);
|
setStats(res.data.stats);
|
||||||
setLearnCourseRecords(records);
|
setLearnCourseRecords(records);
|
||||||
setLearnCourseHourCount(res.data.user_course_hour_count);
|
setLearnCourseHourCount(res.data.user_course_hour_count);
|
||||||
if (tabKey === 0) {
|
if (tabKey === 0) {
|
||||||
setCoursesList(res.data.courses);
|
setCoursesList(res.data.courses);
|
||||||
} else if (tabKey === 1) {
|
} else if (tabKey === 1) {
|
||||||
const arr: any = [];
|
const arr: CourseModel[] = [];
|
||||||
res.data.courses.map((item: any) => {
|
res.data.courses.map((item: any) => {
|
||||||
if (item.is_required === 1) {
|
if (item.is_required === 1) {
|
||||||
arr.push(item);
|
arr.push(item);
|
||||||
@ -69,7 +101,7 @@ const IndexPage = () => {
|
|||||||
});
|
});
|
||||||
setCoursesList(arr);
|
setCoursesList(arr);
|
||||||
} else if (tabKey === 2) {
|
} else if (tabKey === 2) {
|
||||||
const arr: any = [];
|
const arr: CourseModel[] = [];
|
||||||
res.data.courses.map((item: any) => {
|
res.data.courses.map((item: any) => {
|
||||||
if (item.is_required === 0) {
|
if (item.is_required === 0) {
|
||||||
arr.push(item);
|
arr.push(item);
|
||||||
@ -77,7 +109,7 @@ const IndexPage = () => {
|
|||||||
});
|
});
|
||||||
setCoursesList(arr);
|
setCoursesList(arr);
|
||||||
} else if (tabKey === 3) {
|
} else if (tabKey === 3) {
|
||||||
const arr: any = [];
|
const arr: CourseModel[] = [];
|
||||||
res.data.courses.map((item: any) => {
|
res.data.courses.map((item: any) => {
|
||||||
if (records[item.id] && records[item.id].progress >= 10000) {
|
if (records[item.id] && records[item.id].progress >= 10000) {
|
||||||
arr.push(item);
|
arr.push(item);
|
||||||
@ -85,7 +117,7 @@ const IndexPage = () => {
|
|||||||
});
|
});
|
||||||
setCoursesList(arr);
|
setCoursesList(arr);
|
||||||
} else if (tabKey === 4) {
|
} else if (tabKey === 4) {
|
||||||
const arr: any = [];
|
const arr: CourseModel[] = [];
|
||||||
res.data.courses.map((item: any) => {
|
res.data.courses.map((item: any) => {
|
||||||
if (
|
if (
|
||||||
!records[item.id] ||
|
!records[item.id] ||
|
||||||
@ -104,7 +136,7 @@ const IndexPage = () => {
|
|||||||
user.coursesCategories().then((res: any) => {
|
user.coursesCategories().then((res: any) => {
|
||||||
const categories = res.data.categories;
|
const categories = res.data.categories;
|
||||||
if (JSON.stringify(categories) !== "{}") {
|
if (JSON.stringify(categories) !== "{}") {
|
||||||
const new_arr: any[] = checkArr(categories, 0);
|
const new_arr: CategoryModel[] = checkArr(categories, 0);
|
||||||
new_arr.unshift({
|
new_arr.unshift({
|
||||||
key: 0,
|
key: 0,
|
||||||
title: "所有分类",
|
title: "所有分类",
|
||||||
@ -115,7 +147,7 @@ const IndexPage = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const checkArr = (categories: any[], id: number) => {
|
const checkArr = (categories: any[], id: number) => {
|
||||||
const arr = [];
|
const arr: CategoryModel[] = [];
|
||||||
for (let i = 0; i < categories[id].length; i++) {
|
for (let i = 0; i < categories[id].length; i++) {
|
||||||
if (!categories[categories[id][i].id]) {
|
if (!categories[categories[id][i].id]) {
|
||||||
arr.push({
|
arr.push({
|
||||||
@ -125,7 +157,10 @@ const IndexPage = () => {
|
|||||||
key: categories[id][i].id,
|
key: categories[id][i].id,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
const new_arr: any[] = checkArr(categories, categories[id][i].id);
|
const new_arr: CategoryModel[] = checkArr(
|
||||||
|
categories,
|
||||||
|
categories[id][i].id
|
||||||
|
);
|
||||||
arr.push({
|
arr.push({
|
||||||
title: (
|
title: (
|
||||||
<span style={{ marginRight: 20 }}>{categories[id][i].name}</span>
|
<span style={{ marginRight: 20 }}>{categories[id][i].name}</span>
|
||||||
@ -163,17 +198,38 @@ const IndexPage = () => {
|
|||||||
|
|
||||||
const onChange = (key: number) => {
|
const onChange = (key: number) => {
|
||||||
setTabKey(key);
|
setTabKey(key);
|
||||||
|
navigate(
|
||||||
|
"/?cid=" + categoryId + "&catName=" + categoryText + "&tab=" + key
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onSelect = (selectedKeys: any, info: any) => {
|
const onSelect = (selectedKeys: any, info: any) => {
|
||||||
setCategoryId(selectedKeys[0]);
|
setCategoryId(selectedKeys[0]);
|
||||||
if (info.node.key === 0) {
|
if (info.node.key === 0) {
|
||||||
setCategoryText(info.node.title);
|
setCategoryText(info.node.title);
|
||||||
|
setSelectKey(selectedKeys);
|
||||||
|
hide();
|
||||||
|
navigate(
|
||||||
|
"/?cid=" +
|
||||||
|
selectedKeys[0] +
|
||||||
|
"&catName=" +
|
||||||
|
info.node.title +
|
||||||
|
"&tab=" +
|
||||||
|
tabKey
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
setCategoryText(info.node.title.props.children);
|
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) => {
|
const handleOpenChange = (newOpen: boolean) => {
|
||||||
@ -211,17 +267,17 @@ const IndexPage = () => {
|
|||||||
<div className={styles["info"]}>
|
<div className={styles["info"]}>
|
||||||
<div className={styles["info-item"]}>
|
<div className={styles["info-item"]}>
|
||||||
<span>必修课：已学完课程</span>
|
<span>必修课：已学完课程</span>
|
||||||
<strong> {stats.required_finished_course_count || 0} </strong>
|
<strong> {stats?.required_finished_course_count || 0} </strong>
|
||||||
<span>/ {stats.required_course_count || 0}</span>
|
<span>/ {stats?.required_course_count || 0}</span>
|
||||||
</div>
|
</div>
|
||||||
{stats.nun_required_course_count > 0 && (
|
{stats && stats.nun_required_course_count > 0 && (
|
||||||
<div className={styles["info-item"]}>
|
<div className={styles["info-item"]}>
|
||||||
<span>选修课：已学完课程</span>
|
<span>选修课：已学完课程</span>
|
||||||
<strong>
|
<strong>
|
||||||
{" "}
|
{" "}
|
||||||
{stats.nun_required_finished_course_count || 0}{" "}
|
{stats?.nun_required_finished_course_count || 0}{" "}
|
||||||
</strong>
|
</strong>
|
||||||
<span>/ {stats.nun_required_course_count || 0}</span>
|
<span>/ {stats?.nun_required_course_count || 0}</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@ -231,70 +287,56 @@ const IndexPage = () => {
|
|||||||
<img className={styles["icon"]} src={studyTime} />
|
<img className={styles["icon"]} src={studyTime} />
|
||||||
<span>学习时长</span>
|
<span>学习时长</span>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles["info"]}>
|
{stats ? (
|
||||||
<div className={styles["info-item"]}>
|
<div className={styles["info"]}>
|
||||||
今日：
|
<div className={styles["info-item"]}>
|
||||||
{studyTimeFormat(stats.today_learn_duration)[0] !== 0 && (
|
今日：
|
||||||
<>
|
{studyTimeFormat(stats.today_learn_duration)[0] !== 0 && (
|
||||||
<strong>
|
<>
|
||||||
{" "}
|
<strong>
|
||||||
{studyTimeFormat(stats.today_learn_duration)[0] || 0}{" "}
|
{" "}
|
||||||
</strong>
|
{studyTimeFormat(stats.today_learn_duration)[0] ||
|
||||||
天
|
0}{" "}
|
||||||
</>
|
</strong>
|
||||||
)}
|
小时
|
||||||
{studyTimeFormat(stats.today_learn_duration)[1] !== 0 && (
|
</>
|
||||||
<>
|
)}
|
||||||
<strong>
|
<strong>
|
||||||
{" "}
|
{" "}
|
||||||
{studyTimeFormat(stats.today_learn_duration)[1] || 0}{" "}
|
{studyTimeFormat(stats.today_learn_duration)[1] || 0}{" "}
|
||||||
</strong>
|
</strong>
|
||||||
小时
|
分钟
|
||||||
</>
|
<strong>
|
||||||
)}
|
{" "}
|
||||||
<strong>
|
{studyTimeFormat(stats.today_learn_duration)[2] || 0}{" "}
|
||||||
{" "}
|
</strong>
|
||||||
{studyTimeFormat(stats.today_learn_duration)[2] || 0}{" "}
|
秒
|
||||||
</strong>
|
</div>
|
||||||
分钟
|
<div className={styles["info-item"]}>
|
||||||
<strong>
|
累计：
|
||||||
{" "}
|
{studyTimeFormat(stats.learn_duration || 0)[0] !== 0 && (
|
||||||
{studyTimeFormat(stats.today_learn_duration)[3] || 0}{" "}
|
<>
|
||||||
</strong>
|
<strong>
|
||||||
秒
|
{" "}
|
||||||
|
{studyTimeFormat(stats.learn_duration || 0)[0] ||
|
||||||
|
0}{" "}
|
||||||
|
</strong>
|
||||||
|
小时
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<strong>
|
||||||
|
{" "}
|
||||||
|
{studyTimeFormat(stats.learn_duration || 0)[1] || 0}{" "}
|
||||||
|
</strong>
|
||||||
|
分钟
|
||||||
|
<strong>
|
||||||
|
{" "}
|
||||||
|
{studyTimeFormat(stats.learn_duration || 0)[2] || 0}{" "}
|
||||||
|
</strong>
|
||||||
|
秒
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles["info-item"]}>
|
) : null}
|
||||||
累计：
|
|
||||||
{studyTimeFormat(stats.learn_duration || 0)[0] !== 0 && (
|
|
||||||
<>
|
|
||||||
<strong>
|
|
||||||
{" "}
|
|
||||||
{studyTimeFormat(stats.learn_duration || 0)[0] || 0}{" "}
|
|
||||||
</strong>
|
|
||||||
天
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{studyTimeFormat(stats.learn_duration || 0)[1] !== 0 && (
|
|
||||||
<>
|
|
||||||
<strong>
|
|
||||||
{" "}
|
|
||||||
{studyTimeFormat(stats.learn_duration || 0)[1] || 0}{" "}
|
|
||||||
</strong>
|
|
||||||
小时
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<strong>
|
|
||||||
{" "}
|
|
||||||
{studyTimeFormat(stats.learn_duration || 0)[2] || 0}{" "}
|
|
||||||
</strong>
|
|
||||||
分钟
|
|
||||||
<strong>
|
|
||||||
{" "}
|
|
||||||
{studyTimeFormat(stats.learn_duration || 0)[3] || 0}{" "}
|
|
||||||
</strong>
|
|
||||||
秒
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles["tabs"]}>
|
<div className={styles["tabs"]}>
|
||||||
|
|||||||
@ -1,14 +1,12 @@
|
|||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { useDispatch } from "react-redux";
|
import { useDispatch } from "react-redux";
|
||||||
import { Outlet } from "react-router-dom";
|
import { Outlet } from "react-router-dom";
|
||||||
// import styles from "./index.module.scss";
|
|
||||||
import {
|
import {
|
||||||
SystemConfigStoreInterface,
|
SystemConfigStoreInterface,
|
||||||
saveConfigAction,
|
saveConfigAction,
|
||||||
} from "../../store/system/systemConfigSlice";
|
} from "../../store/system/systemConfigSlice";
|
||||||
import { loginAction } from "../../store/user/loginUserSlice";
|
import { loginAction } from "../../store/user/loginUserSlice";
|
||||||
import { Header, NoHeader, Footer } from "../../compenents";
|
import { isMobile } from "../../utils/index";
|
||||||
import { useParams, useLocation } from "react-router-dom";
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
loginData?: any;
|
loginData?: any;
|
||||||
@ -16,71 +14,56 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const InitPage = (props: Props) => {
|
export const InitPage = (props: Props) => {
|
||||||
const pathname = useLocation().pathname;
|
|
||||||
const params = useParams();
|
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const [showHeader, setShowHeader] = useState<boolean>(true);
|
const [init, setInit] = useState<boolean>(false);
|
||||||
const [showNoHeader, setShowNoHeader] = useState<boolean>(false);
|
|
||||||
const [showFooter, setShowFooter] = useState<boolean>(true);
|
|
||||||
if (props.loginData) {
|
|
||||||
dispatch(loginAction(props.loginData));
|
|
||||||
}
|
|
||||||
if (props.configData) {
|
|
||||||
let config: SystemConfigStoreInterface = {
|
|
||||||
//系统配置
|
|
||||||
systemApiUrl: props.configData["system-api-url"],
|
|
||||||
systemH5Url: props.configData["system-h5-url"],
|
|
||||||
systemLogo: props.configData["system-logo"],
|
|
||||||
systemName: props.configData["system-name"],
|
|
||||||
systemPcUrl: props.configData["system-pc-url"],
|
|
||||||
pcIndexFooterMsg: props.configData["system-pc-index-footer-msg"],
|
|
||||||
//播放器配置
|
|
||||||
playerPoster: props.configData["player-poster"],
|
|
||||||
playerIsEnabledBulletSecret:
|
|
||||||
props.configData["player-is-enabled-bullet-secret"] &&
|
|
||||||
props.configData["player-is-enabled-bullet-secret"] === "1"
|
|
||||||
? true
|
|
||||||
: false,
|
|
||||||
playerIsDisabledDrag:
|
|
||||||
props.configData["player-disabled-drag"] &&
|
|
||||||
props.configData["player-disabled-drag"] === "1"
|
|
||||||
? true
|
|
||||||
: false,
|
|
||||||
playerBulletSecretText: props.configData["player-bullet-secret-text"],
|
|
||||||
playerBulletSecretColor: props.configData["player-bullet-secret-color"],
|
|
||||||
playerBulletSecretOpacity:
|
|
||||||
props.configData["player-bullet-secret-opacity"],
|
|
||||||
};
|
|
||||||
dispatch(saveConfigAction(config));
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setShowHeader(true);
|
if (props.loginData) {
|
||||||
setShowNoHeader(false);
|
dispatch(loginAction(props.loginData));
|
||||||
setShowFooter(true);
|
|
||||||
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]);
|
if (props.configData) {
|
||||||
|
let config: SystemConfigStoreInterface = {
|
||||||
|
//系统配置
|
||||||
|
"ldap-enabled": props.configData["ldap-enabled"],
|
||||||
|
systemApiUrl: props.configData["system-api-url"],
|
||||||
|
systemH5Url: props.configData["system-h5-url"],
|
||||||
|
systemLogo: props.configData["system-logo"],
|
||||||
|
systemName: props.configData["system-name"],
|
||||||
|
systemPcUrl: props.configData["system-pc-url"],
|
||||||
|
pcIndexFooterMsg: props.configData["system-pc-index-footer-msg"],
|
||||||
|
//播放器配置
|
||||||
|
playerPoster: props.configData["player-poster"],
|
||||||
|
playerIsEnabledBulletSecret:
|
||||||
|
props.configData["player-is-enabled-bullet-secret"] &&
|
||||||
|
props.configData["player-is-enabled-bullet-secret"] === "1"
|
||||||
|
? true
|
||||||
|
: false,
|
||||||
|
playerIsDisabledDrag:
|
||||||
|
props.configData["player-disabled-drag"] &&
|
||||||
|
props.configData["player-disabled-drag"] === "1"
|
||||||
|
? true
|
||||||
|
: false,
|
||||||
|
playerBulletSecretText: props.configData["player-bullet-secret-text"],
|
||||||
|
playerBulletSecretColor: props.configData["player-bullet-secret-color"],
|
||||||
|
playerBulletSecretOpacity:
|
||||||
|
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]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div>
|
{init && (
|
||||||
{showNoHeader && <NoHeader></NoHeader>}
|
<div style={{ minHeight: 900 }}>
|
||||||
{showHeader && <Header></Header>}
|
<Outlet />
|
||||||
<Outlet />
|
</div>
|
||||||
{showFooter && <Footer></Footer>}
|
)}
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -7,12 +7,46 @@ import mediaIcon from "../../assets/images/commen/icon-medal.png";
|
|||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
|
|
||||||
|
type LastLearnModel = {
|
||||||
|
[key: number]: LearnModel;
|
||||||
|
};
|
||||||
|
|
||||||
|
type LearnModel = {
|
||||||
|
course: LastCourseModel;
|
||||||
|
hour_record: HourRecordModel;
|
||||||
|
last_learn_hour: LastHourModel;
|
||||||
|
record: CourseRecordModel;
|
||||||
|
};
|
||||||
|
|
||||||
|
type LastCourseModel = {
|
||||||
|
charge?: number;
|
||||||
|
class_hour: number;
|
||||||
|
created_at?: string;
|
||||||
|
id: number;
|
||||||
|
is_required: number;
|
||||||
|
is_show?: number;
|
||||||
|
short_desc: string;
|
||||||
|
thumb: string;
|
||||||
|
title: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type LastHourModel = {
|
||||||
|
chapter_id: number;
|
||||||
|
course_id: number;
|
||||||
|
duration: number;
|
||||||
|
id: number;
|
||||||
|
rid: number;
|
||||||
|
sort: number;
|
||||||
|
title: string;
|
||||||
|
type: string;
|
||||||
|
};
|
||||||
|
|
||||||
const LatestLearnPage = () => {
|
const LatestLearnPage = () => {
|
||||||
document.title = "最近学习";
|
document.title = "最近学习";
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const systemConfig = useSelector((state: any) => state.systemConfig.value);
|
const systemConfig = useSelector((state: any) => state.systemConfig.value);
|
||||||
const [loading, setLoading] = useState<boolean>(false);
|
const [loading, setLoading] = useState<boolean>(false);
|
||||||
const [courses, setCourses] = useState<any>([]);
|
const [courses, setCourses] = useState<LastLearnModel[]>([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getCourses();
|
getCourses();
|
||||||
@ -56,6 +90,7 @@ const LatestLearnPage = () => {
|
|||||||
>
|
>
|
||||||
<div style={{ width: 120 }}>
|
<div style={{ width: 120 }}>
|
||||||
<Image
|
<Image
|
||||||
|
loading="lazy"
|
||||||
src={item.course.thumb}
|
src={item.course.thumb}
|
||||||
width={120}
|
width={120}
|
||||||
height={90}
|
height={90}
|
||||||
@ -91,6 +126,7 @@ const LatestLearnPage = () => {
|
|||||||
{item.record.progress >= 10000 && (
|
{item.record.progress >= 10000 && (
|
||||||
<>
|
<>
|
||||||
<Image
|
<Image
|
||||||
|
loading="lazy"
|
||||||
width={24}
|
width={24}
|
||||||
height={24}
|
height={24}
|
||||||
src={mediaIcon}
|
src={mediaIcon}
|
||||||
|
|||||||
20
src/pages/layouts/with-header-with-footer/index.tsx
Normal file
20
src/pages/layouts/with-header-with-footer/index.tsx
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import { Outlet } from "react-router-dom";
|
||||||
|
import { Footer, Header } from "../../../compenents";
|
||||||
|
import { Suspense } from "react";
|
||||||
|
import LoadingPage from "../../loading";
|
||||||
|
|
||||||
|
const WithHeaderWithFooter = () => {
|
||||||
|
return (
|
||||||
|
<div className="layout-box">
|
||||||
|
<Header></Header>
|
||||||
|
<Suspense fallback={<LoadingPage height="100vh" />}>
|
||||||
|
<Outlet />
|
||||||
|
</Suspense>
|
||||||
|
<div className="footer-box">
|
||||||
|
<Footer></Footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WithHeaderWithFooter;
|
||||||
17
src/pages/layouts/with-header-without-footer/index.tsx
Normal file
17
src/pages/layouts/with-header-without-footer/index.tsx
Normal file
@ -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;
|
||||||
19
src/pages/layouts/without-header-with-footer/index.tsx
Normal file
19
src/pages/layouts/without-header-with-footer/index.tsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { Outlet } from "react-router-dom";
|
||||||
|
import { Footer } from "../../../compenents";
|
||||||
|
import { Suspense } from "react";
|
||||||
|
import LoadingPage from "../../loading";
|
||||||
|
|
||||||
|
const WithoutHeaderWithFooter = () => {
|
||||||
|
return (
|
||||||
|
<div className="layout-box">
|
||||||
|
<Suspense fallback={<LoadingPage height="100vh" />}>
|
||||||
|
<Outlet />
|
||||||
|
</Suspense>
|
||||||
|
<div className="footer-box">
|
||||||
|
<Footer></Footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WithoutHeaderWithFooter;
|
||||||
13
src/pages/layouts/without-header-without-footer/index.tsx
Normal file
13
src/pages/layouts/without-header-without-footer/index.tsx
Normal file
@ -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;
|
||||||
@ -1,10 +1,6 @@
|
|||||||
.loadingBox {
|
.loading-box {
|
||||||
position: fixed;
|
width: 100vw;
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 99;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 100vh;
|
line-height: 100vh;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #f4fafe;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,11 +1,20 @@
|
|||||||
import { Spin } from "antd";
|
import { Spin } from "antd";
|
||||||
import styles from "./index.module.scss";
|
import styles from "./index.module.scss";
|
||||||
|
|
||||||
const LoadingPage = () => {
|
interface PropsInterface {
|
||||||
|
height?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const LoadingPage = (props: PropsInterface) => {
|
||||||
return (
|
return (
|
||||||
<div className={styles.loadingBox}>
|
<>
|
||||||
<Spin />
|
<div
|
||||||
</div>
|
className={styles["loading-box"]}
|
||||||
|
style={{ height: props.height || "100vh" }}
|
||||||
|
>
|
||||||
|
<Spin size="large" />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -47,7 +47,7 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-left: 1px solid #d8d8d8;
|
border-left: 1px solid #d8d8d8;
|
||||||
padding: 0px 60px;
|
padding: 50px 60px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
.captcha-box {
|
.captcha-box {
|
||||||
|
|||||||
@ -1,11 +1,11 @@
|
|||||||
import { Spin, Input, Button, message } from "antd";
|
import { Input, Button, message } from "antd";
|
||||||
import React, { useState, useEffect } from "react";
|
import React, { useState } from "react";
|
||||||
import styles from "./index.module.scss";
|
import styles from "./index.module.scss";
|
||||||
import banner from "../../assets/images/login/banner.png";
|
import banner from "../../assets/images/login/banner.png";
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { loginAction, logoutAction } from "../../store/user/loginUserSlice";
|
import { loginAction } from "../../store/user/loginUserSlice";
|
||||||
import { login, system, user } from "../../api/index";
|
import { login, user } from "../../api/index";
|
||||||
import { setToken } from "../../utils/index";
|
import { setToken } from "../../utils/index";
|
||||||
import { NoFooter } from "../../compenents";
|
import { NoFooter } from "../../compenents";
|
||||||
|
|
||||||
@ -13,43 +13,19 @@ const LoginPage: React.FC = () => {
|
|||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [loading, setLoading] = useState<boolean>(false);
|
const [loading, setLoading] = useState<boolean>(false);
|
||||||
const [image, setImage] = useState<string>("");
|
|
||||||
const [email, setEmail] = useState<string>("");
|
const [email, setEmail] = useState<string>("");
|
||||||
const [password, setPassword] = useState<string>("");
|
const [password, setPassword] = useState<string>("");
|
||||||
const [captchaVal, setCaptchaVal] = useState<string>("");
|
const systemConfig = useSelector((state: any) => state.systemConfig.value);
|
||||||
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) => {
|
const loginSubmit = (e: any) => {
|
||||||
if (!email) {
|
if (!email) {
|
||||||
message.error("请输入学员邮箱账号");
|
message.error("请输入邮箱或UID");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (!password) {
|
if (!password) {
|
||||||
message.error("请输入密码");
|
message.error("请输入密码");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (!captchaVal) {
|
|
||||||
message.error("请输入图形验证码");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (captchaVal.length < 4) {
|
|
||||||
message.error("图形验证码错误");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -67,18 +43,29 @@ const LoginPage: React.FC = () => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
login
|
if (systemConfig["ldap-enabled"] === "1") {
|
||||||
.login(email, password, captchaKey, captchaVal)
|
login
|
||||||
.then((res: any) => {
|
.loginLdap(email, password)
|
||||||
const token = res.data.token;
|
.then((res: any) => {
|
||||||
setToken(token);
|
const token = res.data.token;
|
||||||
getUser();
|
setToken(token);
|
||||||
})
|
getUser();
|
||||||
.catch((e) => {
|
})
|
||||||
setLoading(false);
|
.catch((e) => {
|
||||||
setCaptchaVal("");
|
setLoading(false);
|
||||||
fetchImageCaptcha();
|
});
|
||||||
});
|
} else {
|
||||||
|
login
|
||||||
|
.login(email, password)
|
||||||
|
.then((res: any) => {
|
||||||
|
const token = res.data.token;
|
||||||
|
setToken(token);
|
||||||
|
getUser();
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const getUser = () => {
|
const getUser = () => {
|
||||||
@ -106,7 +93,7 @@ const LoginPage: React.FC = () => {
|
|||||||
setEmail(e.target.value);
|
setEmail(e.target.value);
|
||||||
}}
|
}}
|
||||||
style={{ width: 400, height: 54 }}
|
style={{ width: 400, height: 54 }}
|
||||||
placeholder="请输入学员邮箱账号"
|
placeholder={"请输入邮箱或UID"}
|
||||||
onKeyUp={(e) => keyUp(e)}
|
onKeyUp={(e) => keyUp(e)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -118,33 +105,8 @@ const LoginPage: React.FC = () => {
|
|||||||
}}
|
}}
|
||||||
style={{ width: 400, height: 54 }}
|
style={{ width: 400, height: 54 }}
|
||||||
placeholder="请输入密码"
|
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)}
|
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>
|
||||||
<div className="login-box d-flex mt-50">
|
<div className="login-box d-flex mt-50">
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
53
src/playedu.d.ts
vendored
Normal file
53
src/playedu.d.ts
vendored
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
declare global {
|
||||||
|
interface CourseModel {
|
||||||
|
charge: number;
|
||||||
|
class_hour: number;
|
||||||
|
created_at: string;
|
||||||
|
id: number;
|
||||||
|
is_required: number;
|
||||||
|
is_show: number;
|
||||||
|
short_desc: string;
|
||||||
|
thumb: string;
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface HourModel {
|
||||||
|
chapter_id: number;
|
||||||
|
course_id: number;
|
||||||
|
duration: number;
|
||||||
|
id: number;
|
||||||
|
rid: number;
|
||||||
|
sort: number;
|
||||||
|
title: string;
|
||||||
|
type: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface HourRecordModel {
|
||||||
|
course_id: number;
|
||||||
|
created_at: string;
|
||||||
|
finished_at?: string;
|
||||||
|
finished_duration: number;
|
||||||
|
hour_id: number;
|
||||||
|
id: number;
|
||||||
|
is_finished: number;
|
||||||
|
real_duration: number;
|
||||||
|
total_duration: number;
|
||||||
|
updated_at: string;
|
||||||
|
user_id: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CourseRecordModel {
|
||||||
|
course_id: number;
|
||||||
|
created_at: string;
|
||||||
|
finished_at?: string;
|
||||||
|
finished_count: number;
|
||||||
|
hour_count: number;
|
||||||
|
id: number;
|
||||||
|
is_finished: number;
|
||||||
|
progress: number;
|
||||||
|
updated_at: string;
|
||||||
|
user_id: number;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export {};
|
||||||
@ -1,15 +1,25 @@
|
|||||||
import { lazy } from "react";
|
import { lazy } from "react";
|
||||||
import { RouteObject } from "react-router-dom";
|
import { RouteObject } from "react-router-dom";
|
||||||
import { system, user } from "../api";
|
import { system, user } from "../api";
|
||||||
import { SystemConfigStoreInterface } from "../store/system/systemConfigSlice";
|
|
||||||
|
|
||||||
import { getToken } from "../utils";
|
import { getToken } from "../utils";
|
||||||
|
// 页面加载
|
||||||
import { InitPage } from "../pages/init";
|
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 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";
|
import PrivateRoute from "../compenents/private-route";
|
||||||
|
|
||||||
let RootPage: any = null;
|
let RootPage: any = null;
|
||||||
@ -30,14 +40,20 @@ if (getToken()) {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
RootPage = <InitPage />;
|
RootPage = lazy(async () => {
|
||||||
}
|
return new Promise<any>(async (resolve) => {
|
||||||
|
try {
|
||||||
|
let configRes: any = await system.config();
|
||||||
|
|
||||||
// 懒加载
|
resolve({
|
||||||
// const LoginPage = lazy(() => import("../pages/login"));
|
default: <InitPage configData={configRes.data} />,
|
||||||
// const IndexPage = lazy(() => import("../pages/index"));
|
});
|
||||||
// const CoursePage = lazy(() => import("../pages/course"));
|
} catch (e) {
|
||||||
// const LatestLearnPage = lazy(() => import("../pages/latest-learn"));
|
console.error("系统初始化失败", e);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
const routes: RouteObject[] = [
|
const routes: RouteObject[] = [
|
||||||
{
|
{
|
||||||
@ -46,23 +62,51 @@ const routes: RouteObject[] = [
|
|||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: "/",
|
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",
|
path: "/",
|
||||||
element: <LoginPage />,
|
element: <WithHeaderWithoutFooter />,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "/login",
|
||||||
|
element: <LoginPage />,
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/course/:courseId",
|
path: "/",
|
||||||
element: <PrivateRoute Component={<CoursePage />} />,
|
element: <WithoutHeaderWithoutFooter />,
|
||||||
},
|
children: [
|
||||||
{
|
{
|
||||||
path: "/course/:courseId/hour/:hourId",
|
path: "/course/:courseId/hour/:hourId",
|
||||||
element: <PrivateRoute Component={<CoursePlayPage />} />,
|
element: <PrivateRoute Component={<CoursePlayPage />} />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/latest-learn",
|
path: "/error",
|
||||||
element: <PrivateRoute Component={<LatestLearnPage />} />,
|
element: <ErrorPage />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "*",
|
||||||
|
element: <ErrorPage />,
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import { createSlice } from "@reduxjs/toolkit";
|
import { createSlice } from "@reduxjs/toolkit";
|
||||||
|
|
||||||
type SystemConfigStoreInterface = {
|
type SystemConfigStoreInterface = {
|
||||||
|
"ldap-enabled": string;
|
||||||
systemApiUrl: string;
|
systemApiUrl: string;
|
||||||
systemPcUrl: string;
|
systemPcUrl: string;
|
||||||
systemH5Url: string;
|
systemH5Url: string;
|
||||||
@ -16,6 +17,7 @@ type SystemConfigStoreInterface = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
let defaultValue: SystemConfigStoreInterface = {
|
let defaultValue: SystemConfigStoreInterface = {
|
||||||
|
"ldap-enabled": "",
|
||||||
systemApiUrl: "",
|
systemApiUrl: "",
|
||||||
systemPcUrl: "",
|
systemPcUrl: "",
|
||||||
systemH5Url: "",
|
systemH5Url: "",
|
||||||
|
|||||||
@ -31,7 +31,7 @@ const loginUserSlice = createSlice({
|
|||||||
stage.value.user = e.payload.user;
|
stage.value.user = e.payload.user;
|
||||||
stage.value.departments = e.payload.departments;
|
stage.value.departments = e.payload.departments;
|
||||||
stage.value.isLogin = true;
|
stage.value.isLogin = true;
|
||||||
if (e.payload.departments.length > 0 && stage.value.currentDepId === 0) {
|
if (e.payload.departments.length > 0 && !getDepKey()) {
|
||||||
stage.value.currentDepId = e.payload.departments[0].id;
|
stage.value.currentDepId = e.payload.departments[0].id;
|
||||||
setDepName(e.payload.departments[0].name);
|
setDepName(e.payload.departments[0].name);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -28,7 +28,6 @@ export function durationFormat(dateStr: number) {
|
|||||||
export function studyTimeFormat(dateStr: number) {
|
export function studyTimeFormat(dateStr: number) {
|
||||||
var d = moment.duration(dateStr / 1000, "seconds");
|
var d = moment.duration(dateStr / 1000, "seconds");
|
||||||
let value = [];
|
let value = [];
|
||||||
value.push(Math.floor(d.asDays()));
|
|
||||||
value.push(d.hours());
|
value.push(d.hours());
|
||||||
value.push(d.minutes());
|
value.push(d.minutes());
|
||||||
value.push(d.seconds());
|
value.push(d.seconds());
|
||||||
@ -104,3 +103,22 @@ export function changeAppUrl(str: string) {
|
|||||||
return str + "/";
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getPlayId(): string {
|
||||||
|
return window.localStorage.getItem("playedu-play-id") || "";
|
||||||
|
}
|
||||||
|
|
||||||
|
export function savePlayId(id: string) {
|
||||||
|
window.localStorage.setItem("playedu-play-id", id);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function clearPlayId() {
|
||||||
|
window.localStorage.removeItem("playedu-play-id");
|
||||||
|
}
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import { defineConfig } from "vite";
|
import { defineConfig } from "vite";
|
||||||
import react from "@vitejs/plugin-react-swc";
|
import react from "@vitejs/plugin-react-swc";
|
||||||
import gzipPlugin from "rollup-plugin-gzip";
|
import gzipPlugin from "rollup-plugin-gzip";
|
||||||
|
import legacy from "@vitejs/plugin-legacy";
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
@ -8,7 +9,15 @@ export default defineConfig({
|
|||||||
host: "0.0.0.0",
|
host: "0.0.0.0",
|
||||||
port: 9797,
|
port: 9797,
|
||||||
},
|
},
|
||||||
plugins: [react()],
|
plugins: [
|
||||||
|
react(),
|
||||||
|
legacy({
|
||||||
|
targets: ["chrome 52"],
|
||||||
|
additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
|
||||||
|
renderLegacyChunks: true,
|
||||||
|
modernPolyfills: true,
|
||||||
|
}),
|
||||||
|
],
|
||||||
build: {
|
build: {
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
plugins: [gzipPlugin()],
|
plugins: [gzipPlugin()],
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user