更新

src/views/information/components/audio-player/index.tsx

@@ -99,10 +99,12 @@ export default defineComponent({
         state.playState = 'pause';
       } else if (type === 'pre') {
         if (props.musicList[state.listActive - 1]) {
+          audioData.currentTime = 0;
           handlePlay(props.musicList[state.listActive - 1]);
         }
       } else if (type === 'next') {
         if (props.musicList[state.listActive + 1]) {
+          audioData.currentTime = 0;
           handlePlay(props.musicList[state.listActive + 1]);
         }
       }
@@ -213,6 +215,10 @@ export default defineComponent({
               if (timer) return;
               // 开始拖动时也不能更新
               if (state.dragStatus) return;
+              // 由于缓存加载，导致触发暂停之后，还在播放的问题
+              if (state.playState === 'pause') {
+                audioRef.value.pause();
+              }
               audioData.currentTime = audioRef.value?.currentTime;
             }}></audio>
         </div>
@@ -242,18 +248,18 @@ export default defineComponent({
                   }}>
                   {{
                     icon: () => <Image src={musicBg} class={styles.songImg} />,
-                    title: () => <div class={styles.songName}>{item.name}</div>,
-                    value: () => (
-                      <Icon
-                        name={
-                          index === state.listActive &&
-                          state.playState === 'play'
-                            ? songPlay
-                            : songPause
-                        }
-                        class={[styles.iconSong]}
-                      />
-                    )
+                    title: () => <div class={styles.songName}>{item.name}</div>
+                    // value: () => (
+                    //   <Icon
+                    //     name={
+                    //       index === state.listActive &&
+                    //       state.playState === 'play'
+                    //         ? songPlay
+                    //         : songPause
+                    //     }
+                    //     class={[styles.iconSong]}
+                    //   />
+                    // )
                   }}
                 </Cell>
               ))}

src/views/information/famous-music-detail/index.module.less

@@ -48,7 +48,7 @@
     .img {
       width: 76px;
       height: 76px;
-      border-radius: 2px 8px 8px 2px;
+      border-radius: 2px;
       overflow: hidden;
       position: relative;
       z-index: 9;
@@ -59,7 +59,7 @@
       position: absolute;
       left: 0;
       top: 0;
-      z-index: 1;
+      z-index: 10;
       display: inline-block;
       width: 5px;
       height: 76px;
@@ -93,7 +93,7 @@
     .musicTitle {
       max-width: 200px;
       overflow: hidden;
-      white-space: nowrap;
+      // white-space: nowrap;
       text-overflow: ellipsis;
       font-size: 18px;
       font-weight: 600;
@@ -107,6 +107,10 @@
       color: rgba(0, 0, 0, 0.5);
       line-height: 24px;
       margin-right: 12px;
+
+      span {
+        margin-right: 12px;
+      }
     }
   }
 }

src/views/information/famous-music-detail/index.tsx

@@ -9,6 +9,7 @@ import { useRoute } from 'vue-router';
 import AudioPlayer from '../components/audio-player';
 import banner from '../images/banner1.png';
 import musicBg from '../images/music_bg.png';
