Compare commits

...

69 Commits

Author SHA1 Message Date
xxx
96da44a884 移除 react-ga 依赖 2024-02-20 14:59:07 +08:00
xxx
39250531fb fixed: pnpm install 和 build 报错 2024-02-20 14:51:33 +08:00
xxx
490ea214b3 移除xgplayer 2024-02-20 14:29:44 +08:00
unknown
b0d0063fc1 重部署系统时部门storage存储优化以及error页面显示优化 2024-02-01 09:50:00 +08:00
unknown
8614d4ebaf 底部组件优化 2024-01-31 18:34:10 +08:00
unknown
46bb144f0a 退出登录优化 2024-01-26 10:53:44 +08:00
xxx
6e920d8ea1 移除hls.min.js 2024-01-08 16:14:11 +08:00
unknown
8154ee3130 登录封面替换 2024-01-08 12:02:31 +08:00
xxx
e056775fc0 Merge branch 'fix/1116' into dev 2023-11-16 14:57:44 +08:00
unknown
f5b4a70741 首页学习时间不显示天数 2023-11-16 14:57:38 +08:00
unknown
e1bca31883 课程详情tab优化 2023-11-16 14:55:26 +08:00
白书科技
f1985d0b8f
!6 优化
Merge pull request !6 from 白书科技/fix/1007
2023-10-07 09:55:43 +00:00
unknown
3eafab1d41 首页学习时间不显示天数 2023-10-07 17:53:57 +08:00
白书科技
66fd8486db
!5 优化
Merge pull request !5 from 白书科技/fix/0922
2023-09-24 00:47:27 +00:00
unknown
30612785b5 检测视频重复播放 2023-09-22 16:50:31 +08:00
unknown
1fbe67f228 检测视频重复播放 2023-09-22 16:46:43 +08:00
unknown
7a64180d04 iconfont优化 2023-09-22 15:28:35 +08:00
xxx
eaee82649e 兼容安卓钉钉 2023-09-21 10:32:21 +08:00
滕勇志
beae7f4d27
Merge pull request #12 from PlayEdu/dev
v1.3
2023-09-06 17:09:37 +08:00
白书科技
48e93202bf
!4 优化
Merge pull request !4 from 白书科技/fix/0906
2023-09-06 01:56:10 +00:00
unknown
075f164147 登录页面文案修改 2023-09-06 09:47:27 +08:00
白书科技
0029e81356
!3 v1.3
Merge pull request !3 from 白书科技/fix/0904
2023-09-04 09:10:51 +00:00
unknown
3af8b4eb27 学员登录ldap优化 2023-09-04 16:50:44 +08:00
白书科技
1312d4531b
!2 优化
Merge pull request !2 from 白书科技/fix/0808
2023-08-11 00:54:18 +00:00
unknown
470c0971c3 课程详情进度条显示优化 2023-08-08 16:09:48 +08:00
白书科技
931b9ee677
!1 优化
Merge pull request !1 from 白书科技/fix/0804
2023-08-08 01:35:51 +00:00
unknown
3c34f8356f 数据结构添加interface 2023-08-04 16:03:03 +08:00
unknown
9d12bf1c0d 数据结构添加interface 2023-08-04 14:55:06 +08:00
Teng
c00a7236a7
Merge pull request #11 from PlayEdu/dev
弹窗组件open外置并使用三元运算
2023-08-04 09:08:26 +08:00
unknown
565df9891d 弹窗组件open外置并使用三元运算 2023-08-03 09:44:16 +08:00
unknown
9425cae0da 课件列表显示后缀 2023-07-30 16:16:45 +08:00
unknown
fabb0dd264 前台附件列表显示课件类型 2023-07-30 13:06:32 +08:00
unknown
b91de09c0c 课程详情增加课件下载 2023-07-29 16:25:12 +08:00
unknown
765f37a5eb 课程详情增加课件下载 2023-07-29 16:20:01 +08:00
unknown
6137916964 缓加载优化 2023-07-24 10:35:56 +08:00
禺狨
bf19ea66a3 页面缓加载 2023-07-17 16:50:58 +08:00
禺狨
90e147eb3b 页面缓加载 2023-07-17 16:49:04 +08:00
禺狨
1159700f37 Merge branch 'dev' of https://gitee.com/playeduxyz/frontend into dev 2023-07-17 16:47:32 +08:00
禺狨
82a75f760f 页面缓加载 2023-07-17 16:47:19 +08:00
Teng
71673f3466
Merge pull request #10 from lilonghe/patch-1
fix: the page bounce when switching routes
2023-07-07 21:41:31 +08:00
longhe.li
63219bed2c
fix: the page bounce when switching routes 2023-07-07 14:46:19 +08:00
Teng
d35fddad01
Merge pull request #9 from PlayEdu/dev
登录页面密码框按回车键登录
2023-07-05 10:53:26 +08:00
禺狨
bc0557569c 登录页面密码框按回车键登录 2023-07-05 10:45:31 +08:00
Teng
dbaac2c785
Merge pull request #8 from PlayEdu/dev
v1.1
2023-07-04 19:54:34 +08:00
禺狨
4af407e6b9 学习页面tab存储到url里 2023-07-03 16:20:32 +08:00
禺狨
3ea0857c2e 登陆页面优化 2023-07-03 15:41:27 +08:00
禺狨
7e81dc1a9d 登陆去除验证码 2023-07-03 14:53:07 +08:00
禺狨
2949eaafda 手机浏览跳转h5 2023-07-03 14:22:47 +08:00
Teng
bf4404b107
Merge pull request #7 from PlayEdu/dev
视频详情课时加载错误修复
2023-06-14 17:33:27 +08:00
禺狨
d47f1a9250 视频详情课时加载错误修复 2023-06-14 17:30:47 +08:00
Teng
25bb64a835
Merge pull request #6 from PlayEdu/dev
Dev
2023-06-13 14:12:13 +08:00
禺狨
ccde01e6ff 头像重复加载优化 2023-06-13 11:22:58 +08:00
禺狨
1996340699 播放结束退出全屏 2023-06-13 09:14:42 +08:00
禺狨
c2420798d2 页面初始化优化 2023-06-08 18:16:18 +08:00
禺狨
e04d63125a 首页。最近学习页懒加载 2023-06-08 16:10:30 +08:00
禺狨
950fc74371 首页。最近学习页懒加载 2023-06-08 16:08:49 +08:00
禺狨
07cfa836a2 首页。最近学习页懒加载 2023-06-08 15:49:52 +08:00
Teng
d922bb1b0b
Merge pull request #5 from PlayEdu/dev
Dev
2023-05-31 10:37:48 +08:00
禺狨
59b80c4158 播放器快进、快退toast隐藏 2023-05-31 09:37:36 +08:00
禺狨
465cc901b1 播放页面拖动进度条逻辑优化 2023-05-31 09:08:54 +08:00
禺狨
97f4abfe41 视频已学显示进度条b 2023-05-30 18:13:10 +08:00
禺狨
0075a848e3 视频第一次播放显示进度条bug修复 2023-05-30 18:05:30 +08:00
禺狨
58440be424 已看完视频显示进度条 2023-05-30 17:47:26 +08:00
禺狨
cec5251da4 已看完视频显示进度条 2023-05-30 17:47:12 +08:00
禺狨
c8e9f8cc7a 视频播放封面宽高优化 2023-05-30 17:26:14 +08:00
禺狨
1a9a20cbca 视频播放根据配置禁止拖动进度条 2023-05-30 16:40:10 +08:00
禺狨
537cac224a 视频播放页面屏蔽右键菜单 2023-05-30 10:00:43 +08:00
禺狨
29630ec1ee 视频播放页面屏蔽右键菜单 2023-05-30 09:58:37 +08:00
禺狨
01d2cf4e9b 首页分类选择栏取消悬浮显示 2023-05-30 09:54:33 +08:00
40 changed files with 1170 additions and 545 deletions

