musicScore.tsx 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. import { defineComponent, ref, watch } from 'vue'
  2. import styles from './musicScore.module.less'
  3. import qs from 'query-string'
  4. import iconStart from '../image/icon-start.svg'
  5. import { listenerMessage, postMessage } from '@/helpers/native-message'
  6. import { Skeleton } from 'vant'
  7. import { usePageVisibility } from '@vant/use'
  8. import { useRoute } from 'vue-router'
  9. import { browser } from '@/helpers/utils'
  10. export default defineComponent({
  11. name: 'musicScore',
  12. props: {
  13. music: {
  14. type: Object,
  15. default: () => ({})
  16. },
  17. activeModel: {
  18. type: Boolean
  19. }
  20. },
  21. emits: ['setIframe'],
  22. setup(props, { emit }) {
  23. const browserInfo = browser()
  24. const route = useRoute()
  25. const isLoading = ref(false)
  26. const pageVisibility = usePageVisibility()
  27. /** 页面显示和隐藏 */
  28. watch(pageVisibility, (value) => {
  29. console.log("🚀 ~ value:", value)
  30. if (value == 'hidden') {
  31. isLoading.value = false
  32. }
  33. })
  34. const iframeRef = ref()
  35. const isLoaded = ref(false)
  36. const renderError = ref(false)
  37. const renderSuccess = ref(false)
  38. const Authorization = sessionStorage.getItem('Authorization') || ''
  39. const origin = /(localhost|192)/.test(location.host)
  40. ? 'https://test.lexiaoya.cn'
  41. : location.origin
  42. const query = qs.stringify({
  43. id: props.music.content,
  44. modelType: 'practice',
  45. headerHeight: 32,
  46. Authorization: Authorization
  47. })
  48. const src = `${origin}/orchestra-music-score/?` + query
  49. const checkView = () => {
  50. fetch(src)
  51. .then(() => {
  52. renderSuccess.value = true
  53. renderError.value = false
  54. })
  55. .catch(() => {
  56. renderError.value = true
  57. })
  58. }
  59. watch(props.music, () => {
  60. if (renderSuccess.value) return
  61. renderError.value = false
  62. if (props.music.display) {
  63. checkView()
  64. }
  65. })
  66. // 去云教练完整版
  67. const gotoAccomany = () => {
  68. if (isLoading.value) return
  69. if (!browserInfo.ios){
  70. isLoading.value = true
  71. }
  72. const parmas = qs.stringify({
  73. id: props.music.content
  74. })
  75. const src = `${location.origin}/orchestra-music-score/?` + parmas
  76. postMessage({
  77. api: 'openAccompanyWebView',
  78. content: {
  79. url: src,
  80. orientation: 0,
  81. isHideTitle: true,
  82. statusBarTextColor: false,
  83. isOpenLight: true
  84. }
  85. }, () => {
  86. if (browserInfo.ios){
  87. isLoading.value = true
  88. }
  89. })
  90. }
  91. listenerMessage('webViewOnResume', () => {
  92. isLoading.value = false
  93. })
  94. return () => (
  95. <div class={styles.musicScore}>
  96. <iframe
  97. ref={iframeRef}
  98. onLoad={() => {
  99. emit('setIframe', iframeRef.value)
  100. isLoaded.value = true
  101. }}
  102. class={[styles.container, 'musicIframe']}
  103. frameborder="0"
  104. src={src}
  105. ></iframe>
  106. {route.query.source == 'my-course' && isLoaded.value && (
  107. <div
  108. style={{
  109. display: props.activeModel ? '' : 'none'
  110. }}
  111. class={styles.startBtn}
  112. onClick={(e: Event) => {
  113. e.stopPropagation()
  114. gotoAccomany()
  115. }}
  116. >
  117. <img src={iconStart} />
  118. </div>
  119. )}
  120. <div class={styles.skeletonWrap}>
  121. <Skeleton class={styles.skeleton} row={8} />
  122. </div>
  123. </div>
  124. )
  125. }
  126. })