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] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=BB=93=E6=9E=84=E6=B7=BB?= =?UTF-8?q?=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();