FD_Pano/src/framework/show/index.vue

<template>
  <div class="panocon">
    <template v-if="showInfo">
      <iframe allowfullscreen="true" v-if="activeItem.type=='4dkk'" 
      :src="`/spc.html?m=${activeItem.sceneCode}`" frameborder="0"></iframe>
      <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>


      <div
        class="oper-tips"
        :class="{ hidetips: !showTips }"
        v-if="localRemind"
      >
        <img
          :src="
            showInfo.pcIcon ||
            require('@/assets/images/default/show/img_tipspc_default.png')
          "
          alt=""
        />
      </div>

      <list v-if="canLoad" @select="handleSelect" :select="activeItem"></list>
      <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>

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

      <ul class="aside" v-if="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>
    </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 { $smallWaiting } from '@/components/shared/loading'


import popup from "./popup/";
import { mapGetters } from "vuex";

import list from "./list";

let __krfn = krfn.default;

export default {
  components: {
    list,
    password,
    popup,
    preview,
  },
  computed: {
    ...mapGetters({
      showInfo: "showInfo",
    }),
  },
  data() {
    return {
      showPreview: false,
      isFullscreen:false,
      showTips: false,
      canLoad: false,
      loadFinish:false,
      showPassword: false,
      showIntro: false,
      localRemind: false,
      password: "",
      activeItem: "",
      someData: "",
      currentHotspot: "",
      list: [],
      aside: [
        {
          id: "about",
          icon: "icontool_about",
        },
        {
          id: "vr",
          icon: "icontool_vr",
        },
        {
          id: "full",
          icon: "icontool_full",
        },
      ],
    };
  },
  methods: {
    onFullScreen() {
        let element = document.documentElement;
        if (this.isFullscreen) {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        } else {
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            }
        }
          // 改变当前全屏状态
        this.isFullscreen = !this.isFullscreen;
      },
    handleItem(data) {
      if (data.id == "about") {
        this.showIntro = true;
      }
      if (data.id == "full") {
        this.onFullScreen()
      }
      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;
    },

    fixData() {
      let tmp = [];
      this.showInfo.scenes.forEach((item) => {
        this.showInfo.catalogs.forEach((sub) => {
          if (item.category == sub.id) {
            tmp.push(sub);
          }
        });
      });
      tmp = this.$unique(tmp)
      this.showInfo.catalogs = tmp;
      let rootmp = [];
      tmp.forEach((item) => {
        this.showInfo.catalogRoot.forEach((sub) => {
          sub.children = this.$unique(sub.children)
          if (sub.children.indexOf(item.id) > -1) {
            rootmp.push(sub);
          }
        });
      });
      rootmp = this.$unique(rootmp)

      this.showInfo.catalogRoot = rootmp.map((item) => {
        let temp = [];
        item.children = this.$unique(item.children)
        item.children.forEach((sub) => {
          tmp.forEach((jj) => {
            if (jj.id == sub) {
              temp.push(sub);
            }
          });
        });
        return {
          ...item,
          children: temp,
        };
      });
      this.showInfo.catalogs = tmp

      let cid = 'c_'+this.$randomWord(true,8,8)

      if (this.showInfo.catalogRoot.length <= 0) {
        this.showInfo.catalogRoot.push({
          id: 'r_'+this.$randomWord(true,8,8),
          name: "全部场景",
          children:[cid]
        });
      }

      if (this.showInfo.catalogs.length <= 0) {
        this.showInfo.catalogs.push({
          id: cid,
          name: "默认二级分组",
        });
      }

      if (this.showInfo.firstScene) {
        this.showInfo.firstScene = this.showInfo.scenes.find(item=>item.sceneCode==this.showInfo.firstScene.sceneCode)
      }

      this.$store.commit("SetShowInfo", this.showInfo);
    },

    getSceneInfo() {
      checkWork("",data=>{
        if (data.data) {
          getPanoInfo(
            "",
            (res) => {
              this.$store.commit("SetShowInfo", res);
              this.fixData()
              this.loadFinish = true
            }
          );
        } else{
          this.loadFinish = true
        }
      })
    }
  },
  watch: {
    currentHotspot: {
      deep: true,
      handler: function (newVal) {
        if (newVal) {
          if (newVal.hotspotType == "link") {
            window.open(newVal.hyperlink, "_blank");
            return;
          }
          if (newVal.hotspotType == "scene") {
            this.activeItem = newVal.secne;
            return;
          }
          this.showPreview = true;
        }
      },
    },
    canLoad(newVal) {
      if (newVal) {
        setTimeout(() => {
          this.showTips = this.localRemind
          setTimeout(() => {
            this.showTips = false;
          }, this.showInfo.remindTime * 1000);
        }, 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);
          }
          if (this.showInfo.firstScene) {
            if (this.showInfo.firstScene.type == '4dkk') {
              this.localRemind = false;
            }
          }
          newVal.password ? (this.showPassword = true) : this.startLoad();
        }
      },
    },
    activeItem: {
      handler(newVal) {
        $("#pano").empty();
        window.vrInitFn = () => {
          $smallWaiting.hide()
          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) {
          if (newVal.type=='4dkk') {
              removepano("#pano");
              $("#pano").empty();
              return
          }
          removepano("#pano");
          $smallWaiting.show()

          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: 1,
            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%;
  .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;
      }
    }
  }
  #pano {
    width: 100%;
    height: 100%;
  }
  >iframe{
    width: 100%;
    height: 100%;
  }

  .pano-logo {
    position: absolute;
    top: 20px;
    left: 20px;
    > img {
      max-width: 120px;
      max-height: 100px;
      pointer-events: none;
    }
  }

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

  .hidetips {
    display: none;
  }

  .aside {
    position: fixed;
    z-index: 999;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    > li {
      margin: 5px 0;
      > 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;
    word-break: break-all;
    text-align: justify;
  }
}
</style>