样式 && 弹窗进入进出动画

.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
 

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',
       ]
     }
   ],

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 {
+.overlayEnter {
-  width: 100%;
+  animation: overlayEnter 300ms ease-in-out forwards;
-  background: #fff;
+}
-  position: absolute;
+
-  padding: 0 30px env(safe-area-inset-bottom);
+.overlayQuit {
-  box-sizing: border-box;
+  animation: overlayQuit 300ms ease-in-out forwards;
-  overflow: hidden;
+}
+
+@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;
+  }
 }

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<PageContainerProps> = (props) => {
   const [visible, setVisible] = useState(props.show)
 
   useEffect(() => {
-    if (props.show != visible) {
+    if (visible !== props) {
-      setVisible(props.show);
+      if (props.show) {
-
+        setVisible(props.show)
-      // todo 目前仅仅支持 after
+      } else {
-      if (!props.show) {
+        setTimeout(() => {
-        (props.onBeforeLeave as Function)?.();
+          setVisible(props.show)
-        (props.onAfterLeave as Function)?.();
+        }, 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<PageContainerProps> = (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 (
-    <View className={styles.customPageContainer}>
+    <View
-      <View className={styles.overlay} onClick={props.onClickOverlay}></View>
+      className={styles.customPageContainer}
-      <View className={styles.content} style={contentStyle()}>{props.children}</View>
+      style={`${visible ? 'display:flex' : 'display:none'}`}>
+      <View
+        className={`${styles.overlay} ${props.show ? styles.overlayEnter : styles.overlayQuit}`}
+        onClick={props.onClickOverlay}/>
+      <View
+        className={`${styles.content} ${childrenAnimation()}`}
+        style={contentStyle()}>
+        {props.children}
+      </View>
     </View>
   )
 }

src/pages/business/curHistory/curHistory.tsx

@@ -88,9 +88,8 @@ const CurHistory = () => {
         round
         position='bottom'
         onClickOverlay={() => setShow(false)}>
-        {show && <View className={styles.hourRecord}>
+        <View className={styles.hourRecord}>
-
+          {hours?.map(d => <View key={d.id}>
-          {hours?.map(d => <View>
               <View className={styles.recordItem}>
                 <View>{d.title}</View>
                 <View>{getTime(d.id)}</View>
@@ -107,7 +106,7 @@ const CurHistory = () => {
               </View>
             </View>
           )}
-        </View>}
+        </View>
       </CustomPageContainer>
     </View>
   )

src/pages/business/hourHistory/hourHistory.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '课时学习记录'
+})

src/pages/business/hourHistory/hourHistory.tsx

@@ -0,0 +1,10 @@
+import {View} from "@tarojs/components";
+import {FC} from "react";
+
+const HourHistory:FC = () => {
+  return (
+    <View>sd</View>
+  )
+}
+
+export default HourHistory

src/pages/business/videoInfo/components/catalogue.tsx

@@ -28,8 +28,7 @@ const Catalogue: FC<Props> = ({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<Props> = ({data, setHors, id}) => {
           <View>更多操作</View>
 
           <View className='flex justify-around'>
-            <View onClick={() => Taro.navigateTo({url: '/pages/business/history/history'})}>
+            <View onClick={() => Taro.navigateTo({url: '/pages/business/curHistory/curHistory?course_id=' + id})}>
               <Image src={curRecord} className='image'/>
               课程记录
             </View>

src/pages/business/videoInfo/components/hours.tsx

@@ -52,13 +52,11 @@ const Hours: FC<Props> = ({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<Props> = ({data, click, learn_hour_records}) => {
               <View className='font-26'>时长{formatMinute(d.duration)}</View>
               {complete(d.id) === 0 && <View className='font-26 text-danger'>考卷未完成</View>}
             </View>
-            {complete(d.id) == null && <Image className='lock' src={lock} mode='aspectFit'/>}
+            {
+              complete(data?.[index - 1]?.id) == null
+              && index !== 0
+              && <Image className='lock' src={lock} mode='aspectFit'/>
+            }
           </View>
         </View>)}
     </>

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<List[]>([
     {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 (
-    <View className='flex mt-3 justify-between flex-wrap'>
+    <View className='flex mt-3 justify-between flex-wrap' style={{padding: '0 10px'}}>
       {
         list.map(d => {
           return (
-            <View className={'flex justify-between ' + styles.timeBox} key={d.title}>
+            <View className={styles.timeBox} key={d.title}>
-              <View>
+              <View className={styles.timeBoxFlex}>
-                <View className='mb-2'>{d.title}</View>
+                <View>
-                <View className='text-muted font-26'>{d.time}</View>
+                  <View className='mb-2'>{d.title}</View>
+                  <View className='text-muted font-26'>{d.time}</View>
+                </View>
+                <Image src={d.src} mode='aspectFit' className={styles.timeImag}/>
               </View>
-              <Image src={d.src} mode='aspectFit' className={styles.timeImag}/>
             </View>
           )
         })

src/pages/my/my.module.scss

@@ -46,16 +46,19 @@ page {
   }
 }
 
-.ribbon {
+.timeBox {
-  padding: 20px;
+  width: 50%;
+  line-height: 1.7;
+  margin-bottom: 20px;
+  padding: 0 10rpx;
+  box-sizing: border-box;
 }
 
-.timeBox {
+.timeBoxFlex {
-  width: 40%;
   padding: 20px;
   border-radius: 20px;
-  line-height: 1.7;
+  display: flex;
-  margin-bottom: 20px;
+  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;
 }

src/pages/my/my.tsx

@@ -12,10 +12,8 @@ const My: FC = () => {
   return (
     <View className={styles.content} style={`paddingTop:${globalData.statusBarHeight}px`}>
       <Header/>
-      <View className={styles.ribbon}>
+      <Time/>
-        <Time/>
+      <Service/>
-        <Service/>
-      </View>
     </View>
   )
 }

src/static/css/module.scss

@@ -8,6 +8,9 @@ page,
   min-height: 100vh;
 }
 
+
+
+
 body {
   font-size: 32rpx;
 }