import { useEffect, useState } from "react";
import { Row, Spin, Image, Progress } from "antd";
import styles from "./index.module.scss";
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";
//测试预览
//
type TabModel = {
key: number;
label: string;
};
type AttachModel = {
id: number;
course_id: number;
rid: number;
sort: number;
title: string;
type: string;
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<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<AttachModel[]>([]);
const [items, setItems] = useState<TabModel[]>([]);
useEffect(() => {
getDetail();
}, [params.courseId]);
const getDetail = () => {
setLoading(true);
Course.detail(Number(params.courseId))
.then((res: any) => {
document.title = res.data.course.title;
setCourse(res.data.course);
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: AttachModel[] = res.data.attachments;
let tabs: TabModel[] = [
{
key: 1,
label: `课程目录`,
},
];
if (arr.length > 0) {
tabs.push({
key: 2,
label: `课程附件`,
});
setAttachments(arr);
}
setItems(tabs);
setLoading(false);
})
.catch((e) => {
setLoading(false);
});
};
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 && (
<Row
style={{
width: 1200,
margin: "0 auto",
paddingTop: 14,
minHeight: 301,
}}
>
<div className="float-left d-j-flex mt-50">
<Spin size="large" />
</div>
</Row>
)}
{!loading && (
<>
<div className={styles["top-cont"]}>
<div className="j-b-flex">
<div className="d-flex">
<Image
width={120}
height={90}
style={{ borderRadius: 10 }}
preview={false}
src={course?.thumb}
/>
<div className={styles["info"]}>
<div className={styles["title"]}>{course?.title}</div>
<div className={styles["status"]}>
{course?.is_required === 1 && (
<div className={styles["type"]}>必修课</div>
)}
{course?.is_required === 0 && (
<div className={styles["active-type"]}>选修课</div>
)}
{learnRecord && learnRecord.progress / 100 >= 100 && (
<div className={styles["success"]}>
<Image
width={24}
height={24}
src={mediaIcon}
preview={false}
/>
<span className="ml-8">恭喜你学完此课程!</span>
</div>
)}
</div>
</div>
</div>
{(!learnRecord ||
(learnRecord && JSON.stringify(learnRecord) === "{}")) &&
JSON.stringify(learnHourRecord) === "{}" && (
<Progress
type="circle"
strokeColor="#FF4D4F"
trailColor="#F6F6F6"
size={90}
strokeWidth={8}
percent={0}
format={(percent) => `${percent}%`}
/>
)}
{(!learnRecord ||
(learnRecord && JSON.stringify(learnRecord) === "{}")) &&
JSON.stringify(learnHourRecord) !== "{}" && (
<Progress
type="circle"
strokeColor="#FF4D4F"
trailColor="#F6F6F6"
size={90}
strokeWidth={8}
percent={1}
format={(percent) => `${percent}%`}
/>
)}
{learnRecord &&
JSON.stringify(learnRecord) !== "{}" &&
JSON.stringify(learnHourRecord) !== "{}" && (
<Progress
type="circle"
strokeColor="#FF4D4F"
trailColor="#F6F6F6"
size={90}
strokeWidth={8}
percent={Math.floor(learnRecord.progress / 100)}
format={(percent) => `${percent}%`}
/>
)}
</div>
{course?.short_desc && (
<div className={styles["desc"]}>{course.short_desc}</div>
)}
</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>
))}
</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}.{item.ext}
</span>
</div>
{/* 预览功能 */}
{/* 下载功能 */}
<div
className={styles["download"]}
onClick={() => downLoadFile(item.course_id, item.id)}
>
下载
</div>
</div>
))}
</div>
)}
</>
)}
</div>
);
};
export default CoursePage
怎么添加文件预览功能
