Merge branch 'feature-3.8'

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';
@@ -34,7 +34,7 @@ export default defineComponent({
       type: Object,
       default: () => {}
     },
-    modeType : {
+    modeType: {
       type: String,
       default: ''
     }
@@ -63,7 +63,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 = () => {
@@ -116,29 +117,84 @@ 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.platform === 'modal' ? styles.modal : ''
+        ]}>
         <div class={styles.head}>
-          {
-            props.modeType !== 'courseware' && 
+          {props.modeType !== 'courseware' && (
             <div
-              class={styles.back}
+              class={[styles.back, styles.iconBack]}
               onClick={goback}
               style={{ cursor: 'pointer' }}>
               <img src={icon_back} />
             </div>
-          }
+          )}
           <div class={styles.title}>
             <img src={icon_title} />
           </div>
-          {
-            props.modeType !== 'courseware' && 
+          {props.modeType !== 'courseware' && (
             <div
               class={styles.back}
               style={{ cursor: 'pointer' }}
@@ -147,8 +203,8 @@ export default defineComponent({
                 state.settingStatus = true;
               }}>
               <img src={icon_setting} />
-            </div>            
-          }
+            </div>
+          )}
         </div>
 
         <div class={styles.conCon}>
@@ -277,7 +333,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(() => {