classroom-app/src/views/courseware-play/component/musicScore.tsx

import { defineComponent, ref, nextTick, onMounted, watch } from 'vue';
import styles from './musicScore.module.less';
import qs from 'query-string';
import iconStart from '../image/icon-start.svg';
import { listenerMessage, postMessage } from '@/helpers/native-message';
import { Loading, Popup, Skeleton } from 'vant';
import { usePageVisibility } from '@vant/use';
import { useRoute } from 'vue-router';
import { browser, vaildMusicScoreUrl } from '@/helpers/utils';
import { storage } from '@/helpers/storage';
import { ACCESS_TOKEN } from '@/store/mutation-types';
import TheVip from '@/components/the-vip';
import { state } from '@/state';
import request from '@/helpers/request';

export default defineComponent({
  name: 'musicScore',
  props: {
    pageVisibility: {
      type: String,
      default: ''
    },
    show: {
      type: Boolean,
      default: false
    },
    music: {
      type: Object,
      default: () => {}
    },
    activeModel: {
      type: Boolean
    }
  },
  emits: ['setIframe'],
  setup(props, { emit }) {
    const browserInfo = browser();
    const route = useRoute();
    const isLoading = ref(false);
    /** 页面显示和隐藏 */
    watch(
      () => props.pageVisibility,
      value => {
        if (value == 'hidden') {
          isLoading.value = false;
        }
        if (value == 'hidden' && props.show) {
          iframeRef.value?.contentWindow?.postMessage(
            { api: 'setPlayState' },
            '*'
          );
        }
      }
    );
    // 是否显示当前曲谱
    watch(
      () => props.show,
      val => {
        if (!val) {
          iframeRef.value?.contentWindow?.postMessage(
            { api: 'setPlayState' },
            '*'
          );
        }
      }
    );
    const iframeRef = ref();
    const isLoaded = ref(false);
    const renderError = ref(false);
    const renderSuccess = ref(false);
    const showVip = ref(false);
    const Authorization = storage.get(ACCESS_TOKEN);
    // const origin = /(localhost|192)/.test(location.host)
    //   ? 'https://test.lexiaoya.cn'
    //   : location.origin;
    let src = qs.stringifyUrl({
      url: vaildMusicScoreUrl() + '/instrument/',
      query: {
        id: props.music.content,
        modelType: 'practise',
        Authorization: Authorization,
        showGuide: true,
        showWebGuide: false,
        showCourseMember: true,
        iscurseplay: 'play'
      }
    });
    const checkView = () => {
      fetch(src)
        .then(() => {
          renderSuccess.value = true;
          renderError.value = false;
        })
        .catch(err => {
          renderError.value = true;
        });
    };
    watch(props.music, () => {
      if (renderSuccess.value) return;
      renderError.value = false;
      if (props.music.display) {
        checkView();
      }
    });

    // 去云练习完整版
    const gotoAccomany = () => {
      // if (!state.user.data?.vipMember) {
      //   // showVip.value = true;
      //   return;
      // }
      if (isLoading.value) return;
      if (!browserInfo.ios) {
        isLoading.value = true;
      }
      const Authorization = storage.get(ACCESS_TOKEN);
      // const origin = /(localhost|192)/.test(location.host)
      //   ? 'https://test.lexiaoya.cn'
      //   : location.origin;
      let src = qs.stringifyUrl({
        url: vaildMusicScoreUrl() + '/instrument/',
        query: {
          id: props.music.content,
          Authorization: Authorization,
          showGuide: true
        }
      });
      postMessage(
        {
          api: 'openAccompanyWebView',
          content: {
            url: src,
            orientation: 0,
            isHideTitle: true,
            statusBarTextColor: false,
            isOpenLight: true,
            c_orientation: 0
          }
        },
        () => {
          if (browserInfo.ios) {
            isLoading.value = true;
          }
        }
      );
    };
    const getUserInfo = async () => {
      const res = await request.get('/edu-app/user/getUserInfo', {
        initRequest: true, // 初始化接口
        requestType: 'form',
        hideLoading: true
      });
      if (res?.code === 200) {
        state.user.data.vipMember = res.data.vipMember;
      }
    };
    listenerMessage('webViewOnResume', () => {
      isLoading.value = false;
      getUserInfo();
    });

    return () => (
      <div class={styles.musicScore}>
        <iframe
          ref={iframeRef}
          onLoad={(e: Event) => {
            emit('setIframe', iframeRef.value);
            isLoaded.value = true;
          }}
          class={[styles.container, 'musicIframe']}
          frameborder="0"
          src={src}></iframe>
        {isLoaded.value && (
          <div
            style={{
              display:
                props.activeModel || !state.user.data?.vipMember ? '' : 'none'
            }}
            class={styles.startBtn}
            onClick={(e: Event) => {
              e.stopPropagation();
              gotoAccomany();
            }}>
            <img src={iconStart} />
          </div>
        )}
        <div class={styles.skeletonWrap}>
          <Skeleton class={styles.skeleton} row={8} />
        </div>
        <Popup
          teleport="body"
          class="popup-custom van-scale"
          transition="van-scale"
          closeOnClickOverlay={false}
          v-model:show={showVip.value}>
          <TheVip
            onClose={val => {
              if (val) {
                postMessage({
                  api: 'openWebView',
                  content: {
                    url: `${location.origin}${location.pathname}#/member-center`,
                    orientation: 1
                  }
                });
              }
              showVip.value = false;
            }}
          />
        </Popup>
      </div>
    );
  }
});