classroom-instruments/src/views/notation/index.tsx

import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
import { useUserStore } from '/src/store/modules/users';
import styles from './index.module.less';
import { modalClickMask, state } from '/src/state';
import { NButton, NModal, NSpace, NSpin } from 'naive-ui';
import { eventGlobal } from '/src/utils';
import { useRouter } from 'vue-router';
import { getHttpOrigin } from '/src/helpers/utils';
export default defineComponent({
  name: 'notation-a',
  setup() {
    const router = useRouter();
    const show = ref(false);
    const key = new Date().getTime();
    const previewModal = ref(false);
    const previewParams = ref({} as any);
    const removeVisiable = ref(false);
    const userStore = useUserStore();
    const Authorization = userStore.getToken || '';
    const iframeRef = ref();
    // console.log(Authorization);
    const notationOpenCreate = sessionStorage.getItem('notation-open-create');
    const openCreateUrl = notationOpenCreate == '1' ? '&addShow=1' : '';
    sessionStorage.removeItem('notation-open-create');
    const data = {
      src: `${
        /(192|localhost)/.test(location.origin)
          ? // ?
            // 'https://test.lexiaoya.cn'
            'http://localhost:3050'
          : getHttpOrigin()
      }/notation/?t=${Date.now()}#/create?v=${Date.now()}&Authorization=${Authorization}${openCreateUrl}`
      //   src: `http://localhost:3050/#/create?Authorization=${Authorization}`
    };
    const fscreen = () => {
      const el = document.documentElement as any;
      //进入全屏
      (el.requestFullscreen && el.requestFullscreen()) ||
        (el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
        (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) ||
        (el.msRequestFullscreen && el.msRequestFullscreen());
    };
    const handleOpen = (e: MessageEvent) => {
      if (e.data.api === 'notation_open') {
        if (window.matchMedia('(display-mode: standalone)').matches) {
          show.value = true;
          previewModal.value = true;
          previewParams.value = {
            url: e.data.url
          };
          fscreen();
        } else {
          window.open(e.data.url);
        }
      } else if (e.data.api === 'notation_exit') {
        removeVisiable.value = true;
      } else if (e.data.api === 'onAuthNotInstalled') {
        //
        eventGlobal.emit('auth-not-installed');
      }
    };
    onMounted(() => {
      window.addEventListener('message', handleOpen);
    });
    onUnmounted(() => {
      window.removeEventListener('message', handleOpen);
    });
    return () => (
      <div class={styles.wrap}>
        <iframe ref={iframeRef} src={data.src} key={key}></iframe>

        <NModal
          maskClosable={modalClickMask}
          v-model:show={previewModal.value}
          class={styles.previewWindow}
          showIcon={false}
          displayDirective="show">
          <NSpin show={show.value} style="--n-opacity-spinning: 1;">
            <iframe
              class={styles.previewIframe}
              onLoad={() => {
                show.value = false;
              }}
              frameborder="0"
              src={previewParams.value.url}></iframe>
          </NSpin>
        </NModal>

        <NModal
          maskClosable={modalClickMask}
          v-model:show={removeVisiable.value}
          preset="card"
          class={['modalTitle', styles.removeVisiable]}
          title={'退出制谱'}>
          <div class={styles.studentRemove}>
            <p>是否退出制谱功能？</p>

            <NSpace class={styles.btnGroupModal} justify="center">
              <NButton
                round
                type="primary"
                onClick={() => {
                  previewModal.value = false;
                  previewParams.value.url = '';
                  removeVisiable.value = false;
                  // 给制谱发消息
                  iframeRef.value.contentWindow.postMessage(
                    {
                      api: 'reload'
                    },
                    '*'
                  );
                  if (state.application) {
                    document.exitFullscreen
                      ? document.exitFullscreen()
                      : document.mozCancelFullScreen
                      ? document.mozCancelFullScreen()
                      : document.webkitExitFullscreen
                      ? document.webkitExitFullscreen()
                      : '';
                  }
                }}>
                确定
              </NButton>
              <NButton round onClick={() => (removeVisiable.value = false)}>
                取消
              </NButton>
            </NSpace>
          </div>
        </NModal>
      </div>
    );
  }
});