Merge branch 'hqyDev' of http://git.dayaedu.com/liushengqiang/classroom-app into jenkins-test

src/views/co-ai/index.module.less

@@ -589,15 +589,25 @@
 }
 
 .empty {
+  margin: 0 auto;
+  width: 60%;
   :global {
+    .van-empty{
+      padding: 0;
+      .van-empty__bottom{
+        margin-top: 0;
+      }
+    }
     .van-empty__image {
       width: 100%;
       height: initial;
     }
 
     .van-empty__description {
+      margin-top: 0;
       color: #fff;
       padding: 0;
+      font-size: 14px;
     }
   }
 }

src/views/creation/index-share.tsx

@@ -40,8 +40,7 @@ import { setLogout } from '@/state';
 import { storage } from '@/helpers/storage';
 import { ACCESS_TOKEN } from '@/store/mutation-types';
 import MWxTip from '@/components/m-wx-tip';
-import { usePageVisibility, useEventListener } from '@vant/use';
-import videoBg from './images/video-bg.png';
+import { usePageVisibility, useEventListener, useWindowSize } from '@vant/use';
 import LoginChangeModel from './login-change-model';
 import MSticky from '@/components/m-sticky';
 import "plyr/dist/plyr.css";
@@ -51,8 +50,10 @@ import audioBga from "./images/audioBga.json";
 import audioBga1 from "./images/leftCloud.json";
 import audioBga2 from "./images/rightCloud.json";
 import videobg from "./images/videobg.png";
+import btnImg from './images/btn.png';
 import audioVisualDraw from "./audioVisualDraw"
 import playProgressData from "./playCreation/playProgress"
