qjkankan_shibadongcun/packages/qjkankan-view/src/components/UIGather/mobile/control.fdkk.vue

<template>
  <ul
    class="control-fdkk"
    v-if="
      (fdkkmetadata &&
        fdkkCurrentVersion != 'V3' &&
        fdkkmetadata &&
        !fdkkmetadata.controls.showMap &&
        (fdkkmetadata.controls.showPanorama ||
          fdkkmetadata.controls.showFloorplan ||
          fdkkmetadata.controls.showDollhouse)) ||
      toursList.length > 0 ||
      (customLink && customLink.isShow) ||
      (customTelephone && customTelephone.isShow) ||
      metadata.description ||
      isHasNormalBGM ||
      fdkkBGM
    "
  >
    <li
      class="daolan"
      :class="{ v3daolan: fdkkCurrentVersion == 'V3' }"
      @click.stop="playTour"
      v-if="toursList.length > 0"
    >
      <img
        :src="
          require(`@/assets/images/icon/${
            (fdkkCurrentVersion == 'V3' ? v3toursStatus : isPlayTours)
              ? 'pause01@2x'
              : 'playing01@2x'
          }.png`)
        "
        alt=""
      />
      <span>{{ $t("menu.tour") }}</span>
      <img
        @click.stop="openTours"
        :class="{ active: showTours }"
        class="jiantou"
        :src="require(`@/assets/images/icon/expand_arrows@2x.png`)"
        alt=""
      />
      <div class="vlink"></div>
    </li>

    <template
      v-if="
        fdkkCurrentVersion != 'V3' &&
        fdkkmetadata &&
        !fdkkmetadata.controls.showMap
      "
    >
      <li
        v-if="fdkkmetadata && fdkkmetadata.controls.showPanorama"
        :class="{ disabled: isPlayTours || flying }"
        @click="onModeChange('panorama')"
      >
        <img
          :src="
            require(`@/assets/images/icon/${
              mode == 'panorama' ? 'roaming_selected@2x' : 'roaming_normal@2x'
            }.png`)
          "
          alt=""
        />
      </li>

      <li
        v-if="fdkkmetadata && fdkkmetadata.controls.showFloorplan"
        :class="{ disabled: isPlayTours || flying }"
        @click="onModeChange('floorplan')"
      >
        <img
          :src="
            require(`@/assets/images/icon/${
              mode == 'floorplan' ? 'plane_selected@2x' : 'plane_normal@2x'
            }.png`)
          "
          alt=""
        />
      </li>

      <li
        v-if="fdkkmetadata && fdkkmetadata.controls.showDollhouse"
        :class="{ disabled: isPlayTours || flying }"
        @click="onModeChange('dollhouse')"
      >
        <img
          :src="
            require(`@/assets/images/icon/${
              mode == 'dollhouse' ? '3d_selected@2x' : '3d_normal@2x'
            }.png`)
          "
          alt=""
        />
      </li>

      <li
        class="vlink"
        v-if="
          (customLink && customLink.isShow) ||
          (customTelephone && customTelephone.isShow) ||
          metadata.description ||
          (((metadata.backgroundMusic && metadata.backgroundMusic.id) ||
            fdkkBGM) &&
            fdkkmetadata &&
            (fdkkmetadata.controls.showPanorama ||
              fdkkmetadata.controls.showFloorplan ||
              fdkkmetadata.controls.showDollhouse))
        "
      ></li>
    </template>

    <!-- 自定义链接 -->
    <li @click="onLink" v-if="customLink && customLink.isShow">
      <img :src="require(`@/assets/images/icon/link@2x.png`)" alt="" />
    </li>

    <!-- 联系电话 -->
    <li v-if="customTelephone && customTelephone.isShow">
      <a :href="`tel:${customTelephone.value}`">
        <img :src="require(`@/assets/images/icon/telephone@2x.png`)" alt="" />
      </a>
    </li>

    <!-- 简介 -->
    <li @click="onIntroduce" v-if="metadata.description">
      <img :src="require(`@/assets/images/icon/text@2x.png`)" alt="" />
    </li>

    <li @click="onIsBGM" v-if="isHasNormalBGM || isHasV4BGM || isHasV3BGM">
      <img
        v-if="isHasV3BGM"
        :src="
          require(`@/assets/images/icon/${
            isPlayV3BGM ? 'music@2x.png' : 'music_disabled@2x.png'
          }`)
        "
        alt=""
      />
      <img
        v-else
        :src="
          require(`@/assets/images/icon/${
            (isPlayNormalBGM || isPlayV4BGM) && isCurrentPlaying
              ? 'music@2x.png'
              : 'music_disabled@2x.png'
          }`)
        "
        alt=""
      />
    </li>
  </ul>

  <teleport to="body">
    <introduce v-if="showIntroduce" />
    <telephone v-if="showTelephone" />
    <clink v-if="showLink" />
  </teleport>
</template>

<script setup>
import { computed, unref, ref } from "vue";
import introduce from "./control/text";
import telephone from "./control/telephone";
import clink from "./control/link";
import { useStore } from "vuex";

const store = useStore();
const toursList = computed(() => store.getters["fdkk/toursList"]);

const isShowScenesList = computed(
  () => store.getters["functions/isShowScenesList"]
);
const toursStatus = computed(() => store.getters["fdkk/toursStatus"]);

const v3toursStatus = computed(() => store.getters["fdkk/v3toursStatus"]);

const isPlayTours = computed(() => store.getters["fdkk/isPlayTours"]);
const flying = computed(() => store.getters["fdkk/isFlying"]);
const mode = computed(() => store.getters["fdkk/mode"]);

const showTours = computed(() => store.getters["fdkk/isShowToursList"]);