View File

@ -1,2 +1 @@
VITE_APP_URL=
VITE_G_ID=
VITE_APP_URL=

4
.gitignore vendored
View File

@ -32,4 +32,6 @@ yarn.lock
deploy-test.sh
deploy-prod.sh
deploy-demo.sh
deploy-demo.sh
pnpm-lock.yaml

View File

@ -13,10 +13,5 @@
<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>

View File

@ -1,6 +1,6 @@
{
"name": "frontend",
"private": true,
"name": "playedu-pc-interface",
"private": false,
"version": "0.0.0",
"type": "module",
"scripts": {
@ -9,28 +9,31 @@
"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.0.28",
"@types/react-dom": "^18.0.11",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"@vitejs/plugin-legacy": "^4.1.1",
"@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"
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,31 +1,13 @@
import { Suspense, useEffect } from "react";
import ReactGA from "react-ga";
import { useLocation, useRoutes } from "react-router-dom";
import { Suspense } from "react";
import { useRoutes } from "react-router-dom";
import routes from "./routes";
import "./App.scss";
import LoadingPage from "./pages/loading";
const G_ID = import.meta.env.VITE_G_ID || "";
if (G_ID) {
ReactGA.initialize(G_ID);
}
const App = () => {
const Views = () => useRoutes(routes);
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>
);
return <Suspense fallback={<LoadingPage />}>{views}</Suspense>;
};
export default App;

View File

@ -31,3 +31,8 @@ export function playPing(courseId: number, hourId: number) {
export function latestLearn() {
return client.get(`/api/v1/user/latest-learn`, {});
}
//下载课件
export function downloadAttachment(courseId: number, id: number) {
return client.get(`/api/v1/course/${courseId}/attach/${id}/download`, {});
}

View File

@ -1,12 +1,23 @@
import axios, { Axios, AxiosResponse } from "axios";
import { message } from "antd";
import { getToken, clearToken } from "../../utils/index";
import {
getToken,
clearToken,
clearDepKey,
clearDepName,
} 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;
@ -52,10 +63,13 @@ 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);
}

