update

web/src/components/hotspot/audio.vue

@@ -1,108 +1,392 @@
 <template>
-  <div class="images" :style="{backgroundImage:`url(${require('@/assets/images/project/hotspot_bg.jpg')})`}">
-    <div class="title">{{hotspot.title}}</div>
+  <div
+    v-if="!isMobile"
+    class="images"
+    :style="{
+      backgroundImage: `url(${require('@/assets/images/project/video_bg.jpg')})`,
+    }"
+  >
+    <audio
+      id="audioTag"
+      class="noshow"
+      autoplay
+      :src="hotspot.backgroundMusic"
+    ></audio>
+    <div class="title">{{ hotspot.title }}</div>
     <div class="img-con">
-      <span @click="active-=1" :class="{noshow:active<=0}">上一张</span>
-      <img :src="hotspot.images[active]" alt="">
-      <span @click="active+=1" :class="{noshow:active>=hotspot.images.length - 1}">下一张</span>
-      <ul class="pagna">
-        <li v-for="(item,i) in hotspot.images" :class="{active:i==active}" :key="i"></li>
-      </ul>
+      <img :src="require('@/assets/images/project/audioimg.png')" alt="" />
     </div>
-
-    <div class="desc" v-html="hotspot.content">
+    <div class="audiocon">
+      <div class="adcon">
+        <div class="bar">
+          <div class="activeLine" @click="seekTime"></div>
+          <div :style="{ left: currentPosi + '%' }" class="dot"></div>
+        </div>
+        <img
+          @click="bofang"
+          :src="
+            require(`@/assets/images/project/${
+              isPlay ? 'zanting' : 'bofang'
+            }.png`)
+          "
+          alt=""
+        />
+        <span class="time">{{ time }}</span>
+      </div>
+    </div>
+  </div>
+  <div
+    v-else
+    class="mbimages"
+    :style="{
+      backgroundImage: `url(${require('@/assets/images/project/mb_video.jpg')})`,
+    }"
+  >
+    <audio
+      id="audioTag"
+      class="noshow"
+      autoplay
+      preload
+      :src="hotspot.backgroundMusic"
+    ></audio>
+    <div class="title" v-html="hotspot.title"></div>
+    <div class="img-con">
+      <img :src="require('@/assets/images/project/audioimg.png')" alt="" />
+    </div>
+    <div class="audiocon">
+      <div class="time">
+        <span>{{ time }}</span
+        ><span> / {{ allTime }}</span>
+      </div>
+      <div class="adcon">
+        <div class="bar">
+          <div class="activeLine" @click="seekTime"></div>
+          <div :style="{ left: currentPosi + '%' }" class="dot"></div>
+        </div>
+        <div class="bfzt" @click="bofang">
+          <img
+            class="bg"
+            :src="require(`@/assets/images/project/bfzt_bg.png`)"
+            alt=""
+          />
+          <img
+            class="btnggg"
+            :src="
+              require(`@/assets/images/project/${
+                isPlay ? 'zanting' : 'bofang'
+              }.png`)
+            "
+            alt=""
+          />
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  props:['hotspot'],
-  data(){
+  props: ["hotspot"],
+  data() {
     return {
-      active:0
-    }
+      active: 0,
+      time: 0,
+      _audio: "",
+      isPlay: this.isMobile,
+      currentPosi: 0,
+      allTime: 0,
+    };
   },
