From 1caed4d11e19d6fa998e815123682773a90b8696 Mon Sep 17 00:00:00 2001 From: king <2229249788@qq.com> Date: Wed, 2 Aug 2023 11:21:53 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8E=86=E5=8F=B2=E8=AE=B0?= =?UTF-8?q?=E5=BD=95=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/user.ts | 4 +- src/components/button/myButton.module.scss | 1 + .../curHistory/curHistory.module.scss | 55 +++++++++------ src/pages/business/curHistory/curHistory.tsx | 69 +++++++++++-------- .../business/history/history.module.scss | 44 ++++++------ src/pages/business/history/history.tsx | 31 +++++---- types/curriculum.d.ts | 2 + 7 files changed, 118 insertions(+), 88 deletions(-) diff --git a/src/api/user.ts b/src/api/user.ts index ca244a8..18e6e6f 100644 --- a/src/api/user.ts +++ b/src/api/user.ts @@ -73,10 +73,10 @@ export const userApi = { record(category_id: number) { return request>(`/api/v1/course/${category_id}/record`, "GET") }, - courseRecord(course_id: number) { + courseRecord(course_id: string) { return request(`/api/v1/course/${course_id}/info`, "GET") }, - hourCourse(course_id: number, unique_ident: number) { + hourCourse(course_id: string, unique_ident: number) { return request(`/api/v1/course/${course_id}/info/${unique_ident}`, "GET") }, meetingSave(data: any) { diff --git a/src/components/button/myButton.module.scss b/src/components/button/myButton.module.scss index 1f4537c..51407b1 100644 --- a/src/components/button/myButton.module.scss +++ b/src/components/button/myButton.module.scss @@ -15,4 +15,5 @@ position: relative; height: 76rpx; line-height: 76rpx; + flex: 1; } diff --git a/src/pages/business/curHistory/curHistory.module.scss b/src/pages/business/curHistory/curHistory.module.scss index e9b12f6..b6ee4cd 100644 --- a/src/pages/business/curHistory/curHistory.module.scss +++ b/src/pages/business/curHistory/curHistory.module.scss @@ -1,4 +1,4 @@ -.page{ +.page { padding: 30px !important; box-sizing: border-box; } @@ -7,26 +7,39 @@ background: #fff; overflow: hidden; border-radius: 16px; - font-weight: bold; + font-weight: 500; + position: relative; +} + +.classHour { + background: rgba(#000, .6); + position: absolute; + top: 250rpx; + width: 100%; + font-size: 25rpx; + line-height: 50rpx; + text-align: center; + color: #fff; + font-weight: 100; + left: 0; +} - //View { - // color: #323635; - // padding: 24px; - //} +.title { + padding: 10rpx; + height: 100rpx; +} - .image { - width: 100%; - height: 288rpx; - display: block; - background: #ddd; - } +.image { + width: 100%; + height: 300rpx; + display: block; + background: #ddd; } .record { background: #fff; overflow: hidden; border-radius: 16px; - font-weight: bold; padding: 0 24px; margin-top: 30px; font-weight: 400; @@ -35,21 +48,19 @@ .recordItem { padding: 24px 0 38rpx; border-bottom: 1px solid #F5F8F7; + font-size: 26rpx; + color: #606563; + line-height: 1.75; +} - Progress { - margin-top: 16px; - color: #45D4A8; - } +.progress { + color: #45D4A8; } .hourRecord { - padding: 30px; + padding: 30rpx; max-height: 70vh; overflow: auto; - - & > View { - padding-bottom: env(safe-area-inset-bottom); - } } diff --git a/src/pages/business/curHistory/curHistory.tsx b/src/pages/business/curHistory/curHistory.tsx index c84ad6c..0cf3f52 100644 --- a/src/pages/business/curHistory/curHistory.tsx +++ b/src/pages/business/curHistory/curHistory.tsx @@ -8,7 +8,7 @@ import CustomPageContainer from "@/components/custom-page-container/custom-page- const CurHistory = () => { const [show, setShow] = useState(false) - const {course_id, name} = Taro.getCurrentInstance().preloadData as { course_id: number, name: string } + const {course_id} = Taro.getCurrentInstance().router?.params as unknown as { course_id: string } const [data, setData] = useState([]) const [course, setCourse] = useState(null) const [hours, setHours] = useState(null) @@ -16,7 +16,7 @@ const CurHistory = () => { const [time, setTime] = useState | null>(null) Taro.useLoad(() => { - Taro.setNavigationBarTitle({title: name}) + // Taro.setNavigationBarTitle({title: name}) userApi.courseRecord(course_id).then(res => { setData(Object.values(res.data)) setCourse(res.course) @@ -37,37 +37,48 @@ const CurHistory = () => { } function getTime(id: number): string { - const start = formatDateTime(new Date(time?.[id].start || 0), 'MM/dd HH:mm') - const end = formatDateTime(new Date(time?.[id].end || 0), 'MM/dd HH:mm') - return `${start} - ${end}` + const day = formatDateTime(new Date(time?.[id].start || 0), 'MM-dd') + const start = formatDateTime(new Date(time?.[id].start || 0), 'HH:mm:ss') + const end = formatDateTime(new Date(time?.[id].end || 0), 'HH:mm:ss') + return `${day} ${start} - ${end}` + } + + function getCurTime(startNow: string, endNow: string): string { + const day = formatDateTime(new Date(startNow), 'MM-dd') + const start = formatDateTime(new Date(startNow), 'HH:mm:ss') + const end = formatDateTime(new Date(endNow), 'HH:mm:ss') + return `${day} ${start} - ${end}` } function hourPercent(id: number, duration: number): number { const viewingTime = durations?.[id] || 0 - console.log(viewingTime,duration) return Number((viewingTime / duration * 100).toFixed(2)) } return ( - - {name} + + 共{course?.class_hour}节/已学{course?.finished_hour_count || 0}节 + {course?.title} - {data.map(d => setHour(d.unique_ident)} className={styles.recordItem}> - {formatDateTime(new Date(d.start_at), "MM/dd HH:ss")} - {formatDateTime(new Date(d.end_at), "MM/dd HH:ss")} + {data.map((d, index) => setHour(d.unique_ident)} className={styles.recordItem}> + 第{index + 1}次观看 + {getCurTime(d.start_at, d.end_at)} 观看视频：{formatMinute(d.duration)} )} @@ -75,27 +86,27 @@ const CurHistory = () => { setShow(false)}> + position='bottom' + onClickOverlay={() => setShow(false)}> {show && - { - hours?.map(d => - - {d.title} - {getTime(d.id)} - - + {hours?.map(d => + + {d.title} + {getTime(d.id)} + - ) - } + + )} } diff --git a/src/pages/business/history/history.module.scss b/src/pages/business/history/history.module.scss index 0cc5b97..cb18426 100644 --- a/src/pages/business/history/history.module.scss +++ b/src/pages/business/history/history.module.scss @@ -6,6 +6,12 @@ background: #fff; } +.image { + width: 100%; + height: 100%; + display: block; +} + .thumb { background: #ddd; width: 300rpx; @@ -13,23 +19,18 @@ border-radius: 8px; position: relative; overflow: hidden; +} - Image { - width: 100%; - height: 100%; - display: block; - } - - View { - width: 100%; - text-align: center; - height: 48rpx; - background: rgba(#000, .5); - color: #fff; - position: absolute; - left: 0; - bottom: 0; - } +.count { + width: 100%; + text-align: center; + height: 48rpx; + background: rgba(#000, .5); + color: #fff; + position: absolute; + left: 0; + bottom: 0; + font-size: 28rpx; } .text { @@ -39,12 +40,13 @@ flex-direction: column; margin-left: 20px; justify-content: space-between; - font-weight: bold; + font-weight: 500; word-break: break-all; +} - & > View:last-child { - font-weight: 100; - color: #909795; - } +.describe { + font-weight: 100; + color: #909795; + font-size: 24rpx; } diff --git a/src/pages/business/history/history.tsx b/src/pages/business/history/history.tsx index e014c8a..b0a85fd 100644 --- a/src/pages/business/history/history.tsx +++ b/src/pages/business/history/history.tsx @@ -1,4 +1,4 @@ -import {Image, View} from "@tarojs/components"; +import {Image, Text, View} from "@tarojs/components"; import CategoryTabs from "@/pages/business/history/components/CategoryTabs"; import styles from './history.module.scss' import Taro from "@tarojs/taro"; @@ -15,9 +15,8 @@ const History = () => { setData(Object.values(res)) } - function jump(course_id: number, name: string) { - Taro.preload({course_id, name}) - Taro.navigateTo({url: `/pages/business/curHistory/curHistory`}) + function jump(course_id: number) { + Taro.navigateTo({url: `/pages/business/curHistory/curHistory?course_id=${course_id}`}) } return ( @@ -25,16 +24,20 @@ const History = () => { - {data.length ? data.map((d, index) => jump(d.course_id, d.course.title)}> - - - 共{d.total_hour_count}节/已学{d.finished_count}节 - - - {d.course.title} - 观看{formatMinute(d.duration)} - - ) : } + {data.length ? data.map((d, index) => + jump(d.course_id)}> + + + 共{d.total_hour_count}节/已学{d.finished_count}节 + + + {d.course.title} + + 观看{formatMinute(d.duration)} + 学习进度：{(d.finished_count / d.total_hour_count * 100).toFixed(0)}% + + + ) : } ) diff --git a/types/curriculum.d.ts b/types/curriculum.d.ts index c896284..191eff1 100644 --- a/types/curriculum.d.ts +++ b/types/curriculum.d.ts @@ -13,6 +13,8 @@ interface Curriculum { thumb: string; /** 时间 */ course_duration: number + + [key:string]:any } /** 课程信息 */