View File

@ -1,19 +1,20 @@
import client from "./internal/httpClient";
export function login(
email: string,
password: string,
captchaKey: string,
captchaVal: string
) {
export function login(email: string, password: string) {
return client.post("/api/v1/auth/login/password", {
email: email,
password: password,
captcha_key: captchaKey,
captcha_val: captchaVal,
});
}
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,
});
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 64 KiB

View File

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

View File

@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
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 { useDispatch, useSelector } from "react-redux";
import { Link, useNavigate, useLocation } from "react-router-dom";
@ -217,9 +217,11 @@ export const Header: React.FC = () => {
<div className="d-flex" style={{ cursor: "pointer" }}>
{user && user.name && (
<>
<img
<Image
loading="lazy"
style={{ width: 36, height: 36, borderRadius: "50%" }}
src={user.avatar}
preview={false}
/>
<span className="ml-8 c-admin">{user.name}</span>
</>

View File

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

View File

@ -1,5 +1,3 @@
@import "./assets/iconfont/iconfont.css";
$primaryColor: #ff4d4f;
:root {
@ -35,6 +33,18 @@ 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;
@ -291,9 +301,13 @@ h1 {
}
#meedu-player-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: auto;
position: relative;
height: 100%;
}
.ant-tree-switcher {
@ -375,3 +389,7 @@ h1 {
.ant-popover-inner {
padding: 8px 0px !important;
}
.dplayer-notice {
opacity: 0 !important;
}

View File

@ -4,6 +4,7 @@ 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";
@ -21,4 +22,4 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
</BrowserRouter>
</ConfigProvider>
</Provider>
);
);

View File

@ -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 {
width: 100%;
height: auto;
background: #ffffff;
box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.04);
border-radius: 12px;
margin-top: 30px;
margin-top: 24px;
box-sizing: border-box;
padding: 24px;
.hours-list-box {
@ -135,3 +189,58 @@
}
}
}
.attachments-cont {
width: 100%;
height: auto;
background: #ffffff;
box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.04);
border-radius: 12px;
margin-top: 24px;
box-sizing: border-box;
padding: 24px;
.attachments-item {
width: 100%;
height: 56px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0px 24px;
margin-bottom: 8px;
text-align: left;
&:last-child {
margin-bottom: 0px;
}
.left-cont {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
.title {
flex: 1;
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.88);
line-height: 24px;
margin-right: 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
.download {
width: auto;
height: 24px;
font-size: 14px;
font-weight: 400;
color: #ff4d4f;
line-height: 24px;
cursor: pointer;
&:hover {
opacity: 0.8;
}
}
}
}

View File

@ -1,20 +1,62 @@
import { useEffect, useState } from "react";
import { Row, Col, Spin, Image, Progress } from "antd";
import { Row, Spin, Image, Progress } from "antd";
import styles from "./index.module.scss";
import { useParams } from "react-router-dom";
import { useParams, useNavigate, useLocation } from "react-router-dom";
import { course as Course } from "../../api/index";
import mediaIcon from "../../assets/images/commen/icon-medal.png";
import { HourCompenent } from "./compenents/hour";
import { Empty } from "../../compenents";
import iconRoute from "../../assets/images/commen/icon-route.png";
type 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<any>({});
const [chapters, setChapters] = useState<any>([]);
const [hours, setHours] = useState<any>({});
const [learnRecord, setLearnRecord] = useState<any>({});
const [learnHourRecord, setLearnHourRecord] = useState<any>({});
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[]>([]);
useEffect(() => {
getDetail();
@ -34,6 +76,22 @@ 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) => {
@ -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 (
<div className="container">
{loading && (
@ -67,18 +136,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.progress / 100 >= 100 && (
{learnRecord && learnRecord.progress / 100 >= 100 && (
<div className={styles["success"]}>
<Image
width={24}
@ -92,7 +161,8 @@ const CoursePage = () => {
</div>
</div>
</div>
{JSON.stringify(learnRecord) === "{}" &&
{(!learnRecord ||
(learnRecord && JSON.stringify(learnRecord) === "{}")) &&
JSON.stringify(learnHourRecord) === "{}" && (
<Progress
type="circle"
@ -104,7 +174,8 @@ const CoursePage = () => {
format={(percent) => `${percent}%`}
/>
)}
{JSON.stringify(learnRecord) === "{}" &&
{(!learnRecord ||
(learnRecord && JSON.stringify(learnRecord) === "{}")) &&
JSON.stringify(learnHourRecord) !== "{}" && (
<Progress
type="circle"
@ -116,7 +187,8 @@ const CoursePage = () => {
format={(percent) => `${percent}%`}
/>
)}
{JSON.stringify(learnRecord) !== "{}" &&
{learnRecord &&
JSON.stringify(learnRecord) !== "{}" &&
JSON.stringify(learnHourRecord) !== "{}" && (
<Progress
type="circle"
@ -129,82 +201,140 @@ const CoursePage = () => {
/>
)}
</div>
{course.short_desc && (
{course?.short_desc && (
<div className={styles["desc"]}>{course.short_desc}</div>
)}
</div>
<div className={styles["chapters-hours-cont"]}>
{chapters.length === 0 && JSON.stringify(hours) === "{}" && (
<Empty />
)}
{chapters.length === 0 && JSON.stringify(hours) !== "{}" && (
<div className={styles["hours-list-box"]}>
{hours[0].map((item: any, index: number) => (
<div key={item.id} className={styles["hours-it"]}>
{learnHourRecord[item.id] && (
<HourCompenent
id={item.id}
cid={item.course_id}
title={item.title}
record={learnHourRecord[item.id]}
duration={item.duration}
progress={
(learnHourRecord[item.id].finished_duration * 100) /
learnHourRecord[item.id].total_duration
}
></HourCompenent>
)}
{!learnHourRecord[item.id] && (
<HourCompenent
id={item.id}
cid={item.course_id}
title={item.title}
record={null}
duration={item.duration}
progress={0}
></HourCompenent>
)}
</div>
))}
<div className={styles["tabs"]}>
{items.map((item: any) => (
<div
key={item.key}
className={
item.key === tabKey
? styles["tab-active-item"]
: styles["tab-item"]
}
onClick={() => {
onChange(item.key);
}}
>
<div className={styles["tit"]}>{item.label}</div>
{item.key === tabKey && (
<Image
className={styles["banner"]}
width={40}
height={8}
preview={false}
src={iconRoute}
style={{ marginTop: -16 }}
/>
)}
</div>
)}
{chapters.length > 0 && JSON.stringify(hours) !== "{}" && (
<div className={styles["hours-list-box"]}>
{chapters.map((item: any, index: number) => (
<div key={item.id} className={styles["chapter-it"]}>
<div className={styles["chapter-name"]}>{item.name}</div>
{hours[item.id].map((it: any, int: number) => (
<div key={it.id} className={styles["hours-it"]}>
{learnHourRecord[it.id] && (
<HourCompenent
id={it.id}
cid={item.course_id}
title={it.title}
record={learnHourRecord[it.id]}
duration={it.duration}
progress={
(learnHourRecord[it.id].finished_duration * 100) /
learnHourRecord[it.id].total_duration
}
></HourCompenent>
)}
{!learnHourRecord[it.id] && (
<HourCompenent
id={it.id}
cid={item.course_id}
title={it.title}
record={null}
duration={it.duration}
progress={0}
></HourCompenent>
)}
</div>
))}
</div>
))}
</div>
)}
))}
</div>
{tabKey === 1 && (
<div className={styles["chapters-hours-cont"]}>
{chapters.length === 0 && JSON.stringify(hours) === "{}" && (
<Empty />
)}
{chapters.length === 0 && JSON.stringify(hours) !== "{}" && (
<div className={styles["hours-list-box"]}>
{hours[0].map((item: any, index: number) => (
<div key={item.id} className={styles["hours-it"]}>
{learnHourRecord[item.id] && (
<HourCompenent
id={item.id}
cid={item.course_id}
title={item.title}
record={learnHourRecord[item.id]}
duration={item.duration}
progress={
(learnHourRecord[item.id].finished_duration * 100) /
learnHourRecord[item.id].total_duration
}
></HourCompenent>
)}
{!learnHourRecord[item.id] && (
<HourCompenent
id={item.id}
cid={item.course_id}
title={item.title}
record={null}
duration={item.duration}
progress={0}
></HourCompenent>
)}
</div>
))}
</div>
)}
{chapters.length > 0 && JSON.stringify(hours) !== "{}" && (
<div className={styles["hours-list-box"]}>
{chapters.map((item: any, index: number) => (
<div key={item.id} className={styles["chapter-it"]}>
<div className={styles["chapter-name"]}>{item.name}</div>
{hours[item.id] &&
hours[item.id].map((it: any, int: number) => (
<div key={it.id} className={styles["hours-it"]}>
{learnHourRecord[it.id] && (
<HourCompenent
id={it.id}
cid={item.course_id}
title={it.title}
record={learnHourRecord[it.id]}
duration={it.duration}
progress={
(learnHourRecord[it.id].finished_duration *
100) /
learnHourRecord[it.id].total_duration
}
></HourCompenent>
)}
{!learnHourRecord[it.id] && (
<HourCompenent
id={it.id}
cid={item.course_id}
title={it.title}
record={null}
duration={it.duration}
progress={0}
></HourCompenent>
)}
</div>
))}
</div>
))}
</div>
)}
</div>
)}
{tabKey === 2 && (
<div className={styles["attachments-cont"]}>
{attachments.map((item: any, index: number) => (
<div key={index} className={styles["attachments-item"]}>
<div className={styles["left-cont"]}>
<i
className="iconfont icon-icon-file"
style={{
fontSize: 16,
color: "rgba(0,0,0,0.3)",
marginRight: 10,
}}
/>
<span className={styles["title"]}>
{item.title}.{item.ext}
</span>
</div>
<div
className={styles["download"]}
onClick={() => downLoadFile(item.course_id, item.id)}
>
</div>
</div>
))}
</div>
)}
</>
)}
</div>

View File

@ -49,7 +49,7 @@
overflow-y: auto;
.video-title {
width: 100%;
height: 36px;
height: auto;
font-size: 20px;
font-weight: 600;
color: rgba(255, 255, 255, 0.88);
@ -64,6 +64,7 @@
margin: 0 auto;
border-radius: 8px;
position: relative;
.alert-message {
position: absolute;
top: 0;
@ -80,6 +81,12 @@
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;

View File

@ -5,42 +5,77 @@ 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<string>("");
const [playUrl, setPlayUrl] = useState("");
const [playDuration, setPlayDuration] = useState(0);
const [playendedStatus, setPlayendedStatus] = useState<Boolean>(false);
const [playendedStatus, setPlayendedStatus] = useState(false);
const [lastSeeValue, setLastSeeValue] = useState({});
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 [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 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: any = [];
let totalHours: HourModel[] = [];
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: any = [];
const arr: HourModel[] = [];
for (let key in res.data.hours) {
res.data.hours[key].map((item: any) => {
arr.push(item);
@ -68,7 +103,7 @@ const CoursePalyPage = () => {
setCourse(res.data.course);
setHour(res.data.hour);
document.title = res.data.hour.title;
let record = res.data.user_hour_record;
let record: HourRecordModel = res.data.user_hour_record;
let params = null;
if (record && record.finished_duration && record.is_finished === 0) {
params = {
@ -77,6 +112,9 @@ 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);
@ -91,11 +129,16 @@ 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,
@ -114,19 +157,42 @@ const CoursePalyPage = () => {
color: systemConfig.playerBulletSecretColor || "red",
opacity: Number(systemConfig.playerBulletSecretOpacity),
},
ban_drag: false,
ban_drag: banDrag,
last_see_pos: params,
});
// 监听播放进度更新evt
window.player.on("timeupdate", () => {
playTimeUpdate(parseInt(window.player.video.currentTime), false);
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);
}
});
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) => {
@ -143,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 index = totalHours.findIndex(
(i: any) => i.id === Number(params.hourId)
@ -157,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 (
<div className={styles["video-mask"]}>
<div className={styles["top-cont"]}>
@ -164,7 +258,13 @@ 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);
}}
>
@ -174,13 +274,20 @@ 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>
)}
{playendedStatus && (
<div className={styles["alert-message"]}>
{isLastpage && (

View File

@ -0,0 +1,4 @@
.main {
width: 100vw;
height: 100vh;
}

31
src/pages/error/index.tsx Normal file
View 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;

View File

@ -29,6 +29,7 @@ export const CoursesModel: React.FC<PropInterface> = ({
>
<div className={styles["top-content"]}>
<Image
loading="lazy"
width={120}
height={90}
style={{ borderRadius: 10 }}
@ -65,7 +66,13 @@ export const CoursesModel: React.FC<PropInterface> = ({
)}
{progress >= 100 && (
<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>
</div>
)}

View File

@ -1,6 +1,6 @@
import { useEffect, useState } from "react";
import { Row, Col, Spin, Tree, Popover, Space, Image } from "antd";
import type { MenuProps } from "antd";
import { useNavigate, useLocation } from "react-router-dom";
import { user } from "../../api/index";
import styles from "./index.module.scss";
import { useSelector } from "react-redux";
@ -11,23 +11,49 @@ 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(0);
const [coursesList, setCoursesList] = useState<any>([]);
const [categories, setCategories] = useState<any>([]);
const [categoryId, setCategoryId] = useState<number>(0);
const [categoryText, setCategoryText] = useState<string>("所有分类");
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 [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 [learnCourseHourCount, setLearnCourseHourCount] = useState<any>({});
const [stats, setStats] = useState<StatsModel | null>(null);
const currentDepId = useSelector(
(state: any) => state.loginUser.value.currentDepId
);
@ -36,6 +62,12 @@ const IndexPage = () => {
getParams();
}, []);
useEffect(() => {
let arr = [];
arr.push(Number(result.get("cid") || 0));
setSelectKey(arr);
}, [result.get("cid")]);
useEffect(() => {
if (currentDepId === 0) {
return;
@ -54,14 +86,14 @@ const IndexPage = () => {
const getData = () => {
setLoading(true);
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);
setLearnCourseRecords(records);
setLearnCourseHourCount(res.data.user_course_hour_count);
if (tabKey === 0) {
setCoursesList(res.data.courses);
} else if (tabKey === 1) {
const arr: any = [];
const arr: CourseModel[] = [];
res.data.courses.map((item: any) => {
if (item.is_required === 1) {
arr.push(item);
@ -69,7 +101,7 @@ const IndexPage = () => {
});
setCoursesList(arr);
} else if (tabKey === 2) {
const arr: any = [];
const arr: CourseModel[] = [];
res.data.courses.map((item: any) => {
if (item.is_required === 0) {
arr.push(item);
@ -77,7 +109,7 @@ const IndexPage = () => {
});
setCoursesList(arr);
} else if (tabKey === 3) {
const arr: any = [];
const arr: CourseModel[] = [];
res.data.courses.map((item: any) => {
if (records[item.id] && records[item.id].progress >= 10000) {
arr.push(item);
@ -85,7 +117,7 @@ const IndexPage = () => {
});
setCoursesList(arr);
} else if (tabKey === 4) {
const arr: any = [];
const arr: CourseModel[] = [];
res.data.courses.map((item: any) => {
if (
!records[item.id] ||
@ -104,7 +136,7 @@ const IndexPage = () => {
user.coursesCategories().then((res: any) => {
const categories = res.data.categories;
if (JSON.stringify(categories) !== "{}") {
const new_arr: any[] = checkArr(categories, 0);
const new_arr: CategoryModel[] = checkArr(categories, 0);
new_arr.unshift({
key: 0,
title: "所有分类",
@ -115,7 +147,7 @@ const IndexPage = () => {
};
const checkArr = (categories: any[], id: number) => {
const arr = [];
const arr: CategoryModel[] = [];
for (let i = 0; i < categories[id].length; i++) {
if (!categories[categories[id][i].id]) {
arr.push({
@ -125,7 +157,10 @@ const IndexPage = () => {
key: categories[id][i].id,
});
} else {
const new_arr: any[] = checkArr(categories, categories[id][i].id);
const new_arr: CategoryModel[] = checkArr(
categories,
categories[id][i].id
);
arr.push({
title: (
<span style={{ marginRight: 20 }}>{categories[id][i].name}</span>
@ -163,17 +198,38 @@ const IndexPage = () => {
const onChange = (key: number) => {
setTabKey(key);
navigate(
"/?cid=" + categoryId + "&catName=" + categoryText + "&tab=" + key
);
};
const onSelect = (selectedKeys: any, info: any) => {
setCategoryId(selectedKeys[0]);
if (info.node.key === 0) {
setCategoryText(info.node.title);
setSelectKey(selectedKeys);
hide();
navigate(
"/?cid=" +
selectedKeys[0] +
"&catName=" +
info.node.title +
"&tab=" +
tabKey
);
} else {
setCategoryText(info.node.title.props.children);
setSelectKey(selectedKeys);
hide();
navigate(
"/?cid=" +
selectedKeys[0] +
"&catName=" +
info.node.title.props.children +
"&tab=" +
tabKey
);
}
setSelectKey(selectedKeys);
hide();
};
const handleOpenChange = (newOpen: boolean) => {
@ -187,8 +243,6 @@ const IndexPage = () => {
overflowX: "hidden",
overflowY: "auto",
}}
onMouseOut={() => setOpen(false)}
onMouseOver={() => setOpen(true)}
>
<Tree
selectedKeys={selectKey}
@ -213,17 +267,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.nun_required_course_count > 0 && (
{stats && 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>
@ -233,70 +287,56 @@ const IndexPage = () => {
<img className={styles["icon"]} src={studyTime} />
<span></span>
</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>
{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>
<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>
) : null}
</div>
</div>
<div className={styles["tabs"]}>
@ -332,10 +372,7 @@ const IndexPage = () => {
trigger="click"
onOpenChange={handleOpenChange}
>
<Space
className={styles["dropButton"]}
onMouseOver={() => setOpen(true)}
>
<Space className={styles["dropButton"]}>
{categoryText}
<i
className="iconfont icon-icon-xiala"

View File

@ -1,14 +1,12 @@
import { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import { Outlet } from "react-router-dom";
// import styles from "./index.module.scss";
import {
SystemConfigStoreInterface,
saveConfigAction,
} from "../../store/system/systemConfigSlice";
import { loginAction } from "../../store/user/loginUserSlice";
import { Header, NoHeader, Footer } from "../../compenents";
import { useParams, useLocation } from "react-router-dom";
import { isMobile } from "../../utils/index";
interface Props {
loginData?: any;
@ -16,66 +14,56 @@ interface Props {
}
export const InitPage = (props: Props) => {
const pathname = useLocation().pathname;
const params = useParams();
const dispatch = useDispatch();
const [showHeader, setShowHeader] = useState<boolean>(true);
const [showNoHeader, setShowNoHeader] = useState<boolean>(false);
const [showFooter, setShowFooter] = useState<boolean>(true);
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));
}
const [init, setInit] = useState<boolean>(false);
useEffect(() => {
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.loginData) {
dispatch(loginAction(props.loginData));
}
}, [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 (
<>
<div>
{showNoHeader && <NoHeader></NoHeader>}
{showHeader && <Header></Header>}
<Outlet />
{showFooter && <Footer></Footer>}
</div>
{init && (
<div style={{ minHeight: 900 }}>
<Outlet />
</div>
)}
</>
);
};

View File

@ -7,12 +7,46 @@ 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<any>([]);
const [courses, setCourses] = useState<LastLearnModel[]>([]);
useEffect(() => {
getCourses();
@ -56,6 +90,7 @@ const LatestLearnPage = () => {
>
<div style={{ width: 120 }}>
<Image
loading="lazy"
src={item.course.thumb}
width={120}
height={90}
@ -91,6 +126,7 @@ const LatestLearnPage = () => {
{item.record.progress >= 10000 && (
<>
<Image
loading="lazy"
width={24}
height={24}
src={mediaIcon}

View 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;

View 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;

View 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;

View 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;

View File

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

View File

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

View File

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

View File

@ -1,11 +1,11 @@
import { Spin, Input, Button, message } from "antd";
import React, { useState, useEffect } from "react";
import { Input, Button, message } from "antd";
import React, { useState } 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, logoutAction } from "../../store/user/loginUserSlice";
import { login, system, user } from "../../api/index";
import { loginAction } from "../../store/user/loginUserSlice";
import { login, user } from "../../api/index";
import { setToken } from "../../utils/index";
import { NoFooter } from "../../compenents";
@ -13,43 +13,19 @@ const LoginPage: React.FC = () => {
const dispatch = useDispatch();
const navigate = useNavigate();
const [loading, setLoading] = useState<boolean>(false);
const [image, setImage] = useState<string>("");
const [email, setEmail] = useState<string>("");
const [password, setPassword] = useState<string>("");
const [captchaVal, setCaptchaVal] = useState<string>("");
const [captchaKey, setCaptchaKey] = useState<string>("");
const [captchaLoading, setCaptchaLoading] = useState(true);
useEffect(() => {
fetchImageCaptcha();
}, []);
const fetchImageCaptcha = () => {
setCaptchaLoading(true);
system.imageCaptcha().then((res: any) => {
setImage(res.data.image);
setCaptchaKey(res.data.key);
setCaptchaLoading(false);
});
};
const systemConfig = useSelector((state: any) => state.systemConfig.value);
const loginSubmit = (e: any) => {
if (!email) {
message.error("请输入学员邮箱账号");
message.error("请输入邮箱或UID");
return;
}
if (!password) {
message.error("请输入密码");
return;
}
if (!captchaVal) {
message.error("请输入图形验证码");
return;
}
if (captchaVal.length < 4) {
message.error("图形验证码错误");
return;
}
if (loading) {
return;
}
@ -67,18 +43,29 @@ const LoginPage: React.FC = () => {
return;
}
setLoading(true);
login
.login(email, password, captchaKey, captchaVal)
.then((res: any) => {
const token = res.data.token;
setToken(token);
getUser();
})
.catch((e) => {
setLoading(false);
setCaptchaVal("");
fetchImageCaptcha();
});
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);
});
}
};
const getUser = () => {
@ -106,7 +93,7 @@ const LoginPage: React.FC = () => {
setEmail(e.target.value);
}}
style={{ width: 400, height: 54 }}
placeholder="请输入学员邮箱账号"
placeholder={"请输入邮箱或UID"}
onKeyUp={(e) => keyUp(e)}
/>
</div>
@ -118,33 +105,8 @@ const LoginPage: React.FC = () => {
}}
style={{ width: 400, height: 54 }}
placeholder="请输入密码"
/>
</div>
<div className="login-box d-flex mt-50">
<Input
value={captchaVal}
style={{ width: 260, height: 54 }}
placeholder="请输入图形验证码"
onChange={(e) => {
setCaptchaVal(e.target.value);
}}
onKeyUp={(e) => keyUp(e)}
/>
<div className={styles["captcha-box"]}>
{captchaLoading && (
<div className={styles["catpcha-loading-box"]}>
<Spin size="small" />
</div>
)}
{!captchaLoading && (
<img
className={styles["captcha"]}
onClick={fetchImageCaptcha}
src={image}
/>
)}
</div>
</div>
<div className="login-box d-flex mt-50">
<Button

53
src/playedu.d.ts vendored Normal file
View 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 {};

View File

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

View File

@ -1,6 +1,7 @@
import { createSlice } from "@reduxjs/toolkit";
type SystemConfigStoreInterface = {
"ldap-enabled": string;
systemApiUrl: string;
systemPcUrl: string;
systemH5Url: string;
@ -9,12 +10,14 @@ type SystemConfigStoreInterface = {
pcIndexFooterMsg: string;
playerPoster: string;
playerIsEnabledBulletSecret: boolean;
playerIsDisabledDrag: boolean;
playerBulletSecretText: string;
playerBulletSecretColor: string;
playerBulletSecretOpacity: string;
};
let defaultValue: SystemConfigStoreInterface = {
"ldap-enabled": "",
systemApiUrl: "",
systemPcUrl: "",
systemH5Url: "",
@ -23,6 +26,7 @@ let defaultValue: SystemConfigStoreInterface = {
pcIndexFooterMsg: "",
playerPoster: "",
playerIsEnabledBulletSecret: false,
playerIsDisabledDrag: false,
playerBulletSecretText: "",
playerBulletSecretColor: "",
playerBulletSecretOpacity: "",

View File

@ -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 && stage.value.currentDepId === 0) {
if (e.payload.departments.length > 0 && !getDepKey()) {
stage.value.currentDepId = e.payload.departments[0].id;
setDepName(e.payload.departments[0].name);
}

View File

@ -28,7 +28,6 @@ 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());
@ -104,3 +103,22 @@ 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");
}

View File

@ -1,6 +1,7 @@
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({
@ -8,7 +9,15 @@ export default defineConfig({
host: "0.0.0.0",
port: 9797,
},
plugins: [react()],
plugins: [
react(),
legacy({
targets: ["chrome 52"],
additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
renderLegacyChunks: true,
modernPolyfills: true,
}),
],
build: {
rollupOptions: {
plugins: [gzipPlugin()],