yexuejc007/PlayEdu-frontend
1
0
Fork 0
mirror of https://github.com/PlayEdu/frontend.git synced 2025-06-28 15:56:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

课程详情增加课件下载

Browse Source
This commit is contained in:
unknown 2023-07-29 16:20:01 +08:00
parent 6137916964
commit 765f37a5eb
8 changed files with 340 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/course.ts
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`, {});
}

10
src/api/internal/httpClient.ts
View File

@ -7,6 +7,10 @@ const GoLogin = () => {
window.location.href = "/login";
};
const GoError = () => {
window.location.href = "/error";
};
export class HttpClient {
axios: Axios;
@ -52,13 +56,13 @@ export class HttpClient {
GoLogin();
} else if (status === 404) {
// 跳转到404页面
GoLogin();
GoError();
} else if (status === 403) {
// 跳转到无权限页面
GoLogin();
GoError();
} else if (status === 500) {
// 跳转到500异常页面
GoLogin();
GoError();
}
return Promise.reject(error.response);
}

111
src/pages/course/index.module.scss
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 {
width: 64px;
height: 48px;
margin-right: 50px;
transition: all 0.2s;
position: relative;
cursor: pointer;
&:hover {
opacity: 0.8;
.tit {
color: #ff4d4f;
}
}
.tit {
width: 64px;
height: 40px;
font-size: 16px;
font-weight: 400;
color: rgba(0, 0, 0, 0.88);
line-height: 40px;
}
}
.tab-active-item {
width: 64px;
height: 48px;
cursor: pointer;
margin-right: 50px;
transition: all 0.2s;
&:hover {
opacity: 0.8;
}
.tit {
width: 64px;
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;
}
}
}
}

250
src/pages/course/index.tsx
View File

@ -1,20 +1,41 @@
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";
interface tabModal {
key: number;
label: string;
}
interface attachModal {
id: number;
course_id: number;
rid: number;
sort: number;
title: string;
type: string;
url?: string;
}
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 [tabKey, setTabKey] = useState(Number(result.get("tab") || 1));
const [attachments, setAttachments] = useState<attachModal[]>([]);
const [items, setItems] = useState<tabModal[]>([]);
useEffect(() => {
getDetail();
@ -34,6 +55,22 @@ const CoursePage = () => {
if (res.data.learn_hour_records) {
setLearnHourRecord(res.data.learn_hour_records);
}
let arr = res.data.attachments;
let tabs = [
{
key: 1,
label: `课程目录`,
},
];
if (arr.length > 0) {
tabs.push({
key: 2,
label: `课程附件`,
});
setAttachments(arr);
}
setItems(tabs);
setLoading(false);
})
.catch((e) => {
@ -41,6 +78,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 && (
@ -133,80 +181,134 @@ const CoursePage = () => {
<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] &&
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}</span>
</div>
<div
className={styles["download"]}
onClick={() => downLoadFile(item.course_id, item.id)}
>
下载
</div>
</div>
))}
</div>
)}
</>
)}
</div>

4
src/pages/error/index.module.scss Normal file
View File

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

28
src/pages/error/index.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Button, Result } from "antd";
import { useNavigate } from "react-router-dom";
import styles from "./index.module.scss";
const ErrorPage = () => {
const navigate = useNavigate();
return (
<Result
status="404"
title="404"
subTitle="您访问的页面不存在"
className={styles["main"]}
extra={
<Button
type="primary"
onClick={() => {
navigate("/", { replace: true });
}}
>
返回首页
</Button>
}
/>
);
};
export default ErrorPage;

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

@ -30,10 +30,6 @@ const IndexPage = () => {
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 currentDepId = useSelector(
(state: any) => state.loginUser.value.currentDepId
);

10
src/routes/index.tsx
View File

@ -17,6 +17,8 @@ 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";
@ -96,6 +98,14 @@ const routes: RouteObject[] = [
path: "/course/:courseId/hour/:hourId",
element: <PrivateRoute Component={<CoursePlayPage />} />,
},
{
path: "/error",
element: <ErrorPage />,
},
{
path: "*",
element: <ErrorPage />,
},
],
},
],