skyblued 2 vuotta sitten
vanhempi
commit
88dc66ad05
2 muutettua tiedostoa jossa 58 lisäystä ja 40 poistoa
  1. 57 40
      src/views/coursewarePlay/index.tsx
  2. 1 0
      src/views/exercise-after-class/index.tsx

+ 57 - 40
src/views/coursewarePlay/index.tsx

@@ -93,16 +93,6 @@ export default defineComponent({
       timer: null as any,
       item: null as any
     })
-    watch(
-      () => activeData.model,
-      () => {
-        const videoItem = data.itemList.find((n) => n.id === popupData.itemActive)
-        // 阴影切换的时候,具体去切换某个视频的控件
-        if (videoItem && videoItem.type === 'VIDEO') {
-          videoItem.playModel = activeData.model
-        }
-      }
-    )
     // 获取缓存路径
     const getCacheFilePath = async (material: any) => {
       const res = await promisefiyPostMessage({
@@ -135,7 +125,6 @@ export default defineComponent({
     const getItemList = async () => {
       const list: any = []
       const browserInfo = browser()
-      let _item = null
       for (let i = 0; i < data.knowledgePointList.length; i++) {
         const item = data.knowledgePointList[i]
         const itemLength = item.materialList.length - 1
@@ -164,7 +153,7 @@ export default defineComponent({
               playModel: false,
               isprepare: false,
               isDrage: false,
-              muted: false, // 是否静音
+              muted: false // 是否静音
             }
           }
           list.push({
@@ -173,18 +162,18 @@ export default defineComponent({
             iframeRef: null,
             tabName: item.name,
             isLast: j === itemLength, // 当前知识点
-            autoPlay: false, //加载完成是否自动播放
+            autoPlay: false //加载完成是否自动播放
           })
         }
       }
 
       let item: any = null
       if (route.query.kId) {
-        item = list.find((n: any) => n.id == route.query.kId)
-        const _firstIndex = list.findIndex((n: any) => n.id == route.query.kId)
+        item = list.find((n: any) => n.materialId == route.query.kId)
+        const _firstIndex = list.findIndex((n: any) => n.materialId == route.query.kId)
         popupData.firstIndex = _firstIndex > -1 ? _firstIndex : 0
       }
-      item = item ? item : (list[0] || {})
+      item = item ? item : list[0] || {}
       if (item) {
         popupData.tabName = item.tabName
         popupData.tabActive = item.knowledgePointId
@@ -206,8 +195,18 @@ export default defineComponent({
           data.detail = res.data
         }
         if (Array.isArray(res?.data?.knowledgePointList)) {
+          let index = 0
           data.knowledgePointList = res.data.knowledgePointList.map((n: any) => {
-            n.index = 0
+            if (Array.isArray(n.materialList)) {
+              n.materialList = n.materialList.map((item: any) => {
+                index++
+                return {
+                  ...item,
+                  materialId: item.id,
+                  id: index + ''
+                }
+              })
+            }
             return n
           })
           getItemList()
@@ -269,6 +268,14 @@ export default defineComponent({
         swipeRef.value?.swipeTo(index)
       }
     }
+    /** 延迟收起模态框 */
+    const setModelOpen = () => {
+      clearTimeout(activeData.timer)
+      closeToast()
+      activeData.timer = setTimeout(() => {
+        activeData.model = false
+      }, 3000)
+    }
     // 轮播切换
     const handleSwipeChange = (val: any) => {
       console.log('轮播切换')
@@ -279,9 +286,21 @@ export default defineComponent({
         popupData.itemActive = item.id
         popupData.itemName = item.name
         popupData.tabName = item.tabName
-        if (item.type == 'SONG'){
+        if (item.type == 'SONG') {
           activeData.model = true
         }
+        if (item.type === 'VIDEO') {
+          // console.log("🚀 ~ item", item)
+          // 自动播放下一个视频
+          clearTimeout(activeData.timer)
+          closeToast()
+          item.currentTime = 0
+          item.autoPlay = true
+          item.videoEle && (item.videoEle.currentTime = 0)
+          nextTick(() => {
+            item.videoEle?.play()
+          })
+        }
       }
     }
     // 上一个知识点, 下一个知识点
@@ -332,7 +351,6 @@ export default defineComponent({
     // 开始播放
     const handlePlay = (e: Event, m: any) => {
       e.stopPropagation()
-      clearTimeout(m.timer)
       closeToast()
       m.videoEle?.play()
     }
@@ -350,19 +368,11 @@ export default defineComponent({
     const handleEnded = (m: any) => {
       // console.log(m)
       if (popupData.activeIndex != data.itemList.length - 1) {
-        popupData.activeIndex++
+        // popupData.activeIndex++
         swipeRef.value?.next()
-        const nextItem = data.itemList[popupData.activeIndex]
-        if (nextItem.type === 'VIDEO') {
-          nextTick(() => {
-            // 自动播放下一个视频
-            clearTimeout(m.timer)
-            closeToast()
-            nextItem.videoEle?.play()
-          })
-        }
+        // const nextItem = data.itemList[popupData.activeIndex]
 
-        console.log('🚀 ~ nextItem', nextItem)
+        // console.log('🚀 ~ nextItem', nextItem)
       }
     }
 
@@ -393,6 +403,7 @@ export default defineComponent({
           loop={false}
           vertical
           lazyRender={true}
+          touchable={false}
           initialSwipe={popupData.firstIndex}
           onChange={handleSwipeChange}
         >
@@ -404,7 +415,6 @@ export default defineComponent({
                     class={styles.itemDiv}
                     onClick={() => {
                       clearTimeout(activeData.timer)
-                      clearTimeout(m.timer)
                       if (Date.now() - activeData.nowTime < 300) {
                         handleDbClick(m)
                         return
@@ -412,6 +422,7 @@ export default defineComponent({
                       activeData.nowTime = Date.now()
                       activeData.timer = setTimeout(() => {
                         activeData.model = !activeData.model
+                        setModelOpen()
                       }, 300)
                     }}
                   >
@@ -433,7 +444,6 @@ export default defineComponent({
                             m.duration = videoEle.duration
                             m.videoEle = videoEle
                             m.isprepare = true
-                            m.playModel = true
                             console.log('视频准备完成')
                           }}
                           onTimeupdate={(e: Event) => {
@@ -449,14 +459,12 @@ export default defineComponent({
                             // 播放
                             m.paused = false
                             console.log('播放')
-                            m.timer = setTimeout(() => {
-                              activeData.model = false
-                            }, 3000)
+                            setModelOpen()
                             m.muted = false
                           }}
                           onPause={() => {
                             //暂停
-                            clearTimeout(m.timer)
+                            clearTimeout(activeData.timer)
                             m.paused = true
                           }}
                           onEnded={() => handleEnded(m)}
@@ -546,9 +554,6 @@ export default defineComponent({
                         }}
                       />
                     )}
-                    {/* <Transition name="van-fade">
-                      {activeData.model && <div class={styles.playModel}></div>}
-                    </Transition> */}
                   </div>
                 </>
               </SwipeItem>
@@ -571,7 +576,13 @@ export default defineComponent({
         <Transition name="right">
           {activeData.model && (
             <div class={styles.rightFixedBtns}>
-              <div class={styles.fullBtn} onClick={() => (popupData.open = true)}>
+              <div
+                class={styles.fullBtn}
+                onClick={() => {
+                  clearTimeout(activeData.timer)
+                  popupData.open = true
+                }}
+              >
                 <img src={iconMenu} />
                 <span>知识点</span>
               </div>
@@ -622,6 +633,12 @@ export default defineComponent({
           position="right"
           round
           v-model:show={popupData.open}
+          onClose={() => {
+            const item = data.itemList[popupData.activeIndex]
+            if (item?.type == "VIDEO"){
+              setModelOpen()
+            }
+          }}
         >
           <Points
             data={data.knowledgePointList}

+ 1 - 0
src/views/exercise-after-class/index.tsx

@@ -315,6 +315,7 @@ export default defineComponent({
           loop={false}
           vertical
           lazyRender={true}
+          touchable={false}
         >
           {data.itemList.map((m: any, mIndex: number) => {
             return (