qjkankan_v1.1.1/packages/qjkankan-editor/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}&lang=zh`"
        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) {
            if (tmp.indexOf(sub) < 0) {
              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);

      let sortArr = this.showInfo.catalogRoot.map((item) => item.name);
      rootmp.sort((a, b) => {
        return sortArr.indexOf(a.name) - sortArr.indexOf(b.name);
      });

      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);
        }, 2000);
      }
    },
    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) {
        this.currentHotspot = "";
        $("#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 = this.activeItem.someData;
      if (typeof someData == "string") {
        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>