弹窗加载

src/views/creation/index-share.tsx

@@ -53,6 +53,7 @@ import audioBga2 from "./images/rightCloud.json";
 import videobg from "./images/videobg.png";
 import audioVisualDraw from "./audioVisualDraw"
 import playProgressData from "./playCreation/playProgress"
+import Loading from './loading';
 
 export default defineComponent({
   name: 'creation-detail',
@@ -185,7 +186,6 @@ export default defineComponent({
       player.on('loadedmetadata', () => {
         plyrState.loaded = true
         player.currentTime = playProgressData.playProgress
-        if(playProgressData.playState) handlerClickPlay()
       });
       player.on("timeupdate", ()=>{
         plyrState.currentTime = player.currentTime
@@ -228,15 +228,15 @@ export default defineComponent({
         const canvasDom = document.querySelector("#audioVisualizer") as HTMLCanvasElement
         const { pauseVisualDraw, playVisualDraw } = audioVisualDraw(audioDom, canvasDom)
         player.on('play', () => {
-          lottieDom.value.play()
-          lottieDom1.value.play()
-          lottieDom2.value.play()
+          lottieDom.value?.play()
+          lottieDom1.value?.play()
+          lottieDom2.value?.play()
           playVisualDraw()
         });
         player.on('pause', () => {
-          lottieDom.value.pause()
-          lottieDom1.value.pause()
-          lottieDom2.value.pause()
+          lottieDom.value?.pause()
+          lottieDom1.value?.pause()
+          lottieDom2.value?.pause()
           pauseVisualDraw()
         });
       }
@@ -360,9 +360,7 @@ export default defineComponent({
           staffState.isShow = true
           staffState.height = height + "px"
           // 如果是播放中自动开始 播放
-          if(state._plrl.playing){
-            playStaff()
-          }
+          if(playProgressData.playState) handlerClickPlay()
         }
       });
     }
@@ -693,6 +691,9 @@ export default defineComponent({
           message={state.message}
           showButton={false}
         />
+        {
+          !staffState.isShow && <Loading></Loading>
+        }
       </div>
     );
   }

src/views/creation/index.module.less

@@ -607,3 +607,38 @@
 .creationTablet{
 
 }
+
+.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, .5);
+  .loadingBox{
+    width: 98px;
+    height: 98px;
+    border-radius: 10px;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .lottie{
+      margin-top: -6px;
+      width: 52px;
+    }
+    .loadingTip {
+        margin-top: 4px;
+        font-size: 12px;
+        color: #333333;
+    }
+  }
+}

src/views/creation/index.tsx

@@ -57,6 +57,7 @@ import audioBga1 from "./images/leftCloud.json";
 import audioBga2 from "./images/rightCloud.json";
 import videobg from "./images/videobg.png";
 import playProgressData from "./playCreation/playProgress"
+import Loading from './loading';
 
 export default defineComponent({
   name: 'creation-detail',
@@ -199,21 +200,20 @@ export default defineComponent({
         const canvasDom = document.querySelector("#audioVisualizer") as HTMLCanvasElement
         const { pauseVisualDraw, playVisualDraw } = audioVisualDraw(audioDom, canvasDom)
         player.on('play', () => {
-          lottieDom.value.play()
-          lottieDom1.value.play()
-          lottieDom2.value.play()
+          lottieDom.value?.play()
+          lottieDom1.value?.play()
+          lottieDom2.value?.play()
           playVisualDraw()
         });
         player.on('pause', () => {
-          lottieDom.value.pause()
-          lottieDom1.value.pause()
-          lottieDom2.value.pause()
+          lottieDom.value?.pause()
+          lottieDom1.value?.pause()
+          lottieDom2.value?.pause()
           pauseVisualDraw()
         });
       }
       player.on('loadedmetadata', () => {
         player.currentTime = playProgressData.playProgress
-        if(playProgressData.playState) handlerClickPlay()
       });
       player.on("timeupdate", ()=>{
         plyrState.currentTime = player.currentTime
@@ -384,9 +384,7 @@ export default defineComponent({
           staffState.isShow = true
           staffState.height = height + "px"
           // 如果是播放中自动开始 播放
-          if(state._plrl.playing){
-            playStaff()
-          }
+          if(playProgressData.playState) handlerClickPlay()
         }
       });
     }
@@ -735,6 +733,9 @@ export default defineComponent({
             onClose={() => (state.shareStatus = false)}
           />
         </Popup>
+        {
+          !staffState.isShow && <Loading></Loading>
+        }
       </div>
     );
   }

src/views/creation/loading.tsx

@@ -0,0 +1,27 @@
+import { defineComponent, ref, watch } from 'vue';
+import styles from './index.module.less';
+import { Vue3Lottie } from 'vue3-lottie';
+import loadingBg from './images/loading.json';
+
+export default defineComponent({
+  name: 'loading',
+  props: {
+    /** 提示文案 */
+    tipText: {
+      type: String,
+      default: '资源加载中...'
+    }
+  },
+  setup(props) {
+    return () => (
+      <div class={[styles.loadingPop,"osmdLoadingPop"]}>
+        <div class={styles.loadingBox}>
+          <Vue3Lottie
+            class={styles.lottie}
+            animationData={loadingBg}></Vue3Lottie>
+          <div class={styles.loadingTip}>{props.tipText}</div>
+        </div>
+      </div>
+    );
+  }
+});

src/views/creation/playCreation/index.module.less

@@ -14,6 +14,10 @@
       .plyr .plyr__controls__item.plyr__progress__container input{
         pointer-events: none;
       }
+      .osmdLoadingPop{
+        width: 100vh !important;
+        height: 100vw !important;
+      }
     }
   }
   &.notLoaded{

src/views/creation/playCreation/index.tsx

@@ -15,6 +15,7 @@ import {
 } from '@/helpers/native-message';
 import { usePageVisibility } from '@vant/use';
 import playProgressData from "./playProgress"
+import Loading from '../loading';
 
 export default defineComponent({
   name: 'playCreation',
@@ -64,7 +65,6 @@ export default defineComponent({
       _plrl.on('loadedmetadata', () => {
         loaded.value = true
         _plrl.currentTime = playProgressData.playProgress
-        if(playProgressData.playState) handlerClickPlay()
       });
       _plrl.on('play', () => {
         playIngShow.value = false
@@ -254,15 +254,15 @@ export default defineComponent({
         const canvasDom = document.querySelector("#audioVisualizer") as HTMLCanvasElement
         const { pauseVisualDraw, playVisualDraw } = audioVisualDraw(audioDom, canvasDom)
         _plrl.on('play', () => {
-          lottieDom.value.play()
-          lottieDom1.value.play()
-          lottieDom2.value.play()
+          lottieDom.value?.play()
+          lottieDom1.value?.play()
+          lottieDom2.value?.play()
           playVisualDraw()
         });
         _plrl.on('pause', () => {
-          lottieDom.value.pause()
-          lottieDom1.value.pause()
-          lottieDom2.value.pause()
+          lottieDom.value?.pause()
+          lottieDom1.value?.pause()
+          lottieDom2.value?.pause()
           pauseVisualDraw()
         });
       }
@@ -319,9 +319,7 @@ export default defineComponent({
           staffState.isShow = true
           staffState.height = height + "px"
           // 如果是播放中自动开始 播放
-          if(_plrl.playing){
-            playStaff()
-          }
+          if(playProgressData.playState) handlerClickPlay()
         }
       });
     }
@@ -404,7 +402,13 @@ export default defineComponent({
       }
     })
     return () =>
-    <div id="landscapeScreenPlay" class={[styles.playCreation,landscapeScreen.value && styles.landscapeScreen,!loaded.value && styles.notLoaded]} onClick={handlerClickPlay}>
+    <div id="landscapeScreenPlay" class={[styles.playCreation,landscapeScreen.value && styles.landscapeScreen,!loaded.value && styles.notLoaded]}
+      onClick={
+        ()=>{
+          staffState.isShow && handlerClickPlay()
+        }
+      }
+    >
       <div class={styles.backBox}>
         <img class={styles.backImg} src={backImg} onClick={handlerBack} />
         <div class={styles.musicDetail}>
@@ -459,6 +463,9 @@ export default defineComponent({
           </iframe>
         </div>
       }
+      {
+        !staffState.isShow && <Loading></Loading>
+      }
     </div>;
   }
 });