修改显示

index.html

@@ -8,6 +8,11 @@
     content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
   <meta http-equiv="Cache-control" content="no-cache">
   <meta http-equiv="Cache" content="no-cache">
+  <meta http-equiv="Content-Security-Policy" content="
+                              default-src * data: blob: ws: wss: gap://ready file://*;
+                              style-src * 'unsafe-inline';
+                              script-src * 'unsafe-inline' 'unsafe-eval';
+                              connect-src * ws: wss:;">
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <!-- 设置苹果工具栏颜色 -->
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />

src/views/accompany/download.tsx

@@ -2,7 +2,16 @@ import { defineComponent, reactive, ref, watch } from 'vue'
 import styles from './download.module.less'
 import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
 import { addMusicTitle, addWatermark, convasToImg, imgToCanvas } from './imageFunction'
-import { Button, Swipe, SwipeItem, Toast, Image } from 'vant'
+import {
+  Button,
+  Swipe,
+  SwipeItem,
+  Toast,
+  Image,
+  showLoadingToast,
+  showSuccessToast,
+  showFailToast
+} from 'vant'
 
 export default defineComponent({
   name: 'download',
@@ -54,7 +63,7 @@ export default defineComponent({
     }
 
     const saveImg = async () => {
-      Toast.loading({
+      showLoadingToast({
         message: '图片生成中...',
         forbidClick: true
       })
@@ -68,9 +77,9 @@ export default defineComponent({
         }
       })
       if (res?.content?.status === 'success') {
-        Toast.success('已保存到相册')
+        showSuccessToast('已保存到相册')
       } else {
-        Toast.fail('保存失败')
+        showFailToast('保存失败')
       }
     }
     return () => {

src/views/accompany/music-detail.tsx

@@ -102,7 +102,6 @@ export default defineComponent({
 
     const toDetail = async (row: any) => {
       staffData.partNames = await getPartNames(row.xmlFileUrl)
-      console.log(staffData.partNames, 'partNames')
       let partList = row.background || []
       partList = partList.filter(
         (item: any) => !item.track?.toLocaleUpperCase()?.includes('COMMON')
@@ -138,10 +137,10 @@ export default defineComponent({
           if (data.audioFileUrl) {
             initAudio()
           } else {
-            if (data.musicSheetType === 'SINGLE') {
-              loading.value = false
-              return
-            }
+            // if (data.musicSheetType === 'SINGLE') {
+            //   loading.value = false
+            //   return
+            // }
             await toDetail(staffData.details)
             renderStaff()
           }
@@ -167,15 +166,24 @@ export default defineComponent({
       })
 
       player.value.on('ready', () => {
+        console.log('ready, playing')
         staffData.audioReady = true
         nextTick(async () => {
-          if (staffData.details.musicSheetType === 'SINGLE') {
-            loading.value = false
-            return
-          }
+          // if (staffData.details.musicSheetType === 'SINGLE') {
+          //   loading.value = false
+          //   return
+          // }
           await toDetail(staffData.details)
           renderStaff()
         })
+        player.value.muted = true
+        player.value.play()
+      })
+      player.value.on('loadedmetadata', () => {
+        if (player.value.muted) {
+          player.value.muted = false
+          player.value.pause()
+        }
       })
     }
 
@@ -200,7 +208,6 @@ export default defineComponent({
     }
 
     const showLoading = async (e: any) => {
-      console.log(e, 'enter')
       if (e.data?.api === 'musicStaffRender') {
         try {
           const osmdImg = e.data.osmdImg
@@ -247,33 +254,33 @@ export default defineComponent({
           </div>
 
           <div class={styles.showImgContainer}>
-            {staffData.details?.musicSheetType === 'CONCERT' ? (
-              <>
-                {loading.value && (
-                  <>
-                    <Skeleton title row={7} />
-                  </>
-                )}
-                <iframe
-                  id="staffIframeRef"
-                  style={{
-                    opacity: loading.value ? 0 : 1,
-                    width: '100%',
-                    height: '100%'
-                  }}
-                  src={staffData.iframeSrc}
-                  onLoad={musicIframeLoad}
-                ></iframe>
-              </>
-            ) : (
+            {/* {staffData.details?.musicSheetType === 'CONCERT' ? (
+              <> */}
+            {loading.value && (
               <>
-                {showImg.value.length > 0 && (
-                  <>
-                    <img src={showImg.value[0]} alt="" class={styles.musicImg} />
-                  </>
-                )}
+                <Skeleton title row={7} />
               </>
             )}
+            <iframe
+              id="staffIframeRef"
+              style={{
+                opacity: loading.value ? 0 : 1,
+                width: '100%',
+                height: '100%'
+              }}
+              src={staffData.iframeSrc}
+              onLoad={musicIframeLoad}
+            ></iframe>
+            {/* </> */}
+            {/* // ) : (
+            //   <>
+            //     {showImg.value.length > 0 && (
+            //       <>
+            //         <img src={showImg.value[0]} alt="" class={styles.musicImg} />
+            //       </>
+            //     )}
+            //   </>
+            // )} */}
           </div>
         </div>