qjkankan_v1.1.1/packages/qjkankan-editor/src/framework/showMobile/index.vue

<template>
  <div class="panocon">
    <template v-if="showInfo">
      <v-ifr
        v-if="activeItem.type == '4dkk'"
        @changeUrl="handleChange"
        @otherUrl="handleOther"
        :bgmUrl="bgmUrl"
        :somedatainfo="somedatainfo"
        :key="embeM || activeItem.sceneCode"
        :url="
          otherLink
            ? otherLink
            : `/embed.html?from=mingyuan&m=${
                embeM || activeItem.sceneCode
              }&lang=zh&scene-link=1&rnd=${rnd}`
        "
      />
      <!-- -->

      <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>

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

      <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>
      <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">
          <span>{{ showInfo.description || "暂无简介" }}</span>
        </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">
          <span>{{ currentHotspot.textarea }}</span>
        </div>
      </popup>

      <div v-if="audioUrl" class="audio-btn" @click="audioUrl = ''">
        <i class="iconfont icon-edit_soundview"></i>
        停止播放
        <v-audio
          v-if="audioUrl"
          :vkey="audioUrl.id"
          class="vaduio"
          @audioEnded="handleEnded"
          :autoplay="true"
          :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,
  getSceneInfomation,
} from "@/api";
import password from "./popup/password";
import preview from "./popup/preview";
import { $smallWaiting } from "@/components/shared/loading";

import imgview from "./popup/imgview";
import vIfr from "./iframe";
import Share from "@/utils/wxshare";

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

import list from "./list";

let __krfn = krfn.default;

let bgmMap = {
  欢快: "01.mp3",
  空灵: "02.mp3",
  节奏: "03.mp3",
  怀旧: "04.mp3",
  想念: "05.mp3",
  复古: "06.mp3",
  琴弦: "07.mp3",
  愉快: "08.mp3",
};

export default {
  components: {
    list,
    password,
    popup,
    preview,
    imgview,
    vIfr,
    vAudio,
  },
  computed: {
    ...mapGetters({
      showInfo: "showInfo",
    }),
  },
  data() {
    return {
      mapvisit: 0,
      bgmUrl: "",
      somedatainfo: "",
      isVR: false,
      localRemind: false,
      showPreview: false,
      audioUrl: "",
      showTips: false,
      showImage: false,
      showAudio: false,
      canLoad: false,
      showPassword: false,
      showIntro: false,
      showTextarea: false,
      password: "",
      activeItem: "",
      firstScene: "",
      someData: "",
      currentHotspot: "",
      list: [],
      loadFinish: false,
      embeM: null,
      otherLink: null,
      rnd: null,
      aside: [
        {
          id: "about",
          icon: "icon-tool_about",
        },
        {
          id: "vr",
          icon: "icon-tool_vr",
        },
      ],
    };
  },
  methods: {
    handleOther(data) {
      this.otherLink = data;
      this.rnd = Math.random();
    },
    handleChange(data) {
      this.embeM = data;
      this.rnd = Math.random();
    },
    getSceneInfomation() {
      getSceneInfomation({ id: this.activeItem.sceneCode }, (data) => {
        this.mapvisit = data.data.mapVisi;
        this.somedatainfo = data.data;
        if (data.data.bgMusic) {
          if (bgmMap[data.data.bgMusic]) {
            this.bgmUrl =
              window.location.href.indexOf("www.4dkankan.com") > -1
                ? `https://4dkk.4dage.com/v3/audio/${bgmMap[data.data.bgMusic]}`
                : `https://4dkk.4dage.com/v3-test/audio/${
                    bgmMap[data.data.bgMusic]
                  }`;
          }

          if (data.data.bgMusic == "user") {
            this.bgmUrl = data.data.bgMusic
              ? `https://4dkk.4dage.com/images/images${data.data.num}/${data.data.bgMusicName}`
              : "";
          }
        }
      });
    },
    handleEnded() {
      this.audioUrl = "";
    },
    handleItem(data) {
      if (data.id == "about") {
        this.showIntro = true;
      }
      if (data.id == "vr") {
        this.$iosGrantedTips((data) => {
          if (data.code == 1) {
            var krpano = document.getElementById("krpanoSWFObject");
            var webvr = krpano.get("webvr");
            webvr.entervr();
          } else {
            this.$alert({
              content:
                "运动和方向访问失败，您需要完全关闭此应用，然后再次打开，并允许访问运动与方向",
            });
          }
        });
      }
    },

    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);

      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) {
          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 = 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();
          Share({
            title: newVal.name,
            link: newVal.share,
            imgUrl: newVal.icon,
            desc: newVal.description,
          });
        }
      },
    },
    activeItem: {
      handler(newVal) {
        this.$nextTick(() => {
          if (newVal.type == "4dkk") {
            this.embeM = null;
            this.otherLink = null;
            removepano("#pano");
            $("#pano").empty();
            this.getSceneInfomation();
            return;
          } else {
            this.bgmUrl = "";
          }
          removepano("#pano");
          $smallWaiting.show();

          $("#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) {
            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: 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.$bus.on("isVR", (data) => {
      this.isVR = data;
    });

    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;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: calc(50% - 18px);
    transform: translateX(-50%);
    bottom: 44px;
    z-index: 9999;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-left: 10px;
    padding: 0 10px;
    &.active {
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid #0076f6;
      color: #0076f6;
    }
    .icon-edit_soundview {
      color: #0076f6;
      margin-right: 10px;
    }
    .vaduio {
      visibility: hidden;
      width: 0;
    }
  }

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

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

  .hidetips {
    display: none;
  }
  .aside {
    position: fixed;
    left: 15px;
    bottom: 34px;
    display: flex;
    > li {
      margin: 0 0 5px 5px;
      > span {
        width: 36px;
        height: 36px;
        display: inline-block;
        background: rgba(0, 0, 0, 0.5);
        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%;
    word-break: break-all;
    max-height: 75vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    > span {
      display: inline-block;
      -webkit-overflow-scrolling: touch;
      text-align: justify;
    }
  }
}
</style>