yexuejc007/PlayEdu-h5
1
0
Fork 0
mirror of https://github.com/PlayEdu/h5.git synced 2026-01-02 05:21:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: yexuejc007:v1.3
Branches Tags
yexuejc007:main yexuejc007:dev
yexuejc007:1.6 yexuejc007:1.5 yexuejc007:v1.4 yexuejc007:v1.3 yexuejc007:v1.2 yexuejc007:v1.1
...
compare: yexuejc007:8a3bbd565bf0593e3b4394fc16b116cbcc433d83
Branches Tags
yexuejc007:dev yexuejc007:main
yexuejc007:1.6 yexuejc007:1.5 yexuejc007:v1.4 yexuejc007:v1.3 yexuejc007:v1.2 yexuejc007:v1.1

7 Commits
v1.3 ... 8a3bbd565b

Author SHA1 Message Date
xxx
8a3bbd565b fixed: 底部导航栏悬浮bug 2024-01-09 09:32:46 +08:00
xxx
f71df2a461 移除hls.min.js的依赖 2024-01-08 16:14:56 +08:00
unknown
5e054cdd54 下拉刷新 2024-01-08 12:28:43 +08:00
unknown
19df4739ad 会员中心学习时间不显示天 2023-11-15 10:04:45 +08:00
白书科技
e5315f621f !3 优化 
Merge pull request !3 from 白书科技/fix/0922
 2023-09-24 00:47:56 +00:00
unknown
0f811618b7 iconfont优化 2023-09-22 15:29:30 +08:00
xxx
21e152cb74 兼容安卓钉钉 2023-09-20 10:23:06 +08:00
12 changed files with 200 additions and 172 deletions
Expand all files Collapse all files

5
index.html
View File

@@ -13,11 +13,6 @@
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
<script
crossorigin="anonymous"
integrity="sha512-oHrfR/z2wkuRuaHrdZ9NhoT/o/1kteub+QvmQgVzOKK7NTvIKQMvnY9+/RR0+eW311o4lAE/YzzLXXmP2XUvig=="
src="https://lib.baomitu.com/hls.js/1.1.4/hls.min.js"
></script>
<script type="text/javascript"> <script type="text/javascript">
if ( if (
typeof WeixinJSBridge == "object" && typeof WeixinJSBridge == "object" &&

2
package.json
View File

@@ -28,9 +28,11 @@
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"@vitejs/plugin-legacy": "^4.1.1",
"@vitejs/plugin-react-swc": "^3.0.0", "@vitejs/plugin-react-swc": "^3.0.0",
"rollup-plugin-gzip": "^3.1.0", "rollup-plugin-gzip": "^3.1.0",
"sass": "^1.59.3", "sass": "^1.59.3",
"terser": "^5.19.4",
"typescript": "^4.9.3", "typescript": "^4.9.3",
"vite": "^4.2.0" "vite": "^4.2.0"
} }

9
src/main.scss
View File

