fix

src/views/exercise-after-class/index.tsx

@@ -7,7 +7,8 @@ import {
   ref,
   watch,
   Transition,
-  nextTick
+  nextTick,
+  computed
 } from 'vue'
 import styles from './index.module.less'
 import 'plyr/dist/plyr.css'
@@ -78,15 +79,6 @@ export default defineComponent({
     })
 
     const route = useRoute()
-    // watch(
-    //   () => route.query,
-    //   () => {
-    //     console.log('变化了')
-    //     history.go(0)
-    //     // getDetail()
-    //     // trainingRecord()
-    //   }
-    // )
     const router = useRouter()
     const query = route.query
     const browserInfo = browser()
@@ -94,6 +86,7 @@ export default defineComponent({
     const data = reactive({
       videoData: null as any,
       details: [] as any,
+      trainings: [] as any[],
       trainingTimes: 0,
       itemList: [] as any,
       showHead: true,
@@ -124,39 +117,33 @@ export default defineComponent({
         console.log('error')
       }
       if (details.length) {
-        data.details = details
-        const videoData: any =
-          details.find((n: any) => n.materialId == route.query.materialId) || {}
-        try {
-          videoData.training = JSON.parse(videoData?.lessonTrainingTemp?.trainingConfigJson)
-        } catch (error) {}
-        data.itemList.push({
-          ...videoData,
-          id: videoData.materialId,
-          currentTime: 0,
-          duration: 100,
-          paused: true,
-          loop: false,
-          videoEle: null,
-          timer: null,
-          muted: true, // 静音
-          autoplay: true //自动播放
+        details.forEach((n: any) => {
+          try {
+            n.trainingConfigJson = JSON.parse(n.lessonTrainingTemp.trainingConfigJson)
+          } catch (error) {
+            n.trainingConfigJson = {}
+          }
         })
-        popupData.itemActive = videoData.id
-        popupData.tabName = videoData.materialName
-        data.videoData = videoData
-        handleExerciseCompleted()
-      }
-    }
-    const getTrainingTimes = (res: any) => {
-      let trainingTimes = 0
-      if (Array.isArray(res?.trainings)) {
-        const train = res.trainings.find((n: any) => n.materialId === route.query?.materialId)
-        if (train) {
-          trainingTimes = train.trainingTimes
-        }
+        data.details = details
+        // console.log("🚀 ~ data.details", data.details)
+        data.videoData = details.find((n: any) => n.materialId == route.query.materialId) || null
+        // console.log('🚀 ~ data.videoData', data.videoData)
+        data.itemList = [
+          {
+            ...data.videoData,
+            id: data.videoData?.materialId || '',
+            loaded: false,
+            currentTime: 0,
+            duration: 100,
+            paused: true,
+            loop: false,
+            videoEle: null,
+            timer: null,
+            muted: true, // 静音
+            autoplay: true //自动播放
+          }
+        ]
       }
-      data.trainingTimes = trainingTimes
     }
     // 获取课后练习记录
     const trainingRecord = async () => {
@@ -168,14 +155,20 @@ export default defineComponent({
             hideLoading: true
           }
         )
-        if (res?.data) {
-          getTrainingTimes(res.data)
+        if (Array.isArray(res?.data.trainings)) {
+          data.trainings = res.data.trainings
           handleExerciseCompleted()
         }
       } catch (error) {}
     }
-    onMounted(() => {
-      getDetail()
+    const currentNum = computed(() => {
+      const item = data.trainings.find((n: any) => n.materialId == data.videoData?.materialId)
+      // console.log(item)
+      if (item) handleExerciseCompleted()
+      return item?.trainingTimes || 0
+    })
+    onMounted(async () => {
+      await getDetail()
       trainingRecord()
     })
     // 返回
@@ -234,10 +227,10 @@ export default defineComponent({
     // 判断练习是否完成
     const handleExerciseCompleted = () => {
       if (
-        data.trainingTimes != 0 &&
-        data.trainingTimes == (data.videoData as any)?.training?.practiceTimes
+        currentNum.value != 0 &&
+        currentNum.value + '' === data.videoData?.trainingConfigJson?.practiceTimes
       ) {
-        handleStopVideo()
+        // handleStopVideo()
         const itemIndex = data.details.findIndex(
           (n: any) => n.materialId == data.videoData?.materialId
         )
@@ -253,24 +246,24 @@ export default defineComponent({
             if (!isLastIndex) {
               const nextItem = data.details[itemIndex + 1]
               if (nextItem?.type === materialType.视频) {
-                router.push({
-                  path: '/exerciseAfterClass',
-                  query: {
-                    ...query,
-                    materialId: nextItem.materialId
+                data.videoData = nextItem
+                data.itemList = [
+                  {
+                    ...nextItem,
+                    id: nextItem?.materialId || '',
+                    currentTime: 0,
+                    duration: 100,
+                    paused: true,
+                    loop: false,
+                    videoEle: null,
+                    timer: null,
+                    muted: true, // 静音
+                    autoplay: true //自动播放
                   }
+                ]
+                nextTick(() => {
+                  console.log(data.itemList[0].videoEle)
                 })
-                // const searchUrl = qs.stringify({
-                //   ...query,
-                //   materialId: nextItem.materialId
-                // })
-                // location.href = `${location.origin}${location.pathname}#/exerciseAfterClass?${searchUrl}`
-                // console.log(
-                //   '🚀 ~ nextItem.materialId',
-                //   nextItem.materialId,
-                //   `${location.origin}${location.pathname}#/exerciseAfterClass?${searchUrl}`
-                // )
-                history.go(0)
               }
               if (nextItem?.type === materialType.曲目) {
                 handleInit(1)
@@ -282,7 +275,6 @@ export default defineComponent({
                   materialId: nextItem.materialId
                 })
                 let src = `${location.origin}/orchestra-music-score/?` + parmas
-                // console.log("🚀 ~ src", src)
                 postMessage({
                   api: 'openAccompanyWebView',
                   content: {
@@ -315,6 +307,7 @@ export default defineComponent({
             vertical
             lazyRender={true}
             touchable={false}
+            duration={0}
           >
             {data.itemList.map((m: any, mIndex: number) => {
               return (
@@ -341,12 +334,17 @@ export default defineComponent({
                           const videoEle = e.target as unknown as HTMLVideoElement
                           m.duration = videoEle.duration
                           m.videoEle = videoEle
+                          m.loaded = true
+                          console.time('播放')
+                          videoEle.play()
                         }}
                         onTimeupdate={(e: Event) => {
+                          if (!m.loaded) return
                           const videoEle = e.target as unknown as HTMLVideoElement
                           m.currentTime = videoEle.currentTime
                         }}
                         onPlay={() => {
+                          console.log('播放')
                           // 播放
                           m.paused = false
                           if (m.muted) {
@@ -355,6 +353,7 @@ export default defineComponent({
                           }
                         }}
                         onPause={() => {
+                          console.log('暂停')
                           //暂停
                           m.paused = true
                         }}
@@ -364,7 +363,7 @@ export default defineComponent({
                       </video>
                     </div>
                     <Transition name="bottom">
-                      {activeData.model && (
+                      {activeData.model && !m.muted && (
                         <div class={styles.bottomFixedContainer}>
                           <div class={styles.time}>
                             <span>{getSecondRPM(m.currentTime)}</span>
@@ -425,8 +424,8 @@ export default defineComponent({
                 </div>
                 <div class={styles.menu}>{popupData.tabName}</div>
                 <div class={styles.nums}>
-                  练习次数：{data.trainingTimes}/
-                  {(data.videoData as any)?.training?.practiceTimes || 0}
+                  练习次数：{currentNum.value}/
+                  {data.videoData?.trainingConfigJson?.practiceTimes || 0}
                 </div>
               </div>
             )}