-  methods:{
-  }
-}
+  methods: {
+    bofang() {
+      if (this._audio.paused) {
+        this._audio.play();
+        this.isPlay = true;
+      } else {
+        this._audio.pause();
+        this.isPlay = false;
+      }
+    },
+    transTime(time) {
+      var duration = parseInt(time);
+      var minute = parseInt(duration / 60);
+      var sec = (duration % 60) + "";
+      var isM0 = ":";
+      if (minute == 0) {
+        minute = "00";
+      } else if (minute < 10) {
+        minute = "0" + minute;
+      }
+      if (sec.length == 1) {
+        sec = "0" + sec;
+      }
+      return minute + isM0 + sec;
+    },
+    updateProgress() {
+      this.currentPosi = (this._audio.currentTime / this._audio.duration) * 100;
+      this.time = this.transTime(this._audio.currentTime);
+    },
+
+    audioEnded() {
+      this._audio.currentTime = 0;
+      this._audio.pause();
+      this.isPlay = false;
+    },
+
+    seekTime(e) {
+      var rate = e.offsetX / e.target.clientWidth;
+      this._audio.currentTime = this._audio.duration * rate;
+      this.updateProgress();
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this._audio = $("#audioTag")[0];
+      $("#audioTag").on("loadedmetadata", (e) => {
+        this.time = this.isMobile?'00:00':this.transTime(e.currentTarget.duration);
+        this.allTime = this.transTime(e.currentTarget.duration);
+        this._audio.play()
+        this.isPlay = true;
+      });
+
+      $("#audioTag").on("canplaythrough", (e) => {
+        this._audio.play()
+      });
+
+      document.addEventListener("WeixinJSBridgeReady", function () {
+        this._audio.play()
+      }, false);
+
+      $("#audioTag").on("timeupdate", () => {
+        this.updateProgress();
+      });
+
+      $("#audioTag").on("ended", () => {
+        this.audioEnded();
+      });
+    });
+  },
+};
 </script>
 
 <style lang="less" scoped>
-.noshow{
-  opacity: 0!important;;
-  pointer-events: none!important;;
-}
 
