qjkankan_v1.1.1/packages/qjkankan-kankan-view/src/pages/SMG.vue

<template>
  <Password />
  <LoadingLogo :thumb="true" />
  <Guide />
  <div class="ui-view-layout" :class="{ show: show }" is-mobile="true">
    <div class="scene" ref="scene$"></div>
    <template v-if="dataLoaded">
      <Information />
      <Control />
      <teleport v-if="refMiniMap && player.showWidgets" :to="refMiniMap">
        <span class="button-switch" @click.stop="toggleMap">
          <ui-icon type="show_map_collect"></ui-icon>
        </span>

        <p class="change" v-if="controls.showDollhouse" @click="changeMode('dollhouse')">
          <ui-icon type="show_3d_normal"></ui-icon>
          {{$t('mode.dollhouseModel')}}
        </p>
      </teleport>
      <template v-if="refMiniMap">
        <div :class="{ disabled: flying }" v-show="mode != 'panorama'"
          v-if="controls.showFloorplan && controls.showDollhouse" class="tab-layer">
          <div class="tabs" v-if="controls.showMap">
            <span :class="{ active: mode === 'floorplan' }" ref="floorplan_ref"
              @click="changeMode('floorplan', $event)">
              <ui-icon :type="mode == 'floorplan' ? 'show_plane_selected' : 'show_plane_normal'"></ui-icon>
              {{$t('mode.floorplan')}}
            </span>
            <span :class="{ active: mode === 'dollhouse' }" ref="dollhouse_ref"
              @click="changeMode('dollhouse', $event)">
              <ui-icon :type="mode == 'dollhouse' ? 'show_3d_selected' : 'show_3d_normal'"></ui-icon>
              {{$t('mode.dollhouse')}}
            </span>
            <div class="background" ref="background"></div>
          </div>
        </div>
      </template>
    </template>
    <UiTags />
  </div>
</template>
  
<script setup>
import { useMusicPlayer } from "@/utils/sound";
import UiTags from "@/components/Tags";

import { listenMessage } from '@/utils/messageHandler'
import {Dialog} from '@/global_components'

import Information from "@/components/Information";
import Control from "@/components/Controls/Control.Mobile.vue";
import LoadingLogo from "@/components/shared/Loading.vue";
import OpenVideo from "@/components/openVideo/";
import Guide from "@/components/shared/Guide.vue";
import Password from "@/components/shared/Password.vue";

import { createApp } from "@/app";
import { ref, onMounted, computed, nextTick, watch } from "vue";
import { useStore } from "vuex";
import browser from "@/utils/browser";
import { useApp, getApp } from "@/app";
import { useI18n, getLocale } from '@/i18n'
const { t } = useI18n({ useScope: 'global' })

const musicPlayer = useMusicPlayer();

let app = null;

const autoPlayMedia = player => {
    function onclick() {
        window.parent.postMessage(
            {
                source: "qjkankan",
                event: "autoPlayBgm",
                params: {
                    status: true,
                },
            },
            "*"
        );
        $player.removeEventListener('click', onclick)
        $player.removeEventListener('touchstart', onclick)
    }
    const $player = document.querySelector('.player')
    $player.addEventListener('click', onclick)
    $player.addEventListener('touchstart', onclick)
}

listenMessage()

const closetagtype = () => {
  store.commit("tag/setTagClickType", {
    type: "",
    data: {},
  });
};

const store = useStore();
const tags = computed(() => {
  return store.getters["tag/tags"] || [];
});
const player = computed(() => store.getters["player"]);
const flying = computed(() => store.getters["flying"]);
const metadata = computed(() => store.getters["scene/metadata"]);
const controls = computed(() => {
  return metadata.value.controls;
});
const mode = computed(() => store.getters["mode"]);
const showNavigations = computed(() => store.getters["showNavigations"]);
const scene$ = ref(null);
const show = ref(false);
const dataLoaded = ref(false);
const refMiniMap = ref(null);
const isCollapse = ref(false);
const background = ref(null);
const resize = () => {
  if (this.$refs.background && (this.mode == "floorplan" || this.mode == "dollhouse")) {
    this.$nextTick(() => {
      let $active = $(this.$el).find(".tabs .active");
      background.value.style.width = $active[0].getBoundingClientRect().width + "px";
      background.value.style.left = $active.position().left + "px";
    });
  }
};

watch(
  () => player.value.showMap,
  (val, old) => {
    if (!isCollapse.value) {
      let $minmap = document.querySelector("[xui_min_map]");
      if ($minmap) {
        if (val) {
          $minmap.classList.remove("collapse");
        } else {
          $minmap.classList.add("collapse");
        }
      }
    }
  },
  {
    deep: true,
  }
);
watch(
  () => player.value.showWidgets,
  (val, old) => {
    let $minmap = document.querySelector("[xui_min_map]");
    if ($minmap) {
      if (val) {
        $minmap.classList.remove("collapse");
      } else {
        $minmap.classList.add("collapse");
      }
    }
  },
  {
    deep: true,
  }
);

