Merge pull request !1 from 白书科技/fix/0804
This commit is contained in:
白书科技 2023-08-08 01:35:51 +00:00 committed by Gitee
commit 931b9ee677
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
5 changed files with 257 additions and 113 deletions

View File

@ -8,12 +8,12 @@ import { HourCompenent } from "./compenents/hour";
import { Empty } from "../../compenents";
import iconRoute from "../../assets/images/commen/icon-route.png";
type tabModal = {
type TabModel = {
key: number;
label: string;
};
type attachModal = {
type AttachModel = {
id: number;
course_id: number;
rid: number;
@ -23,19 +23,40 @@ type attachModal = {
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<any>({});
const [chapters, setChapters] = useState<any>([]);
const [hours, setHours] = useState<any>({});
const [learnRecord, setLearnRecord] = useState<any>({});
const [learnHourRecord, setLearnHourRecord] = useState<any>({});
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<attachModal[]>([]);
const [items, setItems] = useState<tabModal[]>([]);
const [attachments, setAttachments] = useState<AttachModel[]>([]);
const [items, setItems] = useState<TabModel[]>([]);
useEffect(() => {
getDetail();
@ -55,8 +76,8 @@ const CoursePage = () => {
if (res.data.learn_hour_records) {
setLearnHourRecord(res.data.learn_hour_records);
}
let arr = res.data.attachments;
let tabs = [
let arr: AttachModel[] = res.data.attachments;
let tabs: TabModel[] = [
{
key: 1,
label: `课程目录`,
@ -115,18 +136,18 @@ const CoursePage = () => {
height={90}
style={{ borderRadius: 10 }}
preview={false}
src={course.thumb}
src={course?.thumb}
/>
<div className={styles["info"]}>
<div className={styles["title"]}>{course.title}</div>
<div className={styles["title"]}>{course?.title}</div>
<div className={styles["status"]}>
{course.is_required === 1 && (
{course?.is_required === 1 && (
<div className={styles["type"]}></div>
)}
{course.is_required === 0 && (
{course?.is_required === 0 && (
<div className={styles["active-type"]}></div>
)}
{learnRecord.progress / 100 >= 100 && (
{learnRecord && learnRecord.progress / 100 >= 100 && (
<div className={styles["success"]}>
<Image
width={24}
@ -140,7 +161,8 @@ const CoursePage = () => {
</div>
</div>
</div>
{JSON.stringify(learnRecord) === "{}" &&
{learnRecord &&
JSON.stringify(learnRecord) === "{}" &&
JSON.stringify(learnHourRecord) === "{}" && (
<Progress
type="circle"
@ -152,7 +174,8 @@ const CoursePage = () => {
format={(percent) => `${percent}%`}
/>
)}
{JSON.stringify(learnRecord) === "{}" &&
{learnRecord &&
JSON.stringify(learnRecord) === "{}" &&
JSON.stringify(learnHourRecord) !== "{}" && (
<Progress
type="circle"
@ -164,7 +187,8 @@ const CoursePage = () => {
format={(percent) => `${percent}%`}
/>
)}
{JSON.stringify(learnRecord) !== "{}" &&
{learnRecord &&
JSON.stringify(learnRecord) !== "{}" &&
JSON.stringify(learnHourRecord) !== "{}" && (
<Progress
type="circle"
@ -177,7 +201,7 @@ const CoursePage = () => {
/>
)}
</div>
{course.short_desc && (
{course?.short_desc && (
<div className={styles["desc"]}>{course.short_desc}</div>
)}
</div>

View File

@ -13,15 +13,15 @@ const CoursePalyPage = () => {
const params = useParams();
const systemConfig = useSelector((state: any) => state.systemConfig.value);
const user = useSelector((state: any) => state.loginUser.value.user);
const [playUrl, setPlayUrl] = useState<string>("");
const [playUrl, setPlayUrl] = useState("");
const [playDuration, setPlayDuration] = useState(0);
const [playendedStatus, setPlayendedStatus] = useState<Boolean>(false);
const [playendedStatus, setPlayendedStatus] = useState(false);
const [lastSeeValue, setLastSeeValue] = useState({});
const [course, setCourse] = useState<any>({});
const [hour, setHour] = useState<any>({});
const [loading, setLoading] = useState<Boolean>(false);
const [isLastpage, setIsLastpage] = useState<Boolean>(false);
const [totalHours, setTotalHours] = useState<any>([]);
const [course, setCourse] = useState<CourseModel | null>(null);
const [hour, setHour] = useState<HourModel | null>(null);
const [loading, setLoading] = useState(false);
const [isLastpage, setIsLastpage] = useState(false);
const [totalHours, setTotalHours] = useState<HourModel[]>([]);
const [playingTime, setPlayingTime] = useState(0);
const [watchedSeconds, setWatchedSeconds] = useState(0);
const myRef = useRef(0);
@ -59,17 +59,17 @@ const CoursePalyPage = () => {
}, [watchedSeconds]);
useEffect(() => {
totalRef.current = hour.duration;
totalRef.current = hour?.duration || 0;
}, [hour]);
const getCourse = () => {
Course.detail(Number(params.courseId)).then((res: any) => {
let totalHours: any = [];
let totalHours: HourModel[] = [];
if (res.data.chapters.length === 0) {
setTotalHours(res.data.hours[0]);
totalHours = res.data.hours[0];
} else if (res.data.chapters.length > 0) {
const arr: any = [];
const arr: HourModel[] = [];
for (let key in res.data.hours) {
res.data.hours[key].map((item: any) => {
arr.push(item);
@ -97,7 +97,7 @@ const CoursePalyPage = () => {
setCourse(res.data.course);
setHour(res.data.hour);
document.title = res.data.hour.title;
let record = res.data.user_hour_record;
let record: HourRecordModel = res.data.user_hour_record;
let params = null;
if (record && record.finished_duration && record.is_finished === 0) {
params = {
@ -249,7 +249,7 @@ const CoursePalyPage = () => {
</div>
</div>
<div className={styles["video-body"]}>
<div className={styles["video-title"]}>{hour.title}</div>
<div className={styles["video-title"]}>{hour?.title}</div>
<div className={styles["video-box"]}>
<div
className="play-box"

View File

@ -11,6 +11,29 @@ import studyTime from "../../assets/images/commen/icon-studytime.png";
import iconRoute from "../../assets/images/commen/icon-route.png";
import { studyTimeFormat } from "../../utils/index";
type StatsModel = {
learn_duration: number;
nun_required_course_count: number;
nun_required_finished_course_count: number;
nun_required_finished_hour_count: number;
nun_required_hour_count: number;
required_course_count: number;
required_finished_course_count: number;
required_finished_hour_count: number;
required_hour_count: number;
today_learn_duration: number;
};
type LearnCourseRecordsModel = {
[key: number]: CourseRecordModel;
};
type CategoryModel = {
key: number;
title: any;
children?: CategoryModel[];
};
const IndexPage = () => {
const navigate = useNavigate();
const result = new URLSearchParams(useLocation().search);
@ -18,8 +41,8 @@ const IndexPage = () => {
const [open, setOpen] = useState(false);
const [loading, setLoading] = useState<boolean>(false);
const [tabKey, setTabKey] = useState(Number(result.get("tab") || 0));
const [coursesList, setCoursesList] = useState<any>([]);
const [categories, setCategories] = useState<any>([]);
const [coursesList, setCoursesList] = useState<CourseModel[]>([]);
const [categories, setCategories] = useState<CategoryModel[]>([]);
const [categoryId, setCategoryId] = useState<number>(
Number(result.get("cid") || 0)
);
@ -27,9 +50,10 @@ const IndexPage = () => {
String(result.get("catName") || "所有分类")
);
const [selectKey, setSelectKey] = useState<any>([0]);
const [learnCourseRecords, setLearnCourseRecords] = useState<any>({});
const [learnCourseRecords, setLearnCourseRecords] =
useState<LearnCourseRecordsModel>({});
const [learnCourseHourCount, setLearnCourseHourCount] = useState<any>({});
const [stats, setStats] = useState<any>({});
const [stats, setStats] = useState<StatsModel | null>(null);
const currentDepId = useSelector(
(state: any) => state.loginUser.value.currentDepId
);
@ -62,14 +86,14 @@ const IndexPage = () => {
const getData = () => {
setLoading(true);
user.courses(currentDepId, categoryId).then((res: any) => {
const records = res.data.learn_course_records;
const records: LearnCourseRecordsModel = res.data.learn_course_records;
setStats(res.data.stats);
setLearnCourseRecords(records);
setLearnCourseHourCount(res.data.user_course_hour_count);
if (tabKey === 0) {
setCoursesList(res.data.courses);
} else if (tabKey === 1) {
const arr: any = [];
const arr: CourseModel[] = [];
res.data.courses.map((item: any) => {
if (item.is_required === 1) {
arr.push(item);
@ -77,7 +101,7 @@ const IndexPage = () => {
});
setCoursesList(arr);
} else if (tabKey === 2) {
const arr: any = [];
const arr: CourseModel[] = [];
res.data.courses.map((item: any) => {
if (item.is_required === 0) {
arr.push(item);
@ -85,7 +109,7 @@ const IndexPage = () => {
});
setCoursesList(arr);
} else if (tabKey === 3) {
const arr: any = [];
const arr: CourseModel[] = [];
res.data.courses.map((item: any) => {
if (records[item.id] && records[item.id].progress >= 10000) {
arr.push(item);
@ -93,7 +117,7 @@ const IndexPage = () => {
});
setCoursesList(arr);
} else if (tabKey === 4) {
const arr: any = [];
const arr: CourseModel[] = [];
res.data.courses.map((item: any) => {
if (
!records[item.id] ||
@ -112,7 +136,7 @@ const IndexPage = () => {
user.coursesCategories().then((res: any) => {
const categories = res.data.categories;
if (JSON.stringify(categories) !== "{}") {
const new_arr: any[] = checkArr(categories, 0);
const new_arr: CategoryModel[] = checkArr(categories, 0);
new_arr.unshift({
key: 0,
title: "所有分类",
@ -123,7 +147,7 @@ const IndexPage = () => {
};
const checkArr = (categories: any[], id: number) => {
const arr = [];
const arr: CategoryModel[] = [];
for (let i = 0; i < categories[id].length; i++) {
if (!categories[categories[id][i].id]) {
arr.push({
@ -133,7 +157,10 @@ const IndexPage = () => {
key: categories[id][i].id,
});
} else {
const new_arr: any[] = checkArr(categories, categories[id][i].id);
const new_arr: CategoryModel[] = checkArr(
categories,
categories[id][i].id
);
arr.push({
title: (
<span style={{ marginRight: 20 }}>{categories[id][i].name}</span>
@ -240,17 +267,17 @@ const IndexPage = () => {
<div className={styles["info"]}>
<div className={styles["info-item"]}>
<span></span>
<strong> {stats.required_finished_course_count || 0} </strong>
<span>/ {stats.required_course_count || 0}</span>
<strong> {stats?.required_finished_course_count || 0} </strong>
<span>/ {stats?.required_course_count || 0}</span>
</div>
{stats.nun_required_course_count > 0 && (
{stats && stats.nun_required_course_count > 0 && (
<div className={styles["info-item"]}>
<span></span>
<strong>
{" "}
{stats.nun_required_finished_course_count || 0}{" "}
{stats?.nun_required_finished_course_count || 0}{" "}
</strong>
<span>/ {stats.nun_required_course_count || 0}</span>
<span>/ {stats?.nun_required_course_count || 0}</span>
</div>
)}
</div>
@ -260,70 +287,76 @@ const IndexPage = () => {
<img className={styles["icon"]} src={studyTime} />
<span></span>
</div>
<div className={styles["info"]}>
<div className={styles["info-item"]}>
{studyTimeFormat(stats.today_learn_duration)[0] !== 0 && (
<>
<strong>
{" "}
{studyTimeFormat(stats.today_learn_duration)[0] || 0}{" "}
</strong>
</>
)}
{studyTimeFormat(stats.today_learn_duration)[1] !== 0 && (
<>
<strong>
{" "}
{studyTimeFormat(stats.today_learn_duration)[1] || 0}{" "}
</strong>
</>
)}
<strong>
{" "}
{studyTimeFormat(stats.today_learn_duration)[2] || 0}{" "}
</strong>
<strong>
{" "}
{studyTimeFormat(stats.today_learn_duration)[3] || 0}{" "}
</strong>
{stats ? (
<div className={styles["info"]}>
<div className={styles["info-item"]}>
{studyTimeFormat(stats.today_learn_duration)[0] !== 0 && (
<>
<strong>
{" "}
{studyTimeFormat(stats.today_learn_duration)[0] ||
0}{" "}
</strong>
</>
)}
{studyTimeFormat(stats.today_learn_duration)[1] !== 0 && (
<>
<strong>
{" "}
{studyTimeFormat(stats.today_learn_duration)[1] ||
0}{" "}
</strong>
</>
)}
<strong>
{" "}
{studyTimeFormat(stats.today_learn_duration)[2] || 0}{" "}
</strong>
<strong>
{" "}
{studyTimeFormat(stats.today_learn_duration)[3] || 0}{" "}
</strong>
</div>
<div className={styles["info-item"]}>
{studyTimeFormat(stats.learn_duration || 0)[0] !== 0 && (
<>
<strong>
{" "}
{studyTimeFormat(stats.learn_duration || 0)[0] ||
0}{" "}
</strong>
</>
)}
{studyTimeFormat(stats.learn_duration || 0)[1] !== 0 && (
<>
<strong>
{" "}
{studyTimeFormat(stats.learn_duration || 0)[1] ||
0}{" "}
</strong>
</>
)}
<strong>
{" "}
{studyTimeFormat(stats.learn_duration || 0)[2] || 0}{" "}
</strong>
<strong>
{" "}
{studyTimeFormat(stats.learn_duration || 0)[3] || 0}{" "}
</strong>
</div>
</div>
<div className={styles["info-item"]}>
{studyTimeFormat(stats.learn_duration || 0)[0] !== 0 && (
<>
<strong>
{" "}
{studyTimeFormat(stats.learn_duration || 0)[0] || 0}{" "}
</strong>
</>
)}
{studyTimeFormat(stats.learn_duration || 0)[1] !== 0 && (
<>
<strong>
{" "}
{studyTimeFormat(stats.learn_duration || 0)[1] || 0}{" "}
</strong>
</>
)}
<strong>
{" "}
{studyTimeFormat(stats.learn_duration || 0)[2] || 0}{" "}
</strong>
<strong>
{" "}
{studyTimeFormat(stats.learn_duration || 0)[3] || 0}{" "}
</strong>
</div>
</div>
) : null}
</div>
</div>
<div className={styles["tabs"]}>

View File

@ -7,12 +7,46 @@ import mediaIcon from "../../assets/images/commen/icon-medal.png";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
type LastLearnModel = {
[key: number]: LearnModel;
};
type LearnModel = {
course: LastCourseModel;
hour_record: HourRecordModel;
last_learn_hour: LastHourModel;
record: CourseRecordModel;
};
type LastCourseModel = {
charge?: number;
class_hour: number;
created_at?: string;
id: number;
is_required: number;
is_show?: number;
short_desc: string;
thumb: string;
title: string;
};
type LastHourModel = {
chapter_id: number;
course_id: number;
duration: number;
id: number;
rid: number;
sort: number;
title: string;
type: string;
};
const LatestLearnPage = () => {
document.title = "最近学习";
const navigate = useNavigate();
const systemConfig = useSelector((state: any) => state.systemConfig.value);
const [loading, setLoading] = useState<boolean>(false);
const [courses, setCourses] = useState<any>([]);
const [courses, setCourses] = useState<LastLearnModel[]>([]);
useEffect(() => {
getCourses();

53
src/playedu.d.ts vendored Normal file
View File

@ -0,0 +1,53 @@
declare global {
interface CourseModel {
charge: number;
class_hour: number;
created_at: string;
id: number;
is_required: number;
is_show: number;
short_desc: string;
thumb: string;
title: string;
}
interface HourModel {
chapter_id: number;
course_id: number;
duration: number;
id: number;
rid: number;
sort: number;
title: string;
type: string;
}
interface HourRecordModel {
course_id: number;
created_at: string;
finished_at?: string;
finished_duration: number;
hour_id: number;
id: number;
is_finished: number;
real_duration: number;
total_duration: number;
updated_at: string;
user_id: number;
}
interface CourseRecordModel {
course_id: number;
created_at: string;
finished_at?: string;
finished_count: number;
hour_count: number;
id: number;
is_finished: number;
progress: number;
updated_at: string;
user_id: number;
}
}
export {};