固定点位播放音频完善

SWKK/src/components/Rbottom.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="Rbottom" :style="`${leftList[1].done ? 'bottom:0px' : ''}`">
-
     <!--热点列表div -->
     <div class="hotBox" :class="{ activeHotBox: hotListShow }">
       <div class="hot_main">
@@ -11,13 +10,25 @@
         <!-- 输入框 -->
         <div class="hot_search" @keyup.enter="mySearch">
           <!-- <input type="text" v-model="hotTxt"> -->
-          <el-input type="text" placeholder="请输关键字" v-model="hotTxt" maxlength="30" show-word-limit>
+          <el-input
+            type="text"
+            placeholder="请输关键字"
+            v-model="hotTxt"
+            maxlength="30"
+            show-word-limit
+          >
           </el-input>
           <div class="hot_btn" @click="mySearch">搜索</div>
         </div>
         <!-- 历史记录 -->
         <div class="hot_his" v-show="hotHisList.length > 0">
-          <div class="hot_hisRow" @click="selectHis(item)" v-for="(item, index) in hotHisList" :key="index">{{ item }}
+          <div
+            class="hot_hisRow"
+            @click="selectHis(item)"
+            v-for="(item, index) in hotHisList"
+            :key="index"
+          >
+            {{ item }}
           </div>
           <!-- 清除 -->
           <div class="hot_clearHis" @click="clearHotHis">清除历史记录</div>
@@ -28,57 +39,103 @@
           暂无内容
         </div>
 
-        <div v-show="hotListShowData.length !== 0" class="hot_list"
-          :style="`height:${hotHisList.length === 0 ? '540px' : '450px'}`">
-          <div class="hot_listRow" @click="openHot(item)" v-for="item in hotListShowData" :key="item.sid">{{
-              item.title?.split('&')[0]
-          }}</div>
+        <div
+          v-show="hotListShowData.length !== 0"
+          class="hot_list"
+          :style="`height:${hotHisList.length === 0 ? '540px' : '450px'}`"
+        >
+          <div
+            class="hot_listRow"
+            @click="openHot(item)"
+            v-for="item in hotListShowData"
+            :key="item.sid"
+          >
+            {{ item.title?.split("&")[0] }}
+          </div>
         </div>
-
-
       </div>
-
     </div>
 
     <audio src="@/assets/media/bacMusic.mp3" loop id="bacMusic"></audio>
 
     <div class="box1">
       <div class="mainll mainrr">
