添加为空样式

src/views/musicDetail/index.module.less

@@ -92,10 +92,11 @@
 }
 
 .iframe {
-  iframe {
+  .iframeContainer {
     border: 0;
     width: 100%;
     height: 350px;
+    overflow-y: auto;
   }
   .sheetName {
     text-align: center;
@@ -110,12 +111,12 @@
   z-index: 10;
   .alumnList {
     position: relative;
-    padding: 100px 12px 12px 12px;
+    padding: 60px 12px 12px 12px;
     border-radius: 6px;
     background-color: #fff;
     min-height: 100px;
   }
-  .alumnList.emtry{
+  .alumnList.emtry {
     padding-top: 12px;
   }
   .tag {
@@ -163,8 +164,8 @@
         height: 10px;
         fill: #000;
       }
-      &::before{
-        content: '';
+      &::before {
+        content: "";
         position: absolute;
         left: 0;
         right: 0;
@@ -173,20 +174,20 @@
         background-color: #fff;
         z-index: 9;
       }
-      &::after{
-        content: '';
+      &::after {
+        content: "";
         position: absolute;
         left: 0;
         right: 0;
         top: 0;
         bottom: 0;
-        background-image: url('../../assets/icon-player.png');
+        background-image: url("../../assets/icon-player.png");
         background-size: 100%;
         background-repeat: no-repeat;
         z-index: 10;
       }
-      &[aria-label='Pause']::after{
-        background-image: url('../../assets/icon-Pause.png');
+      &[aria-label="Pause"]::after {
+        background-image: url("../../assets/icon-Pause.png");
       }
     }
     .plyr__time--current {
@@ -227,3 +228,15 @@
     }
   }
 }
+
+.emptyContainer {
+  margin: 0 auto;
+  font-size: 14px;
+  color: #999999;
+  line-height: 20px;
+  text-align: center;
+  padding-top: 60px;
+  .emptyImg {
+    width: 172px;
+  }
+}

src/views/musicDetail/index.tsx

@@ -5,7 +5,7 @@ import TheTitle from "@/components/TheTitle";
 import TheSong from "@/components/TheSong";
 import request from "@/helpers/request";
 import { useRoute, useRouter } from "vue-router";
-import { Icon } from "vant";
+import { Icon, Image } from "vant";
 import { useEventListener } from "@vant/use";
 import icon_teacher from "@/assets/icon_teacher.png";
 import Plyr from "plyr";
@@ -15,6 +15,7 @@ import oStart from "@/assets/icon-xinxin.png";
 import printIcon from "@/assets/printIcon.png";
 import IconRect from "@/assets/icon-rect.png";
 import Iconmusicdetail from "@/assets/icon-music-detail.png";
+import empty from "@/assets/emtpy.png";
 import TheDown from "@/components/TheDown";
 
 interface IState {
@@ -32,6 +33,7 @@ export default defineComponent({
       getAlumn();
     });
     const state = reactive<IState>({});
+    const img = ref("");
     const mp3 = reactive({
       iframe: "",
       audioFileUrl: "",
@@ -40,23 +42,19 @@ export default defineComponent({
       const id = route.query.id;
       if (!id) return;
       try {
-        const { data } = await request.get(
-          `/api-website/open/music/sheet/detail/${id}`
-        );
+        const { data } = await request.get(`/api-website/open/music/sheet/detail/${id}`);
         Object.assign(state, data);
         if (Array.isArray(data.background) && data.background.length) {
           const item = data.background[0];
           mp3.audioFileUrl = item.audioFileUrl;
           console.log(route);
-          if (
-            location.host.includes("dev.colexiu") ||
-            location.host.includes("192.168")
-          ) {
+          if (location.host.includes("dev.colexiu") || location.host.includes("192.168")) {
             mp3.iframe = `https://dev.colexiu.com/accompany/colxiu-website.html?id=${id}&part-index=${item.id}`;
           } else {
             mp3.iframe = `https://online.colexiu.com/accompany/colxiu-website.html?id=${id}&part-index=${item.id}`;
           }
         }
+        img.value = state.musicImg ? state.musicImg.split(",") : [];
       } catch (error) {}
     };
     onMounted(() => {
@@ -76,13 +74,7 @@ export default defineComponent({
 
     const initAudio = () => {
       const a = new Plyr("#musicAudio", {
-        controls: [
-          "play-large",
-          "play",
-          "progress",
-          "current-time",
-          "duration",
-        ],
+        controls: ["play-large", "play", "progress", "current-time", "duration"],
       });
     };
 
@@ -106,33 +98,19 @@ export default defineComponent({
     const downRef = ref();
     return () => (
       <div class={styles.musicDeatail}>
-        <TheHeader
-          style={{ background: `rgba(255,255,255,${backgorundColor.value})` }}
-          class={styles.header}
-          theme={isTop.value ? "dark" : "light"}
-        />
-        <img
-          class={styles.bgImg}
-          src={state.teacher?.userAvatar || icon_teacher || state.titleImg}
-        />
+        <TheHeader style={{ background: `rgba(255,255,255,${backgorundColor.value})` }} class={styles.header} theme={isTop.value ? "dark" : "light"} />
+        <img class={styles.bgImg} src={state.teacher?.userAvatar || icon_teacher || state.titleImg} />
         <div class={styles.musicContent}>
           <div class={styles.bg}>
             <div class={styles.alumWrap}>
-              <div class={[styles.alumTitle, "van-ellipsis"]}>
-                {state.musicSheetName}
-              </div>
+              <div class={[styles.alumTitle, "van-ellipsis"]}>{state.musicSheetName}</div>
               <div class={styles.musicDes}>
                 <div class={styles.des}>
-                  <div class={[styles.desItem, "van-multi-ellipsis--l2"]}>
-                    作曲：{state.composer}
-                  </div>
+                  <div class={[styles.desItem, "van-multi-ellipsis--l2"]}>作曲：{state.composer}</div>
                   <div class={styles.desItem}>声部：{state.subjectNames}</div>
                 </div>
                 <div class={styles.author}>
-                  <img
-                    class={styles.avator}
-                    src={state.teacher?.userAvatar || icon_teacher}
-                  />
+                  <img class={styles.avator} src={state.teacher?.userAvatar || icon_teacher} />
                   <div class={styles.authorName}>
                     <div class="van-ellipsis">{state.teacher?.userName}</div>
                     <div class={styles.by}>上传者</div>
@@ -168,7 +146,16 @@ export default defineComponent({
 
             <div class={styles.iframe}>
               <div class={styles.sheetName}>{state.musicSheetName}</div>
-              <iframe id="musicIframe" src={mp3.iframe}></iframe>
+              <div class={styles.iframeContainer}>
+                {img.value.length <= 0 ? (
+                  <Image src={img.value[0]} />
+                ) : (
+                  <div class={styles.emptyContainer}>
+                    <Image class={styles.emptyImg} src={empty} />
+                    <p>暂无乐谱预览图</p>
+                  </div>
+                )}
+              </div>
             </div>
           </div>
 
@@ -176,8 +163,7 @@ export default defineComponent({
             <div class={styles.btn} onClick={() => downRef.value?.toggle()}>
               <img src={oStart} />
               <div>
-                <span style={{ color: "#EB5E00" }}>{state.favoriteNum}</span>{" "}
-                收藏
+                <span style={{ color: "#EB5E00" }}>{state.favoriteNum}</span> 收藏
               </div>
             </div>
             <div class={styles.btn} onClick={() => downRef.value?.toggle()}>