orchestra-app/src/views/coursewarePlay/component/musicScore.tsx

import { defineComponent, ref, nextTick, onMounted, watch } from 'vue'
import styles from './musicScore.module.less'
import qs from 'query-string'
import OEmpty from '@/components/o-empty'
import iconStart from '../image/icon-start.svg'
import { postMessage } from '@/helpers/native-message'
import { Loading } from 'vant'
import { usePageVisibility } from '@vant/use'

export default defineComponent({
  name: 'musicScore',
  props: {
    music: {
      type: Object,
      default: () => {}
    },
    activeModel:{
      type: Boolean
    }
  },
  emits: ['setIframe'],
  setup(props, { emit }) {
    const isLoading = ref(false)
    const pageVisibility = usePageVisibility()
    /** 页面显示和隐藏 */
    watch(pageVisibility, (value) => {
      if(value == 'hidden'){
        isLoading.value = true
      } else {
        isLoading.value = false
      }
    })
    const iframeRef = ref()
    const renderError = ref(false)
    const renderSuccess = ref(false)
    const Authorization = sessionStorage.getItem('Authorization') || ''
    const origin = /(localhost|192)/.test(location.host)
      ? 'https://ponline.colexiu.com' //'http://localhost:3000' ////
      : location.origin
    const query = qs.stringify({
      id: props.music.content,
      modelType: 'practice',
      headerHeight: 32,
      Authorization: Authorization
    })
    let src = `${origin}/orchestra-music-score/?` + query
    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 (isLoading.value) return;
      isLoading.value = true
      const parmas = qs.stringify({
        id:  props.music.content,
      })
      let src = `${location.origin}/orchestra-music-score/?` + parmas
      postMessage({
        api: 'openAccompanyWebView',
        content: {
          url: src,
          orientation: 0,
          isHideTitle: true,
          statusBarTextColor: false,
          isOpenLight: true
        }
      })
    }

    return () => (
      <div class={styles.musicScore}>
        {renderError.value ? (
          <div class={styles.errorModel}>
            <OEmpty type="network" tips="请检查网络环境" />
          </div>
        ) : (
          <>
            <iframe
              ref={iframeRef}
              onLoad={(e: Event) => {
                emit('setIframe', iframeRef.value)
              }}
              class={[styles.container, 'musicIframe']}
              frameborder="0"
              src={src}
            ></iframe>
            <div style={{
              display: props.activeModel ? '' : 'none'
            }} class={styles.startBtn} onClick={(e: Event) => {
              e.stopPropagation()
              gotoAccomany()
            }}>
              <img src={iconStart} />
              {/* <Loading class={styles.loading} color="rgba(63,134,237,1)" /> */}
            </div>
          </>
        )}
      </div>
    )
  }
})