FD_Pano/src/framework/showMobile/index.vue

<template>
  <div class="panocon">
    <template v-if="showInfo">
      <v-ifr
        v-if="activeItem.type == '4dkk'"
        :key="activeItem.sceneCode"
        :url="`/embed.html?from=mingyuan&m=${activeItem.sceneCode}&lang=zh`"
      />
      <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 iconedit_soundview"></i>
        停止播放
        <v-audio
          v-if="audioUrl"
          :vkey="audioUrl.id"
          @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;

export default {
  components: {
    list,
    password,
    popup,
    preview,
    imgview,
    vIfr,
    vAudio,
  },
  computed: {
    ...mapGetters({
      showInfo: "showInfo",
    }),
  },
  data() {
    return {
      mapvisit:0,
      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,
      aside: [
        {
          id: "about",
          icon: "icontool_about",
        },
        {
          id: "vr",
          icon: "icontool_vr",
        },
      ],
    };
  },
  methods: {
    getSceneInfomation(){
      getSceneInfomation({id:this.activeItem.sceneCode}, (data) => {
        this.mapvisit = data.data.mapVisi
      });
    },
    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") {
            removepano("#pano");
            $("#pano").empty();
            this.getSceneInfomation()
            return;
          }
          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 = 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;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 14px;
    z-index: 9999;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.3);
    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 #0076F6;
      color: #0076F6;
    }
    .iconedit_soundview{
      color: #0076F6;
    }
  }

  .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: 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%;
    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>