+import MEmpty from '@/components/m-empty';
 
 export default defineComponent({
   name: 'instrument-detail',
@@ -19,10 +20,12 @@ export default defineComponent({
       background: 'transparent',
       color: '#fff',
       detail: {} as any,
-      musicList: [] as any
+      musicList: [] as any,
+      loading: false
     });
 
     const getDetail = async () => {
+      forms.loading = true;
       try {
         const { data } = await request.get(
           '/edu-app/knowledgeWiki/detail/' + route.query.id
@@ -40,6 +43,7 @@ export default defineComponent({
           };
         });
       } catch {}
+      forms.loading = false;
     };
     onMounted(() => {
       useEventListener(document, 'scroll', () => {
@@ -65,13 +69,19 @@ export default defineComponent({
         <div class={styles.container}>
           <div class={styles.musicHeader}>
             <div class={styles.imgSection}>
-              <Image class={styles.img} src={forms.detail.avatar || musicBg} />
+              <Image
+                class={styles.img}
+                src={forms.detail.avatar || musicBg}
+                fit="cover"
+              />
               <div class={styles.pan}>
                 <img src={forms.detail.avatar || musicBg} />
               </div>
             </div>
             <div class={styles.musicContent}>
-              <div class={styles.musicTitle}>{forms.detail.name || '--'}</div>
+              <div class={[styles.musicTitle, 'van-multi-ellipsis--l2']}>
+                {forms.detail.name || '--'}
+              </div>
               <div class={styles.musicInto}>
                 {forms.detail.lyricists && (
                   <span>作词：{forms.detail.lyricists}</span>
@@ -84,7 +94,17 @@ export default defineComponent({
           </div>
 
           {/* <div class={styles.title}>{forms.detail.name}</div> */}
-          <div class={styles.content} v-html={forms.detail.intros}></div>
+          {forms.detail.intros ? (
+            <div class={styles.content} v-html={forms.detail.intros}></div>
+          ) : (
+            ''
+          )}
+
+          {!forms.loading && !forms.detail.intros && (
+            <div class={styles.content}>
+              <MEmpty description="暂无内容" />
+            </div>
+          )}
         </div>
 
         <MSticky position="bottom">

src/views/information/instrument-detail/index.tsx

@@ -8,6 +8,7 @@ import request from '@/helpers/request';
 import { useRoute } from 'vue-router';
 import AudioPlayer from '../components/audio-player';
 import { state } from '@/state';
+import MEmpty from '@/components/m-empty';
 
 export default defineComponent({
   name: 'instrument-detail',
@@ -18,10 +19,12 @@ export default defineComponent({
       background: 'transparent',
       color: '#fff',
       detail: {} as any,
-      musicList: [] as any
+      musicList: [] as any,
+      loading: false
     });
 
     const getDetail = async () => {
+      forms.loading = true;
       try {
         const { data } = await request.get(
           '/edu-app/knowledgeWiki/detail/' + route.query.id
@@ -39,6 +42,7 @@ export default defineComponent({
           };
         });
       } catch {}
+      forms.loading = false;
     };
     onMounted(() => {
       useEventListener(document, 'scroll', () => {
@@ -65,6 +69,9 @@ export default defineComponent({
 
           <div class={styles.title}>{forms.detail.name}</div>
           <div class={styles.content} v-html={forms.detail.intros}></div>
+          {!forms.loading && !forms.detail.intros && (
+            <MEmpty description="暂无内容" />
+          )}
         </div>
 
         <MSticky position="bottom">

src/views/information/musician-detail/index.tsx

@@ -8,6 +8,7 @@ import request from '@/helpers/request';
 import { useRoute } from 'vue-router';
 import AudioPlayer from '../components/audio-player';
 import banner from '../images/banner1.png';
+import MEmpty from '@/components/m-empty';
 
 export default defineComponent({
   name: 'instrument-detail',
@@ -18,10 +19,12 @@ export default defineComponent({
       background: 'transparent',
       color: '#fff',
       detail: {} as any,
-      musicList: [] as any
+      musicList: [] as any,
+      loading: false
     });
 
     const getDetail = async () => {
+      forms.loading = true;
       try {
         const { data } = await request.get(
           '/edu-app/knowledgeWiki/detail/' + route.query.id
@@ -39,6 +42,7 @@ export default defineComponent({
           };
         });
       } catch {}
+      forms.loading = false;
     };
     onMounted(() => {
       useEventListener(document, 'scroll', () => {
@@ -68,6 +72,10 @@ export default defineComponent({
 
           <div class={styles.title}>{forms.detail.name}</div>
           <div class={styles.content} v-html={forms.detail.intros}></div>
+
+          {!forms.loading && !forms.detail.intros && (
+            <MEmpty description="暂无内容" />
+          )}
         </div>
 
         <MSticky position="bottom">