mirror of
https://github.com/PlayEdu/frontend.git
synced 2025-06-08 06:01:18 +08:00
Compare commits
28 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
96da44a884 | ||
|
39250531fb | ||
|
490ea214b3 | ||
|
b0d0063fc1 | ||
|
8614d4ebaf | ||
|
46bb144f0a | ||
|
6e920d8ea1 | ||
|
8154ee3130 | ||
|
e056775fc0 | ||
|
f5b4a70741 | ||
|
e1bca31883 | ||
|
f1985d0b8f | ||
|
3eafab1d41 | ||
|
66fd8486db | ||
|
30612785b5 | ||
|
1fbe67f228 | ||
|
7a64180d04 | ||
|
eaee82649e | ||
|
beae7f4d27 | ||
|
48e93202bf | ||
|
075f164147 | ||
|
0029e81356 | ||
|
3af8b4eb27 | ||
|
1312d4531b | ||
|
470c0971c3 | ||
|
931b9ee677 | ||
|
3c34f8356f | ||
|
9d12bf1c0d |
@ -1,2 +1 @@
|
||||
VITE_APP_URL=
|
||||
VITE_G_ID=
|
2
.gitignore
vendored
2
.gitignore
vendored
@ -33,3 +33,5 @@ yarn.lock
|
||||
deploy-test.sh
|
||||
deploy-prod.sh
|
||||
deploy-demo.sh
|
||||
|
||||
pnpm-lock.yaml
|
@ -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>
|
||||
|
13
package.json
13
package.json
@ -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"
|
||||
}
|
||||
|
1
public/js/xg/hls.min.js
vendored
1
public/js/xg/hls.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
24
src/App.tsx
24
src/App.tsx
@ -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 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;
|
||||
|
@ -1,14 +1,21 @@
|
||||
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 = () => {
|
||||
window.location.href = "/error";
|
||||
const GoError = (status: number) => {
|
||||
window.location.href = "/error?status=" + status;
|
||||
};
|
||||
|
||||
export class HttpClient {
|
||||
@ -56,13 +63,13 @@ export class HttpClient {
|
||||
GoLogin();
|
||||
} else if (status === 404) {
|
||||
// 跳转到404页面
|
||||
GoError();
|
||||
GoError(404);
|
||||
} else if (status === 403) {
|
||||
// 跳转到无权限页面
|
||||
GoError();
|
||||
GoError(403);
|
||||
} else if (status === 500) {
|
||||
// 跳转到500异常页面
|
||||
GoError();
|
||||
GoError(500);
|
||||
}
|
||||
return Promise.reject(error.response);
|
||||
}
|
||||
|
@ -10,3 +10,11 @@ export function login(email: string, password: string) {
|
||||
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 |
@ -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;
|
||||
|
@ -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";
|
||||
|
@ -101,7 +101,7 @@
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.tab-item {
|
||||
width: 64px;
|
||||
min-width: 64px;
|
||||
height: 48px;
|
||||
margin-right: 50px;
|
||||
transition: all 0.2s;
|
||||
@ -114,7 +114,7 @@
|
||||
}
|
||||
}
|
||||
.tit {
|
||||
width: 64px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
@ -123,7 +123,7 @@
|
||||
}
|
||||
}
|
||||
.tab-active-item {
|
||||
width: 64px;
|
||||
min-width: 64px;
|
||||
height: 48px;
|
||||
cursor: pointer;
|
||||
margin-right: 50px;
|
||||
@ -133,7 +133,7 @@
|
||||
opacity: 0.8;
|
||||
}
|
||||
.tit {
|
||||
width: 64px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
|
@ -8,12 +8,12 @@ import { HourCompenent } from "./compenents/hour";
|
||||
import { Empty } from "../../compenents";
|
||||
import iconRoute from "../../assets/images/commen/icon-route.png";
|
||||
|
||||
type tabModal = {
|
||||
type TabModel = {
|
||||
key: number;
|
||||
label: string;
|
||||
};
|
||||
|
||||
type attachModal = {
|
||||
type AttachModel = {
|
||||
id: number;
|
||||
course_id: number;
|
||||
rid: number;
|
||||
@ -23,19 +23,40 @@ type attachModal = {
|
||||
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<attachModal[]>([]);
|
||||
const [items, setItems] = useState<tabModal[]>([]);
|
||||
const [attachments, setAttachments] = useState<AttachModel[]>([]);
|
||||
const [items, setItems] = useState<TabModel[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
getDetail();
|
||||
@ -55,8 +76,8 @@ const CoursePage = () => {
|
||||
if (res.data.learn_hour_records) {
|
||||
setLearnHourRecord(res.data.learn_hour_records);
|
||||
}
|
||||
let arr = res.data.attachments;
|
||||
let tabs = [
|
||||
let arr: AttachModel[] = res.data.attachments;
|
||||
let tabs: TabModel[] = [
|
||||
{
|
||||
key: 1,
|
||||
label: `课程目录`,
|
||||
@ -115,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}
|
||||
@ -140,7 +161,8 @@ const CoursePage = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{JSON.stringify(learnRecord) === "{}" &&
|
||||
{(!learnRecord ||
|
||||
(learnRecord && JSON.stringify(learnRecord) === "{}")) &&
|
||||
JSON.stringify(learnHourRecord) === "{}" && (
|
||||
<Progress
|
||||
type="circle"
|
||||
@ -152,7 +174,8 @@ const CoursePage = () => {
|
||||
format={(percent) => `${percent}%`}
|
||||
/>
|
||||
)}
|
||||
{JSON.stringify(learnRecord) === "{}" &&
|
||||
{(!learnRecord ||
|
||||
(learnRecord && JSON.stringify(learnRecord) === "{}")) &&
|
||||
JSON.stringify(learnHourRecord) !== "{}" && (
|
||||
<Progress
|
||||
type="circle"
|
||||
@ -164,7 +187,8 @@ const CoursePage = () => {
|
||||
format={(percent) => `${percent}%`}
|
||||
/>
|
||||
)}
|
||||
{JSON.stringify(learnRecord) !== "{}" &&
|
||||
{learnRecord &&
|
||||
JSON.stringify(learnRecord) !== "{}" &&
|
||||
JSON.stringify(learnHourRecord) !== "{}" && (
|
||||
<Progress
|
||||
type="circle"
|
||||
@ -177,7 +201,7 @@ const CoursePage = () => {
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{course.short_desc && (
|
||||
{course?.short_desc && (
|
||||
<div className={styles["desc"]}>{course.short_desc}</div>
|
||||
)}
|
||||
</div>
|
||||
|
@ -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;
|
||||
|
@ -5,31 +5,35 @@ 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) {
|
||||
@ -37,7 +41,9 @@ const CoursePalyPage = () => {
|
||||
e = e || window.event;
|
||||
return false;
|
||||
};
|
||||
|
||||
return () => {
|
||||
timer && clearInterval(timer);
|
||||
document.oncontextmenu = function (e) {
|
||||
/*恢复浏览器默认右键事件*/
|
||||
e = e || window.event;
|
||||
@ -59,17 +65,17 @@ const CoursePalyPage = () => {
|
||||
}, [watchedSeconds]);
|
||||
|
||||
useEffect(() => {
|
||||
totalRef.current = hour.duration;
|
||||
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);
|
||||
@ -97,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 = {
|
||||
@ -123,6 +129,7 @@ const CoursePalyPage = () => {
|
||||
(res: any) => {
|
||||
setPlayUrl(res.data.url);
|
||||
initDPlayer(res.data.url, 0, data);
|
||||
savePlayId(String(params.courseId) + "-" + String(params.hourId));
|
||||
}
|
||||
);
|
||||
};
|
||||
@ -185,6 +192,7 @@ const CoursePalyPage = () => {
|
||||
window.player && window.player.destroy();
|
||||
});
|
||||
setLoading(false);
|
||||
checkPlayer();
|
||||
};
|
||||
|
||||
const playTimeUpdate = (duration: number, isEnd: boolean) => {
|
||||
@ -201,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)
|
||||
@ -234,6 +258,7 @@ const CoursePalyPage = () => {
|
||||
<div
|
||||
className={styles["close-btn"]}
|
||||
onClick={() => {
|
||||
timer && clearInterval(timer);
|
||||
window.player && window.player.destroy();
|
||||
document.oncontextmenu = function (e) {
|
||||
/*恢复浏览器默认右键事件*/
|
||||
@ -249,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 && (
|
||||
|
@ -1,14 +1,17 @@
|
||||
import { useState } from "react";
|
||||
import { Button, Result } from "antd";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
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="404"
|
||||
title={status}
|
||||
subTitle="您访问的页面不存在"
|
||||
className={styles["main"]}
|
||||
extra={
|
||||
|
@ -11,6 +11,29 @@ 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);
|
||||
@ -18,8 +41,8 @@ const IndexPage = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [tabKey, setTabKey] = useState(Number(result.get("tab") || 0));
|
||||
const [coursesList, setCoursesList] = useState<any>([]);
|
||||
const [categories, setCategories] = useState<any>([]);
|
||||
const [coursesList, setCoursesList] = useState<CourseModel[]>([]);
|
||||
const [categories, setCategories] = useState<CategoryModel[]>([]);
|
||||
const [categoryId, setCategoryId] = useState<number>(
|
||||
Number(result.get("cid") || 0)
|
||||
);
|
||||
@ -27,9 +50,10 @@ const IndexPage = () => {
|
||||
String(result.get("catName") || "所有分类")
|
||||
);
|
||||
const [selectKey, setSelectKey] = useState<any>([0]);
|
||||
const [learnCourseRecords, setLearnCourseRecords] = useState<any>({});
|
||||
const [learnCourseRecords, setLearnCourseRecords] =
|
||||
useState<LearnCourseRecordsModel>({});
|
||||
const [learnCourseHourCount, setLearnCourseHourCount] = useState<any>({});
|
||||
const [stats, setStats] = useState<any>({});
|
||||
const [stats, setStats] = useState<StatsModel | null>(null);
|
||||
const currentDepId = useSelector(
|
||||
(state: any) => state.loginUser.value.currentDepId
|
||||
);
|
||||
@ -62,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);
|
||||
@ -77,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);
|
||||
@ -85,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);
|
||||
@ -93,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] ||
|
||||
@ -112,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: "所有分类",
|
||||
@ -123,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({
|
||||
@ -133,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>
|
||||
@ -240,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>
|
||||
@ -260,6 +287,7 @@ const IndexPage = () => {
|
||||
<img className={styles["icon"]} src={studyTime} />
|
||||
<span>学习时长</span>
|
||||
</div>
|
||||
{stats ? (
|
||||
<div className={styles["info"]}>
|
||||
<div className={styles["info-item"]}>
|
||||
今日:
|
||||
@ -267,28 +295,20 @@ const IndexPage = () => {
|
||||
<>
|
||||
<strong>
|
||||
{" "}
|
||||
{studyTimeFormat(stats.today_learn_duration)[0] || 0}{" "}
|
||||
</strong>
|
||||
天
|
||||
</>
|
||||
)}
|
||||
{studyTimeFormat(stats.today_learn_duration)[1] !== 0 && (
|
||||
<>
|
||||
<strong>
|
||||
{" "}
|
||||
{studyTimeFormat(stats.today_learn_duration)[1] || 0}{" "}
|
||||
{studyTimeFormat(stats.today_learn_duration)[0] ||
|
||||
0}{" "}
|
||||
</strong>
|
||||
小时
|
||||
</>
|
||||
)}
|
||||
<strong>
|
||||
{" "}
|
||||
{studyTimeFormat(stats.today_learn_duration)[2] || 0}{" "}
|
||||
{studyTimeFormat(stats.today_learn_duration)[1] || 0}{" "}
|
||||
</strong>
|
||||
分钟
|
||||
<strong>
|
||||
{" "}
|
||||
{studyTimeFormat(stats.today_learn_duration)[3] || 0}{" "}
|
||||
{studyTimeFormat(stats.today_learn_duration)[2] || 0}{" "}
|
||||
</strong>
|
||||
秒
|
||||
</div>
|
||||
@ -298,32 +318,25 @@ const IndexPage = () => {
|
||||
<>
|
||||
<strong>
|
||||
{" "}
|
||||
{studyTimeFormat(stats.learn_duration || 0)[0] || 0}{" "}
|
||||
</strong>
|
||||
天
|
||||
</>
|
||||
)}
|
||||
{studyTimeFormat(stats.learn_duration || 0)[1] !== 0 && (
|
||||
<>
|
||||
<strong>
|
||||
{" "}
|
||||
{studyTimeFormat(stats.learn_duration || 0)[1] || 0}{" "}
|
||||
{studyTimeFormat(stats.learn_duration || 0)[0] ||
|
||||
0}{" "}
|
||||
</strong>
|
||||
小时
|
||||
</>
|
||||
)}
|
||||
<strong>
|
||||
{" "}
|
||||
{studyTimeFormat(stats.learn_duration || 0)[2] || 0}{" "}
|
||||
{studyTimeFormat(stats.learn_duration || 0)[1] || 0}{" "}
|
||||
</strong>
|
||||
分钟
|
||||
<strong>
|
||||
{" "}
|
||||
{studyTimeFormat(stats.learn_duration || 0)[3] || 0}{" "}
|
||||
{studyTimeFormat(stats.learn_duration || 0)[2] || 0}{" "}
|
||||
</strong>
|
||||
秒
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles["tabs"]}>
|
||||
|
@ -24,6 +24,7 @@ export const InitPage = (props: Props) => {
|
||||
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"],
|
||||
|
@ -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();
|
||||
|
@ -5,13 +5,15 @@ 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>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -5,12 +5,14 @@ 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>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -1,8 +1,8 @@
|
||||
import { Input, Button, message } from "antd";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import React, { useState } from "react";
|
||||
import styles from "./index.module.scss";
|
||||
import banner from "../../assets/images/login/banner.png";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { loginAction } from "../../store/user/loginUserSlice";
|
||||
import { login, user } from "../../api/index";
|
||||
@ -15,10 +15,11 @@ const LoginPage: React.FC = () => {
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [email, setEmail] = useState<string>("");
|
||||
const [password, setPassword] = useState<string>("");
|
||||
const systemConfig = useSelector((state: any) => state.systemConfig.value);
|
||||
|
||||
const loginSubmit = (e: any) => {
|
||||
if (!email) {
|
||||
message.error("请输入学员邮箱账号");
|
||||
message.error("请输入邮箱或UID");
|
||||
return;
|
||||
}
|
||||
if (!password) {
|
||||
@ -42,6 +43,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) => {
|
||||
@ -52,6 +65,7 @@ const LoginPage: React.FC = () => {
|
||||
.catch((e) => {
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const getUser = () => {
|
||||
@ -79,7 +93,7 @@ const LoginPage: React.FC = () => {
|
||||
setEmail(e.target.value);
|
||||
}}
|
||||
style={{ width: 400, height: 54 }}
|
||||
placeholder="请输入学员邮箱账号"
|
||||
placeholder={"请输入邮箱或UID"}
|
||||
onKeyUp={(e) => keyUp(e)}
|
||||
/>
|
||||
</div>
|
||||
|
53
src/playedu.d.ts
vendored
Normal file
53
src/playedu.d.ts
vendored
Normal file
@ -0,0 +1,53 @@
|
||||
declare global {
|
||||
interface CourseModel {
|
||||
charge: number;
|
||||
class_hour: number;
|
||||
created_at: string;
|
||||
id: number;
|
||||
is_required: number;
|
||||
is_show: number;
|
||||
short_desc: string;
|
||||
thumb: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
interface HourModel {
|
||||
chapter_id: number;
|
||||
course_id: number;
|
||||
duration: number;
|
||||
id: number;
|
||||
rid: number;
|
||||
sort: number;
|
||||
title: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
interface HourRecordModel {
|
||||
course_id: number;
|
||||
created_at: string;
|
||||
finished_at?: string;
|
||||
finished_duration: number;
|
||||
hour_id: number;
|
||||
id: number;
|
||||
is_finished: number;
|
||||
real_duration: number;
|
||||
total_duration: number;
|
||||
updated_at: string;
|
||||
user_id: number;
|
||||
}
|
||||
|
||||
interface CourseRecordModel {
|
||||
course_id: number;
|
||||
created_at: string;
|
||||
finished_at?: string;
|
||||
finished_count: number;
|
||||
hour_count: number;
|
||||
id: number;
|
||||
is_finished: number;
|
||||
progress: number;
|
||||
updated_at: string;
|
||||
user_id: number;
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
@ -1,6 +1,7 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
type SystemConfigStoreInterface = {
|
||||
"ldap-enabled": string;
|
||||
systemApiUrl: string;
|
||||
systemPcUrl: string;
|
||||
systemH5Url: string;
|
||||
@ -16,6 +17,7 @@ type SystemConfigStoreInterface = {
|
||||
};
|
||||
|
||||
let defaultValue: SystemConfigStoreInterface = {
|
||||
"ldap-enabled": "",
|
||||
systemApiUrl: "",
|
||||
systemPcUrl: "",
|
||||
systemH5Url: "",
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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());
|
||||
@ -111,3 +110,15 @@ export function isMobile() {
|
||||
);
|
||||
return flag;
|
||||
}
|
||||
|
||||
export function getPlayId(): string {
|
||||
return window.localStorage.getItem("playedu-play-id") || "";
|
||||
}
|
||||
|
||||
export function savePlayId(id: string) {
|
||||
window.localStorage.setItem("playedu-play-id", id);
|
||||
}
|
||||
|
||||
export function clearPlayId() {
|
||||
window.localStorage.removeItem("playedu-play-id");
|
||||
}
|
||||
|
@ -1,6 +1,7 @@
|
||||
import { defineConfig } from "vite";
|
||||
import 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()],
|
||||
|
Loading…
x
Reference in New Issue
Block a user