5419

src/views/courseList/index.tsx

@@ -73,7 +73,7 @@ export default defineComponent({
         if (browserInfo.isStudent || route.query.isdev) {
           try {
             await showConfirmDialog({
-              message: '当前课程没有缓存是否缓存'
+              message: '当前课程没有缓存,是否缓存?'
             })
           } catch (error) {
             gotoPlay(item)
@@ -90,7 +90,8 @@ export default defineComponent({
       router.push({
         path: '/coursewarePlay',
         query: {
-          id: item.lessonCoursewareDetailId
+          id: item.lessonCoursewareDetailId,
+          source: 'my-course'
         }
       })
     }
@@ -174,7 +175,7 @@ export default defineComponent({
                   <img src={iconCourse} class={styles.cover} />
                   <div class={styles.title}>
                     <div>{item.coursewareDetailName}</div>
-                    {route.query.code !== 'select' && <div class={styles.subtitle}>已使用 {item.useNum} 次</div>}
+                    {!browserInfo.isStudent && <div class={styles.subtitle}>已使用 {item.useNum} 次</div>}
                   </div>
                   {route.query.code !== 'select' ? (
                     <>

src/views/coursewarePlay/component/musicScore.module.less

@@ -18,3 +18,15 @@
     bottom: 0;
   }
 }
+.errorModel {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}

src/views/coursewarePlay/component/musicScore.tsx

@@ -1,6 +1,7 @@
-import { defineComponent, ref, nextTick } from 'vue'
+import { defineComponent, ref, nextTick, onMounted, watch } from 'vue'
 import styles from './musicScore.module.less'
 import qs from 'query-string'
+import OEmpty from '@/components/o-empty'
 
 export default defineComponent({
   name: 'musicScore',
@@ -13,6 +14,8 @@ export default defineComponent({
   emits: ['setIframe'],
   setup(props, { emit }) {
     const iframeRef = ref()
+    const renderError = ref(false)
+    const renderSuccess = ref(false)
     const Authorization = sessionStorage.getItem('Authorization') || ''
     const origin = /(localhost|192)/.test(location.host)
       ? 'https://ponline.colexiu.com' //'http://localhost:3000' ////
@@ -24,18 +27,41 @@ export default defineComponent({
       Authorization: Authorization
     })
     let src = `${origin}/orchestra-music-score/?` + query
-    console.log('src', src)
+    const checkView = () => {
+      fetch(src)
+        .then(() => {
+          renderSuccess.value = true
+          renderError.value = false
+        })
+        .catch((err) => {
+          renderError.value = true
+        })
+    }
+    watch(props.music, () => {
+      if (renderSuccess.value) return
+      renderError.value = false
+      if (props.music.display) {
+        checkView()
+      }
+    })
+
     return () => (
       <div class={styles.musicScore}>
-        <iframe
-          ref={iframeRef}
-          onLoad={() => {
-            emit('setIframe', iframeRef.value)
-          }}
-          class={[styles.container, 'musicIframe']}
-          frameborder="0"
-          src={src}
-        ></iframe>
+        {renderError.value ? (
+          <div class={styles.errorModel}>
+            <OEmpty type="network" tips="请检查网络环境" />
+          </div>
+        ) : (
+          <iframe
+            ref={iframeRef}
+            onLoad={(e: Event) => {
+              emit('setIframe', iframeRef.value)
+            }}
+            class={[styles.container, 'musicIframe']}
+            frameborder="0"
+            src={src}
+          ></iframe>
+        )}
       </div>
     )
   }

src/views/coursewarePlay/index.tsx

@@ -24,7 +24,7 @@ import styles from './index.module.less'
 import 'plyr/dist/plyr.css'
 import request from '@/helpers/request'
 import { state } from '@/state'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { listenerMessage, postMessage, promisefiyPostMessage } from '@/helpers/native-message'
 import MusicScore from './component/musicScore'
 import iconMenu from './image/icon-menu.svg'
@@ -106,6 +106,7 @@ export default defineComponent({
     })
 
     const route = useRoute()
+    const router = useRouter()
     const headeRef = ref()
     const data = reactive({
       detail: null,
@@ -192,7 +193,8 @@ export default defineComponent({
             iframeRef: null,
             tabName: item.name,
             isLast: j === itemLength, // 当前知识点
-            autoPlay: false //加载完成是否自动播放
+            autoPlay: false, //加载完成是否自动播放
+            display: false,
           })
         }
       }
@@ -212,6 +214,7 @@ export default defineComponent({
         popupData.activeIndex = popupData.firstIndex
         item.autoPlay = true
         item.muted = true
+        item.display = true
       }
       // console.log('🚀 ~ list', list)
       data.itemList = list
@@ -258,6 +261,9 @@ export default defineComponent({
     })
     // 返回
     const goback = () => {
+      if (route.query.source == 'my-course'){
+        router.back()
+      }
       postMessage({ api: 'goBack' })
     }
 
@@ -271,11 +277,6 @@ export default defineComponent({
       itemActive: '',
       itemName: ''
     })
-    // 设置当前的激活状态
-    const setActiveData = (val: any, oldVal: any) => {
-      handleStop()
-    }
-    watch(() => popupData.activeIndex, setActiveData)
 
     /**停止所有的播放 */
     const handleStop = () => {
@@ -297,6 +298,7 @@ export default defineComponent({
         // 停止曲谱的播放
         if (item.type === 'SONG') {
           item.iframeRef?.contentWindow?.postMessage({ api: 'setPlayState' }, '*')
+          item.display = false
         }
       }
     }
@@ -304,7 +306,6 @@ export default defineComponent({
     const toggleMaterial = () => {
       const index = data.itemList.findIndex((n: any) => n.id == popupData.itemActive)
       if (index > -1) {
-        popupData.activeIndex = index
         swipeRef.value?.swipeTo(index, {
           immediate: true
         })
@@ -323,6 +324,7 @@ export default defineComponent({
       console.log('轮播切换')
       popupData.activeIndex = val
       const item = data.itemList[val]
+      handleStop()
       if (item) {
         popupData.tabActive = item.knowledgePointId
         popupData.itemActive = item.id
@@ -330,6 +332,7 @@ export default defineComponent({
         popupData.tabName = item.tabName
         if (item.type == 'SONG') {
           activeData.model = true
+          item.display = true
         }
         if (item.type === 'VIDEO') {
           // console.log("🚀 ~ item", item)
@@ -344,6 +347,7 @@ export default defineComponent({
           })
         }
       }
+      
     }
     // 上一个知识点, 下一个知识点
     const handlePreAndNext = (type: string) => {
@@ -596,7 +600,7 @@ export default defineComponent({
 
           <Transition name="top">
             {activeData.model && (
-              <div class={styles.headerContainer} ref={headeRef}>
+              <div id="coursePlayHeader" class={styles.headerContainer} ref={headeRef}>
                 <div class={styles.backBtn} onClick={() => goback()}>
                   <Icon name={iconBack} />
                   返回