@@ -1,5 +1,3 @@
@import "./assets/iconfont/iconfont.css";
body { body {
margin: 0; margin: 0;
} }
@@ -34,6 +32,13 @@ code {
float: left; float: left;
height: auto; height: auto;
} }
.float-left {
width: 100%;
height: auto;
float: left;
}
.main-header { .main-header {
position: relative; position: relative;
width: 100%; width: 100%;

1
src/main.tsx
View File

@@ -2,6 +2,7 @@ import ReactDOM from "react-dom/client";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
import store from "./store"; import store from "./store";
import { BrowserRouter } from "react-router-dom"; import { BrowserRouter } from "react-router-dom";
import "./assets/iconfont/iconfont.css";
import "./main.scss"; import "./main.scss";
import App from "./App"; import App from "./App";
import AutoScorllTop from "./AutoTop"; import AutoScorllTop from "./AutoTop";

2
src/pages/index/index.module.scss
View File

@@ -107,7 +107,7 @@
width: 100%; width: 100%;
height: auto; height: auto;
box-sizing: border-box; box-sizing: border-box;
padding: 96px 20px 55px 20px; padding: 0px 20px 55px 20px;
text-align: left; text-align: left;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;

129
src/pages/index/index.tsx
View File

@@ -1,5 +1,6 @@
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { Dropdown, Skeleton, Tabs } from "antd-mobile"; import { Dropdown, PullToRefresh, Skeleton, Tabs } from "antd-mobile";
import { sleep } from "antd-mobile/es/utils/sleep";
import { DropdownRef } from "antd-mobile/es/components/dropdown"; import { DropdownRef } from "antd-mobile/es/components/dropdown";
import { user } from "../../api/index"; import { user } from "../../api/index";
import styles from "./index.module.scss"; import styles from "./index.module.scss";
@@ -71,14 +72,15 @@ const IndexPage = () => {
}, []); }, []);
useEffect(() => { useEffect(() => {
setLoading(true);
if (currentDepId === 0) { if (currentDepId === 0) {
setLoading(false);
return; return;
} }
getData(); getData();
}, [currentDepId, categoryId]); }, [currentDepId, categoryId]);
const getData = () => { const getData = () => {
setLoading(true);
user.courses(currentDepId, categoryId).then((res: any) => { user.courses(currentDepId, categoryId).then((res: any) => {
const records = res.data.learn_course_records; const records = res.data.learn_course_records;
setLearnCourseRecords(records); setLearnCourseRecords(records);
@@ -265,61 +267,74 @@ const IndexPage = () => {
</Dropdown.Item> </Dropdown.Item>
</Dropdown> </Dropdown>
</div> </div>
<div className={styles["list-box"]}> <div
{loading && className="float-left"
Array.from({ length: 2 }).map((_, i) => ( style={{ position: "relative", paddingTop: 96 }}
<div >
style={{ <PullToRefresh
width: "100%", onRefresh={async () => {
height: 75, setLoading(true);
display: "flex", await sleep(700);
alignItems: "center", getData();
marginBottom: 30, }}
marginTop: 30, >
}} <div className={styles["list-box"]}>
key={i} {loading &&
> Array.from({ length: 2 }).map((_, i) => (
<Skeleton <div
animated style={{
style={{ width: "100%",
width: 100, height: 75,
height: 75, display: "flex",
borderRadius: 8, alignItems: "center",
marginRight: 15, marginBottom: 30,
}} marginTop: 30,
/> }}
<div key={i}
style={{ >
flex: 1, <Skeleton
height: 75, animated
display: "flex", style={{
flexDirection: "column", width: 100,
justifyContent: "space-between", height: 75,
}} borderRadius: 8,
> marginRight: 15,
<Skeleton animated style={{ width: "100%", height: 21 }} /> }}
<Skeleton animated style={{ width: "100%", height: 24 }} /> />
</div> <div
</div> style={{
))} flex: 1,
{!loading && coursesList.length === 0 && <Empty></Empty>} height: 75,
{!loading && coursesList.length > 0 && ( display: "flex",
<> flexDirection: "column",
{coursesList.map((item: any) => ( justifyContent: "space-between",
<div className={styles["item"]} key={item.id}> }}
<CoursesModel >
id={item.id} <Skeleton animated style={{ width: "100%", height: 21 }} />
title={item.title} <Skeleton animated style={{ width: "100%", height: 24 }} />
thumb={item.thumb} </div>
isRequired={item.is_required} </div>
record={learnCourseRecords[item.id]} ))}
hourCount={learnCourseHourCount[item.id]} {!loading && coursesList.length === 0 && <Empty></Empty>}
></CoursesModel> {!loading && coursesList.length > 0 && (
</div> <>
))} {coursesList.map((item: any) => (
<Footer></Footer> <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> </div>
</div> </div>
); );

7
src/pages/layouts/with-footer/index.module.scss Normal file
View File

@@ -0,0 +1,7 @@
.playedu-app {
width: 100vw;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
position: relative;
}

5
src/pages/layouts/with-footer/index.tsx
View File

@@ -2,15 +2,16 @@ import { Suspense } from "react";
import { Outlet } from "react-router-dom"; import { Outlet } from "react-router-dom";
import LoadingPage from "../../loading"; import LoadingPage from "../../loading";
import { TabBarFooter } from "../../../components"; import { TabBarFooter } from "../../../components";
import styles from "./index.module.scss";
const WithoutHeaderWithoutFooter = () => { const WithoutHeaderWithoutFooter = () => {
return ( return (
<> <div className={styles["playedu-app"]}>
<Suspense fallback={<LoadingPage />}> <Suspense fallback={<LoadingPage />}>
<Outlet /> <Outlet />
</Suspense> </Suspense>
<TabBarFooter></TabBarFooter> <TabBarFooter></TabBarFooter>
</> </div>
); );
}; };

26
src/pages/member/index.tsx
View File

@@ -22,10 +22,8 @@ const MemberPage = () => {
url: "", url: "",
}, },
]); ]);
const [learnTodayDay, setLearnTodayDay] = useState(0);
const [learnTodayHour, setLearnTodayHour] = useState(0); const [learnTodayHour, setLearnTodayHour] = useState(0);
const [learnTodayMin, setLearnTodayMin] = useState(0); const [learnTodayMin, setLearnTodayMin] = useState(0);
const [learnTotalDay, setLearnTotalDay] = useState(0);
const [learnTotalHour, setLearnTotalHour] = useState(0); const [learnTotalHour, setLearnTotalHour] = useState(0);
const [learnTotalMin, setLearnTotalMin] = useState(0); const [learnTotalMin, setLearnTotalMin] = useState(0);
const user = useSelector((state: any) => state.loginUser.value.user); const user = useSelector((state: any) => state.loginUser.value.user);
@@ -60,19 +58,17 @@ const MemberPage = () => {
setStats(res.data.stats); setStats(res.data.stats);
let todayData = studyTimeFormat(res.data.stats.today_learn_duration); let todayData = studyTimeFormat(res.data.stats.today_learn_duration);
if (todayData) { if (todayData) {
setLearnTodayDay(todayData[0]); setLearnTodayHour(todayData[0]);
setLearnTodayHour(todayData[1]); setLearnTodayMin(todayData[1]);
setLearnTodayMin(todayData[2]); if (todayData[1] === 0 && todayData[2] > 0) {
if (todayData[2] === 0 && todayData[3] > 0) {
setLearnTodayMin(1); setLearnTodayMin(1);
} }
} }
let totalData = studyTimeFormat(res.data.stats.learn_duration); let totalData = studyTimeFormat(res.data.stats.learn_duration);
if (totalData) { if (totalData) {
setLearnTotalDay(totalData[0]); setLearnTotalHour(totalData[0]);
setLearnTotalHour(totalData[1]); setLearnTotalMin(totalData[1]);
setLearnTotalMin(totalData[2]); if (totalData[1] === 0 && totalData[2] > 0) {
if (totalData[2] === 0 && totalData[3] > 0) {
setLearnTodayMin(1); setLearnTodayMin(1);
} }
} }
@@ -191,11 +187,6 @@ const MemberPage = () => {
<div className={styles["stats-content"]}> <div className={styles["stats-content"]}>
<div className={styles["stat-item"]}> <div className={styles["stat-item"]}>
<span className={styles["time"]}> <span className={styles["time"]}>
{learnTodayDay > 0 && (
<>
<strong>{learnTodayDay} </strong>天
</>
)}
<strong> {learnTodayHour} </strong>时 <strong> {learnTodayHour} </strong>时
<strong> {learnTodayMin} </strong>分 <strong> {learnTodayMin} </strong>分
</span> </span>
@@ -203,11 +194,6 @@ const MemberPage = () => {
</div> </div>
<div className={styles["stat-item"]}> <div className={styles["stat-item"]}>
<span className={styles["time"]}> <span className={styles["time"]}>
{learnTotalDay > 0 && (
<>
<strong>{learnTotalDay} </strong>天
</>
)}
<strong> {learnTotalHour} </strong>时 <strong> {learnTotalHour} </strong>时
<strong> {learnTotalMin} </strong>分 <strong> {learnTotalMin} </strong>分
</span> </span>

174
src/pages/study/index.tsx
View File

@@ -1,5 +1,6 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Skeleton } from "antd-mobile"; import { PullToRefresh, Skeleton } from "antd-mobile";
import { sleep } from "antd-mobile/es/utils/sleep";
import styles from "./index.module.scss"; import styles from "./index.module.scss";
import { course } from "../../api/index"; import { course } from "../../api/index";
import { Empty } from "../../components"; import { Empty } from "../../components";
@@ -17,14 +18,11 @@ const StudyPage = () => {
}, []); }, []);
useEffect(() => { useEffect(() => {
setLoading(true);
getCourses(); getCourses();
}, []); }, []);
const getCourses = () => { const getCourses = () => {
if (loading) {
return;
}
setLoading(true);
course course
.latestLearn() .latestLearn()
.then((res: any) => { .then((res: any) => {
@@ -61,87 +59,97 @@ const StudyPage = () => {
return ( return (
<div className="main-body"> <div className="main-body">
<div className={styles["title"]}>最近学习</div> <div className={styles["title"]}>最近学习</div>
<div className={styles["list-box"]}> <div className="float-left" style={{ position: "relative" }}>
{loading && <PullToRefresh
Array.from({ length: 2 }).map((_, i) => ( onRefresh={async () => {
<div className={styles["item"]} key={i}> setLoading(true);
<Skeleton await sleep(700);
animated getCourses();
style={{ }}
width: 100, >
height: 75, <div className={styles["list-box"]}>
borderRadius: 8, {loading &&
marginRight: 15, Array.from({ length: 2 }).map((_, i) => (
}} <div className={styles["item"]} key={i}>
/> <Skeleton
<div className={styles["item-info"]}> animated
<Skeleton animated style={{ width: "100%", height: 21 }} /> style={{
<Skeleton animated style={{ width: "100%", height: 24 }} /> width: 100,
</div> height: 75,
</div> borderRadius: 8,
))} marginRight: 15,
{!loading && }}
courses.length === 0 && />
todayCourses.length === 0 && <div className={styles["item-info"]}>
yesterdayCourses.length === 0 && <Empty></Empty>} <Skeleton animated style={{ width: "100%", height: 21 }} />
{!loading && ( <Skeleton animated style={{ width: "100%", height: 24 }} />
<>
{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> </div>
))} </div>
))}
{!loading &&
courses.length === 0 &&
todayCourses.length === 0 &&
yesterdayCourses.length === 0 && <Empty></Empty>}
{!loading && (
<>
{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>
))}
</>
)}
</> </>
)} )}
{yesterdayCourses.length > 0 && ( </div>
<> </PullToRefresh>
<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>
</div> </div>
); );

1
src/utils/index.ts
View File

@@ -54,7 +54,6 @@ export function changeAppUrl(str: string) {
export function studyTimeFormat(dateStr: number) { export function studyTimeFormat(dateStr: number) {
var d = moment.duration(dateStr / 1000, "seconds"); var d = moment.duration(dateStr / 1000, "seconds");
let value = []; let value = [];
value.push(Math.floor(d.asDays()));
value.push(d.hours()); value.push(d.hours());
value.push(d.minutes()); value.push(d.minutes());
value.push(d.seconds()); value.push(d.seconds());

11
vite.config.ts
View File

@@ -1,13 +1,22 @@
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc"; import react from "@vitejs/plugin-react-swc";
import gzipPlugin from "rollup-plugin-gzip"; import gzipPlugin from "rollup-plugin-gzip";
import legacy from "@vitejs/plugin-legacy";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
server: { server: {
host: "0.0.0.0", host: "0.0.0.0",
}, },
plugins: [react()], plugins: [
react(),
legacy({
targets: ["chrome 52"],
additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
renderLegacyChunks: true,
modernPolyfills: true,
}),
],
build: { build: {
rollupOptions: { rollupOptions: {
plugins: [gzipPlugin()], plugins: [gzipPlugin()],