更新打包

src/student/pre-register-active/index.tsx

@@ -146,13 +146,13 @@ export default defineComponent({
         }
 
         // 判断是否获取微信code码
-        // if (!forms.code) return
+        if (!forms.code) return
 
-        // if (data.status !== 'PRE_REGISTER') {
-        //   showToast('家长会调查问卷已结束')
-        //   forms.applyStatus = true
-        //   return
-        // }
+        if (data.status !== 'PRE_REGISTER') {
+          showToast('家长会调查问卷已结束')
+          forms.applyStatus = true
+          return
+        }
         const recordAdd = await request.post('/api-student/open/studentBrowseRecord/add', {
           data: {
             orchestraId: forms.orchestraId,

src/student/pre-register-active/video.module.less

@@ -95,6 +95,65 @@
   }
 }
 
+.videoCount {
+  position: relative;
+  margin-top: 5px;
+  background: url('./images/video-count.png') no-repeat center;
+  background-size: contain;
+  min-height: 82px;
+  box-sizing: content-box;
+  padding: 60px 36px 0;
+
+  &::before,
+  &::after {
+    content: ' ';
+    position: absolute;
+    top: -27px;
+    width: 11px;
+    height: 44px;
+    background: url('./images/icon-connect.png') no-repeat center;
+    background-size: contain;
+  }
+
+  &::before {
+    left: 34px;
+  }
+
+  &::after {
+    right: 34px;
+  }
+
+
+  .videoCountContent {
+    overflow-x: auto;
+    white-space: nowrap;
+
+    span {
+      font-size: 13px;
+      color: #000000;
+      line-height: 18px;
+      background: #E8EBEE;
+      border-radius: 14px;
+      padding: 4px 7px;
+      display: inline-block;
+
+      &.active {
+        font-weight: 600;
+        color: #FFFFFF;
+        background: #198CFE;
+      }
+
+      &+span {
+        margin-left: 8px;
+      }
+    }
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
 .loadingVideo {
   position: absolute;
   top: 0;

src/student/pre-register-active/video.tsx

@@ -25,7 +25,7 @@ export default defineComponent({
       coverImg: '',
       introductionVideo: '',
       introductionVideoTime: 0, // 视频总时长
-      videoBrowsePoint: 0,
+      videoBrowsePoint: 0, // 视频最后观看点
       saveId: route.query.saveId,
       orchestraId: route.query.id,
       openId: route.query.openId || openId,
@@ -33,6 +33,10 @@ export default defineComponent({
       player: null as any,
       playerSpeed: 1,
       intervalFnRef: null as any,
+      videoDetails: [] as any, // 节点列表
+      pointVideo: {} as any, // 需要处理有效的时间段
+      pointVideoTime: 0, // 有效时长
+      videoSelectId: null, // 选中的编号
       isPageHide: false // 处理页面返回没有刷新的问题
     })
 
@@ -62,7 +66,25 @@ export default defineComponent({
         }
       }
       res.push(prev)
-      return res
+
+      // 格式化有效时间
+      const effective: any = []
+      const startNode = forms.pointVideo.startNode
+      const endNode = forms.pointVideo.endNode
+      res.forEach((item: any) => {
+        // 开始时间大于 设置时间
+        if (item[0] >= startNode && item[1] <= endNode) {
+          effective.push(item)
+        }
+        if (item[0] >= startNode && item[1] <= startNode && item[1] >= endNode) {
+          effective.push([item[0], endNode])
+        }
+        if (item[0] < startNode && item[1] > startNode && item[1] < endNode) {
+          effective.push(startNode, item[1])
+        }
+      })
+      console.log(effective, 'effective', res)
+      return effective
     }
 
     /**
@@ -72,6 +94,7 @@ export default defineComponent({
      */
     const formatTimer = (intervals: any[]) => {
       const afterIntervals = formatEffectiveTime(intervals)
+      console.log(afterIntervals, 'afterIntervals')
       let time = 0
       afterIntervals.forEach((t: any) => {
         time += t[1] - t[0]
@@ -79,6 +102,14 @@ export default defineComponent({
       return time
     }
 
+    const checkVideoDetails = (time: number) => {
+      forms.videoDetails.forEach((item: any) => {
+        if (item.startNode <= time && time <= item.endNode) {
+          forms.videoSelectId = item.id
+        }
+      })
+    }
+
     /**
      * 视屏累计时长
      * 1、视屏开始播放时-开始计时
@@ -117,6 +148,14 @@ export default defineComponent({
           iosNative: true
         }
       }
+      const times: any = []
+      forms.videoDetails.forEach((item: any) => {
+        times.push({
+          time: item.startNode,
+          label: item.desc
+        })
+      })
+      params.markers = { enabled: true, points: times }
 
       forms.player = new Plyr('#register-video', params)
 
@@ -124,6 +163,8 @@ export default defineComponent({
         console.log('loadedmetadata')
         forms.loading = false
         forms.player.currentTime = forms.videoBrowsePoint
+
+        checkVideoDetails(forms.player.currentTime)
       })
 
       // 速度变化时
@@ -145,14 +186,15 @@ export default defineComponent({
 
       // 正在搜索中
       forms.player.on('waiting', () => {
-        console.log('waiting pause')
+        // console.log('waiting pause')
         videoIntervalRef.isActive.value && videoIntervalRef.pause()
       })
 
       // 如何视频在缓存不会触发
       forms.player.on('timeupdate', () => {
         // console.log('timeupdate', forms.player.currentTime)
-
+        // 时间变化时更新每一段的状态
+        checkVideoDetails(forms.player.currentTime)
         // 判断视频计时器是否暂停，如果暂停则恢复
         // 添加 「forms.player.playing」 是由会跳转到上次播放时间，会触发些方法
         if (
@@ -259,15 +301,15 @@ export default defineComponent({
         const time = moreTime.value.length > 0 ? formatTimer(moreTime.value) : 0
         // const videoCountTime = videoIntervalRef?.counter.value
         // 判断如何视屏播放时间大于视屏播放有效时间则说明数据有问题，进行重置数据
-        const rate = Math.floor((time / Math.floor(forms.introductionVideoTime)) * 100)
+        const rate = Math.floor((time / Math.floor(forms.pointVideoTime)) * 100)
         // console.log('videoIntervalRef?.counter.value', videoIntervalRef?.counter.value)
         await request.post('/api-student/open/studentBrowseRecord/updateStat', {
           data: {
             id: forms.saveId,
             pageBrowseTime, // 固定10秒
             videoBrowseData: JSON.stringify(videoBrowseData), // 视屏播放数据
-            videoBrowseDataTime: time || 0, // 视屏观看百分比时长
-            videoBrowsePercentage: rate || 0, // 视频观看百分比
+            videoBrowseDataTime: time || 0, // 有效的视频观看时长
+            videoBrowsePercentage: rate || 0, // 有效的视频观看时长百分比
             videoBrowseTime: videoIntervalRef?.counter.value, // 视频观看时长
             videoBrowsePoint: Math.floor(forms.player.currentTime || 0) // 视频最后观看点 - 向下取整
           }
@@ -331,6 +373,20 @@ export default defineComponent({
         forms.coverImg = data.coverImg
         moreTime.value = data.videoBrowseData ? JSON.parse(data.videoBrowseData) : []
 
+        const videoDetails = data.videoDetails || []
+        videoDetails.forEach((video: any) => {
+          forms.videoDetails.push({
+            startNode: video.startNode,
+            endNode: video.endNode,
+            desc: video.desc,
+            id: video.id
+          })
+          if (video.pointFlag) {
+            forms.pointVideo = video
+            forms.pointVideoTime = video.endNode - video.startNode
+          }
+        })
+
         _init()
         // 间隔多少时间同步数据
         forms.intervalFnRef = useIntervalFn(async () => {
@@ -411,6 +467,20 @@ export default defineComponent({
             )}
           </div>
         </div>
+        <div class={styles.videoCount}>
+          <div class={styles.videoCountContent}>
+            {forms.videoDetails.map((item: any) => (
+              <span
+                class={[item.id === forms.videoSelectId ? styles.active : '']}
+                onClick={() => {
+                  forms.player.currentTime = item.startNode
+                }}
+              >
+                {item.desc}
+              </span>
+            ))}
+          </div>
+        </div>
         <div class={styles.messageContainer}>
           <div class={styles.messageContent}>
             <p>家长您好！</p>

src/views/courseware-record/index.tsx

@@ -319,8 +319,9 @@ export default defineComponent({
                 onClick={() => {
                   dropdownItemRef.value?.toggle()
                   nextTick(() => {
-                    ;(document.querySelectorAll('.van-dropdown-item--down')[0] as any).style.top =
-                      'var(--van-nav-bar-height)'
+                    ;(
+                      document.querySelectorAll('.van-dropdown-item--down')[0] as any
+                    ).style.top = `calc(var(--van-nav-bar-height) + ${globalState.navBarHeight}px`
                   })
                 }}
               >

src/views/exercise-record/index.tsx

@@ -328,8 +328,9 @@ export default defineComponent({
                   // console.log(dropdownItemRef.value, dropdownMenuRef.value)
                   dropdownItemRef.value?.toggle()
                   nextTick(() => {
-                    ;(document.querySelectorAll('.van-dropdown-item--down')[0] as any).style.top =
-                      'var(--van-nav-bar-height)'
+                    ;(
+                      document.querySelectorAll('.van-dropdown-item--down')[0] as any
+                    ).style.top = `calc(var(--van-nav-bar-height) + ${globalState.navBarHeight}px`
                   })
                 }}
               >