课件播放计时

src/views/coursewarePlay/index.module.less

@@ -36,8 +36,8 @@
   align-items: center;
   z-index: 10;
   padding: 4px 10px 4px 15px;
-  :global{
-    .van-icon{
+  :global {
+    .van-icon {
       margin-right: 8px;
     }
   }
@@ -214,14 +214,48 @@
   }
 }
 
-.loadWrap{
+.loadWrap {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(45deg, #21232A, #111218);
+  background: linear-gradient(45deg, #21232a, #111218);
   display: flex;
   justify-content: center;
   align-items: center;
-}
+}
+
+.playRecordTime {
+  position: fixed;
+  top: 33px;
+  left: 16px;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 20px;
+  font-size: 6px;
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  color: #fff;
+  .timeLoad {
+    width: 5px;
+    height: 5px;
+    background: #ff4e19;
+    border: .5px solid #ffffff;
+    border-radius: 50%;
+    margin-right: 3px;
+    animation: loadFade 1s ease-in-out infinite;
+  }
+}
+
+@keyframes loadFade {
+  0%{
+    opacity: 0;
+  }
+  50%{
+    opacity: .5;
+  }
+  100%{
+    opacity: 1;
+  }
+}

src/views/coursewarePlay/index.tsx

@@ -41,6 +41,7 @@ import { browser, getSecondRPM } from '@/helpers/utils'
 import { Vue3Lottie } from 'vue3-lottie'
 import playLoadData from './datas/data.json'
 import { usePageVisibility } from '@vant/use'
+import PlayRecordTime from './playRecordTime'
 
 export default defineComponent({
   name: 'CoursewarePlay',
@@ -692,6 +693,7 @@ export default defineComponent({
             />
           </Popup>
         </div>
+        <PlayRecordTime list={data.itemList} />
       </div>
     )
   }

src/views/coursewarePlay/playRecordTime.tsx

@@ -0,0 +1,75 @@
+import request from '@/helpers/request'
+import { getSecondRPM } from '@/helpers/utils'
+import { state } from '@/state'
+import { computed, defineComponent, onMounted, onUnmounted, reactive, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'playRecordTime',
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(props) {
+    const route = useRoute()
+    const saveModel = reactive({
+      startTime: Date.now(),
+      timer: null as any,
+      totalTime: 0,
+      loading: false
+    })
+    const total = computed(() => {
+      const _total = props.list.reduce(
+        (_total: number, item: any) => _total + item.adviseStudyTimeSecond,
+        0
+      )
+      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 timerRecord = ref()
+    onMounted(() => {
+      timerRecord.value = setInterval(() => {
+        // console.log('1')
+        if (saveModel.totalTime > total.value){
+          handleRecord()
+        }
+        saveModel.totalTime = Math.floor((Date.now() - saveModel.startTime) / 1000)
+      }, 1000)
+      // saveModel.timer = setInterval(() => handleRecord(), 2 * 1000)
+    })
+    onUnmounted(() => {
+      clearInterval(timerRecord.value)
+    })
+    return () => (
+      <>
+        <div
+          class={styles.playRecordTime}
+          style={{ display: saveModel.totalTime > total.value ? 'none' : '' }}
+        >
+          <div class={styles.timeLoad}></div>
+          <div>
+            {getSecondRPM(saveModel.totalTime)} / {getSecondRPM(total.value)}
+          </div>
+        </div>
+      </>
+    )
+  }
+})