更新

src/views/courseware-play/component/instrument-info/index.tsx

@@ -11,6 +11,7 @@ import request from '@/helpers/request';
 import MEmpty from '@/components/m-empty';
 import styles from './index.module.less';
 import musicBg from '../../image/music_bg.png';
+import pBg from '../../image/plh.png';
 import titleIcon1 from '../../image/title_icon1.png';
 import titleIcon2 from '../../image/title_icon2.png';
 import playIcon from '../../image/music_play_icon.png';
@@ -19,7 +20,7 @@ import emptyIcon from '../../image/ins-empty-icon.png';
 import songIcon from '../../image/song_icon.png';
 import { NoticeBar } from 'vant';
 import PlayItem from '../play-item';
-import PlayLoading from '../play-loading'
+import PlayLoading from '../play-loading';
 
 export default defineComponent({
   name: 'InstrumentInfo',
@@ -48,7 +49,7 @@ export default defineComponent({
       title: ' ',
       playState: 'pause' as 'play' | 'pause',
       showPlayer: false,
-      listActive: null as any,
+      listActive: null as any
     });
     /** 选中的item */
     const activeItem = computed(() => {
@@ -172,7 +173,7 @@ export default defineComponent({
           )}
           {props.type === 'instrument' && (
             <div class={styles.insTop}>
-              <img src={forms.dataInfo.avatar} />
+              <img src={forms.dataInfo.avatar || pBg} />
               <div class={styles.insName}>{forms.dataInfo.name || ''}</div>
               <div class={styles.insTro}>
                 {forms.dataInfo.knowledgeWikiCategoryName || ''}
@@ -181,7 +182,7 @@ export default defineComponent({
           )}
           {props.type === 'musician' && (
             <div class={styles.insTop}>
-              <img class={styles.musician} src={forms.dataInfo.avatar} />
+              <img class={styles.musician} src={forms.dataInfo.avatar || pBg} />
               <div class={styles.insName}>{forms.dataInfo.name || ''}</div>
               <div class={styles.insTro}>
                 {forms.dataInfo.knowledgeWikiCategoryName || ''}
@@ -193,12 +194,15 @@ export default defineComponent({
             <span>{props.type === 'instrument' ? '名曲鉴赏' : '代表作'}</span>
           </div>
           <div class={styles.insList}>
-            {forms.musicList.length ? (
+            {forms.musicList.length > 0 && (
               <>
                 {forms.musicList.map((item: any, index: number) => {
                   return (
                     <div
-                      class={[styles.li, forms.listActive === index ? styles.liActive : '']}
+                      class={[
+                        styles.li,
+                        forms.listActive === index ? styles.liActive : ''
+                      ]}
                       onClick={(e: Event) => {
                         e.stopPropagation();
                         handlePlay(item);
@@ -212,7 +216,7 @@ export default defineComponent({
                               ? ''
                               : styles.hidePlayLoading
                           ]}
-                          /> 
+                        />
                       </div>
                       {/* <div class={styles.liName}>{item.name || '--'}</div> */}
                       <NoticeBar
@@ -234,7 +238,9 @@ export default defineComponent({
                   );
                 })}
               </>
-            ) : (
+            )}
+
+            {forms.musicList.length <= 0 && forms.loading && (
               <div class={styles.emptyBox}>
                 <img src={emptyIcon} />
                 <span>暂无曲目～</span>

src/views/courseware-play/component/tempo-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/tempo-item/index.tsx

@@ -0,0 +1,74 @@
+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';
+import { Skeleton } from 'vant';
+
+export default defineComponent({
+  name: 'tempo-item',
+  props: {
+    pageVisibility: {
+      type: String,
+      default: ''
+    },
+    show: {
+      type: Boolean,
+      default: false
+    },
+    dataJson: {
+      type: String,
+      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}/#/tempo-practice?dataJson=${props.dataJson}&Authorization=${Authorization}&modeType=courseware`;
+    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.module.less

@@ -135,10 +135,6 @@
 
   .tempoPracticeGroup {
     width: 100%;
-
-    &>div {
-      justify-content: center;
-    }
   }
 
   &.itemActive {

src/views/courseware-play/index.tsx

@@ -47,12 +47,13 @@ import {
   api_classLessonCoursewareDetail,
   api_lessonCoursewareDetail
 } from '../courseware-list/api';
-import detail from '../information/help-center/detail';
+// import detail from '../information/help-center/detail';
 import { state } from '@/state';
 import Theory from './component/theory';
 import InstrumentInfo from './component/instrument-info';
-import TempoPractice from '../../views/tempo-practice';
+// import TempoPractice from '../../views/tempo-practice';
 import SelectCoursewarePop from '@/components/select-courseware-pop';
+import TempoItem from './component/tempo-item';
 
 export default defineComponent({
   name: 'CoursewarePlay',
@@ -901,10 +902,14 @@ export default defineComponent({
       popupData.itemActive = data.knowledgePointList[0].id;
       popupData.itemName = data.knowledgePointList[0].name;
       // 匹配到当前的章节名称
-      const dyItem = data.courseDetails.find((unit: any) => unit.id === activeData.lessonCoursewareDetailId)
-      const zjItem = dyItem?.knowledgeList?.find((chapter: any) => chapter.id === activeData.coursewareDetailKnowledgeId)
-      zjItem && (popupData.itemPointName = zjItem.name)
-      console.log('章节名称',popupData.itemPointName)
+      const dyItem = data.courseDetails.find(
+        (unit: any) => unit.id === activeData.lessonCoursewareDetailId
+      );
+      const zjItem = dyItem?.knowledgeList?.find(
+        (chapter: any) => chapter.id === activeData.coursewareDetailKnowledgeId
+      );
+      zjItem && (popupData.itemPointName = zjItem.name);
+      console.log('章节名称', popupData.itemPointName);
       loadingClass.value = false;
     };
     // 通过章节id，检测此章节有几个课件
@@ -1106,11 +1111,20 @@ export default defineComponent({
 
                     {/* 新增：RHYTHM：节奏练习,THEORY：乐理知识,MUSIC_WIKI:名曲鉴赏 INSTRUMENT:乐器 MUSICIAN:音乐家 资源类型 */}
                     {m.type === 'RHYTHM' && (
-                      <TempoPractice
+                      <TempoItem
+                        key={mIndex}
                         class={styles.tempoPracticeGroup}
-                        dataJson={m?.dataJson ? JSON.parse(m?.dataJson) : {}}
-                        modeType={'courseware'}
+                        dataJson={m.dataJson}
+                        show={popupData.activeIndex === mIndex}
+                        pageVisibility={pageVisibility.value}
                       />
+                      // <TempoPractice
+                      //   key={mIndex}
+                      //   class={styles.tempoPracticeGroup}
+                      //   dataJson={m?.dataJson ? JSON.parse(m?.dataJson) : {}}
+                      //   modeType={'courseware'}
+                      //   show={popupData.activeIndex === mIndex}
+                      // />
                     )}
                     {m.type === 'THEORY' && <Theory id={m.bizId} />}
                     {m.type === 'MUSIC_WIKI' && (

src/views/creation/share-model/index.tsx

@@ -76,7 +76,7 @@ export default defineComponent({
           video: '',
           type: 'link',
           url: state.url,
-          thumb: props.musicDetail.img,
+          thumb: encodeURI(props.musicDetail.img),
           shareType: type
         }
         // 作品的封面图

src/views/tempo-practice/index.module.less

@@ -10,7 +10,6 @@
   background: url("./images/bg.png") no-repeat center center / cover;
 
   display: flex;
-  flex-direction: column;
 
   &.modal {
     .iconBack {
@@ -19,6 +18,12 @@
       visibility: hidden;
     }
   }
+
+  &.courseware {
+    .head {
+      justify-content: center;
+    }
+  }
 }
 
 .conCon {

src/views/tempo-practice/index.tsx

@@ -1,4 +1,11 @@
-import { defineComponent, onMounted, onUnmounted, reactive, ref } from 'vue';
+import {
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
 import styles from './index.module.less';
 import { postMessage } from '@/helpers/native-message';
 import icon_title from './images/icon-title.png';
@@ -37,11 +44,16 @@ export default defineComponent({
     modeType: {
       type: String,
       default: ''
+    },
+    show: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, { expose }) {
     const route = useRoute();
     const state = reactive({
+      modeType: '' as any,
       platform: route.query.platform, // microapp 老师端应用里面打开单独处理返回逻辑
       win: route.query.win,
       settingStatus: false,
@@ -150,17 +162,17 @@ export default defineComponent({
       }
 
       if (ev.data.api === 'resetPlay') {
-        reesetSetting();
+        resetSetting();
       }
     };
 
-    const reesetSetting = () => {
+    const resetSetting = () => {
       try {
         let dataJson = props.dataJson;
         if (route.query.dataJson) {
           dataJson = JSON.parse(route.query.dataJson as any);
         }
-        console.log(dataJson, 'dataJson');
+        console.log(dataJson, 'dataJson', props.dataJson);
 
         setting.element = dataJson.element;
         setting.beat = dataJson.beat;
@@ -176,8 +188,24 @@ export default defineComponent({
       }
     };
 
+    // watch(
+    //   () => props.show,
+    //   val => {
+    //     console.log(val, props.show);
+    //     if (!val) {
+    //       // resetSetting();
+    //       handleStop();
+    //     } else {
+    //       resetSetting();
+    //     }
+    //   }
+    // );
+
     onMounted(() => {
-      reesetSetting();
+      if (route.query.modeType) {
+        state.modeType = route.query.modeType;
+      }
+      resetSetting();
       state.speedList.forEach((item: any) => {
         if (item.value === setting.speed) item.color = '#1CACF1';
       });
@@ -193,17 +221,18 @@ export default defineComponent({
     });
 
     expose({
-      reesetSetting
+      resetSetting
     });
     return () => (
       <div
         class={[
           styles.tempoPractice,
           state.win === 'pc' ? styles.pc : '',
-          state.platform === 'modal' ? styles.modal : ''
+          state.platform === 'modal' ? styles.modal : '',
+          state.modeType === 'courseware' ? styles.courseware : ''
         ]}>
         <div class={styles.head}>
-          {props.modeType !== 'courseware' && (
+          {state.modeType !== 'courseware' && (
             <div
               class={[styles.back, styles.iconBack]}
               onClick={goback}
@@ -214,7 +243,7 @@ export default defineComponent({
           <div class={styles.title}>
             <img src={icon_title} />
           </div>
-          {props.modeType !== 'courseware' && (
+          {state.modeType !== 'courseware' && (
             <div
               class={styles.back}
               style={{ cursor: 'pointer' }}
@@ -239,10 +268,7 @@ export default defineComponent({
                 ]}>
                 {item.map((child: any, jIndex: number) => (
                   <div
-                    class={[styles.beat, child.selected ? styles.active : '']}
-                    onClick={(e: any) => {
-                      e.stopPropagation();
-                    }}>
+                    class={[styles.beat, child.selected ? styles.active : '']}>
                     <div class={styles.direction}>
                       <div
                         class={styles.up}
@@ -283,11 +309,7 @@ export default defineComponent({
           </div>
         </div>
 
-        <div
-          class={styles.footer}
-          onClick={(e: any) => {
-            e.stopPropagation();
-          }}>
+        <div class={styles.footer}>
           {/* 播放 */}
           <div class={styles.play} onClick={handlePlay}>
             {setting.playState === 'pause' ? (
@@ -322,6 +344,15 @@ export default defineComponent({
                 if (setting.speed <= 40) return;
                 setting.speed -= 1;
                 handleStop();
+
+                state.speedList.forEach((item: any) => {
+                  if (item.value === setting.speed) {
+                    item.color = '#1CACF1';
+                    setting.speed = setting.speed;
+                  } else {
+                    item.color = '#060606';
+                  }
+                });
               }}
             />
             <Popover
@@ -354,6 +385,15 @@ export default defineComponent({
                 if (setting.speed >= 200) return;
                 setting.speed += 1;
                 handleStop();
+
+                state.speedList.forEach((item: any) => {
+                  if (item.value === setting.speed) {
+                    item.color = '#1CACF1';
+                    setting.speed = setting.speed;
+                  } else {
+                    item.color = '#060606';
+                  }
+                });
               }}
             />
           </div>