FD_Pano/src/framework/showMobile/index.vue

<template>
  <div class="panocon">
    <template v-if="showInfo">
      <v-ifr v-if="activeItem.type=='4dkk'" :url="`https://test.4dkankan.com/embed.html?from=mingyuan&m=${activeItem.sceneCode}`" />
      <div v-show="activeItem.type!='4dkk'" id="pano"></div>

      <div class="pano-logo" v-if="showInfo.isLogo&&activeItem.type!='4dkk'">
        <img :src="showInfo.logo||require('@/assets/images/default/img_logoshow@2x.png')" alt="" />
      </div>

      <ul class="aside" v-show="activeItem.type!='4dkk'">
        <li v-for="(item, i) in aside" :key="i">
          <span @click="handleItem(item)">
            <i class="iconfont" :class="item.icon"></i>
          </span>
        </li>
      </ul>

      <list
        v-if="canLoad"
        @select="handleSelect"
        :firstScene="firstScene"
        :select="activeItem"
      ></list>

      <div
        class="oper-tips"
        :class="{ hidetips: !showTips }"
        v-if="localRemind"
      >
        <img
          :src="
            showInfo.appIcon ||
            require('@/assets/images/default/show/img_tipsmb_default.png')
          "
          alt=""
        />
      </div>
      <password
        :bg="showInfo.icon"
        :show="showPassword"
        @submit="handlePassword"
        @close="showPassword = false"
      />
      <popup :title="'简介'" :show="showIntro" @close="showIntro = false">
        <div slot="content" class="introcon">
          {{ showInfo.description || "暂无简介" }}
        </div>
      </popup>
      <imgview
        @close="showImage = false"
        v-if="showImage"
        :image="currentHotspot.image"
      />

      <preview
        :item="currentHotspot"
        :show="showPreview"
        @close="showPreview = false"
      />

      <popup
        :title="currentHotspot.hotspotTitle"
        :show="showTextarea"
        @close="showTextarea = false"
      >
        <div slot="content" class="introcon">
          {{ currentHotspot.textarea }}
        </div>
      </popup>

      <div v-if="audioUrl" class="audio-btn" @click="bofang=!bofang">
        {{bofang?'继续':'停止'}}播放
        <v-audio :vkey="audioUrl.id" @audioEnded="handleEnded" :autoplay="true" :bofang="bofang" :v-show="false" :idleft="`_${$randomWord(true,8,8)}`" :idright="`_${$randomWord(true,8,8)}`" :myAudioUrl="audioUrl.audio.ossPath"></v-audio>
      </div>
      
    </template>

  <template v-else>
     <div class="hasDel" v-if="loadFinish">
      <div>
        <img :src="$noresult" alt="">
        <p>作品已被删除</p>
      </div>
    </div>
  </template>

   
  </div>
</template>

<script>
import * as krfn from "@/core/index.js";
import { getPanoInfo, checkPassword,checkWork } from "@/api";
import password from "./popup/password";
import preview from "./popup/preview";

import imgview from "./popup/imgview";
import vIfr from "./iframe";


import popup from "./popup/";
import { mapGetters } from "vuex";
import vAudio from '@/components/audio'

import list from "./list";

let __krfn = krfn.default;

