From 9d12bf1c0d4d750dabc6e92b388a437472db626d Mon Sep 17 00:00:00 2001 From: unknown <18119604035@163.com> Date: Fri, 4 Aug 2023 14:55:06 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=BB=93=E6=9E=84?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0interface?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/course/index.tsx | 112 +++++++++++++--- src/pages/course/video.tsx | 61 +++++++-- src/pages/index/index.tsx | 218 +++++++++++++++++++------------ src/pages/latest-learn/index.tsx | 63 ++++++++- 4 files changed, 341 insertions(+), 113 deletions(-) diff --git a/src/pages/course/index.tsx b/src/pages/course/index.tsx index 01a8549..c0f3cac 100644 --- a/src/pages/course/index.tsx +++ b/src/pages/course/index.tsx @@ -8,12 +8,24 @@ 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 CourseModel = { + charge: number; + class_hour: number; + created_at: string; + id: number; + is_required: number; + is_show: number; + short_desc: string; + thumb: string; + title: string; +}; + +type AttachModel = { id: number; course_id: number; rid: number; @@ -23,19 +35,76 @@ type attachModal = { url?: string; }; +type HoursModel = { + [key: number]: HourModel[]; +}; + +type HourModel = { + chapter_id: number; + course_id: number; + duration: number; + id: number; + rid: number; + sort: number; + title: string; + type: string; +}; + +type ChapterModel = { + course_id: number; + created_at: string; + id: number; + name: string; + sort: number; + updated_at: string; +}; + +type LearnHourRecordsModel = { + [key: number]: HourRecordsModel; +}; + +type HourRecordsModel = { + 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; +}; + +type LearnRecordModel = { + 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; +}; + const CoursePage = () => { const params = useParams(); const navigate = useNavigate(); const result = new URLSearchParams(useLocation().search); const [loading, setLoading] = useState(true); - const [course, setCourse] = useState({}); - const [chapters, setChapters] = useState([]); - const [hours, setHours] = useState({}); - const [learnRecord, setLearnRecord] = useState({}); - const [learnHourRecord, setLearnHourRecord] = useState({}); + const [course, setCourse] = useState(null); + const [chapters, setChapters] = useState([]); + const [hours, setHours] = useState({}); + const [learnRecord, setLearnRecord] = useState(null); + const [learnHourRecord, setLearnHourRecord] = useState( + {} + ); const [tabKey, setTabKey] = useState(Number(result.get("tab") || 1)); - const [attachments, setAttachments] = useState([]); - const [items, setItems] = useState([]); + const [attachments, setAttachments] = useState([]); + const [items, setItems] = useState([]); useEffect(() => { getDetail(); @@ -55,8 +124,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 +184,18 @@ const CoursePage = () => { height={90} style={{ borderRadius: 10 }} preview={false} - src={course.thumb} + src={course?.thumb} />
-
{course.title}
+
{course?.title}
- {course.is_required === 1 && ( + {course?.is_required === 1 && (
必修课
)} - {course.is_required === 0 && ( + {course?.is_required === 0 && (
选修课
)} - {learnRecord.progress / 100 >= 100 && ( + {learnRecord && learnRecord.progress / 100 >= 100 && (
{
- {JSON.stringify(learnRecord) === "{}" && + {learnRecord && + JSON.stringify(learnRecord) === "{}" && JSON.stringify(learnHourRecord) === "{}" && ( { format={(percent) => `${percent}%`} /> )} - {JSON.stringify(learnRecord) === "{}" && + {learnRecord && + JSON.stringify(learnRecord) === "{}" && JSON.stringify(learnHourRecord) !== "{}" && ( { format={(percent) => `${percent}%`} /> )} - {JSON.stringify(learnRecord) !== "{}" && + {learnRecord && + JSON.stringify(learnRecord) !== "{}" && JSON.stringify(learnHourRecord) !== "{}" && ( { /> )} - {course.short_desc && ( + {course?.short_desc && (
{course.short_desc}
)} diff --git a/src/pages/course/video.tsx b/src/pages/course/video.tsx index 5b7e2ee..2d03cf9 100644 --- a/src/pages/course/video.tsx +++ b/src/pages/course/video.tsx @@ -8,20 +8,57 @@ import { message } from "antd"; declare const window: any; +type HourModel = { + chapter_id: number; + course_id: number; + duration: number; + id: number; + rid: number; + sort: number; + title: string; + type: string; +}; + +type CourseModel = { + charge: number; + class_hour: number; + created_at: string; + id: number; + is_required: number; + is_show: number; + short_desc: string; + thumb: string; + title: string; +}; + +type UserHourRecordModel = { + 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; +}; + const CoursePalyPage = () => { const navigate = useNavigate(); const params = useParams(); const systemConfig = useSelector((state: any) => state.systemConfig.value); const user = useSelector((state: any) => state.loginUser.value.user); - const [playUrl, setPlayUrl] = useState(""); + const [playUrl, setPlayUrl] = useState(""); const [playDuration, setPlayDuration] = useState(0); - const [playendedStatus, setPlayendedStatus] = useState(false); + const [playendedStatus, setPlayendedStatus] = useState(false); const [lastSeeValue, setLastSeeValue] = useState({}); - const [course, setCourse] = useState({}); - const [hour, setHour] = useState({}); - const [loading, setLoading] = useState(false); - const [isLastpage, setIsLastpage] = useState(false); - const [totalHours, setTotalHours] = useState([]); + const [course, setCourse] = useState(null); + const [hour, setHour] = useState(null); + const [loading, setLoading] = useState(false); + const [isLastpage, setIsLastpage] = useState(false); + const [totalHours, setTotalHours] = useState([]); const [playingTime, setPlayingTime] = useState(0); const [watchedSeconds, setWatchedSeconds] = useState(0); const myRef = useRef(0); @@ -59,17 +96,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 +134,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: UserHourRecordModel = res.data.user_hour_record; let params = null; if (record && record.finished_duration && record.is_finished === 0) { params = { @@ -249,7 +286,7 @@ const CoursePalyPage = () => {
-
{hour.title}
+
{hour?.title}
{ const navigate = useNavigate(); const result = new URLSearchParams(useLocation().search); @@ -18,8 +66,8 @@ const IndexPage = () => { const [open, setOpen] = useState(false); const [loading, setLoading] = useState(false); const [tabKey, setTabKey] = useState(Number(result.get("tab") || 0)); - const [coursesList, setCoursesList] = useState([]); - const [categories, setCategories] = useState([]); + const [coursesList, setCoursesList] = useState([]); + const [categories, setCategories] = useState([]); const [categoryId, setCategoryId] = useState( Number(result.get("cid") || 0) ); @@ -27,9 +75,10 @@ const IndexPage = () => { String(result.get("catName") || "所有分类") ); const [selectKey, setSelectKey] = useState([0]); - const [learnCourseRecords, setLearnCourseRecords] = useState({}); + const [learnCourseRecords, setLearnCourseRecords] = + useState({}); const [learnCourseHourCount, setLearnCourseHourCount] = useState({}); - const [stats, setStats] = useState({}); + const [stats, setStats] = useState(null); const currentDepId = useSelector( (state: any) => state.loginUser.value.currentDepId ); @@ -62,14 +111,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 +126,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 +134,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 +142,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 +161,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 +172,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 +182,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: ( {categories[id][i].name} @@ -240,17 +292,17 @@ const IndexPage = () => {
必修课：已学完课程 - {stats.required_finished_course_count || 0} - / {stats.required_course_count || 0} + {stats?.required_finished_course_count || 0} + / {stats?.required_course_count || 0}
- {stats.nun_required_course_count > 0 && ( + {stats && stats.nun_required_course_count > 0 && (
选修课：已学完课程 {" "} - {stats.nun_required_finished_course_count || 0}{" "} + {stats?.nun_required_finished_course_count || 0}{" "} - / {stats.nun_required_course_count || 0} + / {stats?.nun_required_course_count || 0}
)}
@@ -260,70 +312,76 @@ const IndexPage = () => { 学习时长
-
-
- 今日： - {studyTimeFormat(stats.today_learn_duration)[0] !== 0 && ( - <> - - {" "} - {studyTimeFormat(stats.today_learn_duration)[0] || 0}{" "} - - 天 - - )} - {studyTimeFormat(stats.today_learn_duration)[1] !== 0 && ( - <> - - {" "} - {studyTimeFormat(stats.today_learn_duration)[1] || 0}{" "} - - 小时 - - )} - - {" "} - {studyTimeFormat(stats.today_learn_duration)[2] || 0}{" "} - - 分钟 - - {" "} - {studyTimeFormat(stats.today_learn_duration)[3] || 0}{" "} - - 秒 + {stats ? ( +
+
+ 今日： + {studyTimeFormat(stats.today_learn_duration)[0] !== 0 && ( + <> + + {" "} + {studyTimeFormat(stats.today_learn_duration)[0] || + 0}{" "} + + 天 + + )} + {studyTimeFormat(stats.today_learn_duration)[1] !== 0 && ( + <> + + {" "} + {studyTimeFormat(stats.today_learn_duration)[1] || + 0}{" "} + + 小时 + + )} + + {" "} + {studyTimeFormat(stats.today_learn_duration)[2] || 0}{" "} + + 分钟 + + {" "} + {studyTimeFormat(stats.today_learn_duration)[3] || 0}{" "} + + 秒 +
+
+ 累计： + {studyTimeFormat(stats.learn_duration || 0)[0] !== 0 && ( + <> + + {" "} + {studyTimeFormat(stats.learn_duration || 0)[0] || + 0}{" "} + + 天 + + )} + {studyTimeFormat(stats.learn_duration || 0)[1] !== 0 && ( + <> + + {" "} + {studyTimeFormat(stats.learn_duration || 0)[1] || + 0}{" "} + + 小时 + + )} + + {" "} + {studyTimeFormat(stats.learn_duration || 0)[2] || 0}{" "} + + 分钟 + + {" "} + {studyTimeFormat(stats.learn_duration || 0)[3] || 0}{" "} + + 秒 +
-
- 累计： - {studyTimeFormat(stats.learn_duration || 0)[0] !== 0 && ( - <> - - {" "} - {studyTimeFormat(stats.learn_duration || 0)[0] || 0}{" "} - - 天 - - )} - {studyTimeFormat(stats.learn_duration || 0)[1] !== 0 && ( - <> - - {" "} - {studyTimeFormat(stats.learn_duration || 0)[1] || 0}{" "} - - 小时 - - )} - - {" "} - {studyTimeFormat(stats.learn_duration || 0)[2] || 0}{" "} - - 分钟 - - {" "} - {studyTimeFormat(stats.learn_duration || 0)[3] || 0}{" "} - - 秒 -
-
+ ) : null}
diff --git a/src/pages/latest-learn/index.tsx b/src/pages/latest-learn/index.tsx index 8ebcc45..5648d56 100644 --- a/src/pages/latest-learn/index.tsx +++ b/src/pages/latest-learn/index.tsx @@ -7,12 +7,73 @@ 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: CourseModel; + hour_record: HourRecordModel; + last_learn_hour: LastHourModel; + record: RecordModel; +}; + +type CourseModel = { + charge?: number; + class_hour: number; + created_at?: string; + id: number; + is_required: number; + is_show?: number; + short_desc: string; + thumb: string; + title: string; +}; + +type 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; +}; + +type LastHourModel = { + chapter_id: number; + course_id: number; + duration: number; + id: number; + rid: number; + sort: number; + title: string; + type: string; +}; + +type RecordModel = { + 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; +}; + const LatestLearnPage = () => { document.title = "最近学习"; const navigate = useNavigate(); const systemConfig = useSelector((state: any) => state.systemConfig.value); const [loading, setLoading] = useState(false); - const [courses, setCourses] = useState([]); + const [courses, setCourses] = useState([]); useEffect(() => { getCourses(); From 3c34f8356fc6591f787d1b113011295bf4a4c2ff Mon Sep 17 00:00:00 2001 From: unknown <18119604035@163.com> Date: Fri, 4 Aug 2023 16:03:03 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=BB=93=E6=9E=84?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0interface?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/course/index.tsx | 56 +++----------------------------- src/pages/course/video.tsx | 39 +--------------------- src/pages/index/index.tsx | 27 +-------------- src/pages/latest-learn/index.tsx | 33 ++----------------- src/playedu.d.ts | 53 ++++++++++++++++++++++++++++++ 5 files changed, 62 insertions(+), 146 deletions(-) create mode 100644 src/playedu.d.ts diff --git a/src/pages/course/index.tsx b/src/pages/course/index.tsx index c0f3cac..12dcb0f 100644 --- a/src/pages/course/index.tsx +++ b/src/pages/course/index.tsx @@ -13,18 +13,6 @@ type TabModel = { label: string; }; -type CourseModel = { - charge: number; - class_hour: number; - created_at: string; - id: number; - is_required: number; - is_show: number; - short_desc: string; - thumb: string; - title: string; -}; - type AttachModel = { id: number; course_id: number; @@ -39,17 +27,6 @@ type HoursModel = { [key: number]: HourModel[]; }; -type HourModel = { - chapter_id: number; - course_id: number; - duration: number; - id: number; - rid: number; - sort: number; - title: string; - type: string; -}; - type ChapterModel = { course_id: number; created_at: string; @@ -60,34 +37,7 @@ type ChapterModel = { }; type LearnHourRecordsModel = { - [key: number]: HourRecordsModel; -}; - -type HourRecordsModel = { - 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; -}; - -type LearnRecordModel = { - 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; + [key: number]: HourRecordModel; }; const CoursePage = () => { @@ -98,7 +48,9 @@ const CoursePage = () => { const [course, setCourse] = useState(null); const [chapters, setChapters] = useState([]); const [hours, setHours] = useState({}); - const [learnRecord, setLearnRecord] = useState(null); + const [learnRecord, setLearnRecord] = useState( + null + ); const [learnHourRecord, setLearnHourRecord] = useState( {} ); diff --git a/src/pages/course/video.tsx b/src/pages/course/video.tsx index 2d03cf9..c49117b 100644 --- a/src/pages/course/video.tsx +++ b/src/pages/course/video.tsx @@ -8,43 +8,6 @@ import { message } from "antd"; declare const window: any; -type HourModel = { - chapter_id: number; - course_id: number; - duration: number; - id: number; - rid: number; - sort: number; - title: string; - type: string; -}; - -type CourseModel = { - charge: number; - class_hour: number; - created_at: string; - id: number; - is_required: number; - is_show: number; - short_desc: string; - thumb: string; - title: string; -}; - -type UserHourRecordModel = { - 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; -}; - const CoursePalyPage = () => { const navigate = useNavigate(); const params = useParams(); @@ -134,7 +97,7 @@ const CoursePalyPage = () => { setCourse(res.data.course); setHour(res.data.hour); document.title = res.data.hour.title; - let record: UserHourRecordModel = 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 = { diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index b66407f..1c9548e 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -11,18 +11,6 @@ import studyTime from "../../assets/images/commen/icon-studytime.png"; import iconRoute from "../../assets/images/commen/icon-route.png"; import { studyTimeFormat } from "../../utils/index"; -type CourseModel = { - id: number; - class_hour: number; - charge: number; - is_show: number; - is_required: number; - title: string; - thumb: string; - short_desc: string; - created_at: string; -}; - type StatsModel = { learn_duration: number; nun_required_course_count: number; @@ -37,20 +25,7 @@ type StatsModel = { }; type LearnCourseRecordsModel = { - [key: number]: CourseRecordsModel; -}; - -type CourseRecordsModel = { - course_id: number; - created_at: string; - finished_at: string | null; - finished_count: number; - hour_count: number; - id: number; - is_finished: number; - progress: number; - updated_at: string; - user_id: number; + [key: number]: CourseRecordModel; }; type CategoryModel = { diff --git a/src/pages/latest-learn/index.tsx b/src/pages/latest-learn/index.tsx index 5648d56..db3328b 100644 --- a/src/pages/latest-learn/index.tsx +++ b/src/pages/latest-learn/index.tsx @@ -12,13 +12,13 @@ type LastLearnModel = { }; type LearnModel = { - course: CourseModel; + course: LastCourseModel; hour_record: HourRecordModel; last_learn_hour: LastHourModel; - record: RecordModel; + record: CourseRecordModel; }; -type CourseModel = { +type LastCourseModel = { charge?: number; class_hour: number; created_at?: string; @@ -30,20 +30,6 @@ type CourseModel = { title: string; }; -type 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; -}; - type LastHourModel = { chapter_id: number; course_id: number; @@ -55,19 +41,6 @@ type LastHourModel = { type: string; }; -type RecordModel = { - 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; -}; - const LatestLearnPage = () => { document.title = "最近学习"; const navigate = useNavigate(); diff --git a/src/playedu.d.ts b/src/playedu.d.ts new file mode 100644 index 0000000..b69bf2c --- /dev/null +++ b/src/playedu.d.ts @@ -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 {};