添加节奏练习

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.kl0hmoae6o"
+    "revision": "0.0tmcvprhh6o"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/views/home/index.module.less

@@ -255,6 +255,7 @@
     &:hover {
       transform: scale(1.02);
       transition: all .2s ease;
+      box-shadow: 5px 5px 17px 0px rgba(153, 154, 218, 0.4);
     }
 
     .bFun {

src/views/home/index.tsx

@@ -33,6 +33,8 @@ import UpdatePassword from '/src/components/layout/modals/update-password';
 import AttendClass from '../prepare-lessons/model/attend-class';
 import { useResizeObserver } from '@vueuse/core';
 import PlaceholderTone from '/src/components/layout/modals/placeholderTone';
+import PreviewWindow from '../preview-window';
+import { state } from '/src/state';
 // import { state } from '/src/state';
 export const formatDateToDay = () => {
   const hours = dayjs().hour();
@@ -53,6 +55,8 @@ export default defineComponent({
     const showUpdatePassword = ref(false);
     const showModalTone = ref(false);
     const forms = reactive({
+      previewModal: false,
+      previewParams: {} as any,
       showAttendClass: false,
       loading: false,
       message: '',
@@ -136,6 +140,20 @@ export default defineComponent({
                 onClick={() => {
                   forms.message = '听音练习功能暂未开放，敬请期待！';
                   showModalTone.value = true;
+
+                  // const origin = /(localhost|192)/.test(location.host)
+                  //   ? 'https://test.lexiaoya.cn'
+                  //   : location.origin;
+                  // const src = `${origin}/instrument/#/view-figner-listen?Authorization=${userStore.getToken}`;
+                  // if (window.matchMedia('(display-mode: standalone)').matches) {
+                  //   state.application = window.matchMedia(
+                  //     '(display-mode: standalone)'
+                  //   ).matches;
+                  //   forms.previewModal = true;
+                  //   forms.previewParams.src = src;
+                  // } else {
+                  //   window.open(src);
+                  // }
                 }}>
                 <img src={t1} class={styles.tFun} />
                 <img src={t11} class={styles.tTxt} />
@@ -144,8 +162,22 @@ export default defineComponent({
               <div
                 class={[styles.topSection, styles.topSection2]}
                 onClick={() => {
-                  forms.message = '节奏练习功能暂未开放，敬请期待！';
-                  showModalTone.value = true;
+                  // forms.message = '节奏练习功能暂未开放，敬请期待！';
+                  // showModalTone.value = true;
+                  // const origin = /(localhost|192)/.test(location.host)
+                  //   ? 'https://test.lexiaoya.cn'
+                  //   : location.origin;
+                  const origin = 'http://localhost:9002';
+                  const src = `${origin}/classroom-app/#/tempo-practice?Authorization=${userStore.getToken}`;
+                  if (window.matchMedia('(display-mode: standalone)').matches) {
+                    state.application = window.matchMedia(
+                      '(display-mode: standalone)'
+                    ).matches;
+                    forms.previewModal = true;
+                    forms.previewParams.src = src + '&platform=microapp';
+                  } else {
+                    window.open(src);
+                  }
                 }}>
                 <img src={t2} class={styles.tFun} />
                 <img src={t21} class={styles.tTxt} />
@@ -248,6 +280,12 @@ export default defineComponent({
             }}
           />
         </NModal>
+
+        <PreviewWindow
+          v-model:show={forms.previewModal}
+          type="music"
+          params={forms.previewParams}
+        />
       </div>
     );
   }

src/views/preview-window/index.tsx

@@ -1,4 +1,12 @@
-import { PropType, defineComponent, onMounted, ref, toRefs, watch } from 'vue';
+import {
+  PropType,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  ref,
+  toRefs,
+  watch
+} from 'vue';
 import styles from './index.module.less';
 import { NModal } from 'naive-ui';
 import AttendClass from '../attend-class';
@@ -43,6 +51,18 @@ export default defineComponent({
       }
     );
 
+    const handleOpen = (e: MessageEvent) => {
+      if (e.data.api === 'iframe_exit') {
+        emit('update:show', false);
+      }
+    };
+
+    onMounted(() => {
+      window.addEventListener('message', handleOpen);
+    });
+    onUnmounted(() => {
+      window.removeEventListener('message', handleOpen);
+    });
     return () => (
       <>
         <NModal
@@ -68,6 +88,10 @@ export default defineComponent({
                 />
               ) : type.value == 'notation' ? (
                 <iframe src={params.value.src}></iframe>
+              ) : type.value == 'music' ? (
+                <iframe
+                  src={params.value.src}
+                  style={{ height: '100vh' }}></iframe>
               ) : (
                 ''
               )