watch(
  () => mode.value,
  (val, old) => {
    console.log(val);
    let timer = setTimeout(() => {
      clearTimeout(timer);
      if (val == "floorplan") {
        if (floorplan_ref.value && floorplan_ref.value) {
          background.value.style.width = floorplan_ref.value.getBoundingClientRect().width + "px";
          background.value.style.left = floorplan_ref.value.offsetLeft + "px";
        }
      } else if (val == "dollhouse") {
        if (dollhouse_ref.value && dollhouse_ref.value) {
          background.value.style.width = dollhouse_ref.value.getBoundingClientRect().width + "px";
          background.value.style.left = dollhouse_ref.value.offsetLeft + "px";
        }
      }
    }, 0);
  },
  {
    deep: true,
  }
);

const floorplan_ref = ref(null);
const dollhouse_ref = ref(null);
const changeMode = (name, e) => {
  if (e) {
    if (!flying.value) {
      // background.value.style.width = e.srcElement.getBoundingClientRect().width + 'px'
      // background.value.style.left = e.srcElement.offsetLeft + 'px'
      store.commit("setMode", name);
    }
  } else {
    // let t = setTimeout(() => {
    // background.value.style.width = dollhouse_ref.value.getBoundingClientRect().width + 'px'
    // background.value.style.left = dollhouse_ref.value.offsetLeft + 'px'
    store.commit("setMode", name);
    // }, 0)
  }
};
// console.dir(document.querySelector(".tabs>span:last-of-type"));
const toggleMap = () => {
  isCollapse.value = !isCollapse.value;
  let $minmap = document.querySelector("[xui_min_map]");
  if ($minmap) {
    if (!isCollapse.value) {
      $minmap.classList.remove("collapse");
    } else {
      $minmap.classList.add("collapse");
    }
  }
};

const onClickTagInfo = (el) => {
  el.stopPropagation();
  let item = tags.value.find((item) => item.sid == el.target.dataset.id);
  if (item.type == "commodity") {
    store.commit("tag/setTagClickType", {
      type: "goodlist",
      data: item,
    });
  }
};

onMounted(() => {
  const app = createApp({
    num: browser.getURLParam("m"),
    dom: scene$.value,
    mobile: true,
  });
  app.Scene.lock();
  app.use("MinMap", { theme: { camera_fillStyle: "#0076f6" } });
  app.use("Tag");
  app.use("TourPlayer");
  app.Scene.on("ready", () => {
    show.value = true;
  });
  app.Scene.on("error", (data) => {
    switch (data.code) {
      case 5033:
        window.location.replace(`/5033.html?m=` + browser.getURLParam("m"));
        break;
      case 5034:
        window.location.replace(`/5034.html?m=` + browser.getURLParam("m"));
        break;
      case 5009:
        window.location.replace(`/5034.html?m=` + browser.getURLParam("m"));
        break;
      case 5005:
        Dialog.toast({
            content: t('guide.no_scene'),
            type: 'error',
        })
        break;
    }
  });
  app.Scene.on("loaded", (pano) => {
    refMiniMap.value = "[xui_min_map]";
    store.commit("setFloorId", pano.floorIndex);
    useMusicPlayer();
    let music = store.getters['scene/musicURL']

    window.parent.postMessage(
      {
        source: "qjkankan",
        event: "fdkkBgmLink",
        params: {
          music,
        },
      },
      "*"
    );
    autoPlayMedia()
  });
  app.Scene.on("panorama.videorenderer.resumerender", () => {
    window.parent.postMessage(
      {
        source: "qjkankan",
        event: "togglefdkkBGM",
        params: {
          paly: false,
        },
      },
      "*"
    );

    window.parent.postMessage(
      {
        source: "qjkankan",
        event: "toggleBgmStatus",
        params: {
          status: false,
        },
      },
      "*"
    );
  });

  app.Scene.on("panorama.videorenderer.suspendrender", async () => {
    let player = await getApp().TourManager.player;
    if (!player.isPlaying) {
      window.parent.postMessage(
        {
          source: "qjkankan",
          event: "togglefdkkBGM",
          params: {
            paly: true,
          },
        },
        "*"
      );
      window.parent.postMessage(
        {
          source: "qjkankan",
          event: "toggleBgmStatus",
          params: {
            status: true,
          },
        },
        "*"
      );
    }
  });
  app.store.on("metadata", (metadata) => {
    let div = document.createElement("div");
    div.innerHTML = metadata.description;
    store.commit("scene/load", metadata);
    if (!metadata.controls.showMap) {
      app.MinMap.hide(true);
    }
    dataLoaded.value = true;
  });
  app.store.on("tags", (tags) => {
    store.commit("tag/load", tags);
  });
  app.Camera.on("mode.beforeChange", ({ fromMode, toMode, floorIndex }) => {
    if (fromMode) {
      store.commit("setFlying", true);
    }
  });
  app.Camera.on("mode.afterChange", ({ toMode, floorIndex }) => {
    store.commit("setFlying", false);
  });
  app.Camera.on("flying.started", (pano) => {
    store.commit("setFlying", true);
  });
  app.Camera.on("flying.ended", ({ targetPano }) => {
    store.commit("setFlying", false);
    store.commit("setPanoId", targetPano.id);
  });
  app.TourManager.on('loaded', async (tour) => {
    let tours = JSON.parse(
      JSON.stringify(app.TourManager.tours, (key, val) => {
        if (key === 'audio') {
          return null
        } else {
          return val
        }
      })
    )
    store.commit('tour/setData', {
      tours: tours,
    })

    window.parent.postMessage(
      {
        source: "qjkankan",
        event: "toursList",
        params: {
          tours,
        },
      },
      "*"
    );

    store.commit("tour/setBackUp", {
      tours: JSON.parse(
        JSON.stringify(app.TourManager.tours, (key, val) => {
          if (key === "audio") {
            return null;
          } else {
            return val;
          }
        })
      ),
    });
  });
  app.store.on("floorcad", (floor) => store.commit("scene/loadFloorData", floor));
  app.store.on('flooruser', floor => store.commit('scene/loadFloorData', floor)) //4.7以后新楼层方式
  app.render();
});
</script>
  