export default {
  components: {
    list,
    password,
    popup,
    preview,
    imgview,
    vIfr,
    vAudio
  },
  computed: {
    ...mapGetters({
      showInfo: "showInfo",
    }),
  },
  data() {
    return {
      showPreview: false,
      audioUrl:'',
      bofang:false,
      showTips: true,
      showImage: false,
      showAudio:false,
      canLoad: false,
      showPassword: false,
      showIntro: false,
      showTextarea: false,
      password: "",
      activeItem: "",
      firstScene: "",
      someData: "",
      currentHotspot: "",
      list: [],
      loadFinish:false,
      aside: [
        {
          id: "about",
          icon: "icontool_about",
        },
        {
          id: "vr",
          icon: "icontool_vr",
        },
      ],
    };
  },
  methods: {
    handleEnded(){
      this.audioUrl = ''
    },
    handleItem(data) {
      if (data.id == "about") {
        this.showIntro = true;
      }
      if (data.id == "vr") {
        var krpano = document.getElementById("krpanoSWFObject");
        var webvr = krpano.get("webvr");
        webvr.entervr();
        // window.webvr.enterVR()
      }
    },
    
    handlePassword(data) {
      checkPassword(
        {
          password: data,
        },
        (res) => {
          if (res.code == 0) {
            this.showPassword = false;
            this.canLoad = true;
          }
        }
      );
    },
    startLoad() {
      this.canLoad = true;
    },
    handleSelect(data) {
        this.activeItem = data;
    },
    
    getSceneInfo() {
      checkWork("",data=>{
        if (data.data) {
          getPanoInfo(
            "",
            (data) => {
              this.loadFinish = true
              this.$store.commit("SetShowInfo", data);
            }
          );
        } else{
          this.loadFinish = true
        }
      })
    },
  },
  watch: {
    currentHotspot: {
      deep: true,
      handler: function (newVal) {
        if (newVal) {
          this.audioUrl = ''
          if (newVal.hotspotType == "link") {
            window.open(newVal.hyperlink, "_blank");
            return;
          }
          if (newVal.hotspotType == "scene") {
            this.activeItem = newVal.secne;
            return;
          }
          if (newVal.hotspotType == "image") {
            this.showImage = true;
            return;
          }
          if (newVal.hotspotType == "textarea") {
            this.showTextarea = true;
            return;
          }
          if (newVal.hotspotType == "audio") {
            this.audioUrl = newVal;
            return;
          }
          
          this.showPreview = true;
        }
      }
    },
    canLoad(newVal) {
      if (newVal) {
        setTimeout(() => {
          this.showTips = false;
        }, this.showInfo.remindTime * 1000);
      }
    },
    showInfo: {
      deep: true,
      immediate: true,
      handler: function (newVal) {
        if (newVal) {
          document.title = newVal.name || '未命名'
          let locoR = "localRemind"+newVal.id

          if (!newVal.description) {
            this.aside.shift()
          }
          if (newVal.isRemind==1) {
            this.localRemind = localStorage.getItem(locoR) == 1 ? false : true
            localStorage.setItem(locoR, 1);
          }
          else{
            this.localRemind = true;
            localStorage.setItem(locoR, 0);
          }
          newVal.password ? (this.showPassword = true) : this.startLoad();
        }
      },
    },
    activeItem: {
      handler(newVal) {
        this.$nextTick(()=>{
            removepano("#pano");
            $("#pano").empty();
            window.vrInitFn = () => {
              var krpano = document.getElementById("krpanoSWFObject");
              __krfn.utils.initHotspot(krpano, newVal && newVal.someData, false);
            };
            window.vrViewFn = () => {
              try {
                let tmp = newVal.initVisual||{};
                var krpano = document.getElementById("krpanoSWFObject");
                krpano.set("view.vlookat", tmp.vlookat||0);
                krpano.set("view.hlookat", tmp.hlookat||0);
                krpano.set("autorotate.enabled", Boolean(this.showInfo.isAuto));
              } catch (error) {
                error;
              }
            };
            var settings = {
              "events[skin_events].onxmlcomplete": "js(window.vrViewFn());",
              "events[skin_events].onloadcomplete": "js(window.vrInitFn());",
            };
            if (newVal) {
              removepano("#pano");
              embedpano({
                // xml: "%HTMLPATH%/static/template/tour.xml",
                xml: `${this.$cdn}/720yun_fd_manage/${newVal.sceneCode}/vtour/tour.xml`,
                swf: "%HTMLPATH%/static/template/tour.swf",
                target: "pano",
                html5: "auto",
                mobilescale: 0.7,
                vars: settings,
                passQueryParameters: true,
              });
            }
        })

      },
      
    },
  },
  mounted() {
    window.__krfn = __krfn;
    this.$bus.on("clickHotspot", (data) => {
      let someData = JSON.parse(this.activeItem.someData);
      let idx = someData.hotspots.findIndex((item) => item.name == data);
      this.currentHotspot = someData.hotspots[idx];
    });
    this.getSceneInfo();
  },
};
</script>

<style lang="less" scoped>
.panocon {
  width: 100%;
  height: 100%;
  #pano {
    width: 100%;
    height: 100%;
  }
  .hasDel{
    background: #fff;
    width: 100%;
    height: 100%;
    position: relative;
    >div{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      color: #909090;
      text-align: center;
      font-size: 18px;
      >p{
        margin-top: 20px;
      }
    }
  }
  >iframe{
    width: 100%;
    height: 100%;
  }

  .audio-btn{
    display: inline-block;
    margin: 0 auto;
    height: 36px;
    line-height: 36px;
    min-width: 78px;
    cursor: pointer;
    text-overflow: ellipsis;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 12px;
    z-index: 9999;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 10px;
    margin-left: 10px;
    padding: 0 10px;
    &.active{
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid #1FE4DC;
      color: #1FE4DC;
    }
}

  .pano-logo {
    position: absolute;
    top: 10px;
    left: 10px;
    > img {
      max-width: 80px;
    }
  }

  .oper-tips {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    > img {
      max-width: 90%;
    }
  }

  .hidetips {
    display: none;
  }
  .aside {
    position: fixed;
    z-index: 1001;
    right: 10px;
    bottom: 4px;
    display: flex;
    > li {
      margin: 0 0 5px 5px;
      > span {
        width: 36px;
        height: 36px;
        display: inline-block;
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.2);
        opacity: 1;
        border-radius: 18px;
        position: relative;
        cursor: pointer;
        > i {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
  .introcon {
    line-height: 20px;
    color: #909090;
    margin: 0 auto;
    width: 90%;

  }
}
</style>