gemercheung 2 سال پیش
والد
کامیت
40d4de61d1

+ 27 - 21
packages/qjkankan-view/src/components/Pano/index.vue

@@ -4,7 +4,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, computed, watch, nextTick ,unref} from "vue";
+import { ref, onMounted, computed, watch, nextTick, unref } from "vue";
 import { useStore } from "vuex";
 import { useApp, getApp } from "@/app";
 import Fdkk from "../Fdkk";
@@ -162,30 +162,36 @@ useApp().then((app) => {
   app.Tags.on("clickHotspot", (data) => {
     let { id } = data;
     let hotspot = unref(currentScene).someData.hotspots.find(
-      (item) => item.name.toLowerCase() === id.toLowerCase(),
+      (item) => item.name.toLowerCase() === id.toLowerCase()
     );
-    // debugger
+
     if (hotspot) {
-      console.log('click',hotspot);
-      store.commit("functions/setPauseFrom", "");
-      if (hotspot.hotspotType == "scene") {
-        store.commit(
-          "scene/setCurrentScene",
-          scenesList.value.find((item) => item.id == hotspot.secne.id)
-        );
-        updateListPosi();
-      } else if (hotspot.hotspotType == "link") {
-        if (hotspot.linkOpenType == "newTab") {
-          window.open(hotspot.hyperlink, "_blank");
+      const isNotclickType = ["tag"];
+      if (!isNotclickType.includes(hotspot.hotspotType)) {
+        console.log("click", hotspot);
+        store.commit("functions/setPauseFrom", "");
+        if (hotspot.hotspotType == "scene") {
+          store.commit(
+            "scene/setCurrentScene",
+            scenesList.value.find((item) => item.id == hotspot.secne.id)
+          );
+          updateListPosi();
+        } else if (hotspot.hotspotType == "link") {
+          if (hotspot.linkOpenType == "newTab") {
+            window.open(hotspot.hyperlink, "_blank");
+          } else {
+            store.commit("tags/setCurrentTag", hotspot);
+          }
         } else {
           store.commit("tags/setCurrentTag", hotspot);
-        }
-      } else {
-        store.commit("tags/setCurrentTag", hotspot);
-        if (hotspot.hotspotType == "audio" || hotspot.hotspotType == "video") {
-          store.commit("functions/setPauseFrom", currentPlaying.value);
-          musicPlayer.pause();
-          soundPlayer.pause();
+          if (
+            hotspot.hotspotType == "audio" ||
+            hotspot.hotspotType == "video"
+          ) {
+            store.commit("functions/setPauseFrom", currentPlaying.value);
+            musicPlayer.pause();
+            soundPlayer.pause();
+          }
         }
       }
     }

+ 1 - 1
packages/qjkankan-view/src/components/UIGather/mobile/tips.vue

@@ -44,7 +44,7 @@ useApp().then((app) => {
   transform: translate(-50%, -50%);
   transition: display 0.3s ease;
   > img {
-    max-width: 300px;
+    max-width: 200px;
   }
 }
 </style>

+ 6 - 1
packages/qjkankan-view/src/components/assembly/MobileTags/index.vue

@@ -10,7 +10,9 @@
       <metasAudio v-if="currentTag.hotspotType == 'audio'" />
       <metasVideo v-if="currentTag.hotspotType == 'video'" />
       <metasText v-if="currentTag.hotspotType == 'textarea'" />
-     
+      <metasPdf v-if="currentTag.hotspotType == 'pdf'" />
+      <metasArticle v-if="currentTag.hotspotType == 'article'" />
+      <metasImageText v-if="currentTag.hotspotType == 'imageText'" />
     </div>
   </teleport>
 </template>
@@ -21,6 +23,9 @@ import metasWeb from './metas/metas-web'
 import metasAudio from './metas/metas-audio'
 import metasVideo from './metas/metas-video'
 import metasText from './metas/metas-text'
+import metasPdf from './metas/metas-pdf.vue'
+import metasArticle from './metas/metas-article.vue'
+import metasImageText from './metas/metas-imagetext.vue'
 
 import { reactive, defineEmits, onBeforeMount, onMounted, ref, watchEffect, computed, watch, nextTick } from "vue";
 import { useStore } from "vuex";

+ 69 - 0
packages/qjkankan-view/src/components/assembly/MobileTags/metas/metas-article.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="txtcon">
+    <div class="txtbody" v-html="currentTag.articleInfo.html"></div>
+  </div>
+</template>
+
+<script setup>
+import {
+  reactive,
+  defineEmits,
+  onBeforeMount,
+  onMounted,
+  ref,
+  watchEffect,
+  computed,
+  watch,
+  nextTick,
+} from "vue";
+import { useStore } from "vuex";
+const store = useStore();
+
+const currentTag = computed(() => store.getters["tags/currentTag"]);
+</script>
+
+<style lang="scss" >
+.txtcon {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  padding-top: 20px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  img {
+    max-width: 90% !important;
+    margin: 0 auto;
+  }
+  .txtbody {
+    width: 100%;
+    border-radius: 10px;
+    font-size: 14px;
+    color: #fff;
+    height: auto;
+    padding: 20px;
+    margin-bottom: 80px;
+    line-height: 1.5;
+    :deep(p) {
+      line-height: 24px;
+    }
+  }
+  .title {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    height: 36px;
+    line-height: 36px;
+    padding: 0 16px;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 20px;
+    color: #fff;
+    font-size: 14px;
+    z-index: 999;
+    > i {
+      margin-right: 4px;
+    }
+  }
+}
+</style>

+ 62 - 0
packages/qjkankan-view/src/components/assembly/MobileTags/metas/metas-imagetext.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="txtcon">
+    <div class="title">
+      <i class="iconfont icon-material_text"/>
+      {{currentTag.hotspotTitle}} 
+    </div>
+
+    <div class="txtbody" v-html="currentTag.articleInfo.html">
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, defineEmits, onBeforeMount, onMounted, ref, watchEffect, computed, watch, nextTick } from "vue";
+import { useStore } from "vuex";
+const store = useStore();
+
+const currentTag = computed(() => store.getters['tags/currentTag'])
+  
+</script>
+
+<style lang="scss" scoped>
+.txtcon{
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  padding-top: 70px;
+  
+  .txtbody{
+    width: 744px;
+    background: rgba(0,0,0,0.6);
+    border-radius: 10px;
+    font-size: 14px;
+    color: #fff;
+    padding: 30px;
+    max-height: calc(100vh - 100px);
+    overflow-y: auto;
+    line-height: 1.5;
+    :deep(p) {
+      line-height: 24px;
+    }
+  }
+  .title{
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    height: 36px;
+    line-height: 36px;
+    padding: 0 16px;
+    background: rgba(0,0,0,0.6);
+    border-radius: 20px;
+    color: #fff;
+    font-size: 14px;
+    z-index: 999;
+    >i{
+      margin-right: 4px;
+    }
+  }
+}
+</style>

+ 44 - 0
packages/qjkankan-view/src/components/assembly/MobileTags/metas/metas-pdf.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="pdfcon">
+    <iframe :src="currentTag.pdfInfo.url" frameborder="0" allowfullscreen></iframe>
+  </div>
+</template>
+
+<script setup>
+import { reactive, defineEmits, onBeforeMount, onMounted, ref, watchEffect, computed, watch, nextTick } from "vue";
+import { useStore } from "vuex";
+const store = useStore();
+
+const currentTag = computed(() => store.getters['tags/currentTag'])
+  
+</script>
+
+<style lang="scss" scoped>
+.pdfcon{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  >iframe{
+    width: 90%;
+    height: 86%;
+  }
+  .title{
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    height: 36px;
+    line-height: 36px;
+    padding: 0 30px;
+    background: rgba(0,0,0,0.6);
+    border-radius: 20px;
+    color: #fff;
+    font-size: 14px;
+    z-index: 999;
+    >i{
+      margin-right: 4px;
+    }
+  }
+}
+</style>

+ 11 - 5
packages/qjkankan-view/src/components/assembly/Opening.vue

@@ -11,7 +11,7 @@
     <img v-show="bofanging" @click.stop="bofang" class="bofang" :src="require('@/assets/images/default/bofang.png')"
       alt="" />
 
-    <div @click.stop="jumpVideo" class="jump">
+    <div @click.stop="jumpVideo(true)" class="jump">
       {{ countdownVideo> 0 ? $t('common.jumpTips', { second: countdownVideo }) : $t('common.jump')}}</div>
 
   </div>
@@ -29,7 +29,7 @@
   </div>
 </template>
 <script setup>
-import { ref, watch, computed, onMounted, defineProps } from "vue";
+import { ref, watch, computed, onMounted, defineProps, unref } from "vue";
 import { useStore } from "vuex";
 import { useApp } from "@/app";
 import { useI18n, getLocale } from "@/i18n";
@@ -57,13 +57,17 @@ const showImg = ref(true);
 const currentScene = computed(() => store.getters["scene/currentScene"]);
 
 const closeImg = (isCall = false) => {
+
   useApp().then((app) => {
     showImg.value = false;
+   
     if (props.coverData.coverSelect.toLowerCase().indexOf('and') > -1) {
+      // debugger
       if (props.coverData.coverVideoOrder == 'later') {
         showVideo.value = true
         showVideoDaoji()
       }
+      app.render()
     } else {
       app.render()
     }
@@ -104,10 +108,12 @@ const showVideoDaoji = (isCall = false) => {
 }
 
 const jumpVideo = (isCall = false) => {
-  closeVideo(isCall)
+  closeVideo(isCall);
   if (isCall) {
+    // debugger
     showImg.value = true
-    showImgDaoji()
+    showImgDaoji(executeImg)
+    
   }
 }
 
@@ -121,7 +127,7 @@ const executeImg = () => {
 
 
 onMounted(() => {
-  console.log(props.coverData);
+  console.log('coverData',unref(props.coverData));
   switch (true) {
     case props.coverData.coverSelect.toLowerCase().indexOf('and') > -1:
       if (props.coverData.coverVideoOrder == 'before') {

+ 265 - 0
packages/qjkankan-view/src/components/assembly/OpeningMobile.vue

@@ -0,0 +1,265 @@
+<template>
+  <!-- 视频 -->
+  <div class="videocon" :class="{ zidxhigh: coverData.coverVideoOrder == 'before' }"
+    v-if="coverData.coverSelect.indexOf('video') > -1 && showVideo" :style="{
+      backgroundColor: `${coverData.videoColorSelec}`,
+    }">
+    <video v-if="coverData.videoPc" x5-playsinline="true" playsinline="true" webkit-playsinline="true" class="video"
+      ref="openvideo$" preload autoplay :poster="coverData.videoPcIcon"
+      :class="coverData.videoPcLoc == 'center' ? 'contain' : 'cover'" :src="coverData.videoPc"
+      :controls="Boolean(coverData.coverVideoControl)" muted></video>
+    <img v-show="bofanging" @click.stop="bofang" class="bofang" :src="require('@/assets/images/default/bofang.png')"
+      alt="" />
+
+    <div @click.stop="jumpVideo" class="jump">
+      {{ countdownVideo> 0 ? $t('common.jumpTips', { second: countdownVideo }) : $t('common.jump')}}</div>
+
+  </div>
+
+  <!-- 图片 -->
+  <div class="imgcon" v-if="coverData.coverSelect.toLowerCase().indexOf('img') > -1 && showImg" @click="closeImg"
+    :style="{
+      backgroundImage: `url(${coverData.coverPc})`,
+      backgroundColor: `${coverData.imgColorSelec}`,
+      backgroundSize: coverData.coverPcLoc == 'center' ? 'contain' : 'cover'
+    }">
+    <div @click.stop="closeImg" class="jump">
+      {{ countdownImg> 0 ? $t('common.jumpTips', { second: countdownImg }) : $t('common.jump') }}</div>
+
+  </div>
+</template>
+<script setup>
+import { ref, watch, computed, onMounted, defineProps, unref } from "vue";
+import { useStore } from "vuex";
+import { useApp } from "@/app";
+import { useI18n, getLocale } from "@/i18n";
+
+const { t } = useI18n({ useScope: "global" });
+
+const props = defineProps({
+  coverData: {
+    type: [Boolean,Object],
+    default: () => { return {} },
+  }
+});
+const store = useStore();
+const openvideo$ = ref(null);
+const bofanging = ref(true);
+
+const show = ref(true);
+const countdownImg = ref(3);
+const countdownVideo = ref(3);
+const timer = ref(null);
+
+const showVideo = ref(true);
+const showImg = ref(true);
+
+const currentScene = computed(() => store.getters["scene/currentScene"]);
+
+const closeImg = (isCall = false) => {
+  useApp().then((app) => {
+    showImg.value = false;
+    if (props.coverData.coverSelect.toLowerCase().indexOf('and') > -1) {
+      if (props.coverData.coverVideoOrder == 'later') {
+        showVideo.value = true
+        showVideoDaoji()
+      }
+    } else {
+      app.render()
+    }
+  });
+}
+
+const closeVideo = (isCall = false) => {
+  useApp().then((app) => {
+    showVideo.value = false;
+    if (!isCall) {
+      app.render()
+    }
+  });
+}
+
+const showImgDaoji = (cb = () => { }) => {
+  timer.value = setInterval(() => {
+    countdownImg.value--
+    if (countdownImg.value == 0) {
+      clearInterval(timer.value)
+      timer.value = null
+      cb()
+
+      return
+    }
+  }, 1000);
+}
+
+const showVideoDaoji = (isCall = false) => {
+  timer.value = setInterval(() => {
+    countdownVideo.value--
+    if (countdownVideo.value == 0) {
+      clearInterval(timer.value)
+      timer.value = null
+      return
+    }
+  }, 1000);
+}
+
+const jumpVideo = (isCall = false) => {
+  closeVideo(isCall)
+  if (isCall) {
+    showImg.value = true
+    showImgDaoji()
+  }
+}
+
+// 执行图片封面
+const executeImg = () => {
+  showImgDaoji(() => {
+    closeImg()
+
+  })
+}
+
+
+onMounted(() => {
+  console.log('coverData',unref(props.coverData));
+  switch (true) {
+    case props.coverData.coverSelect.toLowerCase().indexOf('and') > -1:
+      if (props.coverData.coverVideoOrder == 'before') {
+        // 倒计时结束需要唤起图片
+        showVideoDaoji(true)
+        showImg.value = false
+      } else {
+        showImgDaoji(true)
+        showVideo.value = false
+      }
+
+      break;
+    case props.coverData.coverSelect.toLowerCase().indexOf('video') > -1:
+
+      break;
+    case props.coverData.coverSelect.toLowerCase().indexOf('img') > -1:
+
+      break;
+    default:
+      break;
+  }
+  if (props.coverData.coverSelect) {
+
+  }
+  if (openvideo$.value) {
+    openvideo$.value.addEventListener("ended", () => {
+      if (props.coverData.coverVideoInWay) {
+        closeVideo()
+      }
+    });
+
+    openvideo$.value.addEventListener("playing", () => {
+      if (bofanging.value) {
+        bofanging.value = false;
+      }
+    });
+
+    openvideo$.value.addEventListener("pause", () => {
+      if (!bofanging.value) {
+        bofanging.value = true;
+      }
+    });
+
+    document.addEventListener(
+      "WeixinJSBridgeReady",
+      () => {
+        openvideo$.value.play();
+      },
+      false
+    );
+  }
+
+}),
+
+  useApp().then((app) => {
+    app.Scene.on("ready", () => {
+      if (show.value) {
+        show.value = false;
+      }
+    });
+  });
+</script>
+<style lang="scss" scoped>
+.imgcon,
+.videocon {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.imgcon {
+  background-position: center;
+  z-index: 10;
+}
+
+.videocon {
+  text-align: center;
+
+  >video {
+    max-width: inherit;
+    height: auto;
+    min-height: 100%;
+    top: 50%;
+    left: 50%;
+    z-index: 99;
+    display: inline-block;
+    transform: translate(-50%, -50%);
+    position: absolute;
+  }
+
+  .contain {
+    height: 100%;
+  }
+
+  .cover {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+
+  .bofang {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    left: 50%;
+    width: 80px;
+    height: 80px;
+    z-index: 99999;
+    pointer-events: none;
+  }
+}
+
+.zidxhigh {
+  z-index: 99;
+}
+
+.jump {
+  position: absolute;
+  right: 15px;
+  top: 20px;
+  background: rgba(255, 255, 255, 0.5);
+  text-align: center;
+  line-height: 28px;
+  font-size: 16px;
+  z-index: 999;
+  color: #333333;
+  border-radius: 1px;
+  padding: 4px 12px;
+  cursor: pointer;
+}
+
+@keyframes loading {
+  100% {
+    left: -900px;
+  }
+}
+</style>

+ 2 - 0
packages/qjkankan-view/src/components/assembly/Tags/index.vue

@@ -10,6 +10,7 @@
       <metasArticle v-if="currentTag.hotspotType == 'article'" />
       <metasImageText v-if="currentTag.hotspotType == 'imageText'" />
       <metasPdf v-if="currentTag.hotspotType == 'pdf'" />
+      <metasPhone v-if="currentTag.hotspotType == 'phone'" />
     </div>
   </teleport>
 </template>
@@ -23,6 +24,7 @@ import metasText from './metas/metas-text'
 import metasArticle from './metas/metas-article.vue'
 import metasImageText from './metas/metas-imagetext.vue'
 import metasPdf from './metas/metas-pdf.vue'
+import metasPhone from './metas/metas-phone.vue'
 
 import { reactive, defineEmits, onBeforeMount, onMounted, ref, watchEffect, computed, watch, nextTick } from "vue";
 import { useStore } from "vuex";

+ 2 - 2
packages/qjkankan-view/src/components/assembly/Tags/metas/metas-pdf.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="videocon">
+  <div class="pdfcon">
     <iframe :src="currentTag.pdfInfo.url" frameborder="0" allowfullscreen></iframe>
   </div>
 </template>
@@ -14,7 +14,7 @@ const currentTag = computed(() => store.getters['tags/currentTag'])
 </script>
 
 <style lang="scss" scoped>
-.videocon{
+.pdfcon{
   display: flex;
   align-items: center;
   justify-content: center;

+ 114 - 0
packages/qjkankan-view/src/components/assembly/Tags/metas/metas-phone.vue

@@ -0,0 +1,114 @@
+<template>
+  <!-- <div class="tag-layer" @click.stop> -->
+
+  <div class="telephonecon">
+    <div class="txtbody">
+      <div class="theader">
+        <span>{{ $t("common.phone") }}</span>
+        <!-- <ui-icon
+          class="close"
+          type="player_close"
+          @click.stop="close"
+        ></ui-icon> -->
+      </div>
+      <div class="telephone">
+        <img :src="require(`@/assets/images/icon/telephone.svg`)" alt="" />
+        <span>{{ customTelephone.value }}</span>
+      </div>
+    </div>
+  </div>
+  <!-- </div> -->
+</template>
+
+<script setup>
+import {
+  reactive,
+  defineEmits,
+  onBeforeMount,
+  onMounted,
+  ref,
+  watchEffect,
+  computed,
+  watch,
+  nextTick,
+} from "vue";
+import { useStore } from "vuex";
+const store = useStore();
+
+const metadata = computed(() => store.getters["scene/metadata"]);
+
+const customTelephone = computed(() => store.getters["scene/customTelephone"]);
+
+const close = () => {
+  store.commit("functions/setShowTelephone", false);
+};
+</script>
+
+<style lang="scss" scoped>
+.tag-layer {
+  width: 100vw;
+  height: 100vh;
+  z-index: 10000;
+  top: 0;
+  position: fixed;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(10px);
+
+  .telephonecon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+
+    .txtbody {
+      width: 240px;
+      background: rgba(0, 0, 0, 0.6);
+      border-radius: 10px;
+      font-size: 18px;
+      color: #fff;
+      padding: 26px;
+      max-height: calc(100vh - 100px);
+      overflow-y: auto;
+      .theader {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+        .close {
+          cursor: pointer;
+        }
+      }
+
+      .telephone {
+        display: flex;
+        align-items: center;
+        margin-left: -10px;
+        > span {
+          margin-top: 6px;
+          display: inline-block;
+          font-size: 14px;
+        }
+      }
+    }
+
+    .title {
+      position: absolute;
+      left: 20px;
+      top: 20px;
+      height: 36px;
+      line-height: 36px;
+      padding: 0 30px;
+      background: rgba(0, 0, 0, 0.6);
+      border-radius: 20px;
+      color: #fff;
+      font-size: 14px;
+
+      > i {
+        margin-right: 4px;
+      }
+    }
+  }
+}
+</style>

+ 86 - 56
packages/qjkankan-view/src/pages/showMobile.vue

@@ -1,13 +1,14 @@
 <template>
-  <LoadingLogo  v-if="workEnable" />
+  <LoadingLogo v-if="workEnable" />
   <template v-if="workEnable">
+    <Opening :coverData="coverInfo" v-if="coverInfo.isShowCover" />
     <Password />
     <Share />
     <div class="ui-view-layout" :class="{ show: show }">
       <Pano />
       <Tags />
-      <UiGather/>
-      <TitieSlide/>
+      <UiGather />
+      <TitieSlide />
     </div>
   </template>
 
@@ -22,7 +23,7 @@ import Share from "@/components/assembly/Share";
 import Error from "@/components/assembly/Error";
 import UiGather from "@/components/UIGather/mobile";
 import TitieSlide from "@/components/assembly/titieSlide";
-
+import Opening from "@/components/assembly/OpeningMobile";
 import LoadingLogo from "@/components/assembly/Loading";
 import { createApp } from "@/app";
 
@@ -31,41 +32,42 @@ import { getPanoInfo, checkWork } from "@/apis";
 import { useStore } from "vuex";
 import config from "@/utils/config";
 import browser from "@/utils/browser";
-import { useApp } from '@/app'
-import { useI18n, getLocale } from '@/i18n'
-const { t } = useI18n({ useScope: 'global' })
-
+import { useApp } from "@/app";
+import { useI18n, getLocale } from "@/i18n";
+const { t } = useI18n({ useScope: "global" });
 
+const coverInfo = ref({});
 
 const fixOpening = {
-  '小行星开场': 1,
-  '水平巡游开场': 2,
-  '小行星巡游开场': 3,
-  '水晶球开场': 4,
-  '小行星缩放开场': 5,
-}
+  小行星开场: 1,
+  水平巡游开场: 2,
+  小行星巡游开场: 3,
+  水晶球开场: 4,
+  小行星缩放开场: 5,
+};
 
 const store = useStore();
 const show = ref(false);
 const workEnable = ref(true);
-const lang = getLocale()
-
+const lang = getLocale();
 
 const currentScene = computed(() => store.getters["scene/currentScene"]);
-const currentCatalogRoot = computed(() => store.getters["scene/currentCatalogRoot"]);
+const currentCatalogRoot = computed(
+  () => store.getters["scene/currentCatalogRoot"]
+);
 
 const isAutoRotate = computed(() => store.getters["functions/isAutoRotate"]);
 
-
 const earthMask = computed(() => store.getters["scene/earthMask"]);
 const skyMask = computed(() => store.getters["scene/skyMask"]);
 
-
-
 onMounted(async () => {
   if (!browser.isMobile()) {
-    window.location.href = window.location.href.replace('showMobile.html','show.html')
-    return
+    window.location.href = window.location.href.replace(
+      "showMobile.html",
+      "show.html"
+    );
+    return;
   }
   let res = await checkWork();
   if (!res.data) {
@@ -74,46 +76,56 @@ onMounted(async () => {
   }
   getPanoInfo().then(async (data) => {
     store.commit("scene/setScenes", data.scenes);
-    store.commit("scene/setPassword", data.password === "" ? false : data.password);
+    store.commit(
+      "scene/setPassword",
+      data.password === "" ? false : data.password
+    );
     store.commit("scene/setMetaData", data);
-    document.title = data.name || t('common.no_title')
+    document.title = data.name || t("common.no_title");
 
     let firstScene = "";
 
-
     if (config.sceneNum) {
       console.log(config.sceneNum);
-      firstScene = data.scenes.find((item) => item.sceneCode == config.sceneNum);
+      firstScene = data.scenes.find(
+        (item) => item.sceneCode == config.sceneNum
+      );
     } else if (data.firstScene) {
-      firstScene = data.scenes.find((item) => item.sceneCode == data.firstScene.sceneCode);
+      firstScene = data.scenes.find(
+        (item) => item.sceneCode == data.firstScene.sceneCode
+      );
     }
 
-
     store.commit("scene/setCurrentScene", firstScene || data.scenes[0]);
 
     // 过滤空分组
     let ttt = data.catalogRoot.filter((item) => {
-      let flag = ''
+      let flag = "";
 
       if (item.children) {
         item.children.some((sub) => {
-          flag = data.scenes.some(son => {
+          flag = data.scenes.some((son) => {
             // console.log(String(son.category).toLowerCase(), String(sub).toLowerCase());
-            return String(son.category).toLowerCase() == String(sub).toLowerCase()
-          })
-          return flag
+            return (
+              String(son.category).toLowerCase() == String(sub).toLowerCase()
+            );
+          });
+          return flag;
         });
       }
-      return flag
+      return flag;
     });
 
-    data.catalogRoot = ttt
+    data.catalogRoot = ttt;
 
-    let catalog = data.catalogs.find((item) => item.id == currentScene.value.category);
+    let catalog = data.catalogs.find(
+      (item) => item.id == currentScene.value.category
+    );
 
     // 查询初始场景的所在1级分组
     data.catalogRoot.forEach((item) => {
-      let temp = item.children && item.children.find((sub) => sub == catalog.id);
+      let temp =
+        item.children && item.children.find((sub) => sub == catalog.id);
       if (temp) {
         store.commit("scene/setCurrentCatalogRoot", item);
         return;
@@ -127,12 +139,14 @@ onMounted(async () => {
 
     show.value = true;
 
-    let isHavePano = data.scenes.some(item => item.type == 'pano')
-    document.body.setAttribute('is-mobile', true)
+    let isHavePano = data.scenes.some((item) => item.type == "pano");
+    document.body.setAttribute("is-mobile", true);
 
     const app = createApp({
       // xml: "%HTMLPATH%/static/template/tour.xml",
-      xml: `${process.env.VUE_APP_CDN}/720yun_fd_manage/${config.projectNum}/tour.xml?rnd=${Math.random()}`,
+      xml: `${process.env.VUE_APP_CDN}/720yun_fd_manage/${
+        config.projectNum
+      }/tour.xml?rnd=${Math.random()}`,
       swf: "%HTMLPATH%/showviewer/lib/krpano/tour.swf",
       target: "pano",
       html5: "auto",
@@ -140,54 +154,70 @@ onMounted(async () => {
       isHavePano,
       vars: {
         startscene: "scene_" + currentScene.value.sceneCode,
-        "view.vlookat": currentScene.value.initVisual ? currentScene.value.initVisual.vlookat : 0,
-        "view.hlookat": currentScene.value.initVisual ? currentScene.value.initVisual.hlookat : 0,
+        "view.vlookat": currentScene.value.initVisual
+          ? currentScene.value.initVisual.vlookat
+          : 0,
+        "view.hlookat": currentScene.value.initVisual
+          ? currentScene.value.initVisual.hlookat
+          : 0,
         "autorotate.enabled": !!data.isAuto,
-        "skin_settings.littleplanetintro": fixOpening[data.openingAnimationType || '小行星开场']
+        "skin_settings.littleplanetintro":
+          fixOpening[data.openingAnimationType || "小行星开场"],
       },
       passQueryParameters: true,
     });
-
+    coverInfo.value = data.coverInfo || {};
     app.Scene.lock();
-    app.render();
+    //如果不需要开场封面就直接渲染
+    if (!coverInfo.value?.isShowCover) {
+      app.render();
+    }
 
     if (isHavePano) {
       app.Scene.on("sceneReady", () => {
         if (app.krpanoDom) {
-          let defaultMask = `%SWFPATH%/skin/masking_${lang}.png`
+          let defaultMask = `%SWFPATH%/skin/masking_${lang}.png`;
 
           if (earthMask.value) {
             app.krpanoDom.set(`hotspot[nadirlogo].url`, defaultMask);
-            app.krpanoDom.set(`hotspot[nadirlogo].visible`, Boolean(earthMask.value.isShow));
+            app.krpanoDom.set(
+              `hotspot[nadirlogo].visible`,
+              Boolean(earthMask.value.isShow)
+            );
 
             if (earthMask.value.icon) {
               app.krpanoDom.set(`hotspot[nadirlogo].url`, earthMask.value.icon);
             }
           }
 
-          
           if (skyMask.value) {
             app.krpanoDom.set(`hotspot[peaklogo].url`, defaultMask);
-            app.krpanoDom.set(`hotspot[peaklogo].visible`, Boolean(skyMask.value.isShow));
+            app.krpanoDom.set(
+              `hotspot[peaklogo].visible`,
+              Boolean(skyMask.value.isShow)
+            );
             if (skyMask.value.icon) {
               app.krpanoDom.set(`hotspot[peaklogo].url`, skyMask.value.icon);
             }
           }
 
-          app.krpanoDom.set(`layer[webvr_exitbutton].html`, t('common.exit_vr'));
-
+          app.krpanoDom.set(
+            `layer[webvr_exitbutton].html`,
+            t("common.exit_vr")
+          );
         }
- 
-        let hotspots = []
+
+        let hotspots = [];
         if (currentScene.value.someData) {
-          hotspots = typeof currentScene.value.someData == 'string' ? JSON.parse(currentScene.value.someData).hotspots : currentScene.value.someData.hotspots
+          hotspots =
+            typeof currentScene.value.someData == "string"
+              ? JSON.parse(currentScene.value.someData).hotspots
+              : currentScene.value.someData.hotspots;
         }
         app.Tags.initHotspot(hotspots, false);
       });
-      
     }
   });
-
 });
 </script>