up

SWKK/src/components/Audio.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="Audio">
-    <audio id="audioTag" class="noshow" autoplay :src="audioSrc"></audio>
+    <audio id="audioTag" :class="`noshow`" :src="audioSrc"></audio>
     <div class="audiocon">
       <!-- 按钮 -->
       <div class="leftBtn">
@@ -89,8 +89,8 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      this._audio = $("#audioTag")[0];
-      $("#audioTag").on("loadedmetadata", (e) => {
+      this._audio = $(`#audioTag`)[0];
+      $(`#audioTag`).on("loadedmetadata", (e) => {
         this.time = this.isMobile
           ? "00:00"
           : this.transTime(e.currentTarget.duration);
@@ -107,15 +107,15 @@ export default {
         false
       );
 
-      $("#audioTag").on("timeupdate", () => {
+      $(`#audioTag`).on("timeupdate", () => {
         this.updateProgress();
       });
 
-      $("#audioTag").on("timeupdate", () => {
+      $(`#audioTag`).on("timeupdate", () => {
         this.updateProgress();
       });
 
-      $("#audioTag").on("ended", () => {
+      $(`#audioTag`).on("ended", () => {
         this.audioEnded();
       });
     });

SWKK/src/components/Hot.vue

@@ -69,7 +69,8 @@
             <!-- 音乐 -->
             <template v-else>
               <Audio
-                v-if="item.media && item.media.audio[0]"
+                :Aid="item.media.audio[0].src"
+                v-if="item.media && item.media.audio[0]&&audioIndex===index"
                 :audioSrc="`https://4dkk.4dage.com/scene_edit_data/${KKNum}/user/${item.media.audio[0].src}`"
               />
             </template>
@@ -96,7 +97,7 @@
       <div
         class="row"
         v-show="item.show"
-        v-for="(item) in rightList"
+        v-for="item in rightList"
         :key="item.id"
         @click="type = item.type"
         :class="{ active: item.type === type }"
@@ -110,7 +111,7 @@
           alt=""
         />
 
-        <p>{{ item.name }}{{info[item.type]&&info[item.type].length}}</p>
+        <p>{{ item.name }}{{ info[item.type] && info[item.type].length }}</p>
       </div>
     </div>
   </div>
@@ -144,6 +145,7 @@ export default {
       ],
       Swiper: null,
       KKNum: window.KKNum,
+      audioIndex:0
     };
   },
   //监听属性 类似于data概念
@@ -158,7 +160,15 @@ export default {
             videoDoms[0].play();
           }, 200);
         });
-      }
+      } 
+      // else if (val === "audio") {
+      //   this.$nextTick(() => {
+      //     setTimeout(() => {
+      //       let audioDoms = document.querySelectorAll(".Hot audio");
+      //       audioDoms[0].play();
+      //     }, 200);
+      //   });
+      // }
 
       this.Swiper = null;
       this.data = this.info[val];
@@ -196,6 +206,25 @@ export default {
                     }, 200);
                   });
                 }
+                if (val === "audio") {
+                  let dom = document.querySelectorAll(
+                    ".Hot .swiper-pagination-bullet"
+                  );
+                  dom.forEach((v, i) => {
+                    if (v.className.includes("swiper-pagination-bullet-active"))
+                      this.audioIndex = i;
+                  });
+
+                  // this.$nextTick(() => {
+                  //   setTimeout(() => {
+                  //     let audioDoms = document.querySelectorAll(".Hot audio");
+                  //     audioDoms.forEach((v, i) => {
+                  //       if (i === this.audioIndex) v.play();
+                  //       else v.pause();
+                  //     });
+                  //   }, 200);
+                  // });
+                }
               },
             },
           });

SWKK/src/views/Home.vue

@@ -31,7 +31,7 @@
       @stopPlay="stopPlay"
       :acList="frameId"
       :progress="progress"
-      :playing='playing'
+      :playing="playing"
     />
 
     <!-- 左上名字和介绍 -->
@@ -90,7 +90,6 @@ export default {
       }
     },
 
-
     onceClickMusic() {
       this.$refs.RbottomRef.opMusic(true);
       setTimeout(() => {
@@ -209,7 +208,6 @@ export default {
       // 暂停背景音乐
     });
     kankan.Scene.on("panorama.videorenderer.resumerender", () => {
-
       // 点击热点的时候当前背景音乐的播放状态
       let dom = document.querySelector("#bacMusic");
       window.bacMusic = !dom.paused;
@@ -234,7 +232,7 @@ export default {
 
     // 全部热点数据
     kankan.store.on("tags", (tags) => {
-      this.baseHotData = tags.tags;
+      this.baseHotData = tags.tags.reverse();
       let temp = [];
       tags.tags.forEach((v) => {
         let arrTitle = v.title.split("&");
@@ -277,6 +275,11 @@ export default {
             this.baseHotData.forEach((v) => {
               if (v.title.split("&")[1] === e.data.title.split("&")[1]) {
                 temp.push(v);
+                if (v.media && v.media.image && v.media.image.length > 1) {
+                  v.media.image.forEach((p, pI) => {
+                    if (pI !== 0) temp.push({ ...v, media: { image: [p] } });
+                  });
+                }
               }
             });
             let obj = {
@@ -288,12 +291,18 @@ export default {
             temp.forEach((v) => {
               obj[v.type].push(v);
             });
+            // console.log("11111111111", obj);
+            for (const k in obj) {
+              if (k === "audio") {
+                obj[k].reverse();
+              }
+            }
+
             this.sonInfo = obj;
           } else {
             // 单个热点
             this.sonInfo = { [e.data.type]: [e.data] };
           }
-          console.log('-------------',this.sonInfo);
           // 如果只需监听热点点击，实现其他逻辑操作，下面的代码不需要调用
 
           // 聚焦当前点击的热点