-.images{
+.images {
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
+  background-position: center bottom;
   text-align: center;
-  .title{
+  .title {
     padding: 0 80px;
     display: inline-block;
-    color: #DBA761;
+    color: #dba761;
     font-weight: bold;
     font-size: 36px;
     height: 70px;
     line-height: 70px;
-    background: #BC1515;
+    background: #bc1515;
     border-radius: 60px;
     margin: 45px auto;
   }
-  .img-con{
+  .img-con {
     display: flex;
     justify-content: space-around;
     align-items: center;
     position: relative;
     padding-bottom: 40px;
-    >span{
-      display: inline-block;
-      padding: 0 30px;
-      box-sizing: content-box;
-      font-size: 20px;
-      height: 50px;
-      line-height: 50px;
-      background: rgba(188, 21, 21, 0.9);
-      border: 2px solid #DBA761;
-      border-radius: 37px;
-      cursor: pointer;
-      &:hover,&.active{
-        color: #DBA761;
-      }
-    }
-    >img{
+    > img {
       max-width: 1000px;
-      border: 10px solid #BC1515;
-      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
       max-height: 600px;
     }
-    .pagna{
+  }
+  @color: #dba761;
+  .audiocon {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 80px;
+    background-color: rgba(188, 21, 21, 0.8);
+    .adcon {
+      width: 94%;
+      margin: 0 auto;
       position: absolute;
-      bottom: 0;
-      text-align: center;
-      z-index: 999;
-      >li{
-        width: 60px;
-        height: 6px;
-        background: #BC1515;
-        display: inline-block;
-        margin: 0 4px;
-        &.active{
-          background: #DBA761;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .bar {
+        flex: auto;
+        position: relative;
+        background: none;
+        display: flex;
+        width: 80%;
+        height: 30px;
+        overflow: visible;
+        .activeLine {
+          height: 10px;
+          cursor: pointer;
+          overflow: hidden;
+          position: absolute;
+          background-color: @color;
+          top: 50%;
+          transform: translateY(-50%);
+          border-radius: 12px;
+          width: 100%;
+        }
+
+        @wh: 20px;
+        .dot {
+          width: @wh;
+          height: @wh;
+          display: inline-block;
+          position: absolute;
+          z-index: 999;
+          background-color: #fff;
+          top: 50%;
+          transform: translate(-@wh*0.5, -50%);
+          border-radius: 50%;
+          cursor: pointer;
         }
       }
+
+      > img {
+        margin: 0 40px;
+        cursor: pointer;
+        width: 30px;
+        height: 36px;
+      }
+      .time {
+        width: 60px;
+        text-align: left;
+        flex-shrink: 0;
+        font-weight: bold;
+      }
     }
   }
-  .desc{
-    max-width: 1000px;
+}
+
+@position: 62px;
+.mbimages {
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: bottom -@position;
+  text-align: center;
+  .title {
+    width: 90%;
+    padding: 10px;
+    display: inline-block;
+    color: #dba761;
+    font-weight: bold;
+    font-size: 18px;
+    background: #bc1515;
+    border-radius: 60px;
     margin: 20px auto 0;
-    color: #DBA761;
-    text-align: left;
-    line-height: 2;
-    max-height: 200px;
-    overflow-y: auto;
   }
+
+  .img-con {
+    width: 90%;
+    margin: 0 auto;
+    > img {
+      width: 100%;
+    }
+  }
+
+  @color: #bc1515;
+  .audiocon {
+    width: 90%;
+    height: 80px;
+    margin: 0 auto;
+    .time {
+      width: 100%;
+      text-align: center;
+      margin: 0 auto 10px;
+      > span {
+        &:first-of-type {
+          color: rgba(112, 112, 112, 1);
+        }
+
+        &:last-of-type {
+          color: @color;
+        }
+      }
+    }
+    .adcon {
+      width: 94%;
+      margin: 0 auto;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .bar {
+        flex: auto;
+        position: relative;
+        background: none;
+        display: flex;
+        width: 80%;
+        height: 30px;
+        overflow: visible;
+        .activeLine {
+          height: 10px;
+          cursor: pointer;
+          overflow: hidden;
+          position: absolute;
+          background-color: @color;
+          top: 50%;
+          transform: translateY(-50%);
+          border-radius: 12px;
+          width: 100%;
+        }
+
+        @wh: 20px;
+        .dot {
+          width: @wh;
+          height: @wh;
+          display: inline-block;
+          position: absolute;
+          z-index: 999;
+          background-color: rgba(219, 167, 97, 1);
+          top: 50%;
+          transform: translate(-@wh*0.5, -50%);
+          border-radius: 50%;
+          cursor: pointer;
+          border: 2px solid @color;
+        }
+      }
+
+      @whh: 36px;
+      .bfzt {
+        width: @whh;
+        height: @whh;
+        position: relative;
+        margin-left: 20px;
+        .bg {
+          width: 100%;
+          height: 100%;
+        }
+        .btnggg {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          cursor: pointer;
+          width: @whh*0.4;
+          height: @whh*0.4;
+        }
+      }
+    }
+  }
+}
+
+.noshow {
+  position: fixed;
+  top: -100%;
+  left: -100%;
+  opacity: 0 !important;
+  pointer-events: none !important;
 }
-</style>
+</style>

web/src/components/hotspot/index.vue

@@ -19,6 +19,7 @@ let iconArr = [
   { name: "网页", key: "iframe", id: "vIframe", img: "iframe-icon", display: false },
   { name: "图片", key: "images", id: "vImage", img: "img-icon", display: false },
   { name: "模型", key: "model",  id: "vModel", img: "model-icon", display: false },
+  { name: "音频", key: "backgroundMusic",  id: "vAudio", img: "model-icon", display: false },
   { name: "介绍", key: "title", id: "vTitle", img: "txt-icon", display: false }
 ];
 
@@ -33,10 +34,7 @@ export default {
   methods:{
     close(){
       this.$hideHotspot()
-      
       g_currentHot.closePopup()
-    
-       
       
       if(g_bgAudio && g_bgAudio.pauseByHot){
         window.manage.switchBgmState(true);
@@ -44,12 +42,16 @@ export default {
     }
   },
   mounted(){
+    console.log(this.hotspot);
     iconArr.forEach(item => {
       if (this.hotspot[item.key]) {
         this.active = !this.active ? item.id : this.active;
       }
     });
+    
     !this.active && (this.active = 'vTitle')
+
+    console.log(this.active);
   },
   data(){
     return {