// const currentScene = computed(() => store.getters["scene/currentScene"]);
const metadata = computed(() => store.getters["scene/metadata"]);

const fdkkmetadata = computed(() => store.getters["fdkk/metadata"]);

const fdkkCurrentVersion = computed(
  () => store.getters["scene/fdkkCurrentVersion"]
);
const fdkkBGM = computed(() => store.getters["fdkk/fdkkBGM"]);

// const v3IsBgm = computed(() => store.getters["fdkk/v3IsBgm"]);
// const v3BGMStatus = computed(() => store.getters["fdkk/v3BGMStatus"]);

const customTelephone = computed(() => store.getters["scene/customTelephone"]);

const customLink = computed(() => store.getters["scene/customLink"]);

const showIntroduce = computed(() => store.getters["functions/showIntroduce"]);
const showTelephone = computed(() => store.getters["functions/showTelephone"]);
const showLink = computed(() => store.getters["functions/showLink"]);

//BMG音乐
const isHasNormalBGM = computed(() => store.getters["audio/isHasNormalBGM"]);
const isCurrentPlaying = computed(
  () => store.getters["audio/isCurrentPlaying"]
);
const isHasV3BGM = computed(() => store.getters["audio/isHasV3BGM"]);
const isHasV4BGM = computed(() => store.getters["audio/isHasV4BGM"]);
const isHasExplanationBGM = computed(
  () => store.getters["audio/isHasExplanationBGM"]
);
//BMG playing音乐
const isPlayNormalBGM = computed(() => store.getters["audio/isPlayNormalBGM"]);
const isPlayV3BGM = computed(() => store.getters["audio/isPlayV3BGM"]);
const isPlayV4BGM = computed(() => store.getters["audio/isPlayV4BGM"]);

const onIntroduce = () => {
  store.commit("functions/setShowIntroduce", true);
};

const onLink = () => {
  const { openMethod, value } = unref(customLink);
  if (openMethod == "_target") {
    window.open(value, "_blank");
  } else {
    store.commit("functions/setShowLink", true);
  }
};

const onIsBGM = () => {
  console.log("fdkk----onIsBGM", fdkkCurrentVersion.value);

  if (unref(isHasV3BGM)) {
    const v3playToggle = !unref(isPlayV3BGM);
    console.log("v3playToggle", v3playToggle);
    toggleV3BGM(v3playToggle);
    return;
  }

  if (unref(isHasV4BGM)) {
    if (!unref(isCurrentPlaying)) {
      store.dispatch("audio/playBGM", 2);
    } else {
      store.dispatch("audio/pauseBGM");
    }
  } else {
    if (!unref(isCurrentPlaying)) {
      store.dispatch("audio/playBGM", 0);
    } else {
      store.dispatch("audio/pauseBGM");
    }
  }
};

/**
 * 只有v3利用Iframe postMessage
 */
const toggleV3BGM = (status) => {
  const target = document.querySelector("#showifr");
  if (target) {
    target.contentWindow.postMessage(
      {
        source: "mingyuan",
        event: "settings",
        params: {
          playMusic: status,
        },
      },
      "*"
    );
  }
};
window.toggleV3BGM = toggleV3BGM;

const openTours = () => {
  if (isShowScenesList.value) {
    store.commit("functions/setShowScenesList", false);
  }

  store.commit("fdkk/setShowToursList", !showTours.value);
};

const playTour = () => {
  if (fdkkCurrentVersion.value == "V3") {
    store.commit("fdkk/setV3ToursStatus", !v3toursStatus.value);
    let ele = document.getElementById("showifr");
    ele &&
      ele.contentWindow.postMessage(
        {
          source: "mingyuan",
          event: v3toursStatus.value ? "guide-start" : "guide-pause",
        },
        "*"
      );
    return;
  }
  store.commit("fdkk/setToursStatus", !toursStatus.value);
};

const onIsShowList = (data) => {
  if (showTours.value) {
    store.commit("fdkk/setShowToursList", false);
  }
  store.commit("functions/setShowScenesList", !isShowScenesList.value);
};

const onModeChange = (name) => {
  document.querySelector("#fdkkifr") &&
    document.querySelector("#fdkkifr").contentWindow.postMessage(
      {
        source: "qjkankan",
        event: "setMode",
        params: {
          name: name,
        },
      },
      "*"
    );
};
</script>

<style lang="scss" scoped>
.control-fdkk {
  display: flex;
  align-items: center;
  height: 100%;

  &::-webkit-scrollbar {
    display: none;
  }

  > li {
    width: 26px;
    height: 26px;
    margin: 0 2px;
    cursor: pointer;
    white-space: nowrap;
    display: inline-block;
    flex-shrink: 0;

    img {
      width: 100%;
      height: 100%;
    }

    &:last-of-type {
      margin-right: 10px;

      &::after {
        width: 10px;
        height: 1px;
        background: none;
        content: "";
        display: inline-block;
      }
    }

    &:first-of-type {
      margin-left: 10px;
    }
  }

  .daolan {
    display: flex;
    width: auto;
    align-items: center;

    > img {
      width: 26px;
      height: 26px;
    }

    .jiantou {
      margin-left: -2px;
      transform: rotate(180deg);
      transition: 0.3s ease transform;

      &.active {
        transform: none;
      }
    }

    > span {
      font-size: 12px;
      margin-top: 2px;
    }
  }

  .v3daolan {
    > img {
      &:last-of-type {
        display: none;
      }
    }

    > span {
      margin-left: 0;
    }

    .vlink {
      margin-left: 10px;
    }
  }

  .vlink {
    width: 1px;
    height: 20px;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      #ffffff 49%,
      rgba(255, 255, 255, 0) 100%
    );
    opacity: 0.5;
  }
}
</style>