Merge branch 'master' of http://192.168.0.115:3000/chenzhiguang/guangdong_museum

web/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "swiper": "^6.7.5",
+    "v-viewer": "^1.6.4",
     "vue": "^2.6.11",
     "vue-awesome-swiper": "^4.1.1",
     "vue-router": "^3.2.0"

web/public/static/js/main_2020_show.js

@@ -18073,6 +18073,7 @@ window.Modernizr = function(n, e, t) {
                 
                 var video = a.material.map.image
                 video.addEventListener('ended', ()=>{
+                    window.player.emit("videoEnded")
                     console.log( " ended!!!") 
                     if(video.src != a.originVideoSrc){//播放完之后换为原来的视频
                         video.src = a.originVideoSrc

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

@@ -3,7 +3,7 @@
       <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="">
+        <img v-viewer :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>
@@ -14,10 +14,10 @@
     </div>
     <div v-else class="mbimages" :style="{backgroundImage:`url(${require('@/assets/images/project/mb_hostpot.jpg')})`}">
       <div class="title">{{hotspot.title}}</div>
-      <swiper ref="listSwiper" class="swiper-wrapper swiper-wrapper-n" :options="swiperOption">
+      <swiper class="swiper-wrapper swiper-wrapper-n" :options="swiperOption">
         <swiper-slide  class="swiper-slide" v-for="(item,index) in hotspot.images" :key="index">
           <div class="sl-item">
-            <img :src="item">
+            <img v-viewer :src="item">
           </div>
         </swiper-slide>
       </swiper>
@@ -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/hotspot/video.vue

@@ -17,9 +17,18 @@
   </div>
   <div v-else class="mbimages" :style="{backgroundImage:`url(${require('@/assets/images/project/mb_hostpot.jpg')})`}">
       <div class="title">{{hotspot.title}}</div>
-      
-
-      
+      <swiper class="swiper-wrapper swiper-wrapper-n" :options="swiperOption">
+        <swiper-slide  class="swiper-slide" v-for="(item,index) in hotspot.video" :key="index">
+          <div class="sl-item">
+            <video controls autoplay>
+              <source :src="item.url" type="video/mp4">
+            </video> 
+          </div>
+        </swiper-slide>
+      </swiper>
+      <ul class="pagna">
+        <li v-for="(item,i) in hotspot.video" :class="{active: i == mbactive}" :key="i"></li>
+      </ul>
       <div v-if="hotspot.content" class="desc">
         <p>简介：</p>
         <div v-html="hotspot.content"></div>
@@ -27,16 +36,39 @@
     </div>
 </template>
 
+
 <script>
+import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+import 'swiper/swiper-bundle.css'
+
 export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
   props:['hotspot'],
   data(){
     return {
-      active:0
+      active:0,
+      mbactive:0
     }
   },
-  methods:{
-    
+  computed:{
+    swiperOption() {
+      let that = this
+      return {
+        slidesPerView: 'auto',
+        autoplay: false,
+        centeredSlides: true,
+        watchSlidesProgress: true,
+        loop: false,
+        on:{
+          slideChangeTransitionEnd:function () {
+            that.mbactive = this.realIndex
+          }
+        }
+      }
+    }
   }
 }
 </script>
@@ -139,21 +171,50 @@ export default {
     border-radius: 60px;
     margin: 20px auto;
   }
-  
-  .videocon{
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    position: relative;
-    padding-bottom: 40px;
-    >video{
-      max-width: 1000px;
-      border: 10px solid #BC1515;
-      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-      max-height: 600px;
+  .swiper-wrapper {
+    height: 250px;
+    padding: 0;
+    .swiper-slide  {
+      width: 85%;
+      transform-style: preserve-3d;
+      position: relative;
+      height: 100%;
+      margin: 0 10px;
+      .sl-item{
+        position: absolute;
+        top: 0;
+        left: 50%;
+        height: 100%;
+        transform: translateX(-50%);
+        width: 100%;
+        overflow: hidden;
+        border: 4px solid #BC1515;
+        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+        background-color: #757477;
+        >video{
+          object-fit: fill;
+          height: 100%;
+          transform: translateX(-50%);
+          position: absolute;
+          left: 50%;
+        }
+      }
+    }
+  }
+  .pagna{
+    text-align: center;
+    z-index: 999;
+    >li{
+      width: 40px;
+      height: 4px;
+      background: #BC1515;
+      display: inline-block;
+      margin: 0 4px;
+      &.active{
+        background: #DBA761;
+      }
     }
   }
-
   .desc{
     color: #DBA761;
     text-align: left;

web/src/components/huiyi/index.vue

@@ -40,6 +40,12 @@ export default {
       }]
     }
   },
+  mounted(){
+    window.player.on("videoEnded", ()=> {
+        this.showBg = true
+        this.active = ''
+    })
+  },
   methods:{
     hideBg(){
       this.showBg = false

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>

web/src/main.js

@@ -2,7 +2,15 @@ import Vue from 'vue'
 import App from './App.vue'
 import '@/mixins'
 import router from './router'
-
+import 'viewerjs/dist/viewer.css'
+import Viewer from 'v-viewer'
+Vue.use(Viewer,{
+  defaultOptions: {
+    navbar:false,
+    button:false,
+    maxZoomRatio:2
+  }
+})
 
 
 Vue.config.productionTip = false

web/src/pages/Home.vue

@@ -105,7 +105,7 @@ export default {
  
   data(){
       return {
-          showWelcome: false,
+          showWelcome: true,
           hotspots:''
       }
   },