Merge branch 'hqyDevNewVersion' of http://git.dayaedu.com/liushengqiang/music-score into feature-tianyong-newVersion

src/page-instrument/evaluat-model/index.tsx

@@ -414,7 +414,7 @@ export default defineComponent({
     };
 
     const earPhonePopShow = computed(() => {
-			return evaluatingData.earphoneMode && state.audioDone && !state.hasDriverPop;
+			return evaluatingData.earphoneMode && !state.isLoading && !state.hasDriverPop;
 		});
 
     onMounted(async () => {

src/page-instrument/view-detail/index.module.less

@@ -191,4 +191,27 @@
     100% {
         transform: translateY(0%);
     }
+}
+
+.loadingPop {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 10000;
+    background: rgba(0, 0, 0, .6);
+    .lottie{
+        width: 120px;
+    }
+    .loadingTip {
+        font-size: 14px;
+        color: #fff;
+    }
 }

src/page-instrument/view-detail/index.tsx

@@ -37,6 +37,7 @@ import AuthorName from "../component/authorName"
 import { initSmoothAnimation } from "./smoothAnimation"
 import EmptyMusic, { isEmptyMusicShow } from "./emptyMusic"
 import { position } from "html2canvas/dist/types/css/property-descriptors/position";
+import Loading from "./loading"
 
 // const DelayCheck = defineAsyncComponent(() =>
 //   import('/src/page-instrument/evaluat-model/delay-check')
@@ -567,6 +568,7 @@ export default defineComponent({
             {isMusicList.value && <TheMusicList />}
           </>
         )}
+        <Loading tipText={state.loadingText} />
         <Popup
           zIndex={5050}
           teleport="body"

src/view/audio-list/loading.tsx → src/page-instrument/view-detail/loading.tsx

@@ -1,11 +1,10 @@
 import { defineComponent, ref, watch } from "vue"
-import icon_loading_img from "./img/icon_loading_img.png"
 import { Progress } from "vant"
 import styles from "./index.module.less"
 import state from "/src/state"
 import { Vue3Lottie } from "vue3-lottie";
-import animBg from "./img/refresh_anim.json";
-import animGif from "./img/refresh_anim.gif";
+import animBg from "./images/refresh_anim.json";
+import animGif from "./images/refresh_anim.gif";
 
 export default defineComponent({
    name: "loading",
@@ -18,8 +17,8 @@ export default defineComponent({
 	},
    setup(props) {
       return () =>
-         !state.audioDone && (
-            <div class={styles.loadingPop}>
+         (
+            <div class={styles.loadingPop} style={{display:state.isLoading? "flex" : "none"}}>
                <img class={styles.lottie} src={animGif} />
                {/* <Vue3Lottie class={styles.lottie} animationData={animBg}></Vue3Lottie> */}
                <div class={styles.loadingTip}>{props.tipText}</div>

src/state.ts

@@ -504,6 +504,8 @@ const state = reactive({
   musicComposer: '',
   /** 作词家 */
   musicLyricist: '',
+  // 加载条
+  isLoading: false,
   /** 加载中的文案 */
   loadingText: '音频资源加载中，请稍后…',
   /** 是否是简单的单行谱模式页面 */
@@ -1797,7 +1799,6 @@ watch(
 export const refreshMusicSvg = () => {
   resetBaseRate();
   state.activeMeasureIndex = 0;
-  state.loadingText = '正在加载中，请稍等…'
   // 销毁旋律线
   destroySmoothAnimation()
   musicScoreRef.value?.refreshMusicScore()

src/view/abnormal-pop/index.tsx

@@ -5,7 +5,7 @@ import { popImgs } from "/src/view/evaluating";
 import { evaluatingData } from "/src/view/evaluating";
 import { Vue3Lottie } from "vue3-lottie";
 import loading from "./loading.json";
-import animBg from "../audio-list/img/refresh_anim.json";
+import animBg from "/src/page-instrument/view-detail/images/refresh_anim.gif";
 
 export default defineComponent({
   name: "abnormal-pop",

src/view/audio-list/index.module.less

@@ -65,27 +65,4 @@
             background-size: 100% 100%;
         }
     }
-}
-
-.loadingPop {
-    position: fixed;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    width: 100vw;
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    z-index: 10000;
-    background: rgba(0, 0, 0, .6);
-    .lottie{
-        width: 120px;
-    }
-    .loadingTip {
-        font-size: 14px;
-        color: #fff;
-    }
 }

src/view/audio-list/index.tsx

@@ -12,7 +12,6 @@ import state, { IPlayState, onEnded, onPlay } from "/src/state";
 import { api_playProgress, api_cloudTimeUpdae, api_cloudplayed, api_remove_cloudplayed, api_remove_cloudTimeUpdae } from "/src/helpers/communication";
 import { evaluatingData } from "/src/view/evaluating";
 import { cloudToggleState } from "/src/helpers/midiPlay"
-import Loading from "./loading"
 
 export const audioData = reactive({
 	songEle: null as HTMLAudioElement | null, // 原生
@@ -279,6 +278,7 @@ export default defineComponent({
 			return Promise.all([createAudio(state.beatSong.music), createAudio(state.beatSong.accompany), createAudio(state.beatSong.fanSong), createAudio(state.beatSong.banSong), createAudio(state.beatSong.mingSong)])
 		}
 		onMounted(async () => {
+			state.isLoading = true
 			if (state.playMode !== "MIDI") {
 				console.time("音频加载时间")
 				// 处理音源
@@ -344,11 +344,13 @@ export default defineComponent({
 					beatMingSong.addEventListener("ended", onEnded);
 				}
 				state.audioDone = true;
+				state.isLoading = false
 				console.timeEnd("音频加载时间")
 				console.log("音频数据：",audioData)
 				api_playProgress(progress);
 			} else {
 				state.audioDone = true;
+				state.isLoading = false
 				const songEndTime = state.times[state.times.length - 1 || 0]?.endtime || 0
 				audioData.duration = songEndTime
 				// 监听midi播放进度
@@ -365,7 +367,6 @@ export default defineComponent({
 		// console.log(state.playMode, state.midiUrl);
 		return () => (
 			<>
-				<Loading tipText={state.loadingText} />
 				<div class={styles.audioList}>
 					{state.playMode === "MIDI" && state.speed != 0 && (
 						<iframe

src/view/music-score/index.tsx

@@ -192,15 +192,19 @@ export default defineComponent({
 			state.osmd.clear();
 			musicData.isRenderLoading = true;
 			musicData.isRefreshLoading = true;
-			state.audioDone = false;
-			getContainerWidth();
-			setRenderType();
-			await getXML();
-			await init();
-			musicData.isRenderLoading = false;
-			musicData.isRefreshLoading = false;
-			state.audioDone = true;
-			musicData.showSelection = true;
+			state.loadingText = '正在加载中，请稍等…'
+			state.isLoading = true;
+			// 在下一帧再执行，确保出现loading
+			requestAnimationFrame(async ()=>{
+				getContainerWidth();
+				setRenderType();
+				await getXML();
+				await init();
+				musicData.isRenderLoading = false;
+				musicData.isRefreshLoading = false;
+				state.isLoading = false;
+				musicData.showSelection = true;
+			})
 		}
 		expose({
 			refreshMusicScore,