更新

src/views/courseware-play/component/listen-item/index.module.less

@@ -0,0 +1,40 @@
+.tempoItem {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  -webkit-overflow-scrolling: touch;
+  overflow: scroll;
+
+  .container {
+    position: relative;
+    display: block;
+    border: none;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+  }
+
+  .musicModel {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+.skeletonWrap {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  height: 100%;
+  z-index: 1;
+  padding-top: 1.2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  background: #fff;
+  pointer-events: none;
+}

src/views/courseware-play/component/listen-item/index.tsx

@@ -0,0 +1,97 @@
+import { defineComponent, ref, watch } from 'vue';
+import styles from './index.module.less';
+import qs from 'query-string';
+import { storage } from '@/helpers/storage';
+import { ACCESS_TOKEN } from '@/store/mutation-types';
+
+export function vaildMusicScoreUrl() {
+  const url: string = window.location.href;
+  let returnUrl = '';
+  if (/192/.test(url) || /localhost/.test(url)) {
+    //本地环境
+    returnUrl = 'https://test.kt.colexiu.com';
+  } else if (/test/.test(url)) {
+    // dev 环境
+    returnUrl = 'https://test.kt.colexiu.com';
+  } else if (/dev/.test(url)) {
+    returnUrl = 'https://dev.kt.colexiu.com';
+  } else {
+    returnUrl = 'https://mec.colexiu.com';
+  }
+  return returnUrl;
+}
+
+export default defineComponent({
+  name: 'tempo-item',
+  props: {
+    pageVisibility: {
+      type: String,
+      default: ''
+    },
+    show: {
+      type: Boolean,
+      default: false
+    },
+    activeModel: {
+      type: Boolean,
+      default: false
+    },
+    item: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ['setIframe'],
+  setup(props, { emit }) {
+    const iframeRef = ref();
+    const isLoading = ref(false);
+    const isLoaded = ref(false);
+
+    /** 页面显示和隐藏 */
+    watch(
+      () => props.pageVisibility,
+      value => {
+        if (value == 'hidden') {
+          isLoading.value = false;
+        }
+        if (value == 'hidden' && props.show) {
+          iframeRef.value?.contentWindow?.postMessage(
+            { api: 'setPlayState' },
+            '*'
+          );
+        }
+      }
+    );
+    // 是否显示当前曲谱
+    watch(
+      () => props.show,
+      val => {
+        if (!val) {
+          iframeRef.value?.contentWindow?.postMessage(
+            { api: 'setPlayState' },
+            '*'
+          );
+        }
+      }
+    );
+
+    const Authorization = storage.get(ACCESS_TOKEN);
+    // const src = `${location.origin}/classroom-app/#/tempo-practice?dataJson=${props.dataJson}&Authorization=${Authorization}&modeType=courseware`;
+    const src = `${vaildMusicScoreUrl()}/instrument/#/view-figner?Authorization=${Authorization}&code=${
+      props.item.content
+    }&type=listenMode`;
+    return () => (
+      <div class={styles.tempoItem}>
+        <iframe
+          ref={iframeRef}
+          onLoad={(e: Event) => {
+            emit('setIframe', iframeRef.value);
+            isLoaded.value = true;
+          }}
+          class={[styles.container]}
+          frameborder="0"
+          src={src}></iframe>
+      </div>
+    );
+  }
+});

src/views/courseware-play/index.tsx

@@ -55,6 +55,7 @@ import InstrumentInfo from './component/instrument-info';
 import SelectCoursewarePop from '@/components/select-courseware-pop';
 import { debounce } from '../../helpers/utils';
 import TempoItem from './component/tempo-item';
+import ListenItem from './component/listen-item';
 
 export default defineComponent({
   name: 'CoursewarePlay',
@@ -1159,6 +1160,15 @@ export default defineComponent({
                           show={popupData.activeIndex === mIndex}
                         />
                       )}
+                      {m.type === 'LISTEN' && (
+                        <ListenItem
+                          pageVisibility={pageVisibility.value}
+                          show={popupData.activeIndex === mIndex}
+                          activeModel={activeData.model}
+                          data-vid={m.id}
+                          item={m}
+                        />
+                      )}
                     </>
                     {/* )} */}
                   </div>