动画 和记录时长

src/views/coursewarePlay/index.tsx

@@ -76,6 +76,13 @@ export default defineComponent({
       }
     }
     const handleInit = (type = 0) => {
+      postMessage({
+        api: 'courseLoading',
+        content: {
+          show: true,
+          type: 'fullscreen'
+        }
+      })
       //设置容器16:9
       setContainer()
       // 横屏
@@ -195,7 +202,7 @@ export default defineComponent({
             tabName: item.name,
             isLast: j === itemLength, // 当前知识点
             autoPlay: false, //加载完成是否自动播放
-            display: false,
+            display: false
           })
         }
       }
@@ -219,6 +226,15 @@ export default defineComponent({
       }
       // console.log('🚀 ~ list', list)
       data.itemList = list
+      setTimeout(() => {
+        postMessage({
+          api: 'courseLoading',
+          content: {
+            show: false,
+            type: 'fullscreen'
+          }
+        })
+      }, 300)
     }
     const getDetail = async () => {
       try {
@@ -251,7 +267,7 @@ export default defineComponent({
     const iframeHandle = (ev: MessageEvent) => {
       if (ev.data?.api === 'headerTogge') {
         // console.log("🚀 ~ ev.data", ev.data)
-        activeData.model = ev.data.show || (ev.data.playState == "play" ? true : false)
+        activeData.model = ev.data.show || (ev.data.playState == 'play' ? true : false)
       }
     }
 
@@ -262,7 +278,7 @@ export default defineComponent({
     })
     // 返回
     const goback = () => {
-      if (route.query.source == 'my-course'){
+      if (route.query.source == 'my-course') {
         router.back()
       }
       postMessage({ api: 'goBack' })
@@ -348,7 +364,6 @@ export default defineComponent({
           })
         }
       }
-      
     }
     // 上一个知识点, 下一个知识点
     const handlePreAndNext = (type: string) => {
@@ -693,7 +708,7 @@ export default defineComponent({
             />
           </Popup>
         </div>
-        {/* <PlayRecordTime list={data.itemList} /> */}
+        <PlayRecordTime list={data.itemList} />
       </div>
     )
   }

src/views/coursewarePlay/playRecordTime.tsx

@@ -1,7 +1,8 @@
 import request from '@/helpers/request'
 import { getSecondRPM } from '@/helpers/utils'
 import { state } from '@/state'
-import { computed, defineComponent, onMounted, onUnmounted, reactive, ref } from 'vue'
+import { usePageVisibility } from '@vant/use'
+import { computed, defineComponent, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import styles from './index.module.less'
 
@@ -14,13 +15,27 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const pageVisibility = usePageVisibility()
+
+    watch(pageVisibility, (value) => {
+      console.log("🚀 ~ value", value)
+      if (value == 'hidden') {
+        clearInterval(timerRecord.value)
+        handleRecord()
+      } else {
+        // 页面显示
+        handleStartInterval()
+      }
+    })
     const route = useRoute()
     const saveModel = reactive({
-      startTime: Date.now(),
-      timer: null as any,
-      totalTime: 0,
-      loading: false
+      /**当前时长 */
+      currentTime: 0,
+      /**记录的开始时间 */
+      startTime: 0,
+      timer: null as any
     })
+    /** 建议学习总时长 */
     const total = computed(() => {
       const _total = props.list.reduce(
         (_total: number, item: any) => _total + item.adviseStudyTimeSecond,
@@ -29,42 +44,41 @@ export default defineComponent({
       return _total
     })
 
-    const handleRecord = async () => {
-      if (saveModel.loading) return
-      saveModel.loading = true
-      try {
-        const res: any = await request.post(
-          `${state.platformApi}/courseSchedule/coursewarePlayTime`,
-          {
-            params: {
-              courseScheduleId: route.query.courseId,
-              playTime: saveModel.totalTime
-            }
-          }
-        )
-      } catch (error) {}
+    const handleRecord = () => {
+      saveModel.currentTime++
+      const playTime = saveModel.currentTime - saveModel.startTime
+      // 1分钟记录1次
+      if (playTime >= 60) {
+        saveModel.startTime = saveModel.currentTime
+        request.post(`${state.platformApi}/courseSchedule/coursewarePlayTime`, {
+          params: {
+            courseScheduleId: route.query.courseId,
+            playTime
+          },
+          hideLoading: true
+        })
+      }
     }
     const timerRecord = ref()
+    const handleStartInterval = () => {
+      clearInterval(timerRecord.value)
+      timerRecord.value = setInterval(handleRecord, 1000)
+    }
     onMounted(() => {
-      timerRecord.value = setInterval(() => {
-        if (saveModel.totalTime > total.value){
-          handleRecord()
-        }
-        saveModel.totalTime = Math.floor((Date.now() - saveModel.startTime) / 1000)
-      }, 1000)
+      handleStartInterval()
     })
     onUnmounted(() => {
       clearInterval(timerRecord.value)
     })
     return () => (
-      <div class={styles.playRecordTimeWrap}>
-        <div
-          class={styles.playRecordTime}
-          style={{ display: saveModel.totalTime > total.value ? 'none' : '' }}
-        >
+      <div
+        class={styles.playRecordTimeWrap}
+        style={{ display: saveModel.currentTime > total.value ? 'none' : '' }}
+      >
+        <div class={styles.playRecordTime}>
           <div class={styles.timeLoad}></div>
           <div>
-            {getSecondRPM(saveModel.totalTime)} / {getSecondRPM(total.value)}
+            {getSecondRPM(saveModel.currentTime)} / {getSecondRPM(total.value)}
           </div>
         </div>
       </div>