chore

src/views/HomeWeb.vue

@@ -68,7 +68,7 @@
         class="swiper-wrapper-mine video-wrap"
       >
         <div
-          class="swiper-root swiper-root"
+          class="swiper-root"
         >
           <div
             class="swiper-wrapper"
@@ -122,7 +122,8 @@
       </div> -->
 
       <!-- <div
-        v-show="typesForShow[currentTabIdx] && typesForShow[currentTabIdx].name === '音频'"
+        v-if="isShowAudios"
+        v-show="!isShowShare"
         class="swiper-wrapper-mine audio-wrap"
       >
         <div
@@ -131,16 +132,21 @@
           <div
             class="swiper-wrapper"
           >
-            <Audio
-              v-for="(item, index) in typesForShow[currentTabIdx].list"
-              ref="audio-comp"
+            <div
+              v-for="(item, index) in hotspotData.audio"
               :key="index"
-              class="audio-custom swiper-slide"
-              :audio-src="`https://4dkk.4dage.com/scene_edit_data/${sceneCode}/user/${item.url}`"
-            />
+              class="swiper-slide"
+            >
+              <audio
+                ref="audio"
+                :src="item.url"
+                controls
+                controlslist="nodownload"
+                disablePictureInPicture
+              />
+            </div>
           </div>
           <div class="swiper-pagination">
-            <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span>
           </div>
           <div class="swiper-button-prev" />
           <div class="swiper-button-next" />
@@ -231,9 +237,12 @@ export default {
   data() {
     return {
       hotspotData: {}, // 热点数据
-      audioUrl: "", //背景音频url
+      bgAudioUrl: "", //背景音频url
+
       isShowImages: false,
       isShowVideos: false,
+      isShowAudios: false,
+
       currentSlideIdx: 0,
       bgImg,
       titleBottomLine,
@@ -248,7 +257,7 @@ export default {
       } else if (this.isShowVideos) {
         return this.hotspotData.videosDesc[this.currentSlideIdx] || this.hotspotData.content
       } else {
-        return ''
+        return this.hotspotData.content
       }
     },
   },
@@ -273,11 +282,11 @@ export default {
                 that.$refs.video[0].play()
               })
             }
-            // if (that.typesForShow[vNew].key === 'audio') {
-            //   that.$nextTick(() => {
-            //     that.$refs['audio-comp'][0].play()
-            //   })
-            // }
+            if (that.isShowAudios) {
+              that.$nextTick(() => {
+                that.$refs.audio[0].play()
+              })
+            }
           },
           slideChange: function(e) {
             that.currentSlideIdx = e.activeIndex
@@ -292,15 +301,15 @@ export default {
                 }
               }
             }
-            // if (that.typesForShow[vNew].key === 'audio') {
-            //   for (let index = 0; index < that.$refs['audio-comp'].length; index++) {
-            //     if (index !== that.currentSlideIdx) {
-            //       that.$refs['audio-comp'][index].pause()
-            //     } else {
-            //       that.$refs['audio-comp'][index].play()
-            //     }
-            //   }
-            // }
+            if (that.isShowAudios) {
+              for (let index = 0; index < that.$refs.audio.length; index++) {
+                if (index !== that.currentSlideIdx) {
+                  that.$refs.audio[index].pause()
+                } else {
+                  that.$refs.audio[index].play()
+                }
+              }
+            }
           }
         }
       })
@@ -316,12 +325,15 @@ export default {
       }
       console.log('热点数据：', this.hotspotData)
 
-      this.audioUrl = this.hotspotData["backgroundMusic"]
+      this.bgAudioUrl = this.hotspotData.backgroundMusic
 
       if (this.hotspotData.images && this.hotspotData.images.length) {
         this.isShowImages = true
       } else if (this.hotspotData.video && this.hotspotData.video.length) {
         this.isShowVideos = true
+      // } else if (false) {
+      //   this.isShowAudios = true
+      //   this.hotspotData.audio = ...
       }
     },
     onClickClose() {
@@ -498,15 +510,19 @@ export default {
       }
     }
     .swiper-wrapper-mine.audio-wrap {
-      width: calc(100% - 1.67rem * 2 - 1.83rem * 2 - 1.67rem * 2);
-      height: 30rem;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -70%);
       .swiper-root {
-        width: 100%;
         .swiper-wrapper {
+          .swiper-slide {
+            > audio {
+              position: absolute;
+              top: 50%;
+              width: 100%;
+              transform: translateY(-50%);
+              padding: 10px;
+              background: #7d3226;
+              border-radius: 5px;
+            }
+          }
         }
       }
     }