Update musicScore.tsx

src/views/coursewarePlay/component/musicScore.tsx

@@ -1,12 +1,13 @@
-import { defineComponent, ref, watch } from 'vue'
-import styles from './musicScore.module.less'
-import qs from 'query-string'
-import iconStart from '../image/icon-start.svg'
-import { listenerMessage, postMessage } from '@/helpers/native-message'
-import { Skeleton } from 'vant'
-import { usePageVisibility } from '@vant/use'
-import { useRoute } from 'vue-router'
-import { browser } from '@/helpers/utils'
+import { defineComponent, ref, watch } from 'vue';
+import styles from './musicScore.module.less';
+import qs from 'query-string';
+import iconStart from '../image/icon-start.svg';
+import { listenerMessage, postMessage } from '@/helpers/native-message';
+import { Skeleton } from 'vant';
+import { usePageVisibility } from '@vant/use';
+import { useRoute } from 'vue-router';
+import { browser } from '@/helpers/utils';
+import { state } from '@/state';
 
 export default defineComponent({
   name: 'musicScore',
@@ -21,91 +22,95 @@ export default defineComponent({
   },
   emits: ['setIframe'],
   setup(props, { emit }) {
-    const browserInfo = browser()
-    const route = useRoute()
-    const isLoading = ref(false)
-    const pageVisibility = usePageVisibility()
+    const browserInfo = browser();
+    const route = useRoute();
+    const isLoading = ref(false);
+    const pageVisibility = usePageVisibility();
     /** 页面显示和隐藏 */
-    watch(pageVisibility, (value) => {
-      console.log("🚀 ~ value:", value)
+    watch(pageVisibility, value => {
+      console.log('🚀 ~ value:', value);
       if (value == 'hidden') {
-        isLoading.value = false
+        isLoading.value = false;
       }
-    })
-    const iframeRef = ref()
-    const isLoaded = ref(false)
-    const renderError = ref(false)
-    const renderSuccess = ref(false)
-    const Authorization = sessionStorage.getItem('Authorization') || ''
+    });
+    const iframeRef = ref();
+    const isLoaded = ref(false);
+    const renderError = ref(false);
+    const renderSuccess = ref(false);
+    const Authorization = sessionStorage.getItem('Authorization') || '';
     const origin = /(localhost|192)/.test(location.host)
       ? 'https://test.lexiaoya.cn'
-      : location.origin
+      : location.origin;
     const query = qs.stringify({
       id: props.music.content,
       modelType: 'practice',
       headerHeight: 32,
       Authorization: Authorization
-    })
-    const src = `${origin}/orchestra-music-score/?` + query
+    });
+    const path =
+      state.platformType === 'TEACHER' ? '/accompany-teacher/' : '/accompany/';
+    const src = `${origin}${path}?` + query;
     const checkView = () => {
       fetch(src)
         .then(() => {
-          renderSuccess.value = true
-          renderError.value = false
+          renderSuccess.value = true;
+          renderError.value = false;
         })
         .catch(() => {
-          renderError.value = true
-        })
-    }
+          renderError.value = true;
+        });
+    };
     watch(props.music, () => {
-      if (renderSuccess.value) return
-      renderError.value = false
+      if (renderSuccess.value) return;
+      renderError.value = false;
       if (props.music.display) {
-        checkView()
+        checkView();
       }
-    })
+    });
 
     // 去云练习完整版
     const gotoAccomany = () => {
-      if (isLoading.value) return
-      if (!browserInfo.ios){
-        isLoading.value = true
+      if (isLoading.value) return;
+      if (!browserInfo.ios) {
+        isLoading.value = true;
       }
       const parmas = qs.stringify({
         id: props.music.content
-      })
-      const src = `${location.origin}/orchestra-music-score/?` + parmas
-      postMessage({
-        api: 'openAccompanyWebView',
-        content: {
-          url: src,
-          orientation: 0,
-          isHideTitle: true,
-          statusBarTextColor: false,
-          isOpenLight: true
-        }
-      }, () => {
-        if (browserInfo.ios){
-          isLoading.value = true
+      });
+      const src = `${location.origin}/orchestra-music-score/?` + parmas;
+      postMessage(
+        {
+          api: 'openAccompanyWebView',
+          content: {
+            url: src,
+            orientation: 0,
+            isHideTitle: true,
+            statusBarTextColor: false,
+            isOpenLight: true
+          }
+        },
+        () => {
+          if (browserInfo.ios) {
+            isLoading.value = true;
+          }
         }
-      })
-    }
+      );
+    };
     listenerMessage('webViewOnResume', () => {
-      isLoading.value = false
-    })
+      isLoading.value = false;
+    });
 
     return () => (
       <div class={styles.musicScore}>
         <iframe
           ref={iframeRef}
           onLoad={() => {
-            emit('setIframe', iframeRef.value)
-            isLoaded.value = true
+            emit('setIframe', iframeRef.value);
+            isLoaded.value = true;
           }}
           class={[styles.container, 'musicIframe']}
           frameborder="0"
-          src={src}
-        ></iframe>
+          src={src}></iframe>
         {route.query.source == 'my-course' && isLoaded.value && (
           <div
             style={{
@@ -113,10 +118,9 @@ export default defineComponent({
             }}
             class={styles.startBtn}
             onClick={(e: Event) => {
-              e.stopPropagation()
-              gotoAccomany()
-            }}
-          >
+              e.stopPropagation();
+              gotoAccomany();
+            }}>
             <img src={iconStart} />
           </div>
         )}
@@ -124,6 +128,6 @@ export default defineComponent({
           <Skeleton class={styles.skeleton} row={8} />
         </div>
       </div>
-    )
+    );
   }
-})
+});