From ed9599ac8bb7b709f2b90db0aab662f9933a16be Mon Sep 17 00:00:00 2001 From: king <2229249788@qq.com> Date: Thu, 3 Aug 2023 14:55:45 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=20&&=20=E5=BC=B9=E7=AA=97?= =?UTF-8?q?=E8=BF=9B=E5=85=A5=E8=BF=9B=E5=87=BA=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 3 +- src/app.config.ts | 2 + .../custom-page-container.module.scss | 81 +++++++++++++++++-- .../custom-page-container.tsx | 52 ++++++++---- src/pages/business/curHistory/curHistory.tsx | 7 +- .../hourHistory/hourHistory.config.ts | 3 + .../business/hourHistory/hourHistory.tsx | 10 +++ .../videoInfo/components/catalogue.tsx | 5 +- .../business/videoInfo/components/hours.tsx | 8 +- src/pages/my/components/header/time.tsx | 19 +++-- src/pages/my/my.module.scss | 18 +++-- src/pages/my/my.tsx | 6 +- src/static/css/module.scss | 3 + 13 files changed, 163 insertions(+), 54 deletions(-) create mode 100644 src/pages/business/hourHistory/hourHistory.config.ts create mode 100644 src/pages/business/hourHistory/hourHistory.tsx diff --git a/.env b/.env index e180139..3bfcb50 100644 --- a/.env +++ b/.env @@ -1,3 +1,4 @@ -TARO_APP_API=https://yjx.dev.yaojiankang.top +#TARO_APP_API=https://yjx.dev.yaojiankang.top +TARO_APP_API=https://playedu.yaojiankang.top TARO_APP_LGOIN=true diff --git a/src/app.config.ts b/src/app.config.ts index 063735c..b12d73d 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -49,6 +49,7 @@ export default defineAppConfig({ 'test/test', 'history/history', 'curHistory/curHistory', + 'hourHistory/hourHistory', ] }, { @@ -62,6 +63,7 @@ export default defineAppConfig({ 'addCur/addCur', 'spotMeeting/spotMeeting', 'selectDep/selectDep', + 'meetings/meetings', ] } ], diff --git a/src/components/custom-page-container/custom-page-container.module.scss b/src/components/custom-page-container/custom-page-container.module.scss index b7a6155..21d5ea3 100644 --- a/src/components/custom-page-container/custom-page-container.module.scss +++ b/src/components/custom-page-container/custom-page-container.module.scss @@ -10,8 +10,17 @@ justify-content: center; } +.content { + width: 100%; + background: #fff; + position: absolute; + box-sizing: border-box; + overflow: hidden; + padding: 0 30px 0; +} + + .overlay { - background: rgba(#000, .75); position: absolute; top: 0; bottom: 0; @@ -19,11 +28,67 @@ right: 0; } -.content { - width: 100%; - background: #fff; - position: absolute; - padding: 0 30px env(safe-area-inset-bottom); - box-sizing: border-box; - overflow: hidden; +.overlayEnter { + animation: overlayEnter 300ms ease-in-out forwards; +} + +.overlayQuit { + animation: overlayQuit 300ms ease-in-out forwards; +} + +@keyframes overlayQuit { + to { + background: rgba(#000, 0); + } + from { + background: rgba(#000, .75); + } +} + +@keyframes overlayEnter { + from { + background: rgba(#000, 0); + } + to { + background: rgba(#000, .75); + } +} + + +.childrenButton { + animation: childrenButton 300ms ease-in-out forwards; +} + +.childrenButtonQuit { + animation: childrenButton 1000ms ease-in-out forwards alternate-reverse; +} + +@keyframes childrenButton { + from { + max-height: 0; + padding: 0 30px 0 !important; + } + to { + max-height: 100vh; + padding: 0 30px env(safe-area-inset-bottom); + } +} + +.childrenCenter { + animation: childrenCenter 300ms ease-in-out forwards; +} + +.childrenCenterQuit { + animation: childrenCenter 800ms forwards alternate-reverse; +} + +@keyframes childrenCenter { + from { + transform: scale(0); + padding: 0; + } + to { + transform: scale(1); + padding: 0 30px; + } } diff --git a/src/components/custom-page-container/custom-page-container.tsx b/src/components/custom-page-container/custom-page-container.tsx index f82f195..4bd5c32 100644 --- a/src/components/custom-page-container/custom-page-container.tsx +++ b/src/components/custom-page-container/custom-page-container.tsx @@ -1,27 +1,29 @@ import {PageContainer, PageContainerProps, View} from "@tarojs/components"; -import {CSSProperties, FC, useEffect, useState} from "react"; +import {CSSProperties, FC, useCallback, useEffect, useState} from "react"; import styles from './custom-page-container.module.scss' const PageContainerInner: FC = (props) => { const [visible, setVisible] = useState(props.show) useEffect(() => { - if (props.show != visible) { - setVisible(props.show); - - // todo 目前仅仅支持 after - if (!props.show) { - (props.onBeforeLeave as Function)?.(); - (props.onAfterLeave as Function)?.(); + if (visible !== props) { + if (props.show) { + setVisible(props.show) + } else { + setTimeout(() => { + setVisible(props.show) + }, 300) } } + + if (!props.show) { + (props.onBeforeLeave as Function)?.(); + (props.onAfterLeave as Function)?.(); + } }, [props.show]) - if (!props.show) { - return null - } - const contentStyle = (): CSSProperties => { + const contentStyle = useCallback((): CSSProperties => { let style: CSSProperties = {} switch (props.position) { @@ -41,12 +43,30 @@ const PageContainerInner: FC = (props) => { } return style - } + }, []) + + const childrenAnimation = useCallback(() => { + switch (props.position) { + case "top": + case 'bottom': + return props.show ? styles.childrenButton : styles.childrenButtonQuit + case 'center': + return props.show ? styles.childrenCenter : styles.childrenCenterQuit + } + }, [props.show]) return ( - - - {props.children} + + + + {props.children} + ) } diff --git a/src/pages/business/curHistory/curHistory.tsx b/src/pages/business/curHistory/curHistory.tsx index 0cf3f52..f66c378 100644 --- a/src/pages/business/curHistory/curHistory.tsx +++ b/src/pages/business/curHistory/curHistory.tsx @@ -88,9 +88,8 @@ const CurHistory = () => { round position='bottom' onClickOverlay={() => setShow(false)}> - {show && - - {hours?.map(d => + + {hours?.map(d => {d.title} {getTime(d.id)} @@ -107,7 +106,7 @@ const CurHistory = () => { )} - } + ) diff --git a/src/pages/business/hourHistory/hourHistory.config.ts b/src/pages/business/hourHistory/hourHistory.config.ts new file mode 100644 index 0000000..d1f90d6 --- /dev/null +++ b/src/pages/business/hourHistory/hourHistory.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: '课时学习记录' +}) diff --git a/src/pages/business/hourHistory/hourHistory.tsx b/src/pages/business/hourHistory/hourHistory.tsx new file mode 100644 index 0000000..7e4021d --- /dev/null +++ b/src/pages/business/hourHistory/hourHistory.tsx @@ -0,0 +1,10 @@ +import {View} from "@tarojs/components"; +import {FC} from "react"; + +const HourHistory:FC = () => { + return ( + sd + ) +} + +export default HourHistory diff --git a/src/pages/business/videoInfo/components/catalogue.tsx b/src/pages/business/videoInfo/components/catalogue.tsx index 65e211a..e8f964f 100644 --- a/src/pages/business/videoInfo/components/catalogue.tsx +++ b/src/pages/business/videoInfo/components/catalogue.tsx @@ -28,8 +28,7 @@ const Catalogue: FC = ({data, setHors, id}) => { const [show, setShow] = useState(false) function jumCurHistory() { - Taro.preload({course_id: id, name: data?.course.title}) - Taro.navigateTo({url: `/pages/business/curHistory/curHistory`}) + // Taro.navigateTo({url: `/pages/business/curHistory/curHistory`}) } function tabChange({tab}: OnChangOpt) { @@ -130,7 +129,7 @@ const Catalogue: FC = ({data, setHors, id}) => { 更多操作 - Taro.navigateTo({url: '/pages/business/history/history'})}> + Taro.navigateTo({url: '/pages/business/curHistory/curHistory?course_id=' + id})}> 课程记录 diff --git a/src/pages/business/videoInfo/components/hours.tsx b/src/pages/business/videoInfo/components/hours.tsx index 768e5e2..ea27b1f 100644 --- a/src/pages/business/videoInfo/components/hours.tsx +++ b/src/pages/business/videoInfo/components/hours.tsx @@ -52,13 +52,11 @@ const Hours: FC = ({data, click, learn_hour_records}) => { return; } - if (upId && complete(upId) !== 1) { Taro.showModal({title: '请完成上一个视频'}) return } - click(is_complete !== undefined, id) } @@ -75,7 +73,11 @@ const Hours: FC = ({data, click, learn_hour_records}) => { 时长{formatMinute(d.duration)} {complete(d.id) === 0 && 考卷未完成} - {complete(d.id) == null && } + { + complete(data?.[index - 1]?.id) == null + && index !== 0 + && + } )} diff --git a/src/pages/my/components/header/time.tsx b/src/pages/my/components/header/time.tsx index 75cdf50..7973587 100644 --- a/src/pages/my/components/header/time.tsx +++ b/src/pages/my/components/header/time.tsx @@ -17,7 +17,7 @@ interface List { src: string } -const Time:FC = () => { +const Time: FC = () => { const [list, setList] = useState([ {title: '今日时长', time: '00:00', src: time1}, {title: '累计时长', time: '00:00', src: time2}, @@ -39,21 +39,24 @@ const Time:FC = () => { oldList[4].time = stats.required_finished_course_count + stats.nun_required_finished_course_count oldList[5].time = stats.total_course_count - (stats.required_finished_course_count + stats.nun_required_finished_course_count) setList(oldList) - } catch (e) {} + } catch (e) { + } }) return ( - + { list.map(d => { return ( - - - {d.title} - {d.time} + + + + {d.title} + {d.time} + + - ) }) diff --git a/src/pages/my/my.module.scss b/src/pages/my/my.module.scss index 7a3824a..648a4d9 100644 --- a/src/pages/my/my.module.scss +++ b/src/pages/my/my.module.scss @@ -46,16 +46,19 @@ page { } } -.ribbon { - padding: 20px; +.timeBox { + width: 50%; + line-height: 1.7; + margin-bottom: 20px; + padding: 0 10rpx; + box-sizing: border-box; } -.timeBox { - width: 40%; +.timeBoxFlex { padding: 20px; border-radius: 20px; - line-height: 1.7; - margin-bottom: 20px; + display: flex; + justify-content: space-between; background: #fff; } @@ -83,5 +86,6 @@ page { .tool { background: #fff; border-radius: 20px; - padding:30rpx 20px; + padding: 30rpx 20px; + margin: 20rpx; } diff --git a/src/pages/my/my.tsx b/src/pages/my/my.tsx index 9c409b8..a784b3a 100644 --- a/src/pages/my/my.tsx +++ b/src/pages/my/my.tsx @@ -12,10 +12,8 @@ const My: FC = () => { return (
- - +