+import Loading from './loading';
 
 export default defineComponent({
   name: 'creation-detail',
@@ -82,7 +83,7 @@ export default defineComponent({
       },
       params: {
         page: 1,
-        rows: 20
+        rows: 4
       },
       messageStatus: false,
       message: '',
@@ -151,7 +152,7 @@ export default defineComponent({
         if (state.list.length > 0 && result.current === 1) {
           return;
         }
-        state.list = state.list.concat(result.rows || []);
+        state.list = result.rows || [];
         state.listState.finished = result.current >= result.pages;
         state.params.page = result.current + 1;
         state.listState.dataShow = state.list.length > 0;
@@ -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()
         });
       }
@@ -254,7 +254,7 @@ export default defineComponent({
         path:"/playCreation",
         query:{
           resourceUrl:encodeURIComponent(state.musicDetail?.videoUrl),
-          videoBgUrl:encodeURIComponent(state.musicDetail?.videoImg),
+          videoBgUrl:encodeURIComponent(state.musicDetail?.videoImg || ""),
           musicSheetName:encodeURIComponent(state.musicDetail?.musicSheetName),
           username:encodeURIComponent(state.musicDetail?.username),
           musicSheetId:encodeURIComponent(state.musicDetail?.musicSheetId),
@@ -326,7 +326,6 @@ export default defineComponent({
     };
     // 滚动事件
     const cleanScrollEvent = useEventListener('scroll', () => {
-      creationHeight.value = window.innerHeight
       const height =
         window.scrollY ||
         document.documentElement.scrollTop
@@ -359,9 +358,11 @@ export default defineComponent({
         if (api === 'api_musicPage') {
           staffState.isShow = true
           staffState.height = height + "px"
-          // 如果是播放中自动开始 播放
-          if(state._plrl.playing){
-            playStaff()
+          // 如果是播放中自动开始播放  不是播放 自动跳转到当前位置
+          if(playProgressData.playState){
+            handlerClickPlay()
+          }else{
+            updateProgressStaff(state._plrl.currentTime)
           }
         }
       });
@@ -426,12 +427,17 @@ export default defineComponent({
         updateProgressStaff
       }
     }
+    function setFullHeight(){
+      creationHeight.value = window.innerHeight
+    }
     onMounted(async () => {
       __init();
+      window.addEventListener('resize', setFullHeight)
     });
 
     onUnmounted(() => {
       cleanScrollEvent()
+      window.removeEventListener('resize', setFullHeight)
     });
 
     onBeforeRouteUpdate((to: any) => {
@@ -443,6 +449,7 @@ export default defineComponent({
       if(state._plrl){
         state._plrl.destroy()
       }
+      plyrState.playIngShow = true
       staffState.staffSrc = ""
       staffState.isShow = false
       staffState.height = "initial"
@@ -459,7 +466,8 @@ export default defineComponent({
       <div
         style={
           {
-            '--barheight':state.heightV + "px"
+            '--barheight':state.heightV + "px",
+            "--creationHeight":creationHeight.value ? creationHeight.value+"px" : "100vh"
           }
         }
         class={[
@@ -467,7 +475,7 @@ export default defineComponent({
           browser().isTablet ? styles.creationTablet : '',
           isScreenScroll.value && styles.isShareScreenScroll
         ]}>
-        <div style={ creationHeight.value ? {"--creationHeight":creationHeight.value + "px"} : {}} class={styles.creationBg}></div>
+        <div class={styles.creationBg}></div>
         <MSticky position="top"
           onBarHeight={(height: any) => {
             console.log(height, 'height', height)
@@ -588,55 +596,63 @@ export default defineComponent({
             <div class={styles.likeSection}>
               <div class={styles.likeTitle}>推荐作品</div>
               {state.listState.dataShow ? (
-                <List
-                  finished={state.listState.finished}
-                  finishedText=" "
-                  class={[styles.container, styles.containerInformation]}
-                  onLoad={getList}
-                  immediateCheck={false}>
-                  {state.list.map((item: any, index: number) => (
-                    <Cell
-                      class={[styles.likeShareItem, index===state.list.length-1&&styles.likeShareItemLast]}
-                      border={false}
-                      onClick={() => onDetail(item)}
-                    >
-                      {{
-                        icon: () => (
-                          <div class={styles.audioImgBox}>
-                            <img
-                              src={audioPan}
-                              class={styles.audioPan}
-                              crossorigin="anonymous"
-                            />
-                            <img
-                              src={
-                                item.img || musicBg
-                              }
-                              class={styles.muploader}
-                              crossorigin="anonymous"
-                            />
-                            <img class={styles.imgLabel} src={item.videoUrl?.lastIndexOf('mp4') !== -1 ? videoLabel : audioLabel} />
-                          </div>
-                        ),
-                        title: () => (
-                          <div class={styles.userInfo}>
-                            <div class={[styles.musicSheetName,'van-ellipsis']}>{item.musicSheetName}</div>
-                            <div class={styles.usernameCon}>
-                              <div class={styles.likeNum}>
-                                <img src={iconZanActive} />
-                                <span>{item.likeNum}</span>
+                <>
+                  <List
+                    finished={true}
+                    finishedText=" "
+                    class={[styles.container, styles.containerInformation]}
+                    //onLoad={getList}
+                    immediateCheck={false}>
+                    {state.list.map((item: any, index:number) => (
+                      <Cell
+                        class={[styles.likeShareItem, index===state.list.length-1&&styles.likeShareItemLast]}
+                        border={false}
+                        onClick={() => onDetail(item)}
+                      >
+                        {{
+                          icon: () => (
+                            <div class={styles.audioImgBox}>
+                              <img
+                                src={audioPan}
+                                class={styles.audioPan}
+                                crossorigin="anonymous"
+                              />
+                              <img
+                                src={
+                                  item.img || musicBg
+                                }
+                                class={styles.muploader}
+                                crossorigin="anonymous"
+                              />
+                              <img class={styles.imgLabel} src={item.videoUrl?.lastIndexOf('mp4') !== -1 ? videoLabel : audioLabel} />
+                            </div>
+                          ),
+                          title: () => (
+                            <div class={styles.userInfo}>
+                              <div class={[styles.musicSheetName,'van-ellipsis']}>{item.musicSheetName}</div>
+                              <div class={styles.usernameCon}>
+                                <div class={styles.likeNum}>
+                                  <img src={iconZanActive} />
+                                  <span>{item.likeNum}</span>
+                                </div>
+                                <div class={styles.username}>{item.username}</div>
                               </div>
-                              <div class={styles.username}>{item.username}</div>
                             </div>
-                          </div>
-                        ),
-                        value: () => (
-                          <img src={playImg} class={styles.playImg} />
-                        )
-                      }}
-                    </Cell>
-                  ))}
-                </List>
+                          ),
+                          value: () => (
+                            <img src={playImg} class={styles.playImg} />
+                          )
+                        }}
+                      </Cell>
+                    ))}
+                  </List>
+                  {
+                    !state.listState.finished &&
+                      <div class={styles.btnImg}>
+                        <img onClick={getList} src={btnImg} />
+                    </div>
+                  }
+                </>
               ) : (
                 <MEmpty image={"empty2"} description="暂无作品" />
               )}
@@ -655,7 +671,6 @@ export default defineComponent({
           v-model:show={state.loginStatus}
           style={{ background: 'transparent', overflow: 'inherit' }}>
           <LoginModel
-            isRegister
             onClose={() => (state.loginStatus = false)}
             onConfirm={async (val: any) => {
               if (val.loginTag) {
@@ -693,6 +708,9 @@ export default defineComponent({
           message={state.message}
           showButton={false}
         />
+        {
+          !staffState.isShow && <Loading></Loading>
+        }
       </div>
     );
   }

src/views/creation/index.module.less

@@ -3,6 +3,7 @@
   z-index: -1;
   width: 100vw;
   height: var(--creationHeight, 100vh);
+  min-height: 100vh;
   top: 0;
   left: 0;
   background: url("./images/bg.png") no-repeat;
@@ -79,6 +80,7 @@
       background: url("./images/audioBg.png") no-repeat;
       background-size: 100% 100%;
       position: relative;
+      overflow: hidden;
       .audioBga {
         position: absolute;
         left: 0;
@@ -280,6 +282,7 @@
   background: rgba(255,255,255,.09);
   border-radius: 10px;
   padding: 12px 12px 0 12px;
+  overflow: hidden;
   .likeTitle {
     display: flex;
     align-items: center;
@@ -338,6 +341,19 @@
   .mEmpty{
     padding: 0;
   }
+  .btnImg{
+    display: flex;
+    justify-content: center;
+    margin-top: 3px;
+    margin-bottom: 12px;
+    &>img{
+      width: 88px;
+      height: 31px;
+      &:active{
+        opacity: 0.8;
+      }
+    }
+  }
 }
 
 .upward{
@@ -607,3 +623,39 @@
 .creationTablet{
 
 }
+
+.loadingPop {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: var(--creationHeight, 100vh);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+  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',
@@ -67,6 +68,8 @@ export default defineComponent({
     const lottieDom = ref()
     const lottieDom1 = ref()
     const lottieDom2 = ref()
+    const mStickyBottom = ref()
+    const mStickyUpward = ref()
     const state = reactive({
       id: route.query.id,
       deleteStatus: false,
@@ -199,21 +202,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
@@ -363,7 +365,7 @@ export default defineComponent({
         path:"/playCreation",
         query:{
           resourceUrl:encodeURIComponent(state.musicDetail?.videoUrl),
-          videoBgUrl:encodeURIComponent(state.musicDetail?.videoImg),
+          videoBgUrl:encodeURIComponent(state.musicDetail?.videoImg || ""),
           musicSheetName:encodeURIComponent(state.musicDetail?.musicSheetName),
           username:encodeURIComponent(state.musicDetail?.username),
           musicSheetId:encodeURIComponent(state.musicDetail?.musicSheetId),
@@ -383,9 +385,11 @@ export default defineComponent({
         if (api === 'api_musicPage') {
           staffState.isShow = true
           staffState.height = height + "px"
-          // 如果是播放中自动开始 播放
-          if(state._plrl.playing){
-            playStaff()
+          // 如果是播放中自动开始播放  不是播放 自动跳转到当前位置
+          if(playProgressData.playState){
+            handlerClickPlay()
+          }else{
+            updateProgressStaff(state._plrl.currentTime)
           }
         }
       });
@@ -495,6 +499,10 @@ export default defineComponent({
       } catch {
         //
       }
+      requestAnimationFrame(()=>{
+        mStickyBottom.value?.onChnageHeight()
+        mStickyBottom.value?.onChnageHeight()
+      })
     });
 
     onUnmounted(() => {
@@ -667,13 +675,13 @@ export default defineComponent({
         </div>
         {
           !isScreenScroll.value &&
-          <MSticky position="bottom" offsetBottom={state.heightB - 1 + "px"} >
+          <MSticky ref={mStickyUpward} position="bottom" offsetBottom={state.heightB - 1 + "px"} >
             <div class={styles.upward}>
               <img src={iconUpward} />
             </div>
           </MSticky>
         }
-        <MSticky position="bottom" onBarHeight={(height: any) => {
+        <MSticky ref={mStickyBottom} position="bottom" onBarHeight={(height: any) => {
             console.log(height, 'height', height)
             state.heightB = height
         }}>
@@ -735,6 +743,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/login-model/index.tsx

@@ -199,7 +199,6 @@ export default defineComponent({
               zIndex={9999}
               v-model:value={state.imgCodeStatus}
               phone={state.username}
-              type="REGISTER"
               onClose={() => {
                 state.imgCodeStatus = false;
               }}

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

@@ -14,6 +14,11 @@
       .plyr .plyr__controls__item.plyr__progress__container input{
         pointer-events: none;
       }
+      .osmdLoadingPop{
+        width: 100vh !important;
+        height: 100vw !important;
+        min-height: 100vw !important;
+      }
     }
   }
   &.notLoaded{
@@ -108,6 +113,7 @@
       background: url("../images/audioBg.png") no-repeat;
       background-size: 100% 100%;
       position: relative;
+      overflow: hidden;
       .audioBga {
         position: absolute;
         left: 0;

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()
         });
       }
@@ -318,9 +318,11 @@ export default defineComponent({
         if (api === 'api_musicPage') {
           staffState.isShow = true
           staffState.height = height + "px"
-          // 如果是播放中自动开始 播放
-          if(_plrl.playing){
-            playStaff()
+          // 如果是播放中自动开始播放  不是播放 自动跳转到当前位置
+          if(playProgressData.playState){
+            handlerClickPlay()
+          }else{
+            updateProgressStaff(_plrl.currentTime)
           }
         }
       });
@@ -404,7 +406,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={
+        (event)=>{
+          staffState.isShow && handlerClickPlay(event)
+        }
+      }
+    >
       <div class={styles.backBox}>
         <img class={styles.backImg} src={backImg} onClick={handlerBack} />
         <div class={styles.musicDetail}>
@@ -459,6 +467,9 @@ export default defineComponent({
           </iframe>
         </div>
       }
+      {
+        !staffState.isShow && <Loading></Loading>
+      }
     </div>;
   }
 });

src/views/creation/share-model/index.module.less

@@ -118,6 +118,10 @@
     // border-image: linear-gradient(130deg, rgba(37, 156, 254, 1), rgba(68, 201, 255, 1)) 1 1;
     flex-shrink: 0;
     overflow: hidden;
+    transition: transform 0.3s ease;
+    &.animate{
+      transform: scale(1.1)
+    }
 
     .qrcodeCanvas {
       width: 100% !important;

src/views/creation/share-model/index.tsx

@@ -194,7 +194,24 @@ export default defineComponent({
         }
       );
     });
-
+    let _time:any
+    const isAnimate = ref(false)
+    function startOpenOutLink(){
+      isAnimate.value = true
+      _time = setTimeout(() => {
+        isAnimate.value = false
+        postMessage({
+          api: 'openOutLink',
+          content : {
+            "url" : state.url
+          }
+        })
+      }, 1000);
+    }
+    function canceOpenOutLink(){
+      isAnimate.value = false
+      clearTimeout(_time)
+    }
     return () => (
       <div class={styles.shareModel}>
         <div class={styles.shareContent} id="shareContent">
@@ -233,7 +250,13 @@ export default defineComponent({
           </div>
 
           <div class={styles.downloadSection}>
-            <div class={styles.qrcode}>
+            <div class={[styles.qrcode,isAnimate.value && styles.animate]}
+                onMousedown={startOpenOutLink}
+                onTouchstart={startOpenOutLink}
+                onMouseup={canceOpenOutLink}
+                onMouseleave={canceOpenOutLink}
+                onTouchend={canceOpenOutLink}
+              >
               <canvas ref={canvasRef} class={styles.qrcodeCanvas}></canvas>
               <img src={smallLogo} class={styles.qrcodeLogo} />
             </div>