From 898b0695526e173f048ec1cb1531f2a7d86341ca Mon Sep 17 00:00:00 2001 From: unknown <18119604035@163.com> Date: Sat, 29 Jul 2023 16:47:23 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AF=BE=E7=A8=8B=E8=AF=A6=E6=83=85=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E8=AF=BE=E4=BB=B6=E4=B8=8B=E8=BD=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/course.ts | 5 + src/pages/course/index.module.scss | 102 +++++++++++++++ src/pages/course/index.tsx | 193 +++++++++++++++++++++-------- 3 files changed, 249 insertions(+), 51 deletions(-) diff --git a/src/api/course.ts b/src/api/course.ts index 53d62bf..70a4dec 100644 --- a/src/api/course.ts +++ b/src/api/course.ts @@ -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`, {}); +} diff --git a/src/pages/course/index.module.scss b/src/pages/course/index.module.scss index 99408f9..689b1fc 100644 --- a/src/pages/course/index.module.scss +++ b/src/pages/course/index.module.scss @@ -79,6 +79,48 @@ padding: 20px; margin-top: -20px; z-index: 10; + .tabs { + width: 100%; + min-height: 24px; + display: flex; + align-items: center; + position: relative; + margin-bottom: 20px; + .tab-item { + width: auto; + min-height: 24px; + margin-right: 36px; + position: relative; + .tit { + font-size: 16px; + font-weight: 400; + color: rgba(0, 0, 0, 0.45); + line-height: 16px; + } + } + .tab-active-item { + width: auto; + min-height: 24px; + margin-right: 36px; + display: flex; + flex-direction: column; + align-items: center; + .tit { + font-size: 16px; + font-weight: 500; + color: rgba(0, 0, 0, 0.88); + line-height: 16px; + } + .act-line { + margin-top: 5px; + display: block; + width: 20px; + height: 3px; + background: #ff4d4f; + border-radius: 2px; + } + } + } .desc { width: 100%; height: auto; @@ -130,3 +172,63 @@ } } } + +.attachments-cont { + width: 100%; + height: auto; + display: flex; + flex-direction: column; + .attachments-item { + width: 100%; + height: 69px; + background: #fafafa; + border-radius: 7px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + box-sizing: border-box; + padding: 10px 15px 10px 10px; + text-align: left; + margin-bottom: 10px; + &:last-child { + margin-bottom: 0px; + } + .left-cont { + flex: 1; + display: flex; + flex-direction: column; + margin-right: 10px; + .label { + height: 16px; + display: flex; + align-items: center; + span { + height: 16px; + font-size: 12px; + font-weight: 400; + color: rgba(0, 0, 0, 0.45); + line-height: 16px; + } + } + .title { + margin-top: 15px; + height: 14px; + font-size: 14px; + font-weight: 400; + color: rgba(0, 0, 0, 0.88); + line-height: 14px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + } + .download { + width: auto; + font-size: 12px; + font-weight: 400; + color: #ff4d4f; + line-height: 16px; + } + } +} diff --git a/src/pages/course/index.tsx b/src/pages/course/index.tsx index ea7ff95..2e64e93 100644 --- a/src/pages/course/index.tsx +++ b/src/pages/course/index.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from "react"; import { Image, ProgressCircle } from "antd-mobile"; import styles from "./index.module.scss"; -import { useNavigate, useParams } from "react-router-dom"; +import { useNavigate, useLocation, useParams } from "react-router-dom"; import backIcon from "../../assets/images/commen/icon-back-n.png"; import { course as vod } from "../../api/index"; import { isEmptyObject } from "../../utils/index"; @@ -16,10 +16,25 @@ type LocalCourseHour = { [key: number]: CourseHourModel[]; }; +type tabModal = { + key: number; + label: string; +}; + +type attachModal = { + id: number; + course_id: number; + rid: number; + sort: number; + title: string; + type: string; + url?: string; +}; + const CoursePage = () => { const { courseId } = useParams(); const navigate = useNavigate(); - + const result = new URLSearchParams(useLocation().search); const [course, setCourse] = useState(null); const [chapters, setChapters] = useState([]); const [hours, setHours] = useState(null); @@ -31,30 +46,42 @@ const CoursePage = () => { const [courseTypeText, setCourseTypeText] = useState(""); const [userCourseProgress, setUserCourseProgress] = useState(0); + const [tabKey, setTabKey] = useState(Number(result.get("tab") || 1)); + const [attachments, setAttachments] = useState([]); + const [items, setItems] = useState([]); useEffect(() => { - if (courseId) { - getDetail(Number(courseId)); - } + getDetail(); }, [courseId]); - const getDetail = (cid: number) => { - vod.detail(cid).then((res: any) => { + const getDetail = () => { + vod.detail(Number(courseId)).then((res: any) => { let courseItem: CourseModel = res.data.course; - document.title = courseItem.title || "课程详情"; - setCourse(courseItem); setChapters(res.data.chapters); setHours(res.data.hours); - if (res.data.learn_record) { setLearnRecord(res.data.learn_record); } - 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); }); }; @@ -78,6 +105,17 @@ const CoursePage = () => { navigate(`/course/${cid}/hour/${id}`); }; + const onChange = (key: number) => { + setTabKey(key); + // navigate("/course/" + courseId + "?tab=" + key); + }; + + const downLoadFile = (cid: number, id: number) => { + vod.downloadAttachment(cid, id).then((res: any) => { + window.open(res.data.download_url); + }); + }; + return (
@@ -116,47 +154,48 @@ const CoursePage = () => {
- {course?.short_desc && ( - <> -
{course.short_desc}
-
- - )} -
- {chapters.length === 0 && !hours && } - - {chapters.length === 0 && hours && ( -
- {hours[0].map((item: CourseHourModel) => ( -
- { - playVideo(cid, id); - }} - > -
- ))} +
+ {items.map((item: any) => ( +
{ + onChange(item.key); + }} + > +
{item.label}
+ {item.key === tabKey && }
- )} + ))} +
+ {tabKey === 1 && ( + <> + {course?.short_desc && ( + <> +
{course.short_desc}
+
+ + )} +
+ {chapters.length === 0 && !hours && } - {chapters.length > 0 && hours && ( -
- {chapters.map((item: ChapterModel) => ( -
-
{item.name}
- {hours[item.id]?.map((it: CourseHourModel) => ( -
+ {chapters.length === 0 && hours && ( +
+ {hours[0].map((item: CourseHourModel) => ( +
{ playVideo(cid, id); }} @@ -164,10 +203,62 @@ const CoursePage = () => {
))}
- ))} + )} + + {chapters.length > 0 && hours && ( +
+ {chapters.map((item: ChapterModel) => ( +
+
{item.name}
+ {hours[item.id]?.map((it: CourseHourModel) => ( +
+ { + playVideo(cid, id); + }} + > +
+ ))} +
+ ))} +
+ )}
- )} -
+ + )} + {tabKey === 2 && ( +
+ {attachments.map((item: any, index: number) => ( +
+
+
+ + 课件 +
+ {item.title} +
+
downLoadFile(item.course_id, item.id)} + > + 下载 +
+
+ ))} +
+ )}
);