<style lang="scss">
.tab-layer {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 2.3rem;
  pointer-events: none;
}

.tabs {
  pointer-events: auto;
  position: relative;
  display: flex;
  background: #222222;
  border-radius: 6px;
  padding: 2px;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.5);

  .background {
    position: absolute;
    left: 2px;
    top: 2px;
    bottom: 2px;
    width: 50%;
    border-radius: 4px;
    background: #444444;
    box-shadow: 2px 0px 4px 0px rgba(0, 0, 0, 0.3);
    z-index: 0;
    transition: left 0.3s;
  }

  span {
    flex: 1;
    color: #fff;
    opacity: 0.5;
    border-radius: 6px;
    height: 0.94737rem;
    font-size: 0.36842rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
    z-index: 1;

    i {
      font-size: 0.47368rem;
      margin-right: 4px;
      pointer-events: none;
    }
  }

  span.active {
    opacity: 1;
  }
}

[xui_tags_view] {
  .tag-body {
    /* display: none; */
    position: absolute;
    left: 50%;
    bottom: 50px;
    transform: translateX(-50%) scale(0);
    transform-origin: bottom;
    transition: all 0.3s cubic-bezier(0.35, 0.32, 0.65, 0.63);

    // pointer-events: none;
    .tag-commodity {
      min-width: 230px;
      height: 76px;
      background: rgba(255, 255, 255, 0.8);
      box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
      border-radius: 2px;
      position: relative;
      margin-bottom: 30px;

      &::before {
        content: "";
        display: inline-block;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 28px;
        bottom: -30px;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
        position: absolute;
      }

      .tag-avatar {
        position: absolute;
        z-index: 99;
        width: 80px;
        height: 80px;
        background: #ffffff;
        box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 16%);
        border-radius: 2px;
        top: -14px;
        left: -12px;
        background-size: cover;
        pointer-events: none;
      }

      >p {
        color: #131d34;
        font-size: 16px;
        pointer-events: none;
      }

      .tag-title {
        padding: 10px 10px 10px 76px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 240px;
      }

      .tag-info {
        padding: 0 20px 0 76px;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    &.show {
      transform: translateX(-50%) scale(1);
    }
  }

  .coupon {
    width: 64px !important;
    height: 64px !important;

    &::after {
      content: "發現好禮";
      width: 100%;
      color: #ed5d18;
      position: absolute;
      bottom: -24px;
      text-align: center;
      font-size: 14px;
    }
  }

  .waterfall {
    width: 70px !important;
    height: 70px !important;
  }

  .applet_link {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #ed5d18;
    position: relative;
    overflow: hidden;

    &::after {
      content: "直播中";
      width: 100%;
      height: 20px;
      background: #ed5d18;
      position: absolute;
      bottom: 0;
      text-align: center;
      line-height: 1.2;
      font-size: 12px;
      border-radius: 26%;
    }
  }
}

@media (orientation: landscape) {
  .tab-layer {
    top: 1.2rem;

    .tabs {
      height: 0.7rem;

      >span {
        height: 0.7rem;
        font-size: 0.25rem;
      }
    }
  }
}
</style>