mirror of
https://github.com/PlayEdu/frontend.git
synced 2025-06-28 23:32:53 +08:00
Compare commits
No commits in common. "main" and "v1.0-beta.4" have entirely different histories.
main
...
v1.0-beta.
@ -1 +1,2 @@
|
||||
VITE_APP_URL=
|
||||
VITE_APP_URL=
|
||||
VITE_G_ID=
|
||||
4
.gitignore
vendored
4
.gitignore
vendored
@ -32,6 +32,4 @@ yarn.lock
|
||||
|
||||
deploy-test.sh
|
||||
deploy-prod.sh
|
||||
deploy-demo.sh
|
||||
|
||||
pnpm-lock.yaml
|
||||
deploy-demo.sh
|
||||
@ -13,5 +13,10 @@
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<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>
|
||||
</html>
|
||||
|
||||
13
package.json
13
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "playedu-pc-interface",
|
||||
"private": false,
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
@ -9,31 +9,28 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.3.0",
|
||||
"@reduxjs/toolkit": "^1.9.3",
|
||||
"add": "^2.0.6",
|
||||
"antd": "^5.3.2",
|
||||
"axios": "^1.3.4",
|
||||
"dayjs": "^1.11.10",
|
||||
"localforage": "^1.10.0",
|
||||
"match-sorter": "^6.3.1",
|
||||
"moment": "^2.29.4",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-ga": "^3.3.1",
|
||||
"react-redux": "^8.0.5",
|
||||
"react-router-dom": "^6.9.0",
|
||||
"redux": "^4.2.1",
|
||||
"sort-by": "^1.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.0",
|
||||
"@types/react-dom": "^18.2.0",
|
||||
"@vitejs/plugin-legacy": "^4.1.1",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@vitejs/plugin-react-swc": "^3.0.0",
|
||||
"rollup-plugin-gzip": "^3.1.0",
|
||||
"sass": "^1.59.3",
|
||||
"terser": "^5.20.0",
|
||||
"typescript": "^4.9.3",
|
||||
"vite": "^4.2.0"
|
||||
}
|
||||
|
||||
1
public/js/xg/hls.min.js
vendored
Normal file
1
public/js/xg/hls.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
21
public/js/xg/index.js
Normal file
21
public/js/xg/index.js
Normal file
File diff suppressed because one or more lines are too long
28
src/App.tsx
28
src/App.tsx
@ -1,13 +1,31 @@
|
||||
import { Suspense } from "react";
|
||||
import { useRoutes } from "react-router-dom";
|
||||
import { Suspense, useEffect } from "react";
|
||||
import ReactGA from "react-ga";
|
||||
import { useLocation, useRoutes } from "react-router-dom";
|
||||
import routes from "./routes";
|
||||
import "./App.scss";
|
||||
import LoadingPage from "./pages/loading";
|
||||
|
||||
const App = () => {
|
||||
const views = useRoutes(routes);
|
||||
const G_ID = import.meta.env.VITE_G_ID || "";
|
||||
if (G_ID) {
|
||||
ReactGA.initialize(G_ID);
|
||||
}
|
||||
|
||||
return <Suspense fallback={<LoadingPage />}>{views}</Suspense>;
|
||||
const App = () => {
|
||||
const Views = () => useRoutes(routes);
|
||||
|
||||
const location = useLocation();
|
||||
useEffect(() => {
|
||||
if (!G_ID) {
|
||||
return;
|
||||
}
|
||||
ReactGA.pageview(location.pathname + location.search);
|
||||
}, [location]);
|
||||
|
||||
return (
|
||||
<Suspense fallback={<LoadingPage />}>
|
||||
<Views />
|
||||
</Suspense>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
@ -31,8 +31,3 @@ export function playPing(courseId: number, hourId: number) {
|
||||
export function latestLearn() {
|
||||
return client.get(`/api/v1/user/latest-learn`, {});
|
||||
}
|
||||
|
||||
//下载课件
|
||||
export function downloadAttachment(courseId: number, id: number) {
|
||||
return client.get(`/api/v1/course/${courseId}/attach/${id}/download`, {});
|
||||
}
|
||||
|
||||
@ -1,23 +1,12 @@
|
||||
import axios, { Axios, AxiosResponse } from "axios";
|
||||
import { message } from "antd";
|
||||
import {
|
||||
getToken,
|
||||
clearToken,
|
||||
clearDepKey,
|
||||
clearDepName,
|
||||
} from "../../utils/index";
|
||||
import { getToken, clearToken } from "../../utils/index";
|
||||
|
||||
const GoLogin = () => {
|
||||
clearToken();
|
||||
clearDepName();
|
||||
clearDepKey();
|
||||
window.location.href = "/login";
|
||||
};
|
||||
|
||||
const GoError = (status: number) => {
|
||||
window.location.href = "/error?status=" + status;
|
||||
};
|
||||
|
||||
export class HttpClient {
|
||||
axios: Axios;
|
||||
|
||||
@ -63,13 +52,10 @@ export class HttpClient {
|
||||
GoLogin();
|
||||
} else if (status === 404) {
|
||||
// 跳转到404页面
|
||||
GoError(404);
|
||||
} else if (status === 403) {
|
||||
// 跳转到无权限页面
|
||||
GoError(403);
|
||||
} else if (status === 500) {
|
||||
// 跳转到500异常页面
|
||||
GoError(500);
|
||||
}
|
||||
return Promise.reject(error.response);
|
||||
}
|
||||
|
||||
@ -1,20 +1,19 @@
|
||||
import client from "./internal/httpClient";
|
||||
|
||||
export function login(email: string, password: string) {
|
||||
export function login(
|
||||
email: string,
|
||||
password: string,
|
||||
captchaKey: string,
|
||||
captchaVal: string
|
||||
) {
|
||||
return client.post("/api/v1/auth/login/password", {
|
||||
email: email,
|
||||
password: password,
|
||||
captcha_key: captchaKey,
|
||||
captcha_val: captchaVal,
|
||||
});
|
||||
}
|
||||
|
||||
export function 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,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -13,13 +13,9 @@ export function password(oldPassword: string, newPassword: string) {
|
||||
}
|
||||
|
||||
// 学员课程
|
||||
export function coursesCategories() {
|
||||
return client.get("/api/v1/category/all", {});
|
||||
}
|
||||
export function courses(depId: number, categoryId: number) {
|
||||
export function courses(depId: number) {
|
||||
return client.get("/api/v1/user/courses", {
|
||||
dep_id: depId,
|
||||
category_id: categoryId,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 3943555 */
|
||||
src: url('iconfont.woff2?t=1683529422487') format('woff2'),
|
||||
url('iconfont.woff?t=1683529422487') format('woff'),
|
||||
url('iconfont.ttf?t=1683529422487') format('truetype');
|
||||
src: url('iconfont.woff2?t=1679564530649') format('woff2'),
|
||||
url('iconfont.woff?t=1679564530649') format('woff'),
|
||||
url('iconfont.ttf?t=1679564530649') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@ -13,38 +13,6 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-icon-xiala:before {
|
||||
content: "\e752";
|
||||
}
|
||||
|
||||
.icon-close:before {
|
||||
content: "\e751";
|
||||
}
|
||||
|
||||
.icon-fullscreen:before {
|
||||
content: "\e74b";
|
||||
}
|
||||
|
||||
.icon-speed:before {
|
||||
content: "\e74c";
|
||||
}
|
||||
|
||||
.icon-mute:before {
|
||||
content: "\e74d";
|
||||
}
|
||||
|
||||
.icon-play:before {
|
||||
content: "\e74e";
|
||||
}
|
||||
|
||||
.icon-pause:before {
|
||||
content: "\e74f";
|
||||
}
|
||||
|
||||
.icon-unmute:before {
|
||||
content: "\e750";
|
||||
}
|
||||
|
||||
.icon-icon-tips:before {
|
||||
content: "\e74a";
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 26 KiB |
@ -40,65 +40,63 @@ export const ChangePasswordModel: React.FC<PropInterface> = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
{open ? (
|
||||
<Modal
|
||||
title="修改密码"
|
||||
centered
|
||||
forceRender
|
||||
open={true}
|
||||
width={416}
|
||||
onOk={() => form.submit()}
|
||||
onCancel={() => onCancel()}
|
||||
maskClosable={false}
|
||||
>
|
||||
<div className="float-left mt-24">
|
||||
<Form
|
||||
form={form}
|
||||
name="change-password"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
initialValues={{ remember: true }}
|
||||
onFinish={onFinish}
|
||||
onFinishFailed={onFinishFailed}
|
||||
autoComplete="off"
|
||||
<Modal
|
||||
title="修改密码"
|
||||
centered
|
||||
forceRender
|
||||
open={open}
|
||||
width={416}
|
||||
onOk={() => form.submit()}
|
||||
onCancel={() => onCancel()}
|
||||
maskClosable={false}
|
||||
>
|
||||
<div className="float-left mt-24">
|
||||
<Form
|
||||
form={form}
|
||||
name="change-password"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
initialValues={{ remember: true }}
|
||||
onFinish={onFinish}
|
||||
onFinishFailed={onFinishFailed}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item
|
||||
label="请输入原密码"
|
||||
name="old_password"
|
||||
rules={[{ required: true, message: "请输入原密码!" }]}
|
||||
>
|
||||
<Form.Item
|
||||
label="请输入原密码"
|
||||
name="old_password"
|
||||
rules={[{ required: true, message: "请输入原密码!" }]}
|
||||
>
|
||||
<Input.Password
|
||||
style={{ width: 200 }}
|
||||
autoComplete="off"
|
||||
placeholder="请输入原密码"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="输入新密码"
|
||||
name="new_password"
|
||||
rules={[{ required: true, message: "请输入新密码!" }]}
|
||||
>
|
||||
<Input.Password
|
||||
style={{ width: 200 }}
|
||||
autoComplete="off"
|
||||
placeholder="请输入新密码"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="再次输入新密码"
|
||||
name="again_new_password"
|
||||
rules={[{ required: true, message: "再次输入新密码!" }]}
|
||||
>
|
||||
<Input.Password
|
||||
style={{ width: 200 }}
|
||||
autoComplete="off"
|
||||
placeholder="再次输入新密码"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</Modal>
|
||||
) : null}
|
||||
<Input.Password
|
||||
style={{ width: 200 }}
|
||||
autoComplete="off"
|
||||
placeholder="请输入原密码"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="输入新密码"
|
||||
name="new_password"
|
||||
rules={[{ required: true, message: "请输入新密码!" }]}
|
||||
>
|
||||
<Input.Password
|
||||
style={{ width: 200 }}
|
||||
autoComplete="off"
|
||||
placeholder="请输入新密码"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="再次输入新密码"
|
||||
name="again_new_password"
|
||||
rules={[{ required: true, message: "再次输入新密码!" }]}
|
||||
>
|
||||
<Input.Password
|
||||
style={{ width: 200 }}
|
||||
autoComplete="off"
|
||||
placeholder="再次输入新密码"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import styles from "./index.module.scss";
|
||||
import { Modal, Button, Dropdown, Image } from "antd";
|
||||
import { Modal, Button, Dropdown } from "antd";
|
||||
import type { MenuProps } from "antd";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { Link, useNavigate, useLocation } from "react-router-dom";
|
||||
@ -217,11 +217,9 @@ export const Header: React.FC = () => {
|
||||
<div className="d-flex" style={{ cursor: "pointer" }}>
|
||||
{user && user.name && (
|
||||
<>
|
||||
<Image
|
||||
loading="lazy"
|
||||
<img
|
||||
style={{ width: 36, height: 36, borderRadius: "50%" }}
|
||||
src={user.avatar}
|
||||
preview={false}
|
||||
/>
|
||||
<span className="ml-8 c-admin">{user.name}</span>
|
||||
</>
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
import React from "react";
|
||||
import { getToken } from "../../utils/index";
|
||||
import { Navigate } from "react-router-dom";
|
||||
|
||||
interface PropInterface {
|
||||
Component: any;
|
||||
}
|
||||
|
||||
const PrivateRoute: React.FC<PropInterface> = ({ Component }) => {
|
||||
return getToken() ? Component : <Navigate to="/login" replace={true} />;
|
||||
};
|
||||
export default PrivateRoute;
|
||||
@ -75,62 +75,59 @@ export const UserInfoModel: React.FC<PropInterface> = ({ open, onCancel }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
{open ? (
|
||||
<Modal
|
||||
title="个人信息"
|
||||
centered
|
||||
forceRender
|
||||
open={true}
|
||||
width={416}
|
||||
onCancel={() => onCancel()}
|
||||
maskClosable={false}
|
||||
footer={null}
|
||||
>
|
||||
<div className="mt-24">
|
||||
<Form
|
||||
form={form}
|
||||
name="user-info"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
initialValues={{ remember: true }}
|
||||
autoComplete="off"
|
||||
<Modal
|
||||
title="个人信息"
|
||||
centered
|
||||
forceRender
|
||||
open={open}
|
||||
width={416}
|
||||
onCancel={() => onCancel()}
|
||||
maskClosable={false}
|
||||
footer={null}
|
||||
>
|
||||
<div className="mt-24">
|
||||
<Form
|
||||
form={form}
|
||||
name="user-info"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
initialValues={{ remember: true }}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item
|
||||
label="学员头像"
|
||||
labelCol={{ style: { marginTop: 15, marginLeft: 52 } }}
|
||||
>
|
||||
<Form.Item
|
||||
label="学员头像"
|
||||
labelCol={{ style: { marginTop: 15, marginLeft: 52 } }}
|
||||
>
|
||||
<div className="d-flex">
|
||||
{avatar && (
|
||||
<Image
|
||||
loading="lazy"
|
||||
width={60}
|
||||
height={60}
|
||||
style={{ borderRadius: "50%" }}
|
||||
src={avatar}
|
||||
preview={false}
|
||||
/>
|
||||
)}
|
||||
<div className="d-flex ml-16">
|
||||
<Upload {...props} showUploadList={false}>
|
||||
<Button>更换头像</Button>
|
||||
</Upload>
|
||||
</div>
|
||||
<div className="d-flex">
|
||||
{avatar && (
|
||||
<Image
|
||||
width={60}
|
||||
height={60}
|
||||
style={{ borderRadius: "50%" }}
|
||||
src={avatar}
|
||||
preview={false}
|
||||
/>
|
||||
)}
|
||||
<div className="d-flex ml-16">
|
||||
<Upload {...props} showUploadList={false}>
|
||||
<Button>更换头像</Button>
|
||||
</Upload>
|
||||
</div>
|
||||
</div>
|
||||
</Form.Item>
|
||||
{name && (
|
||||
<Form.Item label="学员姓名">
|
||||
<div>{name}</div>
|
||||
</Form.Item>
|
||||
{name && (
|
||||
<Form.Item label="学员姓名">
|
||||
<div>{name}</div>
|
||||
</Form.Item>
|
||||
)}
|
||||
{idCard && (
|
||||
<Form.Item label="身份证号" style={{ marginBottom: 16 }}>
|
||||
<div>{idCard}</div>
|
||||
</Form.Item>
|
||||
)}
|
||||
</Form>
|
||||
</div>
|
||||
</Modal>
|
||||
) : null}
|
||||
)}
|
||||
{idCard && (
|
||||
<Form.Item label="身份证号" style={{ marginBottom: 16 }}>
|
||||
<div>{idCard}</div>
|
||||
</Form.Item>
|
||||
)}
|
||||
</Form>
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
106
src/index.scss
106
src/index.scss
@ -1,3 +1,5 @@
|
||||
@import "./assets/iconfont/iconfont.css";
|
||||
|
||||
$primaryColor: #ff4d4f;
|
||||
|
||||
:root {
|
||||
@ -33,18 +35,6 @@ body {
|
||||
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 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@ -301,95 +291,7 @@ h1 {
|
||||
}
|
||||
|
||||
#meedu-player-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-tree-switcher {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ant-tree-node-selected {
|
||||
.ant-tree-title {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tree-treenode {
|
||||
min-width: 150px;
|
||||
width: 100% !important;
|
||||
height: 40px !important;
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
align-items: center !important;
|
||||
&.ant-tree-treenode-selected {
|
||||
background-color: #fff2f0 !important;
|
||||
border-radius: 0px !important;
|
||||
overflow: hidden;
|
||||
.ant-tree-node-content-wrapper {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.ant-tree-node-content-wrapper-normal {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
.ant-tree-node-content-wrapper {
|
||||
width: 100% !important;
|
||||
height: 40px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #fff2f0 !important;
|
||||
border-radius: 0px !important;
|
||||
overflow: hidden;
|
||||
.ant-tree-node-content-wrapper {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.ant-tree-node-content-wrapper-normal {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
.ant-tree-node-content-wrapper-normal {
|
||||
width: 100% !important;
|
||||
height: 40px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ant-tree-switcher {
|
||||
height: 40px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tree-title {
|
||||
flex: 1;
|
||||
|
||||
padding-left: 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.iconfont {
|
||||
color: rgba(0, 0, 0, 0.2);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-popover-inner {
|
||||
padding: 8px 0px !important;
|
||||
}
|
||||
|
||||
.dplayer-notice {
|
||||
opacity: 0 !important;
|
||||
height: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -4,7 +4,6 @@ import store from "./store";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import { ConfigProvider } from "antd";
|
||||
import zhCN from "antd/locale/zh_CN";
|
||||
import "./assets/iconfont/iconfont.css";
|
||||
import App from "./App";
|
||||
import "./index.scss"; //全局样式
|
||||
import AutoScorllTop from "./AutoTop";
|
||||
@ -22,4 +21,4 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
||||
</BrowserRouter>
|
||||
</ConfigProvider>
|
||||
</Provider>
|
||||
);
|
||||
);
|
||||
@ -92,67 +92,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.04);
|
||||
border-radius: 12px;
|
||||
margin-top: 24px;
|
||||
margin-top: 30px;
|
||||
box-sizing: border-box;
|
||||
padding: 24px;
|
||||
.hours-list-box {
|
||||
@ -189,58 +135,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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,62 +1,20 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Row, Spin, Image, Progress } from "antd";
|
||||
import { Row, Col, Spin, Image, Progress } from "antd";
|
||||
import styles from "./index.module.scss";
|
||||
import { useParams, useNavigate, useLocation } from "react-router-dom";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { course as Course } from "../../api/index";
|
||||
import mediaIcon from "../../assets/images/commen/icon-medal.png";
|
||||
import { HourCompenent } from "./compenents/hour";
|
||||
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 params = useParams();
|
||||
const navigate = useNavigate();
|
||||
const result = new URLSearchParams(useLocation().search);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [course, setCourse] = useState<CourseModel | null>(null);
|
||||
const [chapters, setChapters] = useState<ChapterModel[]>([]);
|
||||
const [hours, setHours] = useState<HoursModel>({});
|
||||
const [learnRecord, setLearnRecord] = useState<CourseRecordModel | null>(
|
||||
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[]>([]);
|
||||
const [course, setCourse] = useState<any>({});
|
||||
const [chapters, setChapters] = useState<any>([]);
|
||||
const [hours, setHours] = useState<any>({});
|
||||
const [learnRecord, setLearnRecord] = useState<any>({});
|
||||
const [learnHourRecord, setLearnHourRecord] = useState<any>({});
|
||||
|
||||
useEffect(() => {
|
||||
getDetail();
|
||||
@ -76,22 +34,6 @@ const CoursePage = () => {
|
||||
if (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);
|
||||
})
|
||||
.catch((e) => {
|
||||
@ -99,17 +41,6 @@ const CoursePage = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const onChange = (key: number) => {
|
||||
setTabKey(key);
|
||||
navigate("/course/" + params.courseId + "?tab=" + key);
|
||||
};
|
||||
|
||||
const downLoadFile = (cid: number, id: number) => {
|
||||
Course.downloadAttachment(cid, id).then((res: any) => {
|
||||
window.open(res.data.download_url);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
{loading && (
|
||||
@ -136,18 +67,18 @@ const CoursePage = () => {
|
||||
height={90}
|
||||
style={{ borderRadius: 10 }}
|
||||
preview={false}
|
||||
src={course?.thumb}
|
||||
src={course.thumb}
|
||||
/>
|
||||
<div className={styles["info"]}>
|
||||
<div className={styles["title"]}>{course?.title}</div>
|
||||
<div className={styles["title"]}>{course.title}</div>
|
||||
<div className={styles["status"]}>
|
||||
{course?.is_required === 1 && (
|
||||
{course.is_required === 1 && (
|
||||
<div className={styles["type"]}>必修课</div>
|
||||
)}
|
||||
{course?.is_required === 0 && (
|
||||
{course.is_required === 0 && (
|
||||
<div className={styles["active-type"]}>选修课</div>
|
||||
)}
|
||||
{learnRecord && learnRecord.progress / 100 >= 100 && (
|
||||
{learnRecord.progress / 100 >= 100 && (
|
||||
<div className={styles["success"]}>
|
||||
<Image
|
||||
width={24}
|
||||
@ -161,8 +92,7 @@ const CoursePage = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{(!learnRecord ||
|
||||
(learnRecord && JSON.stringify(learnRecord) === "{}")) &&
|
||||
{JSON.stringify(learnRecord) === "{}" &&
|
||||
JSON.stringify(learnHourRecord) === "{}" && (
|
||||
<Progress
|
||||
type="circle"
|
||||
@ -174,8 +104,7 @@ const CoursePage = () => {
|
||||
format={(percent) => `${percent}%`}
|
||||
/>
|
||||
)}
|
||||
{(!learnRecord ||
|
||||
(learnRecord && JSON.stringify(learnRecord) === "{}")) &&
|
||||
{JSON.stringify(learnRecord) === "{}" &&
|
||||
JSON.stringify(learnHourRecord) !== "{}" && (
|
||||
<Progress
|
||||
type="circle"
|
||||
@ -187,8 +116,7 @@ const CoursePage = () => {
|
||||
format={(percent) => `${percent}%`}
|
||||
/>
|
||||
)}
|
||||
{learnRecord &&
|
||||
JSON.stringify(learnRecord) !== "{}" &&
|
||||
{JSON.stringify(learnRecord) !== "{}" &&
|
||||
JSON.stringify(learnHourRecord) !== "{}" && (
|
||||
<Progress
|
||||
type="circle"
|
||||
@ -196,145 +124,87 @@ const CoursePage = () => {
|
||||
trailColor="#F6F6F6"
|
||||
size={90}
|
||||
strokeWidth={8}
|
||||
percent={Math.floor(learnRecord.progress / 100)}
|
||||
percent={learnRecord.progress / 100}
|
||||
format={(percent) => `${percent}%`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{course?.short_desc && (
|
||||
{course.short_desc && (
|
||||
<div className={styles["desc"]}>{course.short_desc}</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles["tabs"]}>
|
||||
{items.map((item: any) => (
|
||||
<div
|
||||
key={item.key}
|
||||
className={
|
||||
item.key === tabKey
|
||||
? styles["tab-active-item"]
|
||||
: styles["tab-item"]
|
||||
}
|
||||
onClick={() => {
|
||||
onChange(item.key);
|
||||
}}
|
||||
>
|
||||
<div className={styles["tit"]}>{item.label}</div>
|
||||
{item.key === tabKey && (
|
||||
<Image
|
||||
className={styles["banner"]}
|
||||
width={40}
|
||||
height={8}
|
||||
preview={false}
|
||||
src={iconRoute}
|
||||
style={{ marginTop: -16 }}
|
||||
/>
|
||||
)}
|
||||
<div 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].map((it: any, int: number) => (
|
||||
<div key={it.id} className={styles["hours-it"]}>
|
||||
{learnHourRecord[it.id] && (
|
||||
<HourCompenent
|
||||
id={it.id}
|
||||
cid={item.course_id}
|
||||
title={it.title}
|
||||
record={learnHourRecord[it.id]}
|
||||
duration={it.duration}
|
||||
progress={
|
||||
(learnHourRecord[it.id].finished_duration * 100) /
|
||||
learnHourRecord[it.id].total_duration
|
||||
}
|
||||
></HourCompenent>
|
||||
)}
|
||||
{!learnHourRecord[it.id] && (
|
||||
<HourCompenent
|
||||
id={it.id}
|
||||
cid={item.course_id}
|
||||
title={it.title}
|
||||
record={null}
|
||||
duration={it.duration}
|
||||
progress={0}
|
||||
></HourCompenent>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{tabKey === 1 && (
|
||||
<div className={styles["chapters-hours-cont"]}>
|
||||
{chapters.length === 0 && JSON.stringify(hours) === "{}" && (
|
||||
<Empty />
|
||||
)}
|
||||
{chapters.length === 0 && JSON.stringify(hours) !== "{}" && (
|
||||
<div className={styles["hours-list-box"]}>
|
||||
{hours[0].map((item: any, index: number) => (
|
||||
<div key={item.id} className={styles["hours-it"]}>
|
||||
{learnHourRecord[item.id] && (
|
||||
<HourCompenent
|
||||
id={item.id}
|
||||
cid={item.course_id}
|
||||
title={item.title}
|
||||
record={learnHourRecord[item.id]}
|
||||
duration={item.duration}
|
||||
progress={
|
||||
(learnHourRecord[item.id].finished_duration * 100) /
|
||||
learnHourRecord[item.id].total_duration
|
||||
}
|
||||
></HourCompenent>
|
||||
)}
|
||||
{!learnHourRecord[item.id] && (
|
||||
<HourCompenent
|
||||
id={item.id}
|
||||
cid={item.course_id}
|
||||
title={item.title}
|
||||
record={null}
|
||||
duration={item.duration}
|
||||
progress={0}
|
||||
></HourCompenent>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{chapters.length > 0 && JSON.stringify(hours) !== "{}" && (
|
||||
<div className={styles["hours-list-box"]}>
|
||||
{chapters.map((item: any, index: number) => (
|
||||
<div key={item.id} className={styles["chapter-it"]}>
|
||||
<div className={styles["chapter-name"]}>{item.name}</div>
|
||||
{hours[item.id] &&
|
||||
hours[item.id].map((it: any, int: number) => (
|
||||
<div key={it.id} className={styles["hours-it"]}>
|
||||
{learnHourRecord[it.id] && (
|
||||
<HourCompenent
|
||||
id={it.id}
|
||||
cid={item.course_id}
|
||||
title={it.title}
|
||||
record={learnHourRecord[it.id]}
|
||||
duration={it.duration}
|
||||
progress={
|
||||
(learnHourRecord[it.id].finished_duration *
|
||||
100) /
|
||||
learnHourRecord[it.id].total_duration
|
||||
}
|
||||
></HourCompenent>
|
||||
)}
|
||||
{!learnHourRecord[it.id] && (
|
||||
<HourCompenent
|
||||
id={it.id}
|
||||
cid={item.course_id}
|
||||
title={it.title}
|
||||
record={null}
|
||||
duration={it.duration}
|
||||
progress={0}
|
||||
></HourCompenent>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{tabKey === 2 && (
|
||||
<div className={styles["attachments-cont"]}>
|
||||
{attachments.map((item: any, index: number) => (
|
||||
<div key={index} className={styles["attachments-item"]}>
|
||||
<div className={styles["left-cont"]}>
|
||||
<i
|
||||
className="iconfont icon-icon-file"
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: "rgba(0,0,0,0.3)",
|
||||
marginRight: 10,
|
||||
}}
|
||||
/>
|
||||
<span className={styles["title"]}>
|
||||
{item.title}.{item.ext}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={styles["download"]}
|
||||
onClick={() => downLoadFile(item.course_id, item.id)}
|
||||
>
|
||||
下载
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -2,11 +2,9 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
max-height: 900px;
|
||||
background-color: #0e0e1e;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
.top-cont {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -14,8 +12,7 @@
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background: #262634;
|
||||
z-index: 100;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
.box {
|
||||
width: 62.5%;
|
||||
height: 60px;
|
||||
@ -40,16 +37,15 @@
|
||||
}
|
||||
.video-body {
|
||||
width: 62.5%;
|
||||
height: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding-top: 30px;
|
||||
margin-top: 60px;
|
||||
overflow-y: auto;
|
||||
.video-title {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
height: 36px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.88);
|
||||
@ -64,7 +60,6 @@
|
||||
margin: 0 auto;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
|
||||
.alert-message {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -81,12 +76,6 @@
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
z-index: 100;
|
||||
.des-video {
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 15px;
|
||||
}
|
||||
.alert-button {
|
||||
width: 200px;
|
||||
height: 54px;
|
||||
|
||||
@ -5,77 +5,42 @@ import { useSelector } from "react-redux";
|
||||
import { course as Course } from "../../api/index";
|
||||
import { ArrowLeftOutlined } from "@ant-design/icons";
|
||||
import { message } from "antd";
|
||||
import { getPlayId, savePlayId } from "../../utils";
|
||||
|
||||
declare const window: any;
|
||||
var timer: any = null;
|
||||
|
||||
const CoursePalyPage = () => {
|
||||
const navigate = useNavigate();
|
||||
const params = useParams();
|
||||
const systemConfig = useSelector((state: any) => state.systemConfig.value);
|
||||
const user = useSelector((state: any) => state.loginUser.value.user);
|
||||
const [playUrl, setPlayUrl] = useState("");
|
||||
const [playUrl, setPlayUrl] = useState<string>("");
|
||||
const [playDuration, setPlayDuration] = useState(0);
|
||||
const [playendedStatus, setPlayendedStatus] = useState(false);
|
||||
const [playendedStatus, setPlayendedStatus] = useState<Boolean>(false);
|
||||
const [lastSeeValue, setLastSeeValue] = useState({});
|
||||
const [course, setCourse] = useState<CourseModel | null>(null);
|
||||
const [hour, setHour] = useState<HourModel | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [isLastpage, setIsLastpage] = useState(false);
|
||||
const [totalHours, setTotalHours] = useState<HourModel[]>([]);
|
||||
const [playingTime, setPlayingTime] = useState(0);
|
||||
const [watchedSeconds, setWatchedSeconds] = useState(0);
|
||||
const [course, setCourse] = useState<any>({});
|
||||
const [hour, setHour] = useState<any>({});
|
||||
const [loading, setLoading] = useState<Boolean>(false);
|
||||
const [isLastpage, setIsLastpage] = useState<Boolean>(false);
|
||||
const [totalHours, setTotalHours] = useState<any>([]);
|
||||
const myRef = useRef(0);
|
||||
const playRef = useRef(0);
|
||||
const watchRef = useRef(0);
|
||||
const totalRef = useRef(0);
|
||||
const [checkPlayerStatus, setCheckPlayerStatus] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
timer && clearInterval(timer);
|
||||
getCourse();
|
||||
getDetail();
|
||||
document.oncontextmenu = function (e) {
|
||||
/*屏蔽浏览器默认右键事件*/
|
||||
e = e || window.event;
|
||||
return false;
|
||||
};
|
||||
|
||||
return () => {
|
||||
timer && clearInterval(timer);
|
||||
document.oncontextmenu = function (e) {
|
||||
/*恢复浏览器默认右键事件*/
|
||||
e = e || window.event;
|
||||
return true;
|
||||
};
|
||||
};
|
||||
}, [params.courseId, params.hourId]);
|
||||
|
||||
useEffect(() => {
|
||||
myRef.current = playDuration;
|
||||
}, [playDuration]);
|
||||
|
||||
useEffect(() => {
|
||||
playRef.current = playingTime;
|
||||
}, [playingTime]);
|
||||
|
||||
useEffect(() => {
|
||||
watchRef.current = watchedSeconds;
|
||||
}, [watchedSeconds]);
|
||||
|
||||
useEffect(() => {
|
||||
totalRef.current = hour?.duration || 0;
|
||||
}, [hour]);
|
||||
|
||||
const getCourse = () => {
|
||||
Course.detail(Number(params.courseId)).then((res: any) => {
|
||||
let totalHours: HourModel[] = [];
|
||||
let totalHours: any = [];
|
||||
if (res.data.chapters.length === 0) {
|
||||
setTotalHours(res.data.hours[0]);
|
||||
totalHours = res.data.hours[0];
|
||||
} else if (res.data.chapters.length > 0) {
|
||||
const arr: HourModel[] = [];
|
||||
const arr: any = [];
|
||||
for (let key in res.data.hours) {
|
||||
res.data.hours[key].map((item: any) => {
|
||||
arr.push(item);
|
||||
@ -103,7 +68,7 @@ const CoursePalyPage = () => {
|
||||
setCourse(res.data.course);
|
||||
setHour(res.data.hour);
|
||||
document.title = res.data.hour.title;
|
||||
let record: HourRecordModel = res.data.user_hour_record;
|
||||
let record = res.data.user_hour_record;
|
||||
let params = null;
|
||||
if (record && record.finished_duration && record.is_finished === 0) {
|
||||
params = {
|
||||
@ -112,9 +77,6 @@ const CoursePalyPage = () => {
|
||||
};
|
||||
setLastSeeValue(params);
|
||||
setLastSeeValue(params);
|
||||
setWatchedSeconds(record.finished_duration);
|
||||
} else if (record && record.is_finished === 1) {
|
||||
setWatchedSeconds(res.data.hour.duration);
|
||||
}
|
||||
getVideoUrl(params);
|
||||
setLoading(false);
|
||||
@ -129,16 +91,11 @@ const CoursePalyPage = () => {
|
||||
(res: any) => {
|
||||
setPlayUrl(res.data.url);
|
||||
initDPlayer(res.data.url, 0, data);
|
||||
savePlayId(String(params.courseId) + "-" + String(params.hourId));
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const initDPlayer = (playUrl: string, isTrySee: number, params: any) => {
|
||||
let banDrag =
|
||||
systemConfig.playerIsDisabledDrag &&
|
||||
watchRef.current < totalRef.current &&
|
||||
watchRef.current === 0;
|
||||
window.player = new window.DPlayer({
|
||||
container: document.getElementById("meedu-player-container"),
|
||||
autoplay: false,
|
||||
@ -157,42 +114,19 @@ const CoursePalyPage = () => {
|
||||
color: systemConfig.playerBulletSecretColor || "red",
|
||||
opacity: Number(systemConfig.playerBulletSecretOpacity),
|
||||
},
|
||||
ban_drag: banDrag,
|
||||
ban_drag: false,
|
||||
last_see_pos: params,
|
||||
});
|
||||
// 监听播放进度更新evt
|
||||
window.player.on("timeupdate", () => {
|
||||
let currentTime = parseInt(window.player.video.currentTime);
|
||||
if (
|
||||
systemConfig.playerIsDisabledDrag &&
|
||||
watchRef.current < totalRef.current &&
|
||||
currentTime - playRef.current >= 2 &&
|
||||
currentTime > watchRef.current
|
||||
) {
|
||||
message.warning("首次学习禁止快进");
|
||||
window.player.seek(watchRef.current);
|
||||
} else {
|
||||
setPlayingTime(currentTime);
|
||||
playTimeUpdate(parseInt(window.player.video.currentTime), false);
|
||||
}
|
||||
playTimeUpdate(parseInt(window.player.video.currentTime), false);
|
||||
});
|
||||
window.player.on("ended", () => {
|
||||
if (
|
||||
systemConfig.playerIsDisabledDrag &&
|
||||
watchRef.current < totalRef.current &&
|
||||
window.player.video.duration - playRef.current >= 2
|
||||
) {
|
||||
window.player.seek(playRef.current);
|
||||
return;
|
||||
}
|
||||
setPlayingTime(0);
|
||||
setPlayendedStatus(true);
|
||||
playTimeUpdate(parseInt(window.player.video.currentTime), true);
|
||||
exitFullscreen();
|
||||
window.player && window.player.destroy();
|
||||
});
|
||||
setLoading(false);
|
||||
checkPlayer();
|
||||
};
|
||||
|
||||
const playTimeUpdate = (duration: number, isEnd: boolean) => {
|
||||
@ -209,22 +143,6 @@ 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 index = totalHours.findIndex(
|
||||
(i: any) => i.id === Number(params.hourId)
|
||||
@ -239,18 +157,6 @@ 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 (
|
||||
<div className={styles["video-mask"]}>
|
||||
<div className={styles["top-cont"]}>
|
||||
@ -258,13 +164,7 @@ const CoursePalyPage = () => {
|
||||
<div
|
||||
className={styles["close-btn"]}
|
||||
onClick={() => {
|
||||
timer && clearInterval(timer);
|
||||
window.player && window.player.destroy();
|
||||
document.oncontextmenu = function (e) {
|
||||
/*恢复浏览器默认右键事件*/
|
||||
e = e || window.event;
|
||||
return true;
|
||||
};
|
||||
navigate(-1);
|
||||
}}
|
||||
>
|
||||
@ -274,20 +174,9 @@ const CoursePalyPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
<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="play-box"
|
||||
id="meedu-player-container"
|
||||
style={{ borderRadius: 8 }}
|
||||
></div>
|
||||
{checkPlayerStatus && (
|
||||
<div className={styles["alert-message"]}>
|
||||
<div className={styles["des-video"]}>
|
||||
您已打开新视频，暂停本视频播放
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="play-box" id="meedu-player-container"></div>
|
||||
{playendedStatus && (
|
||||
<div className={styles["alert-message"]}>
|
||||
{isLastpage && (
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
.main {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
@ -1,31 +0,0 @@
|
||||
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,7 +29,6 @@ export const CoursesModel: React.FC<PropInterface> = ({
|
||||
>
|
||||
<div className={styles["top-content"]}>
|
||||
<Image
|
||||
loading="lazy"
|
||||
width={120}
|
||||
height={90}
|
||||
style={{ borderRadius: 10 }}
|
||||
@ -66,13 +65,7 @@ export const CoursesModel: React.FC<PropInterface> = ({
|
||||
)}
|
||||
{progress >= 100 && (
|
||||
<div className={styles["success"]}>
|
||||
<Image
|
||||
loading="lazy"
|
||||
width={24}
|
||||
height={24}
|
||||
src={mediaIcon}
|
||||
preview={false}
|
||||
/>
|
||||
<Image width={24} height={24} src={mediaIcon} preview={false} />
|
||||
<span className="ml-8">恭喜你学完此课程!</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -64,7 +64,6 @@
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.tab-item {
|
||||
width: 64px;
|
||||
height: 48px;
|
||||
@ -109,19 +108,6 @@
|
||||
animation: scaleTransX 0.3s;
|
||||
}
|
||||
}
|
||||
.dropButton {
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
line-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleTransX {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Row, Col, Spin, Tree, Popover, Space, Image } from "antd";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { Row, Col, Spin, Image } from "antd";
|
||||
import type { TabsProps } from "antd";
|
||||
import { user } from "../../api/index";
|
||||
import styles from "./index.module.scss";
|
||||
import { useSelector } from "react-redux";
|
||||
@ -11,89 +11,44 @@ import studyTime from "../../assets/images/commen/icon-studytime.png";
|
||||
import iconRoute from "../../assets/images/commen/icon-route.png";
|
||||
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 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(Number(result.get("tab") || 0));
|
||||
const [coursesList, setCoursesList] = useState<CourseModel[]>([]);
|
||||
const [categories, setCategories] = useState<CategoryModel[]>([]);
|
||||
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<LearnCourseRecordsModel>({});
|
||||
const [tabKey, setTabKey] = useState(0);
|
||||
const [coursesList, setCoursesList] = useState<any>([]);
|
||||
const [learnCourseRecords, setLearnCourseRecords] = useState<any>({});
|
||||
const [learnCourseHourCount, setLearnCourseHourCount] = useState<any>({});
|
||||
const [stats, setStats] = useState<StatsModel | null>(null);
|
||||
const [stats, setStats] = useState<any>({});
|
||||
|
||||
const departments = useSelector(
|
||||
(state: any) => state.loginUser.value.departments
|
||||
);
|
||||
const currentDepId = useSelector(
|
||||
(state: any) => state.loginUser.value.currentDepId
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
getParams();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let arr = [];
|
||||
arr.push(Number(result.get("cid") || 0));
|
||||
setSelectKey(arr);
|
||||
}, [result.get("cid")]);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentDepId === 0) {
|
||||
return;
|
||||
}
|
||||
getData();
|
||||
}, [tabKey, currentDepId, categoryId]);
|
||||
}, [tabKey, currentDepId]);
|
||||
|
||||
useEffect(() => {
|
||||
document.title = systemConfig.systemName || "首页";
|
||||
}, [systemConfig]);
|
||||
|
||||
const hide = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const getData = () => {
|
||||
setLoading(true);
|
||||
user.courses(currentDepId, categoryId).then((res: any) => {
|
||||
const records: LearnCourseRecordsModel = res.data.learn_course_records;
|
||||
user.courses(currentDepId).then((res: any) => {
|
||||
const records = res.data.learn_course_records;
|
||||
setStats(res.data.stats);
|
||||
setLearnCourseRecords(records);
|
||||
setLearnCourseHourCount(res.data.user_course_hour_count);
|
||||
if (tabKey === 0) {
|
||||
setCoursesList(res.data.courses);
|
||||
} else if (tabKey === 1) {
|
||||
const arr: CourseModel[] = [];
|
||||
const arr: any = [];
|
||||
res.data.courses.map((item: any) => {
|
||||
if (item.is_required === 1) {
|
||||
arr.push(item);
|
||||
@ -101,7 +56,7 @@ const IndexPage = () => {
|
||||
});
|
||||
setCoursesList(arr);
|
||||
} else if (tabKey === 2) {
|
||||
const arr: CourseModel[] = [];
|
||||
const arr: any = [];
|
||||
res.data.courses.map((item: any) => {
|
||||
if (item.is_required === 0) {
|
||||
arr.push(item);
|
||||
@ -109,7 +64,7 @@ const IndexPage = () => {
|
||||
});
|
||||
setCoursesList(arr);
|
||||
} else if (tabKey === 3) {
|
||||
const arr: CourseModel[] = [];
|
||||
const arr: any = [];
|
||||
res.data.courses.map((item: any) => {
|
||||
if (records[item.id] && records[item.id].progress >= 10000) {
|
||||
arr.push(item);
|
||||
@ -117,7 +72,7 @@ const IndexPage = () => {
|
||||
});
|
||||
setCoursesList(arr);
|
||||
} else if (tabKey === 4) {
|
||||
const arr: CourseModel[] = [];
|
||||
const arr: any = [];
|
||||
res.data.courses.map((item: any) => {
|
||||
if (
|
||||
!records[item.id] ||
|
||||
@ -132,47 +87,6 @@ const IndexPage = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const getParams = () => {
|
||||
user.coursesCategories().then((res: any) => {
|
||||
const categories = res.data.categories;
|
||||
if (JSON.stringify(categories) !== "{}") {
|
||||
const new_arr: CategoryModel[] = checkArr(categories, 0);
|
||||
new_arr.unshift({
|
||||
key: 0,
|
||||
title: "所有分类",
|
||||
});
|
||||
setCategories(new_arr);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const checkArr = (categories: any[], id: number) => {
|
||||
const arr: CategoryModel[] = [];
|
||||
for (let i = 0; i < categories[id].length; i++) {
|
||||
if (!categories[categories[id][i].id]) {
|
||||
arr.push({
|
||||
title: (
|
||||
<span style={{ marginRight: 20 }}>{categories[id][i].name}</span>
|
||||
),
|
||||
key: categories[id][i].id,
|
||||
});
|
||||
} else {
|
||||
const new_arr: CategoryModel[] = checkArr(
|
||||
categories,
|
||||
categories[id][i].id
|
||||
);
|
||||
arr.push({
|
||||
title: (
|
||||
<span style={{ marginRight: 20 }}>{categories[id][i].name}</span>
|
||||
),
|
||||
key: categories[id][i].id,
|
||||
children: new_arr,
|
||||
});
|
||||
}
|
||||
}
|
||||
return arr;
|
||||
};
|
||||
|
||||
const items = [
|
||||
{
|
||||
key: 0,
|
||||
@ -198,63 +112,8 @@ 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
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenChange = (newOpen: boolean) => {
|
||||
setOpen(newOpen);
|
||||
};
|
||||
|
||||
const dropItem = (
|
||||
<div
|
||||
style={{
|
||||
maxHeight: 600,
|
||||
overflowX: "hidden",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
<Tree
|
||||
selectedKeys={selectKey}
|
||||
switcherIcon={null}
|
||||
onSelect={onSelect}
|
||||
treeData={categories}
|
||||
blockNode
|
||||
defaultExpandAll={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="main-body">
|
||||
<div className="content">
|
||||
@ -267,17 +126,17 @@ const IndexPage = () => {
|
||||
<div className={styles["info"]}>
|
||||
<div className={styles["info-item"]}>
|
||||
<span>必修课：已学完课程</span>
|
||||
<strong> {stats?.required_finished_course_count || 0} </strong>
|
||||
<span>/ {stats?.required_course_count || 0}</span>
|
||||
<strong> {stats.required_finished_course_count || 0} </strong>
|
||||
<span>/ {stats.required_course_count || 0}</span>
|
||||
</div>
|
||||
{stats && stats.nun_required_course_count > 0 && (
|
||||
{stats.nun_required_course_count > 0 && (
|
||||
<div className={styles["info-item"]}>
|
||||
<span>选修课：已学完课程</span>
|
||||
<strong>
|
||||
{" "}
|
||||
{stats?.nun_required_finished_course_count || 0}{" "}
|
||||
{stats.nun_required_finished_course_count || 0}{" "}
|
||||
</strong>
|
||||
<span>/ {stats?.nun_required_course_count || 0}</span>
|
||||
<span>/ {stats.nun_required_course_count || 0}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -287,56 +146,70 @@ const IndexPage = () => {
|
||||
<img className={styles["icon"]} src={studyTime} />
|
||||
<span>学习时长</span>
|
||||
</div>
|
||||
{stats ? (
|
||||
<div className={styles["info"]}>
|
||||
<div className={styles["info-item"]}>
|
||||
今日：
|
||||
{studyTimeFormat(stats.today_learn_duration)[0] !== 0 && (
|
||||
<>
|
||||
<strong>
|
||||
{" "}
|
||||
{studyTimeFormat(stats.today_learn_duration)[0] ||
|
||||
0}{" "}
|
||||
</strong>
|
||||
小时
|
||||
</>
|
||||
)}
|
||||
<strong>
|
||||
{" "}
|
||||
{studyTimeFormat(stats.today_learn_duration)[1] || 0}{" "}
|
||||
</strong>
|
||||
分钟
|
||||
<strong>
|
||||
{" "}
|
||||
{studyTimeFormat(stats.today_learn_duration)[2] || 0}{" "}
|
||||
</strong>
|
||||
秒
|
||||
</div>
|
||||
<div className={styles["info-item"]}>
|
||||
累计：
|
||||
{studyTimeFormat(stats.learn_duration || 0)[0] !== 0 && (
|
||||
<>
|
||||
<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 className={styles["info"]}>
|
||||
<div className={styles["info-item"]}>
|
||||
今日：
|
||||
{studyTimeFormat(stats.today_learn_duration)[0] !== 0 && (
|
||||
<>
|
||||
<strong>
|
||||
{" "}
|
||||
{studyTimeFormat(stats.today_learn_duration)[0] || 0}{" "}
|
||||
</strong>
|
||||
天
|
||||
</>
|
||||
)}
|
||||
{studyTimeFormat(stats.today_learn_duration)[1] !== 0 && (
|
||||
<>
|
||||
<strong>
|
||||
{" "}
|
||||
{studyTimeFormat(stats.today_learn_duration)[1] || 0}{" "}
|
||||
</strong>
|
||||
小时
|
||||
</>
|
||||
)}
|
||||
<strong>
|
||||
{" "}
|
||||
{studyTimeFormat(stats.today_learn_duration)[2] || 0}{" "}
|
||||
</strong>
|
||||
分钟
|
||||
<strong>
|
||||
{" "}
|
||||
{studyTimeFormat(stats.today_learn_duration)[3] || 0}{" "}
|
||||
</strong>
|
||||
秒
|
||||
</div>
|
||||
) : null}
|
||||
<div className={styles["info-item"]}>
|
||||
累计：
|
||||
{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 className={styles["tabs"]}>
|
||||
@ -365,21 +238,6 @@ const IndexPage = () => {
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<Popover
|
||||
content={dropItem}
|
||||
placement="bottomRight"
|
||||
open={open}
|
||||
trigger="click"
|
||||
onOpenChange={handleOpenChange}
|
||||
>
|
||||
<Space className={styles["dropButton"]}>
|
||||
{categoryText}
|
||||
<i
|
||||
className="iconfont icon-icon-xiala"
|
||||
style={{ fontSize: 16 }}
|
||||
/>
|
||||
</Space>
|
||||
</Popover>
|
||||
</div>
|
||||
{loading && (
|
||||
<Row
|
||||
@ -420,9 +278,7 @@ const IndexPage = () => {
|
||||
title={item.title}
|
||||
thumb={item.thumb}
|
||||
isRequired={item.is_required}
|
||||
progress={Math.floor(
|
||||
learnCourseRecords[item.id].progress / 100
|
||||
)}
|
||||
progress={learnCourseRecords[item.id].progress / 100}
|
||||
></CoursesModel>
|
||||
)}
|
||||
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { Outlet } from "react-router-dom";
|
||||
// import styles from "./index.module.scss";
|
||||
import {
|
||||
SystemConfigStoreInterface,
|
||||
saveConfigAction,
|
||||
} from "../../store/system/systemConfigSlice";
|
||||
import { loginAction } from "../../store/user/loginUserSlice";
|
||||
import { isMobile } from "../../utils/index";
|
||||
import { Header, NoHeader, Footer } from "../../compenents";
|
||||
import { useParams, useLocation } from "react-router-dom";
|
||||
|
||||
interface Props {
|
||||
loginData?: any;
|
||||
@ -14,56 +16,66 @@ interface Props {
|
||||
}
|
||||
|
||||
export const InitPage = (props: Props) => {
|
||||
const pathname = useLocation().pathname;
|
||||
const params = useParams();
|
||||
const dispatch = useDispatch();
|
||||
const [init, setInit] = useState<boolean>(false);
|
||||
const [showHeader, setShowHeader] = useState<boolean>(true);
|
||||
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,
|
||||
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(() => {
|
||||
if (props.loginData) {
|
||||
dispatch(loginAction(props.loginData));
|
||||
setShowHeader(true);
|
||||
setShowNoHeader(false);
|
||||
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);
|
||||
}
|
||||
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]);
|
||||
}, [pathname, params]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{init && (
|
||||
<div style={{ minHeight: 900 }}>
|
||||
<Outlet />
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
{showNoHeader && <NoHeader></NoHeader>}
|
||||
{showHeader && <Header></Header>}
|
||||
<Outlet />
|
||||
{showFooter && <Footer></Footer>}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -7,46 +7,12 @@ import mediaIcon from "../../assets/images/commen/icon-medal.png";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
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 = () => {
|
||||
document.title = "最近学习";
|
||||
const navigate = useNavigate();
|
||||
const systemConfig = useSelector((state: any) => state.systemConfig.value);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [courses, setCourses] = useState<LastLearnModel[]>([]);
|
||||
const [courses, setCourses] = useState<any>([]);
|
||||
|
||||
useEffect(() => {
|
||||
getCourses();
|
||||
@ -90,7 +56,6 @@ const LatestLearnPage = () => {
|
||||
>
|
||||
<div style={{ width: 120 }}>
|
||||
<Image
|
||||
loading="lazy"
|
||||
src={item.course.thumb}
|
||||
width={120}
|
||||
height={90}
|
||||
@ -118,7 +83,7 @@ const LatestLearnPage = () => {
|
||||
<div className={styles["progress"]}>
|
||||
{item.record.progress < 10000 && (
|
||||
<Progress
|
||||
percent={Math.floor(item.record.progress / 100)}
|
||||
percent={item.record.progress / 100}
|
||||
strokeColor="#FF4D4F"
|
||||
trailColor="#F6F6F6"
|
||||
/>
|
||||
@ -126,7 +91,6 @@ const LatestLearnPage = () => {
|
||||
{item.record.progress >= 10000 && (
|
||||
<>
|
||||
<Image
|
||||
loading="lazy"
|
||||
width={24}
|
||||
height={24}
|
||||
src={mediaIcon}
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
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;
|
||||
@ -1,17 +0,0 @@
|
||||
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;
|
||||
@ -1,19 +0,0 @@
|
||||
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;
|
||||
@ -1,13 +0,0 @@
|
||||
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,6 +1,10 @@
|
||||
.loading-box {
|
||||
width: 100vw;
|
||||
line-height: 100vh;
|
||||
.loadingBox {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
text-align: center;
|
||||
background-color: #f4fafe;
|
||||
line-height: 100vh;
|
||||
}
|
||||
|
||||
@ -1,20 +1,11 @@
|
||||
import { Spin } from "antd";
|
||||
import styles from "./index.module.scss";
|
||||
|
||||
interface PropsInterface {
|
||||
height?: string;
|
||||
}
|
||||
|
||||
const LoadingPage = (props: PropsInterface) => {
|
||||
const LoadingPage = () => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={styles["loading-box"]}
|
||||
style={{ height: props.height || "100vh" }}
|
||||
>
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
</>
|
||||
<div className={styles.loadingBox}>
|
||||
<Spin />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
border-left: 1px solid #d8d8d8;
|
||||
padding: 50px 60px;
|
||||
padding: 0px 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.captcha-box {
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { Input, Button, message } from "antd";
|
||||
import React, { useState } from "react";
|
||||
import { Spin, 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 { useNavigate } from "react-router-dom";
|
||||
import { loginAction } from "../../store/user/loginUserSlice";
|
||||
import { login, user } from "../../api/index";
|
||||
import { loginAction, logoutAction } from "../../store/user/loginUserSlice";
|
||||
import { login, system, user } from "../../api/index";
|
||||
import { setToken } from "../../utils/index";
|
||||
import { NoFooter } from "../../compenents";
|
||||
|
||||
@ -13,19 +13,43 @@ 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 systemConfig = useSelector((state: any) => state.systemConfig.value);
|
||||
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) {
|
||||
message.error("请输入邮箱或UID");
|
||||
message.error("请输入学员邮箱账号");
|
||||
return;
|
||||
}
|
||||
if (!password) {
|
||||
message.error("请输入密码");
|
||||
return;
|
||||
}
|
||||
if (!captchaVal) {
|
||||
message.error("请输入图形验证码");
|
||||
return;
|
||||
}
|
||||
if (captchaVal.length < 4) {
|
||||
message.error("图形验证码错误");
|
||||
return;
|
||||
}
|
||||
if (loading) {
|
||||
return;
|
||||
}
|
||||
@ -43,29 +67,18 @@ const LoginPage: React.FC = () => {
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
if (systemConfig["ldap-enabled"] === "1") {
|
||||
login
|
||||
.loginLdap(email, password)
|
||||
.then((res: any) => {
|
||||
const token = res.data.token;
|
||||
setToken(token);
|
||||
getUser();
|
||||
})
|
||||
.catch((e) => {
|
||||
setLoading(false);
|
||||
});
|
||||
} else {
|
||||
login
|
||||
.login(email, password)
|
||||
.then((res: any) => {
|
||||
const token = res.data.token;
|
||||
setToken(token);
|
||||
getUser();
|
||||
})
|
||||
.catch((e) => {
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
login
|
||||
.login(email, password, captchaKey, captchaVal)
|
||||
.then((res: any) => {
|
||||
const token = res.data.token;
|
||||
setToken(token);
|
||||
getUser();
|
||||
})
|
||||
.catch((e) => {
|
||||
setLoading(false);
|
||||
setCaptchaVal("");
|
||||
fetchImageCaptcha();
|
||||
});
|
||||
};
|
||||
|
||||
const getUser = () => {
|
||||
@ -93,7 +106,7 @@ const LoginPage: React.FC = () => {
|
||||
setEmail(e.target.value);
|
||||
}}
|
||||
style={{ width: 400, height: 54 }}
|
||||
placeholder={"请输入邮箱或UID"}
|
||||
placeholder="请输入学员邮箱账号"
|
||||
onKeyUp={(e) => keyUp(e)}
|
||||
/>
|
||||
</div>
|
||||
@ -105,8 +118,33 @@ const LoginPage: React.FC = () => {
|
||||
}}
|
||||
style={{ width: 400, height: 54 }}
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</div>
|
||||
<div className="login-box d-flex mt-50">
|
||||
<Input
|
||||
value={captchaVal}
|
||||
style={{ width: 260, height: 54 }}
|
||||
placeholder="请输入图形验证码"
|
||||
onChange={(e) => {
|
||||
setCaptchaVal(e.target.value);
|
||||
}}
|
||||
onKeyUp={(e) => keyUp(e)}
|
||||
/>
|
||||
<div className={styles["captcha-box"]}>
|
||||
{captchaLoading && (
|
||||
<div className={styles["catpcha-loading-box"]}>
|
||||
<Spin size="small" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!captchaLoading && (
|
||||
<img
|
||||
className={styles["captcha"]}
|
||||
onClick={fetchImageCaptcha}
|
||||
src={image}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="login-box d-flex mt-50">
|
||||
<Button
|
||||
|
||||
53
src/playedu.d.ts
vendored
53
src/playedu.d.ts
vendored
@ -1,53 +0,0 @@
|
||||
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,26 +1,15 @@
|
||||
import { lazy } from "react";
|
||||
import { RouteObject } from "react-router-dom";
|
||||
import { system, user } from "../api";
|
||||
import { SystemConfigStoreInterface } from "../store/system/systemConfigSlice";
|
||||
|
||||
import { getToken } from "../utils";
|
||||
// 页面加载
|
||||
import { InitPage } from "../pages/init";
|
||||
import CoursePage from "../pages/course/index";
|
||||
import CoursePlayPage from "../pages/course/video";
|
||||
import IndexPage from "../pages/index";
|
||||
import LatestLearnPage from "../pages/latest-learn";
|
||||
import LoginPage from "../pages/login";
|
||||
import WithHeaderWithFooter from "../pages/layouts/with-header-with-footer";
|
||||
import WithHeaderWithoutFooter from "../pages/layouts/with-header-without-footer";
|
||||
import WithoutHeaderWithFooter from "../pages/layouts/without-header-with-footer";
|
||||
import WithoutHeaderWithoutFooter from "../pages/layouts/without-header-without-footer";
|
||||
|
||||
//主页
|
||||
const IndexPage = lazy(() => import("../pages/index"));
|
||||
//课程相关
|
||||
const CoursePage = lazy(() => import("../pages/course/index"));
|
||||
const CoursePlayPage = lazy(() => import("../pages/course/video"));
|
||||
//最近学习
|
||||
const LatestLearnPage = lazy(() => import("../pages/latest-learn"));
|
||||
//错误页面
|
||||
const ErrorPage = lazy(() => import("../pages/error"));
|
||||
|
||||
import PrivateRoute from "../compenents/private-route";
|
||||
|
||||
let RootPage: any = null;
|
||||
if (getToken()) {
|
||||
@ -40,21 +29,18 @@ if (getToken()) {
|
||||
});
|
||||
});
|
||||
} else {
|
||||
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);
|
||||
}
|
||||
});
|
||||
});
|
||||
if (window.location.pathname !== "/login") {
|
||||
window.location.href = "/login";
|
||||
}
|
||||
RootPage = <InitPage />;
|
||||
}
|
||||
|
||||
// 懒加载
|
||||
// const LoginPage = lazy(() => import("../pages/login"));
|
||||
// const IndexPage = lazy(() => import("../pages/index"));
|
||||
// const CoursePage = lazy(() => import("../pages/course"));
|
||||
// const LatestLearnPage = lazy(() => import("../pages/latest-learn"));
|
||||
|
||||
const routes: RouteObject[] = [
|
||||
{
|
||||
path: "/",
|
||||
@ -62,51 +48,23 @@ const routes: RouteObject[] = [
|
||||
children: [
|
||||
{
|
||||
path: "/",
|
||||
element: <WithHeaderWithFooter />,
|
||||
children: [
|
||||
{
|
||||
path: "/",
|
||||
element: <PrivateRoute Component={<IndexPage />} />,
|
||||
},
|
||||
|
||||
{
|
||||
path: "/course/:courseId",
|
||||
element: <PrivateRoute Component={<CoursePage />} />,
|
||||
},
|
||||
|
||||
{
|
||||
path: "/latest-learn",
|
||||
element: <PrivateRoute Component={<LatestLearnPage />} />,
|
||||
},
|
||||
],
|
||||
element: <IndexPage />,
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
element: <WithHeaderWithoutFooter />,
|
||||
children: [
|
||||
{
|
||||
path: "/login",
|
||||
element: <LoginPage />,
|
||||
},
|
||||
],
|
||||
path: "/login",
|
||||
element: <LoginPage />,
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
element: <WithoutHeaderWithoutFooter />,
|
||||
children: [
|
||||
{
|
||||
path: "/course/:courseId/hour/:hourId",
|
||||
element: <PrivateRoute Component={<CoursePlayPage />} />,
|
||||
},
|
||||
{
|
||||
path: "/error",
|
||||
element: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "*",
|
||||
element: <ErrorPage />,
|
||||
},
|
||||
],
|
||||
path: "/course/:courseId",
|
||||
element: <CoursePage />,
|
||||
},
|
||||
{
|
||||
path: "/course/:courseId/hour/:hourId",
|
||||
element: <CoursePlayPage />,
|
||||
},
|
||||
{
|
||||
path: "/latest-learn",
|
||||
element: <LatestLearnPage />,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
type SystemConfigStoreInterface = {
|
||||
"ldap-enabled": string;
|
||||
systemApiUrl: string;
|
||||
systemPcUrl: string;
|
||||
systemH5Url: string;
|
||||
@ -10,14 +9,12 @@ type SystemConfigStoreInterface = {
|
||||
pcIndexFooterMsg: string;
|
||||
playerPoster: string;
|
||||
playerIsEnabledBulletSecret: boolean;
|
||||
playerIsDisabledDrag: boolean;
|
||||
playerBulletSecretText: string;
|
||||
playerBulletSecretColor: string;
|
||||
playerBulletSecretOpacity: string;
|
||||
};
|
||||
|
||||
let defaultValue: SystemConfigStoreInterface = {
|
||||
"ldap-enabled": "",
|
||||
systemApiUrl: "",
|
||||
systemPcUrl: "",
|
||||
systemH5Url: "",
|
||||
@ -26,7 +23,6 @@ let defaultValue: SystemConfigStoreInterface = {
|
||||
pcIndexFooterMsg: "",
|
||||
playerPoster: "",
|
||||
playerIsEnabledBulletSecret: false,
|
||||
playerIsDisabledDrag: false,
|
||||
playerBulletSecretText: "",
|
||||
playerBulletSecretColor: "",
|
||||
playerBulletSecretOpacity: "",
|
||||
|
||||
@ -31,7 +31,7 @@ const loginUserSlice = createSlice({
|
||||
stage.value.user = e.payload.user;
|
||||
stage.value.departments = e.payload.departments;
|
||||
stage.value.isLogin = true;
|
||||
if (e.payload.departments.length > 0 && !getDepKey()) {
|
||||
if (e.payload.departments.length > 0 && stage.value.currentDepId === 0) {
|
||||
stage.value.currentDepId = e.payload.departments[0].id;
|
||||
setDepName(e.payload.departments[0].name);
|
||||
}
|
||||
|
||||
@ -28,6 +28,7 @@ export function durationFormat(dateStr: number) {
|
||||
export function studyTimeFormat(dateStr: number) {
|
||||
var d = moment.duration(dateStr / 1000, "seconds");
|
||||
let value = [];
|
||||
value.push(Math.floor(d.asDays()));
|
||||
value.push(d.hours());
|
||||
value.push(d.minutes());
|
||||
value.push(d.seconds());
|
||||
@ -103,22 +104,3 @@ 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;
|
||||
}
|
||||
|
||||
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,7 +1,6 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react-swc";
|
||||
import gzipPlugin from "rollup-plugin-gzip";
|
||||
import legacy from "@vitejs/plugin-legacy";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
@ -9,15 +8,7 @@ export default defineConfig({
|
||||
host: "0.0.0.0",
|
||||
port: 9797,
|
||||
},
|
||||
plugins: [
|
||||
react(),
|
||||
legacy({
|
||||
targets: ["chrome 52"],
|
||||
additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
|
||||
renderLegacyChunks: true,
|
||||
modernPolyfills: true,
|
||||
}),
|
||||
],
|
||||
plugins: [react()],
|
||||
build: {
|
||||
rollupOptions: {
|
||||
plugins: [gzipPlugin()],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user