修改样式

src/views/attend-class/component/musicScore.module.less

@@ -3,7 +3,7 @@
   width: 100%;
   height: 100%;
   -webkit-overflow-scrolling: touch;
-  overflow: scroll;
+  // overflow: scroll;
   // padding-top: 30px;
 
 
@@ -93,4 +93,4 @@
       }
     }
   }
-}
+}

src/views/attend-class/component/musicScore.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch } from 'vue';
+import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
 import { NSkeleton } from 'naive-ui';
 import styles from './musicScore.module.less';
 import { usePageVisibility } from '@vant/use';
@@ -13,6 +13,10 @@ export default defineComponent({
     },
     activeModel: {
       type: Boolean
+    },
+    /** 当前是否为选中状态 */
+    activeStatus: {
+      type: Boolean
     }
   },
   emits: ['setIframe'],
@@ -32,9 +36,10 @@ export default defineComponent({
     const renderError = ref(false);
     const renderSuccess = ref(false);
     const origin = /(localhost|192)/.test(location.host)
-      ? 'https://test.lexiaoya.cn'
-      : location.origin;
-    const src = `${origin}/instrument?showGuide=true&platform=pc&zoom=1.2&modelType=practise&id=${props.music.content}&Authorization=${userStore.getToken}`;
+      ? // ? 'https://test.lexiaoya.cn'
+        'http://localhost:3000/instrument.html'
+      : location.origin + '/instrument';
+    const src = `${origin}?showGuide=true&platform=pc&zoom=1.2&modelType=practise&id=${props.music.content}&Authorization=${userStore.getToken}`;
     const checkView = () => {
       fetch(src)
         .then(() => {
@@ -83,6 +88,26 @@ export default defineComponent({
     //   );
     // };
 
+    watch(
+      () => props.activeModel,
+      () => {
+        if (iframeRef.value.contentWindow && props.activeStatus) {
+          console.log(
+            iframeRef.value.contentWindow,
+            props.activeModel,
+            'iframeRef'
+          );
+          iframeRef.value.contentWindow.postMessage(
+            {
+              api: 'attendClassBarStatus',
+              hideMenu: !props.activeModel
+            },
+            '*'
+          );
+        }
+      }
+    );
+
     return () => (
       <div class={styles.musicScore}>
         <iframe

src/views/attend-class/index.module.less

@@ -607,4 +607,4 @@
       }
     }
   }
-}
+}

src/views/attend-class/index.tsx

@@ -220,14 +220,33 @@ export default defineComponent({
     const showModalTime = ref(false);
     // ifram事件处理
     const iframeHandle = (ev: MessageEvent) => {
+      console.log(ev.data?.api, ev.data, 'ev.data');
       if (ev.data?.api === 'headerTogge') {
         activeData.model =
           ev.data.show || (ev.data.playState == 'play' ? false : true);
       }
+
+      //
+      if (ev.data?.api === 'onAttendToggleMenu') {
+        activeData.model = !activeData.model;
+      }
+
       if (ev.data?.api === 'api_fingerPreView') {
         clearInterval(activeData.timer);
         activeData.model = !ev.data.state;
       }
+      //
+      if (ev.data?.api === 'documentBodyKeyup') {
+        if (ev.data?.code === 'ArrowLeft') {
+          setModalOpen();
+          handlePreAndNext('up');
+        }
+
+        if (ev.data?.code === 'ArrowRight') {
+          setModalOpen();
+          handlePreAndNext('down');
+        }
+      }
     };
 
     onMounted(() => {
@@ -745,11 +764,11 @@ export default defineComponent({
     // 监听页面键盘事件 - 上下切换
     document.body.addEventListener('keyup', (e: KeyboardEvent) => {
       // console.log(e, 'e');
-      if (e.code === 'ArrowUp') {
+      if (e.code === 'ArrowLeft') {
         // if (popupData.activeIndex === 0) return;
         setModalOpen();
         handlePreAndNext('up');
-      } else if (e.code === 'ArrowDown') {
+      } else if (e.code === 'ArrowRight') {
         // if (popupData.activeIndex === data.itemList.length - 1) return;
         setModalOpen();
         handlePreAndNext('down');
@@ -1101,6 +1120,7 @@ export default defineComponent({
                       ) : (
                         <MusicScore
                           activeModel={activeData.model}
+                          activeStatus={popupData.activeIndex === mIndex}
                           data-vid={m.id}
                           music={m}
                           onSetIframe={(el: any) => {
@@ -1115,54 +1135,6 @@ export default defineComponent({
             ) : (
               ''
             )}
-            <Transition name="right">
-              {activeData.model && (
-                <div
-                  class={styles.rightFixedBtns}
-                  onClick={(e: Event) => {
-                    e.stopPropagation();
-                    clearTimeout(activeData.timer);
-                  }}>
-                  <div
-                    class={[styles.fullBtn]}
-                    onClick={() => (popupData.chapterOpen = true)}>
-                    <img src={iconChange} />
-                  </div>
-                  <div
-                    class={[
-                      styles.fullBtn,
-                      styles.iconUp,
-                      !isUpArrow.value ? styles.btnsDisabled : ''
-                    ]}
-                    onClick={() => {
-                      if (!isUpArrow.value) return;
-                      handlePreAndNext('up');
-                    }}>
-                    <img src={iconUp} />
-                  </div>
-                  <div id="attent-0">
-                    <div
-                      class={[styles.fullBtn, styles.point]}
-                      onClick={() => (popupData.open = true)}>
-                      <img src={iconMenu} />
-                    </div>
-
-                    <div
-                      class={[
-                        styles.fullBtn,
-                        styles.iconDown,
-                        !isDownArrow.value ? styles.btnsDisabled : ''
-                      ]}
-                      onClick={() => {
-                        if (!isDownArrow.value) return;
-                        handlePreAndNext('down');
-                      }}>
-                      <img src={iconDown} />
-                    </div>
-                  </div>
-                </div>
-              )}
-            </Transition>
           </div>
         </div>
 
@@ -1275,10 +1247,10 @@ export default defineComponent({
             <div
               class={[
                 styles.btnItem,
-                popupData.activeIndex === 0 ? styles.btnsDisabled : ''
+                !isUpArrow.value ? styles.btnsDisabled : ''
               ]}
               onClick={() => {
-                if (popupData.activeIndex === 0) return;
+                if (!isUpArrow.value) return;
                 handlePreAndNext('up');
               }}>
               <img src={iconUp} />
@@ -1287,12 +1259,10 @@ export default defineComponent({
             <div
               class={[
                 styles.btnItem,
-                popupData.activeIndex === data.itemList.length - 1
-                  ? styles.btnsDisabled
-                  : ''
+                !isDownArrow.value ? styles.btnsDisabled : ''
               ]}
               onClick={() => {
-                if (popupData.activeIndex === data.itemList.length - 1) return;
+                if (!isDownArrow.value) return;
                 handlePreAndNext('down');
               }}>
               <img src={iconDown} />