-        <div v-show="list.length !== 0 || item.type > 2" @click="leftCutClick(item.type)" class="row"
-          :class="{ active2: item.done }" v-for="item in leftList" :key="item.type">
-          <img :src="
-            require(`@/assets/img/LeftTop/inco${item.type}${item.done ? 'Ac' : ''
+        <div
+          v-show="list.length !== 0 || item.type > 2"
+          @click="leftCutClick(item.type)"
+          class="row"
+          :class="{ active2: item.done }"
+          v-for="item in leftList"
+          :key="item.type"
+        >
+          <img
+            :src="
+              require(`@/assets/img/LeftTop/inco${item.type}${
+                item.done ? 'Ac' : ''
               }.png`)
-          " alt="" />
+            "
+            alt=""
+          />
           <p>{{ item.name }}</p>
         </div>
 
         <!-- 热点列表 -->
-        <div class="row" :class="{ active2: hotListShow }" @click="hotListShow = true">
-          <img :src="
-            require(`@/assets/img/LeftTop/incoHot${hotListShow ? 'Ac' : ''
+        <div
+          class="row"
+          :class="{ active2: hotListShow }"
+          @click="hotListShow = true"
+        >
+          <img
+            :src="
+              require(`@/assets/img/LeftTop/incoHot${
+                hotListShow ? 'Ac' : ''
               }.png`)
-          " alt="" />
+            "
+            alt=""
+          />
           <p>热点列表</p>
         </div>
-
       </div>
 
       <div class="mainrr">
-        <div class="row" @click="rightClisk(item.type)" v-for="item in rightList" :key="item.type" :class="{
-          active2:
-            (music && item.type === 2) ||
-            (like && item.type === 3) ||
-            (share && item.type === 4) ||
-            (isFullscreen && item.type === 5),
-        }">
-          <img :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)" alt="" v-if="music && item.type === 2" />
-          <img :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)" alt="" v-else-if="like && item.type === 3" />
-          <img :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)" alt=""
-            v-else-if="share && item.type === 4" />
-          <img :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)" alt=""
-            v-else-if="isFullscreen && item.type === 5" />
-          <img :src="require(`@/assets/img/Goods/inco${item.type}.png`)" alt="" v-else />
+        <div
+          class="row"
+          @click="rightClisk(item.type)"
+          v-for="item in rightList"
+          :key="item.type"
+          :class="{
+            active2:
+              (music && item.type === 2) ||
+              (like && item.type === 3) ||
+              (share && item.type === 4) ||
+              (isFullscreen && item.type === 5),
+          }"
+        >
+          <img
+            :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
+            alt=""
+            v-if="music && item.type === 2"
+          />
+          <img
+            :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
+            alt=""
+            v-else-if="like && item.type === 3"
+          />
+          <img
+            :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
+            alt=""
+            v-else-if="share && item.type === 4"
+          />
+          <img
+            :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
+            alt=""
+            v-else-if="isFullscreen && item.type === 5"
+          />
+          <img
+            :src="require(`@/assets/img/Goods/inco${item.type}.png`)"
+            alt=""
+            v-else
+          />
           <transition name="likeAddAnimate">
             <div class="likeMove" v-show="like && item.type === 3">+ 1</div>
           </transition>
@@ -89,17 +146,39 @@
       </div>
     </div>
 
-    <div class="box2" :style="`${leftList[1].done ? '' : 'height:0px;padding:0;opacity:0'}`">
+    <div
+      class="box2"
+      :style="`${leftList[1].done ? '' : 'height:0px;padding:0;opacity:0'}`"
+    >
       <div class="swiper-container">
         <div class="swiper-wrapper" v-if="list.length">
-          <div @click="cutGoods(index)" class="swiper-slide" v-for="(item, index) in list"
-            :class="{ active: (acList === index && playing) || (clickBottomAc && acList === index) }" :key="index">
+          <div
+            @click="cutGoods(index)"
+            class="swiper-slide"
+            v-for="(item, index) in list"
+            :class="{
+              active:
+                (acList === index && playing) ||
+                (clickBottomAc && acList === index),
+            }"
+            :key="index"
+          >
             <img :src="item.list[0].enter.cover" alt="" />
-            <div class="plan" v-show="(acList === index && playing) || (clickBottomAc && acList === index)"
-              :style="{ width: progressPart + '%' }"></div>
-            <p :class="{
-              txtActive: (acList === index && playing) || (clickBottomAc && acList === index),
-            }">
+            <div
+              class="plan"
+              v-show="
+                (acList === index && playing) ||
+                (clickBottomAc && acList === index)
+              "
+              :style="{ width: progressPart + '%' }"
+            ></div>
+            <p
+              :class="{
+                txtActive:
+                  (acList === index && playing) ||
+                  (clickBottomAc && acList === index),
+              }"
+            >
               {{ item.name }}
             </p>
           </div>
@@ -127,7 +206,7 @@
 </template>
 
 <script>
