修改样式

src/components/m-video/index.module.less

@@ -35,6 +35,10 @@
     .plyr--video .plyr__control:hover {
       background-color: transparent !important;
     }
+
+    .plyr--fullscreen-fallback {
+      height: 100% !important;
+    }
   }
 
   .video {

src/components/m-video/index.tsx

@@ -151,6 +151,11 @@ export default defineComponent({
         i && i.remove();
         this.$emit('exitfullscreen');
       });
+
+      setTimeout(() => {
+        this.loading = false;
+        this.domPlayVisibility(false);
+      }, 3000);
     },
     // 操作功能
     domPlayVisibility(hide = true) {
@@ -200,7 +205,7 @@ export default defineComponent({
             }}>
             <Loading
               size={36}
-              color="#FF8057"
+              color="#1CACF1"
               vertical
               style={{ height: '100%', justifyContent: 'center' }}>
               加载中...

src/components/m-wx-tip/index.tsx

@@ -32,7 +32,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const showPopup = ref(false);
     onMounted(() => {
-      if (!browser().weixin || props.show) {
+      if (!browser().weixin && props.show) {
         showPopup.value = true;
         return;
       }

src/styles/index.less

@@ -6,6 +6,8 @@
   --van-skeleton-paragraph-background: #ECEEF3;
 
   --van-skeleton-avatar-background: #ECEEF3;
+
+  --van-dialog-message-font-size: 16px;
 }
 
 // 默认输入框光标颜色

src/views/creation/index-share.tsx

@@ -2,7 +2,7 @@ import { defineComponent, onMounted, reactive, ref } from 'vue';
 // import WaveSurfer from 'wavesurfer.js';
 // import Regions from 'wavesurfer.js/dist/plugins/regions.js';
 import styles from './index.module.less';
-import { Cell, Image, List, Popup, Slider } from 'vant';
+import { Cell, Image, List, Popup, Slider, showDialog } from 'vant';
 import iconMember from './images/icon-member.png';
 import iconZan from './images/icon-zan.png';
 import iconZanActive from './images/icon-zan-active.png';
@@ -25,6 +25,7 @@ import { removeAuth } from '../student-register/layout/utils';
 import { setLogout } from '@/state';
 import { storage } from '@/helpers/storage';
 import { ACCESS_TOKEN } from '@/store/mutation-types';
+import MWxTip from '@/components/m-wx-tip';
 
 export default defineComponent({
   name: 'creation-detail',
@@ -56,7 +57,9 @@ export default defineComponent({
       params: {
         page: 1,
         rows: 20
-      }
+      },
+      messageStatus: false,
+      message: ''
     });
     const wavesurfer = ref();
     // window.AudioContext = window.AudioContext || window.webkitAudioContext;
@@ -141,7 +144,6 @@ export default defineComponent({
     };
 
     const onDetail = (item: any) => {
-      console.log(item, 'item');
       router.push({
         path: '/shareCreation',
         query: {
@@ -160,6 +162,7 @@ export default defineComponent({
         };
         // 播放时监听
         audioDom.addEventListener('timeupdate', () => {
+          state.duration = audioDom.duration;
           state.currentTime = audioDom.currentTime;
           const rate = (state.currentTime / state.duration) * 100;
           state.audioWidth = rate > 100 ? 100 : rate;
@@ -223,19 +226,26 @@ export default defineComponent({
           }
         }
 
-        const { data } = await api_openUserMusicDetail(state.id);
-        state.musicDetail = data;
-        getList();
-        // 判断是视频还是音频
+        const res = await api_openUserMusicDetail(state.id);
 
-        if (data.videoUrl.lastIndexOf('mp4') !== -1) {
-          state.playType = 'Video';
+        if (res.code === 999) {
+          state.message = res.message;
+          state.messageStatus = true;
+          return;
         } else {
-          state.playType = 'Audio';
-          // 初始化
-          nextTick(() => {
-            initAudio();
-          });
+          state.musicDetail = res.data;
+          getList();
+          // 判断是视频还是音频
+
+          if (res.data.videoUrl.lastIndexOf('mp4') !== -1) {
+            state.playType = 'Video';
+          } else {
+            state.playType = 'Audio';
+            // 初始化
+            nextTick(() => {
+              initAudio();
+            });
+          }
         }
       } catch (err) {
         //
@@ -337,7 +347,7 @@ export default defineComponent({
             title: () => (
               <div class={styles.userInfo}>
                 <p class={styles.name}>
-                  {state.musicDetail.username}
+                  <span>{state.musicDetail.username}</span>
                   {state.musicDetail.vipFlag && (
                     <img src={iconMember} class={styles.iconMember} />
                   )}
@@ -368,10 +378,10 @@ export default defineComponent({
         <div class={styles.musicSection}>
           <div class={styles.musicName}>
             <span class={styles.musicTag}>曲目名称</span>
-            {state.musicDetail.musicSheetName}
+            {state.musicDetail?.musicSheetName}
           </div>
-          {state.musicDetail.desc && (
-            <div class={styles.musicDesc}>{state.musicDetail.desc}</div>
+          {state.musicDetail?.desc && (
+            <div class={styles.musicDesc}>{state.musicDetail?.desc}</div>
           )}
         </div>
 
@@ -426,6 +436,12 @@ export default defineComponent({
             }}
           />
         </Popup>
+
+        <MWxTip
+          v-model:show={state.messageStatus}
+          message={state.message}
+          showButton={false}
+        />
       </div>
     );
   }

src/views/creation/index.module.less

@@ -198,6 +198,14 @@
       font-weight: 500;
       color: #333333;
       line-height: 22px;
+
+      span {
+        display: inline-block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100px;
+      }
     }
 
     .sub {

src/views/creation/index.tsx

@@ -3,7 +3,16 @@ import { defineComponent, onMounted, reactive } from 'vue';
 import styles from './index.module.less';
 import MSticky from '@/components/m-sticky';
 import MHeader from '@/components/m-header';
-import { Button, Cell, Image, List, Popup, Slider, showToast } from 'vant';
+import {
+  Button,
+  Cell,
+  Image,
+  List,
+  Popup,
+  Slider,
+  showDialog,
+  showToast
+} from 'vant';
 import iconDownload from './images/icon-download.png';
 import iconShare from './images/icon-share.png';
 import iconDelete from './images/icon-delete.png';
@@ -122,6 +131,7 @@ export default defineComponent({
       };
       // 播放时监听
       audioDom.addEventListener('timeupdate', () => {
+        state.duration = audioDom.duration;
         state.currentTime = audioDom.currentTime;
         const rate = (state.currentTime / state.duration) * 100;
         state.audioWidth = rate > 100 ? 100 : rate;
@@ -216,11 +226,29 @@ export default defineComponent({
 
     onMounted(async () => {
       try {
-        const { data } = await api_userMusicDetail(state.id);
-        state.musicDetail = data;
+        const res = await api_userMusicDetail(state.id);
+        console.log(res);
+        if (res.code === 999) {
+          showDialog({
+            message: res.message,
+            theme: 'round-button',
+            confirmButtonColor:
+              'linear-gradient(73deg, #5BECFF 0%, #259CFE 100%)'
+          }).then(() => {
+            if (browser().isApp) {
+              postMessage({
+                api: 'goBack'
+              });
+            } else {
+              router.back();
+            }
+          });
+          return;
+        }
+        state.musicDetail = res.data || {};
         getStarList();
         // 判断是视频还是音频
-        if (data.videoUrl.lastIndexOf('mp4') !== -1) {
+        if (res.data.videoUrl.lastIndexOf('mp4') !== -1) {
           state.playType = 'Video';
         } else {
           state.playType = 'Audio';
@@ -244,8 +272,8 @@ export default defineComponent({
         <div class={styles.playSection}>
           {state.playType === 'Video' && (
             <MVideo
-              src={state.musicDetail.videoUrl}
-              poster={state.musicDetail.img}
+              src={state.musicDetail?.videoUrl}
+              poster={state.musicDetail?.img}
             />
           )}
           {state.playType === 'Audio' && (
@@ -266,7 +294,7 @@ export default defineComponent({
 
               <div class={styles.audioBox}>
                 <div class={styles.audioPan}>
-                  <Image class={styles.audioImg} src={state.musicDetail.img} />
+                  <Image class={styles.audioImg} src={state.musicDetail?.img} />
                 </div>
                 <i class={styles.audioPoint}></i>
                 <i class={styles.audioZhen}></i>
@@ -321,7 +349,7 @@ export default defineComponent({
             title: () => (
               <div class={styles.userInfo}>
                 <p class={styles.name}>
-                  {state.musicDetail.username}
+                  <span>{state.musicDetail?.username}</span>
                   {state.musicDetail.vipFlag && (
                     <img src={iconMember} class={styles.iconMember} />
                   )}
@@ -344,7 +372,7 @@ export default defineComponent({
         <div class={styles.musicSection}>
           <div class={styles.musicName}>
             <span class={styles.musicTag}>曲目名称</span>
-            {state.musicDetail.musicSheetName}
+            {state.musicDetail?.musicSheetName}
           </div>
           {state.musicDetail.desc && (
             <div class={styles.musicDesc}>{state.musicDetail.desc}</div>