mirror of
https://github.com/PlayEdu/h5.git
synced 2025-06-23 13:12:46 +08:00
Compare commits
No commits in common. "main" and "1.5" have entirely different histories.
@ -1 +1,2 @@
|
||||
VITE_APP_URL=
|
||||
VITE_APP_URL=
|
||||
VITE_G_ID=
|
||||
4
.gitignore
vendored
4
.gitignore
vendored
@ -31,6 +31,4 @@ yarn.lock
|
||||
.env
|
||||
|
||||
deploy-test.sh
|
||||
deploy-demo.sh
|
||||
|
||||
pnpm-lock.yaml
|
||||
deploy-demo.sh
|
||||
@ -13,6 +13,11 @@
|
||||
<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>
|
||||
<script type="text/javascript">
|
||||
if (
|
||||
typeof WeixinJSBridge == "object" &&
|
||||
|
||||
13
package.json
13
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "playedu-h5-interface",
|
||||
"private": false,
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
@ -10,7 +10,6 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@reduxjs/toolkit": "^1.9.3",
|
||||
"ahooks": "^3.7.10",
|
||||
"antd-mobile": "^5.31.1",
|
||||
"axios": "^1.3.4",
|
||||
"localforage": "^1.10.0",
|
||||
@ -19,14 +18,16 @@
|
||||
"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"
|
||||
"sort-by": "^1.2.0",
|
||||
"web-vitals": "^3.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.0",
|
||||
"@types/react-dom": "^18.2.0",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@vitejs/plugin-legacy": "^4.1.1",
|
||||
"@vitejs/plugin-react-swc": "^3.0.0",
|
||||
"rollup-plugin-gzip": "^3.1.0",
|
||||
|
||||
1
public/js/xg/hls.min.js
vendored
Normal file
1
public/js/xg/hls.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
21
public/js/xg/index.js
Normal file
21
public/js/xg/index.js
Normal file
File diff suppressed because one or more lines are too long
18
src/App.tsx
18
src/App.tsx
@ -1,12 +1,26 @@
|
||||
import { Suspense } from "react";
|
||||
import { useRoutes } from "react-router-dom";
|
||||
import { Suspense, useEffect } from "react";
|
||||
import ReactGA from "react-ga";
|
||||
import { useLocation, useRoutes } from "react-router-dom";
|
||||
import routes from "./routes";
|
||||
import "./App.scss";
|
||||
import LoadingPage from "./pages/loading";
|
||||
|
||||
const 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 />
|
||||
|
||||
@ -32,13 +32,6 @@ code {
|
||||
float: left;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.float-left {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
@ -107,7 +107,7 @@
|
||||
width: 100%;
|
||||
height: auto;
|
||||
box-sizing: border-box;
|
||||
padding: 0px 20px 55px 20px;
|
||||
padding: 96px 20px 55px 20px;
|
||||
text-align: left;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Dropdown, PullToRefresh, Skeleton, Tabs } from "antd-mobile";
|
||||
import { sleep } from "antd-mobile/es/utils/sleep";
|
||||
import { Dropdown, Skeleton, Tabs } from "antd-mobile";
|
||||
import { DropdownRef } from "antd-mobile/es/components/dropdown";
|
||||
import { user } from "../../api/index";
|
||||
import styles from "./index.module.scss";
|
||||
@ -72,15 +71,14 @@ const IndexPage = () => {
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
if (currentDepId === 0) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
getData();
|
||||
}, [currentDepId, categoryId]);
|
||||
|
||||
const getData = () => {
|
||||
setLoading(true);
|
||||
user.courses(currentDepId, categoryId).then((res: any) => {
|
||||
const records = res.data.learn_course_records;
|
||||
setLearnCourseRecords(records);
|
||||
@ -267,74 +265,61 @@ const IndexPage = () => {
|
||||
</Dropdown.Item>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<div
|
||||
className="float-left"
|
||||
style={{ position: "relative", paddingTop: 96 }}
|
||||
>
|
||||
<PullToRefresh
|
||||
onRefresh={async () => {
|
||||
setLoading(true);
|
||||
await sleep(700);
|
||||
getData();
|
||||
}}
|
||||
>
|
||||
<div className={styles["list-box"]}>
|
||||
{loading &&
|
||||
Array.from({ length: 2 }).map((_, i) => (
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
height: 75,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginBottom: 30,
|
||||
marginTop: 30,
|
||||
}}
|
||||
key={i}
|
||||
>
|
||||
<Skeleton
|
||||
animated
|
||||
style={{
|
||||
width: 100,
|
||||
height: 75,
|
||||
borderRadius: 8,
|
||||
marginRight: 15,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
height: 75,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Skeleton animated style={{ width: "100%", height: 21 }} />
|
||||
<Skeleton animated style={{ width: "100%", height: 24 }} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{!loading && coursesList.length === 0 && <Empty></Empty>}
|
||||
{!loading && coursesList.length > 0 && (
|
||||
<>
|
||||
{coursesList.map((item: any) => (
|
||||
<div className={styles["item"]} key={item.id}>
|
||||
<CoursesModel
|
||||
id={item.id}
|
||||
title={item.title}
|
||||
thumb={item.thumb}
|
||||
isRequired={item.is_required}
|
||||
record={learnCourseRecords[item.id]}
|
||||
hourCount={learnCourseHourCount[item.id]}
|
||||
></CoursesModel>
|
||||
</div>
|
||||
))}
|
||||
<Footer></Footer>
|
||||
</>
|
||||
)}
|
||||
</div>{" "}
|
||||
</PullToRefresh>
|
||||
<div className={styles["list-box"]}>
|
||||
{loading &&
|
||||
Array.from({ length: 2 }).map((_, i) => (
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
height: 75,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginBottom: 30,
|
||||
marginTop: 30,
|
||||
}}
|
||||
key={i}
|
||||
>
|
||||
<Skeleton
|
||||
animated
|
||||
style={{
|
||||
width: 100,
|
||||
height: 75,
|
||||
borderRadius: 8,
|
||||
marginRight: 15,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
height: 75,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Skeleton animated style={{ width: "100%", height: 21 }} />
|
||||
<Skeleton animated style={{ width: "100%", height: 24 }} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{!loading && coursesList.length === 0 && <Empty></Empty>}
|
||||
{!loading && coursesList.length > 0 && (
|
||||
<>
|
||||
{coursesList.map((item: any) => (
|
||||
<div className={styles["item"]} key={item.id}>
|
||||
<CoursesModel
|
||||
id={item.id}
|
||||
title={item.title}
|
||||
thumb={item.thumb}
|
||||
isRequired={item.is_required}
|
||||
record={learnCourseRecords[item.id]}
|
||||
hourCount={learnCourseHourCount[item.id]}
|
||||
></CoursesModel>
|
||||
</div>
|
||||
))}
|
||||
<Footer></Footer>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
.playedu-app {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
@ -2,16 +2,15 @@ import { Suspense } from "react";
|
||||
import { Outlet } from "react-router-dom";
|
||||
import LoadingPage from "../../loading";
|
||||
import { TabBarFooter } from "../../../components";
|
||||
import styles from "./index.module.scss";
|
||||
|
||||
const WithoutHeaderWithoutFooter = () => {
|
||||
return (
|
||||
<div className={styles["playedu-app"]}>
|
||||
<>
|
||||
<Suspense fallback={<LoadingPage />}>
|
||||
<Outlet />
|
||||
</Suspense>
|
||||
<TabBarFooter></TabBarFooter>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { PullToRefresh, Skeleton } from "antd-mobile";
|
||||
import { sleep } from "antd-mobile/es/utils/sleep";
|
||||
import { Skeleton } from "antd-mobile";
|
||||
import styles from "./index.module.scss";
|
||||
import { course } from "../../api/index";
|
||||
import { Empty } from "../../components";
|
||||
@ -18,11 +17,14 @@ const StudyPage = () => {
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
getCourses();
|
||||
}, []);
|
||||
|
||||
const getCourses = () => {
|
||||
if (loading) {
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
course
|
||||
.latestLearn()
|
||||
.then((res: any) => {
|
||||
@ -59,97 +61,87 @@ const StudyPage = () => {
|
||||
return (
|
||||
<div className="main-body">
|
||||
<div className={styles["title"]}>最近学习</div>
|
||||
<div className="float-left" style={{ position: "relative" }}>
|
||||
<PullToRefresh
|
||||
onRefresh={async () => {
|
||||
setLoading(true);
|
||||
await sleep(700);
|
||||
getCourses();
|
||||
}}
|
||||
>
|
||||
<div className={styles["list-box"]}>
|
||||
{loading &&
|
||||
Array.from({ length: 2 }).map((_, i) => (
|
||||
<div className={styles["item"]} key={i}>
|
||||
<Skeleton
|
||||
animated
|
||||
style={{
|
||||
width: 100,
|
||||
height: 75,
|
||||
borderRadius: 8,
|
||||
marginRight: 15,
|
||||
}}
|
||||
/>
|
||||
<div className={styles["item-info"]}>
|
||||
<Skeleton animated style={{ width: "100%", height: 21 }} />
|
||||
<Skeleton animated style={{ width: "100%", height: 24 }} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{!loading &&
|
||||
courses.length === 0 &&
|
||||
todayCourses.length === 0 &&
|
||||
yesterdayCourses.length === 0 && <Empty></Empty>}
|
||||
{!loading && (
|
||||
<div className={styles["list-box"]}>
|
||||
{loading &&
|
||||
Array.from({ length: 2 }).map((_, i) => (
|
||||
<div className={styles["item"]} key={i}>
|
||||
<Skeleton
|
||||
animated
|
||||
style={{
|
||||
width: 100,
|
||||
height: 75,
|
||||
borderRadius: 8,
|
||||
marginRight: 15,
|
||||
}}
|
||||
/>
|
||||
<div className={styles["item-info"]}>
|
||||
<Skeleton animated style={{ width: "100%", height: 21 }} />
|
||||
<Skeleton animated style={{ width: "100%", height: 24 }} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{!loading &&
|
||||
courses.length === 0 &&
|
||||
todayCourses.length === 0 &&
|
||||
yesterdayCourses.length === 0 && <Empty></Empty>}
|
||||
{!loading && (
|
||||
<>
|
||||
{todayCourses.length > 0 && (
|
||||
<>
|
||||
{todayCourses.length > 0 && (
|
||||
<>
|
||||
<div className={styles["label"]}>今日</div>
|
||||
{todayCourses.map((item: any, index: number) => (
|
||||
<div key={index} style={{ width: "100%" }}>
|
||||
{item.course && (
|
||||
<CoursesModel
|
||||
id={item.course.id}
|
||||
title={item.course.title}
|
||||
thumb={item.course.thumb}
|
||||
isRequired={item.course.is_required}
|
||||
record={item.record}
|
||||
></CoursesModel>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{yesterdayCourses.length > 0 && (
|
||||
<>
|
||||
<div className={styles["label"]}>昨日</div>
|
||||
{yesterdayCourses.map((item: any, index: number) => (
|
||||
<div key={index} style={{ width: "100%" }}>
|
||||
{item.course && (
|
||||
<CoursesModel
|
||||
id={item.course.id}
|
||||
title={item.course.title}
|
||||
thumb={item.course.thumb}
|
||||
isRequired={item.course.is_required}
|
||||
record={item.record}
|
||||
></CoursesModel>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{courses.length > 0 && (
|
||||
<>
|
||||
<div className={styles["label"]}>更早</div>
|
||||
{courses.map((item: any, index: number) => (
|
||||
<div key={index} style={{ width: "100%" }}>
|
||||
{item.course && (
|
||||
<CoursesModel
|
||||
id={item.course.id}
|
||||
title={item.course.title}
|
||||
thumb={item.course.thumb}
|
||||
isRequired={item.course.is_required}
|
||||
record={item.record}
|
||||
></CoursesModel>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
<div className={styles["label"]}>今日</div>
|
||||
{todayCourses.map((item: any, index: number) => (
|
||||
<div key={index} style={{ width: "100%" }}>
|
||||
{item.course && (
|
||||
<CoursesModel
|
||||
id={item.course.id}
|
||||
title={item.course.title}
|
||||
thumb={item.course.thumb}
|
||||
isRequired={item.course.is_required}
|
||||
record={item.record}
|
||||
></CoursesModel>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</PullToRefresh>
|
||||
{yesterdayCourses.length > 0 && (
|
||||
<>
|
||||
<div className={styles["label"]}>昨日</div>
|
||||
{yesterdayCourses.map((item: any, index: number) => (
|
||||
<div key={index} style={{ width: "100%" }}>
|
||||
{item.course && (
|
||||
<CoursesModel
|
||||
id={item.course.id}
|
||||
title={item.course.title}
|
||||
thumb={item.course.thumb}
|
||||
isRequired={item.course.is_required}
|
||||
record={item.record}
|
||||
></CoursesModel>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{courses.length > 0 && (
|
||||
<>
|
||||
<div className={styles["label"]}>更早</div>
|
||||
{courses.map((item: any, index: number) => (
|
||||
<div key={index} style={{ width: "100%" }}>
|
||||
{item.course && (
|
||||
<CoursesModel
|
||||
id={item.course.id}
|
||||
title={item.course.title}
|
||||
thumb={item.course.thumb}
|
||||
isRequired={item.course.is_required}
|
||||
record={item.record}
|
||||
></CoursesModel>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
15
src/reportWebVitals.ts
Normal file
15
src/reportWebVitals.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { ReportHandler } from 'web-vitals';
|
||||
|
||||
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
Loading…
x
Reference in New Issue
Block a user