update1646

web/public/static/js/manage.js

@@ -118,7 +118,7 @@ Manage.prototype.loadAudio = function() { //相关：g_tourAudio \  g_playAudio
          
         this.switchBgmState(true)
 
-        window.player.emit('autoplay')
+        window.player.emit&&window.player.emit('autoplay')
         
         document.removeEventListener("touchstart",play);
         document.removeEventListener("click",play);

web/src/components/hotspot/iframe.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="images" :style="{backgroundImage:`url(${require('@/assets/images/project/hotspot_bg.jpg')})`}">
+    <iframe :src="hotspot.iframe[active]" frameborder="0"></iframe>
+  </div>
+</template>
+
+<script>
+export default {
+  props:['hotspot'],
+  data(){
+    return {
+      active:0
+    }
+  },
+  mounted(){
+    console.log(this.hotspot);
+  },
+  methods:{
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.noshow{
+  opacity: 0!important;;
+  pointer-events: none!important;;
+}
+
+.images{
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  text-align: center;
+  >iframe{
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

web/src/components/hotspot/image.vue

@@ -156,7 +156,7 @@ export default {
   text-align: center;
   .title{
     width: 90%;
-    padding: 10px;
+    padding: 10px 20px;
     display: inline-block;
     color: #DBA761;
     font-weight: bold;
@@ -174,6 +174,7 @@ export default {
       position: relative;
       height: 100%;
       margin: 0 10px;
+      transform:translate3d(0,0,0);
       .sl-item{
         position: absolute;
         top: 0;

web/src/components/hotspot/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="hotspotcon">
-    <img @click="close" class="close" :src="require('@/assets/images/project/close.png')" alt="">
+    <img @click="close" class="close" :class="{ifrclose:active=='vIframe'}" :src="require('@/assets/images/project/close.png')" alt="">
     <component :is="active" :hotspot="hotspot"></component>
   </div>
 </template>
@@ -10,6 +10,8 @@ import audio from './audio.vue';
 import image from './image.vue';
 import video from './video.vue';
 import title from './title.vue';
+import iframe from './iframe.vue';
+
 
 
 let iconArr = [
@@ -24,20 +26,24 @@ export default {
   components:{
     vAudio:audio,
     vImage:image,
+    vIframe:iframe,
     vTitle:title,
     vVideo:video
   },
   methods:{
     close(){
       this.$hideHotspot()
+      window.manage.switchBgmState(true);
     }
   },
   mounted(){
+    console.log(this.hotspot);
     iconArr.forEach(item => {
       if (this.hotspot[item.key]) {
         this.active = !this.active ? item.id : this.active;
       }
     });
+    console.log(this.active)
     !this.active && (this.active = 'vTitle')
   },
   data(){
@@ -65,6 +71,9 @@ export default {
     height: 70px;
     cursor: pointer;
   }
+  .ifrclose{
+    top: 100px;
+  }
 }
 
 @media only screen and (max-width: 487px) {

web/src/components/kangri/index.vue

@@ -1,11 +1,31 @@
 <template>
   <div id="kangri" class="kangri">
     <div class="kangricon">
-      <span @click="active-=1,autoplay()" :class="{noshow:active<=0}">上一张</span>
-      <video ref="video" autoplay loop :key="active">
-        <source :src="require(`@/assets/videos/kangri/${videocon[active].video}`)" type="video/mp4">
-      </video> 
-      <span @click="active+=1,autoplay()" :class="{noshow:active>=videocon.length-1}">下一张</span>
+      <span @click="(active -= 1), autoplay()" :class="{ noshow: active <= 0 }"
+        >上一张</span
+      >
+      <video
+        ref="video"
+        autoplay
+        loop
+        x5-video-player-type="h5"
+        x5-video-player-fullscreen="true"
+        webkit-playsinline=""
+        playsinline=""
+        x5-playsinline=""
+        crossorigin="anonymous"
+        :key="active"
+      >
+        <source
+          :src="require(`@/assets/videos/kangri/${videocon[active].video}`)"
+          type="video/mp4"
+        />
+      </video>
+      <span
+        @click="(active += 1), autoplay()"
+        :class="{ noshow: active >= videocon.length - 1 }"
+        >下一张</span
+      >
     </div>
   </div>
 </template>
@@ -13,80 +33,87 @@
 <script>
 let videocon = [
   {
-    id:'1',
-    video:'1.mp4'
+    id: "1",
+    video: "1.mp4",
   },
   {
-    id:'2',
-    video:'2.mp4'
+    id: "2",
+    video: "2.mp4",
   },
   {
-    id:'3',
-    video:'3.mp4'
+    id: "3",
+    video: "3.mp4",
   },
   {
-    id:'4',
-    video:'4.mp4'
+    id: "4",
+    video: "4.mp4",
   },
   {
-    id:'5',
-    video:'5.mp4'
-  }
-]
+    id: "5",
+    video: "5.mp4",
+  },
+];
 export default {
-  data(){
+  data() {
     return {
       videocon,
-      active:0
-    }
+      active: 0,
+    };
   },
-  methods:{
-    changeVideo(item){
-      this.active = item.id
+  methods: {
+    changeVideo(item) {
+      this.active = item.id;
+    },
+    autoplay() {
+      this.$nextTick(() => {
+        this.$refs.video.play();
+      });
     },
-    autoplay(){
-      this.$nextTick(()=>{
-        this.$refs.video.play()
-      })
-    }
   },
-  mounted(){
-    window.player.on("autoplay", ()=> {
-        this.autoplay()
-    })
-  }
-}
+  mounted() {
+    document.addEventListener(
+      "WeixinJSBridgeReady",
+      () => {
+        this.autoplay();
+      },
+      false
+    );
+    window.player.on("autoplay", () => {
+      this.autoplay();
+    });
+  },
+};
 </script>
 
 <style lang="less" scoped>
-.noshow{
-  opacity: 0!important;;
-  pointer-events: none!important;;
+.noshow {
+  opacity: 0 !important;
+  pointer-events: none !important;
 }
 
-.kangri{
+.kangri {
   width: 100%;
   height: 100%;
   text-align: center;
   position: relative;
-   pointer-events: none!important;
+  pointer-events: none !important;
 
- .kangricon{
-  height: 100%;
-  width: 100%;
-   color: #fff;
-   display: flex;
-   justify-content: center;
-   pointer-events: none!important;
-   align-items: center;
-   >video{
-     width: 50%;
-     background-color: #000;
-     height: 100%;
-     pointer-events: auto;
-     object-fit: fill;
-   }
-   >span{
+  .kangricon {
+    height: 100%;
+    width: 100%;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    pointer-events: none !important;
+    align-items: center;
+    > video {
+      width: 50%;
+      background-color: #000;
+      height: 100%;
+      pointer-events: auto;
+      object-fit: fill;
+    }
+    > span {
       pointer-events: auto;
       display: inline-block;
       padding: 20px 60px;
@@ -95,14 +122,15 @@ export default {
       height: 50px;
       line-height: 50px;
       background: rgba(188, 21, 21, 0.9);
-      border: 2px solid #DBA761;
+      border: 2px solid #dba761;
       border-radius: 77px;
       cursor: pointer;
       margin: 0 100px;
-      &:hover,&.active{
-        color: #DBA761;
+      &:hover,
+      &.active {
+        color: #dba761;
       }
     }
- }
+  }
 }
-</style>
+</style>