兼容样式

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

@@ -11,6 +11,14 @@
 
   display: flex;
   flex-direction: column;
+
+  &.modal {
+    .iconBack {
+      opacity: 0;
+      pointer-events: none;
+      visibility: hidden;
+    }
+  }
 }
 
 .conCon {

src/views/tempo-practice/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue';
+import { defineComponent, onMounted, onUnmounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
 import { postMessage } from '@/helpers/native-message';
 import icon_title from './images/icon-title.png';
@@ -33,9 +33,9 @@ export default defineComponent({
     dataJson: {
       type: Object,
       default: () => {}
-    } 
+    }
   },
-  setup() {
+  setup(props) {
     const route = useRoute();
     const state = reactive({
       platform: route.query.platform, // microapp 老师端应用里面打开单独处理返回逻辑
@@ -59,7 +59,8 @@ export default defineComponent({
         { text: '180', value: 180, color: '#060606' },
         { text: '190', value: 190, color: '#060606' },
         { text: '200', value: 200, color: '#060606' }
-      ]
+      ],
+      dataJson: {} as any
     });
     // 返回
     const goback = () => {
@@ -112,17 +113,74 @@ export default defineComponent({
       }
     };
 
+    // {"element":"jianpu","beat":"4-4","barLine":"1","tempo":["1","2","3"]}'
+    const onIframeHandle = (ev: MessageEvent) => {
+      // 获取配置
+      if (ev.data.api === 'getTempoSetting') {
+        window.parent.postMessage(
+          {
+            api: 'getTempoSetting',
+            data: JSON.stringify({
+              setting: {
+                element: setting.element,
+                beat: setting.beat,
+                barLine: setting.barLine,
+                tempo: setting.tempo
+              },
+              coverImg: ''
+            })
+          },
+          '*'
+        );
+      }
+
+      if (ev.data.api === 'setPlayState') {
+        if (ev.data.data) {
+          handlePlay();
+        } else {
+          handleStop();
+        }
+      }
+    };
+
     onMounted(() => {
+      try {
+        let dataJson = props.dataJson;
+        if (route.query.dataJson) {
+          dataJson = JSON.parse(route.query.dataJson as any);
+        }
+
+        setting.element = dataJson.element;
+        setting.beat = dataJson.beat;
+        setting.barLine = dataJson.barLine;
+        setting.tempo = dataJson.tempo;
+
+        state.dataJson = dataJson;
+      } catch {
+        //
+      }
+
       state.speedList.forEach((item: any) => {
         if (item.value === setting.speed) item.color = '#1CACF1';
       });
       renderScore();
+
+      window.addEventListener('message', onIframeHandle);
+    });
+
+    onUnmounted(() => {
+      window.removeEventListener('message', onIframeHandle);
     });
     return () => (
-      <div class={[styles.tempoPractice, state.win === 'pc' ? styles.pc : '']}>
+      <div
+        class={[
+          styles.tempoPractice,
+          state.win === 'pc' ? styles.pc : '',
+          state.win === 'modal' ? styles.modal : ''
+        ]}>
         <div class={styles.head}>
           <div
-            class={styles.back}
+            class={[styles.back, styles.iconBack]}
             onClick={goback}
             style={{ cursor: 'pointer' }}>
             <img src={icon_back} />
@@ -267,7 +325,10 @@ export default defineComponent({
         </div>
 
         <Popup v-model:show={state.settingStatus} class={styles.settingPopup}>
-          <SettingModal onClose={() => (state.settingStatus = false)} />
+          <SettingModal
+            dataJson={state.dataJson}
+            onClose={() => (state.settingStatus = false)}
+          />
         </Popup>
       </div>
     );

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

@@ -45,6 +45,7 @@
     width: 31px;
     height: 32px;
     background: url('../images/icon-close.png') no-repeat center center / contain;
+    cursor: pointer;
   }
 }
 

src/views/tempo-practice/setting-modal/index.tsx

@@ -18,15 +18,22 @@ import { useRoute } from 'vue-router';
 
 export default defineComponent({
   emits: ['close'],
+  props: {
+    dataJson: {
+      type: Object,
+      default: () => {}
+    }
+  },
   name: 'setting-modal',
   setup(props, { emit }) {
     const route = useRoute();
+    const { element, beat, barLine, tempo } = props.dataJson;
     const state = reactive({
       win: route.query.win,
-      element: 'jianpu' as 'jianpu' | 'staff', // 元素
-      beat: '4-4' as '4-2' | '4-3' | '4-4' | '8-3' | '8-6', // 拍号
-      barLine: '1' as '1' | '2' | '4', // 小节数
-      tempo: ['1', '2', '3'] as any[] // 节奏形筛选
+      element: element || ('jianpu' as 'jianpu' | 'staff'), // 元素
+      beat: beat || ('4-4' as '4-2' | '4-3' | '4-4' | '8-3' | '8-6'), // 拍号
+      barLine: barLine || ('1' as '1' | '2' | '4'), // 小节数
+      tempo: tempo || (['1', '2', '3'] as any[]) // 节奏形筛选
     });
 
     const tempoList = computed(() => {