-import { getHotHis, setHotHis, clearHotHis } from '../utils/storage'
+import { getHotHis, setHotHis, clearHotHis } from "../utils/storage";
 import { addNumAPI } from "@/utils/api";
 import Swiper from "./swiper.js";
 export default {
@@ -153,7 +232,7 @@ export default {
       hotList: [],
       hotListShowData: [],
       hotHisList: [],
-      hotTxt: '',
+      hotTxt: "",
       hotListShow: false,
       leftList: [
         { name: "自动漫游", type: 1, done: false },
@@ -174,7 +253,7 @@ export default {
       if (val) {
         if (this.leftList[0].done) {
           this.$emit("stopPlay", true);
-          this.leftList[0].done = false
+          this.leftList[0].done = false;
           if (window.bacMusic) {
             setTimeout(() => {
               this.music = true;
@@ -182,10 +261,10 @@ export default {
           }
         }
       } else {
-        this.hotListShowData = [...this.hotList]
-        this.hotTxt = ''
-        let dom = document.querySelector('.hot_list')
-        if (dom) dom.scrollTop = 0
+        this.hotListShowData = [...this.hotList];
+        this.hotTxt = "";
+        let dom = document.querySelector(".hot_list");
+        if (dom) dom.scrollTop = 0;
       }
     },
     acList(val) {
@@ -196,69 +275,73 @@ export default {
     },
     music(val) {
       let dom = document.querySelector("#bacMusic");
-      if (val) dom.play();
-      else dom.pause();
+      if (val) {
+        // 如果有对应的点位音频，删除
+        const dotAudioDomId = document.querySelector("#dotAudioDomId");
+        if (dotAudioDomId) document.body.removeChild(dotAudioDomId);
+        
+        dom.play();
+      } else dom.pause();
     },
   },
   //方法集合
   methods: {
     // 给父组件调用，拿到热点数据
     getHotListToFather(data) {
-      this.hotList = data.filter(v => v.title.split("&")[2] || !v.title.includes("&"))
-      this.hotListShowData = [...this.hotList]
+      this.hotList = data.filter(
+        (v) => v.title.split("&")[2] || !v.title.includes("&")
+      );
+      this.hotListShowData = [...this.hotList];
     },
 
     openHot(item) {
-      this.$emit('openHot', item)
+      this.$emit("openHot", item);
     },
 
     selectHis(val) {
-      this.hotHisList = this.hotHisList.filter(v => v !== val)
-      this.hotTxt = val
-      this.hotHisList.unshift(val)
-      setHotHis(this.hotHisList)
-      this.hotListShowData = this.hotList.filter(v => v.title.split("&")[0].includes(this.hotTxt))
+      this.hotHisList = this.hotHisList.filter((v) => v !== val);
+      this.hotTxt = val;
+      this.hotHisList.unshift(val);
+      setHotHis(this.hotHisList);
+      this.hotListShowData = this.hotList.filter((v) =>
+        v.title.split("&")[0].includes(this.hotTxt)
+      );
       this.$nextTick(() => {
         setTimeout(() => {
-          let dom = document.querySelector('.hot_list')
-          if (dom) dom.scrollTop = 0
-
+          let dom = document.querySelector(".hot_list");
+          if (dom) dom.scrollTop = 0;
         }, 20);
-      })
+      });
     },
 
     clearHotHis() {
-      clearHotHis()
-      this.hotHisList = []
+      clearHotHis();
+      this.hotHisList = [];
     },
 
     mySearch() {
-
-      if (this.hotTxt.trim() === '') {
-        this.hotListShowData = [...this.hotList]
+      if (this.hotTxt.trim() === "") {
+        this.hotListShowData = [...this.hotList];
       } else {
-        this.hotListShowData = this.hotList.filter(v => v.title.split("&")[0].includes(this.hotTxt))
-        this.hotHisList = this.hotHisList.filter(v => v !== this.hotTxt)
-        this.hotHisList.unshift(this.hotTxt)
-        if (this.hotHisList.length > 14) this.hotHisList.length = 14
-        setHotHis(this.hotHisList)
+        this.hotListShowData = this.hotList.filter((v) =>
+          v.title.split("&")[0].includes(this.hotTxt)
+        );
+        this.hotHisList = this.hotHisList.filter((v) => v !== this.hotTxt);
+        this.hotHisList.unshift(this.hotTxt);
+        if (this.hotHisList.length > 14) this.hotHisList.length = 14;
+        setHotHis(this.hotHisList);
       }
 
       this.$nextTick(() => {
         setTimeout(() => {
-          let dom = document.querySelector('.hot_list')
-          if (dom) dom.scrollTop = 0
-
+          let dom = document.querySelector(".hot_list");
+          if (dom) dom.scrollTop = 0;
         }, 20);
-      })
-
-
-
+      });
     },
     cutGoods(index) {
       this.$emit("update:clickBottomAc", false);
 
-
       this.$emit("daoLanCut", index);
       this.leftList[0].done = false;
       if (window.bacMusic) {
@@ -413,7 +496,7 @@ export default {
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    this.hotHisList = getHotHis()
+    this.hotHisList = getHotHis();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
@@ -433,13 +516,13 @@ export default {
       if (!document.mozFullScreenElement) this.isFullscreen = false;
     });
   },
-  beforeCreate() { }, //生命周期 - 创建之前
-  beforeMount() { }, //生命周期 - 挂载之前
-  beforeUpdate() { }, //生命周期 - 更新之前
-  updated() { }, //生命周期 - 更新之后
-  beforeDestroy() { }, //生命周期 - 销毁之前
-  destroyed() { }, //生命周期 - 销毁完成
-  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang='less' scoped>
@@ -482,7 +565,7 @@ export default {
 
   // 热点列表页面
   .hotBox {
-    transition: opacity .3s;
+    transition: opacity 0.3s;
     opacity: 0;
     pointer-events: none;
     position: fixed;
@@ -501,13 +584,13 @@ export default {
       transform: translate(-50%, -50%);
       width: 1100px;
       height: 700px;
-      background-image: url('../assets/img/LeftTop/hotBox.png');
+      background-image: url("../assets/img/LeftTop/hotBox.png");
       background-size: 100% 100%;
 
       .hot_close {
         cursor: pointer;
         position: absolute;
-        background-image: url('../assets/img/Goods/shareClose.png');
+        background-image: url("../assets/img/Goods/shareClose.png");
         background-size: 100% 100%;
         right: -20px;
         top: -20px;
@@ -518,7 +601,7 @@ export default {
 
       .hot_title {
         font-size: 24px;
-        color: #D8B275;
+        color: #d8b275;
         margin-bottom: 15px;
       }
 
@@ -533,7 +616,7 @@ export default {
           /deep/input {
             background-color: transparent;
             border-radius: 20px;
-            border: 1px solid #D8B275;
+            border: 1px solid #d8b275;
             color: #fff;
           }
 
@@ -546,7 +629,7 @@ export default {
         .hot_btn {
           width: 100px;
           height: 40px;
-          background-color: #D8B275;
+          background-color: #d8b275;
           border-radius: 20px;
           cursor: pointer;
           text-align: center;
@@ -568,7 +651,8 @@ export default {
           right: 0;
           cursor: pointer;
           padding-left: 20px;
-          background: url('../assets/img/LeftTop/delete.png') left center no-repeat;
+          background: url("../assets/img/LeftTop/delete.png") left center
+            no-repeat;
           background-size: 17px 17px;
           color: #fff;
           font-size: 14px;
@@ -578,7 +662,7 @@ export default {
           height: 30px;
           line-height: 30px;
           padding: 0 8px;
-          background-color: #EEEEEE;
+          background-color: #eeeeee;
           margin-right: 15px;
           margin-top: 15px;
           cursor: pointer;
@@ -645,13 +729,13 @@ export default {
             position: relative;
 
             &::before {
-              content: '';
+              content: "";
               position: absolute;
               top: -1px;
               left: 0;
               width: 100%;
               height: 1px;
-              background-color: #D8B275;
+              background-color: #d8b275;
             }
           }
         }
@@ -681,7 +765,7 @@ export default {
         margin-left: 18px;
         color: #fff;
 
-        &>img {
+        & > img {
           width: 50px;
         }
 

SWKK/src/views/Home.vue

@@ -159,6 +159,9 @@ export default {
         // this.kankan.Camera.panorama();
         this.play();
         this.progressPart = 0;
+
+        const dotAudioDomId = document.querySelector("#dotAudioDomId");
+        if (dotAudioDomId) document.body.removeChild(dotAudioDomId);
       }
       if (ind === 2) this.kankan.Camera.panorama();
       else if (ind === 3) this.kankan.Camera.dollhouse();
@@ -379,57 +382,58 @@ export default {
     });
     // 每次移动了点位就会触发
     kankan.Camera.on("flying.started", (pano) => {
-      // 固定点位的id
-      const dotId = pano.panoId;
-
-      // 走到固定点位播放音频
-      const obj = {
-        60: "dingxiang.mp3",
-        112: "liyunsheng.mp3",
-      };
-
-      // 记录当前点位音乐的路径，用于下面的对比
-
-      if (obj[dotId]) {
-        // 如果当前已经在播放音频了，并且对应的src相等
-        if (this.dotAudioSrc === obj[dotId]) return;
-        else {
-          // 如果当前点位音频的src不相等
-          this.dotAudioSrc = obj[dotId];
-
-          const audio = document.createElement("audio");
-          audio.src = `dotAudio/${obj[dotId]}`;
-          audio.id = "dotAudioDomId";
-          document.body.appendChild(audio);
-
-          // 暂停背景音乐并且记录背景音乐的状态
-          let dom = document.querySelector("#bacMusic");
-          window.bacMusic = !dom.paused;
-          setTimeout(() => {
-            this.$refs.RbottomRef.opMusic(false);
-          }, 200);
-
-          // 播放点位的对应音频
-          audio.play();
-        }
-      } else {
-        this.dotAudioSrc = "";
+      // 如果不是自动导览改变了点位的时候，才有手动移动到固定点位的逻辑
+      if (!this.playing) {
+        // console.log(123456, pano);
+        // 固定点位的id
+        const dotId = pano.panoId;
+
+        // 走到固定点位播放音频
+        const obj = {
+          60: "dingxiang.mp3",
+          112: "liyunsheng.mp3",
+        };
 
-        // 如果有对应的点位音频，删除
-        const dotAudioDomId = document.querySelector("#dotAudioDomId");
-        if (dotAudioDomId) document.body.removeChild(dotAudioDomId);
+        // 记录当前点位音乐的路径，用于下面的对比
+
+        if (obj[dotId]) {
+          // 如果当前已经在播放音频了，并且对应的src相等
+          if (this.dotAudioSrc === obj[dotId]) return;
+          else {
+            // 如果当前点位音频的src不相等
+            this.dotAudioSrc = obj[dotId];
+
+            const audio = document.createElement("audio");
+            audio.src = `dotAudio/${obj[dotId]}`;
+            audio.id = "dotAudioDomId";
+            document.body.appendChild(audio);
+
+            // 暂停背景音乐并且记录背景音乐的状态
+            let dom = document.querySelector("#bacMusic");
+            window.bacMusic = !dom.paused;
+            setTimeout(() => {
+              this.$refs.RbottomRef.opMusic(false);
+            }, 200);
+
+            // 播放点位的对应音频
+            audio.play();
+          }
+        } else {
+          this.dotAudioSrc = "";
 
-        // 离开的有音频的点位，看看之前的背景音乐状态，判断时候播放背景音乐
-        if (window.bacMusic) {
-          setTimeout(() => {
-            this.$refs.RbottomRef.opMusic(true);
-          }, 100);
+          // 如果有对应的点位音频，删除
+          const dotAudioDomId = document.querySelector("#dotAudioDomId");
+          if (dotAudioDomId) document.body.removeChild(dotAudioDomId);
+
+          // 离开的有音频的点位，看看之前的背景音乐状态，判断时候播放背景音乐
+          if (window.bacMusic) {
+            setTimeout(() => {
+              this.$refs.RbottomRef.opMusic(true);
+            }, 100);
+          }
         }
       }
 
-      // 60:
-      // 112
-
       this.clickBottomAc = false;
     });
     this.kankan = kankan;