123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129 |
- import { defineComponent, ref, 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 { Skeleton } from 'vant'
- import { usePageVisibility } from '@vant/use'
- import { useRoute } from 'vue-router'
- import { browser } from '@/helpers/utils'
- export default defineComponent({
- name: 'musicScore',
- props: {
- music: {
- type: Object,
- default: () => ({})
- },
- activeModel: {
- type: Boolean
- }
- },
- emits: ['setIframe'],
- setup(props, { emit }) {
- const browserInfo = browser()
- const route = useRoute()
- const isLoading = ref(false)
- const pageVisibility = usePageVisibility()
- /** 页面显示和隐藏 */
- watch(pageVisibility, (value) => {
- console.log("🚀 ~ value:", value)
- if (value == 'hidden') {
- isLoading.value = false
- }
- })
- const iframeRef = ref()
- const isLoaded = ref(false)
- const renderError = ref(false)
- const renderSuccess = ref(false)
- const Authorization = sessionStorage.getItem('Authorization') || ''
- const origin = /(localhost|192)/.test(location.host)
- ? 'https://test.lexiaoya.cn'
- : location.origin
- const query = qs.stringify({
- id: props.music.content,
- modelType: 'practice',
- headerHeight: 32,
- Authorization: Authorization
- })
- const src = `${origin}/orchestra-music-score/?` + query
- const checkView = () => {
- fetch(src)
- .then(() => {
- renderSuccess.value = true
- renderError.value = false
- })
- .catch(() => {
- renderError.value = true
- })
- }
- watch(props.music, () => {
- if (renderSuccess.value) return
- renderError.value = false
- if (props.music.display) {
- checkView()
- }
- })
- // 去云教练完整版
- const gotoAccomany = () => {
- if (isLoading.value) return
- if (!browserInfo.ios){
- isLoading.value = true
- }
- const parmas = qs.stringify({
- id: props.music.content
- })
- const src = `${location.origin}/orchestra-music-score/?` + parmas
- postMessage({
- api: 'openAccompanyWebView',
- content: {
- url: src,
- orientation: 0,
- isHideTitle: true,
- statusBarTextColor: false,
- isOpenLight: true
- }
- }, () => {
- if (browserInfo.ios){
- isLoading.value = true
- }
- })
- }
- listenerMessage('webViewOnResume', () => {
- isLoading.value = false
- })
- return () => (
- <div class={styles.musicScore}>
- <iframe
- ref={iframeRef}
- onLoad={() => {
- emit('setIframe', iframeRef.value)
- isLoaded.value = true
- }}
- class={[styles.container, 'musicIframe']}
- frameborder="0"
- src={src}
- ></iframe>
- {route.query.source == 'my-course' && isLoaded.value && (
- <div
- style={{
- display: props.activeModel ? '' : '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>
- </div>
- )
- }
- })
|