qjkankan_v1.1.1/packages/qjkankan-view/src/components/UIGather/control.vue

<template>
  <ul class="control" v-show="fdkkCurrentVersion == 'V4'">
    <!-- 自定义链接 -->
    <li
      @click="onLink"
      v-tooltip="customLink.name"
      v-if="customLink && customLink.isShow"
    >
      <img :src="require(`@/assets/images/icon/link@2x.png`)" alt="" />
    </li>

    <!-- 联系电话 -->
    <li
      @click="onTelephone"
      v-tooltip="customTelephone.name"
      v-if="customTelephone && customTelephone.isShow"
    >
      <img :src="require(`@/assets/images/icon/telephone@2x.png`)" alt="" />
    </li>

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

    <!-- 背景音乐 -->
    <li
      @click="onIsBGM"
      v-tooltip="$t('menu.music')"
      v-if="isHasNormalBGM || isHasV4BGM"
    >
      <img
        :src="
          require(`@/assets/images/icon/${
            (isPlayNormalBGM || isPlayV4BGM) && isCurrentPlaying
              ? 'music@2x.png'
              : 'music_disabled@2x.png'
          }`)
        "
        alt=""
      />
    </li>

    <!-- 解说音频 -->
    <li
      @click="onIsCommentary"
      v-tooltip="$t('menu.commentary')"
      v-if="isHasExplanationBGM"
    >
      <img
        :src="
          require(`@/assets/images/icon/${
            isPlayExplanationBGM && isCurrentPlaying
              ? 'commentary@2x.png'
              : 'commentary_disabled@2x.png'
          }`)
        "
        alt=""
      />
    </li>

    <li
      @click="onIsAutoRotate"
      v-tooltip="$t('menu.autoRotate')"
      v-if="currentScene.type != '4dkk'"
    >
      <img
        :src="
          require(`@/assets/images/icon/${
            isAutoRotate ? 'rotation@2x.png' : 'rotation_disabled@2x.png'
          }`)
        "
        alt=""
      />
    </li>

    <li @click="onVR" v-tooltip="'VR'" v-if="currentScene.type != '4dkk'">
      <img :src="require(`@/assets/images/icon/vr@2x.png`)" alt="" />
    </li>

    <li @click="onShare" v-tooltip="$t('menu.share')">
      <img :src="require(`@/assets/images/icon/share@2x.png`)" alt="" />
    </li>

    <li @click="onFullScreen" v-tooltip="$t('menu.fullScreen')">
      <img
        :src="require(`@/assets/images/icon/${'fullscreen@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 {
  ref,
  watch,
  computed,
  onMounted,
  watchEffect,
  nextTick,
  unref,
} from "vue";
import { useStore } from "vuex";
import { useApp } from "@/app";

import introduce from "./control/text";
import telephone from "./control/telephone";
import clink from "./control/link";

const store = useStore();

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

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

const isDoneforCover = computed(() => store.getters["scene/isDoneforCover"]);
const isShowCover = computed(
  () => metadata.value.coverInfo?.isShowCover || false
);

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

const isAutoRotate = computed(() => store.getters["functions/isAutoRotate"]);

// const showMusicPlaying = ref(false);
// const showCommentaryPlaying = ref(false);

// const isCommentary = computed(() => store.getters["functions/isCommentary"]);

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

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

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

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

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

const isFullscreen = ref(false);

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

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

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

const onIsBGM = () => {
  if (unref(isHasV4BGM)) {
    if (!unref(isCurrentPlaying)) {
      store.dispatch("audio/playBGM", 2);
    } else {
      store.dispatch("audio/pauseBGM", 0);
    }
  } else {
    if (!unref(isPlayNormalBGM)) {
      console.log("从其他切过来");
      store.dispatch("audio/playBGM", 0);
    } else {
      if (!unref(isCurrentPlaying)) {
        store.dispatch("audio/playBGM", 0);
      } else {
        store.dispatch("audio/pauseBGM", 0);
      }
    }
  }
};

const onIsAutoRotate = (data) => {
  store.commit("functions/setAutoRotate", !isAutoRotate.value);
};

const onIsCommentary = () => {
  if (!unref(isPlayExplanationBGM)) {
    console.log("从其他切过来");
    store.dispatch("audio/playBGM", 3);
  } else {
    if (unref(isCurrentPlaying)) {
      store.dispatch("audio/pauseBGM");
    } else {
      store.dispatch("audio/playBGM", 3);
    }
  }
};

const onFullScreen = () => {
  let element = document.documentElement;
  if (isFullscreen.value) {
    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;
};

const onVR = (data) => {
  useApp().then((app) => {
    app.krpanoDom.call("webvr.enterVR()");
  });
};

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

// const staticList = ref([
//   {
//     id: "cruise",
//     name: "巡游开关",
//     icon: "rotation@2x.png",
//     icondisabled: "rotation_disabled@2x.png",
//   },
//   {
//     id: "vr",
//     name: "VR",
//     icon: "vr@2x.png",
//   },
//   {
//     id: "share",
//     name: "分享",
//     icon: "share@2x.png",
//   },
//   {
//     id: "full",
//     name: "全屏",
//     icon: "fullscreen@2x.png",
//     icondisabled: "rotation_disabled@2x.png",
//   },
// ]);

onMounted(() => {
  let events = [
    "fullscreenchange",
    "webkitfullscreenchange",
    "mozfullscreenchange",
    "MSFullscreenChange",
  ];
  events.forEach((item, index) => {
    window.addEventListener(item, () => {
      isFullscreen.value = !isFullscreen.value;
    });
  });
});

// watch(
//   () => [showCommentaryPlaying.value, showMusicPlaying.value],
//   () => {
//     if (!showCommentaryPlaying.value && !showMusicPlaying.value) {
//       store.commit("functions/setCurrentPlaying", "");
//     } else {
//       if (showCommentaryPlaying.value) {
//         store.commit("functions/setCurrentPlaying", "commentary");
//       } else if (showMusicPlaying.value) {
//         store.commit("functions/setCurrentPlaying", "bgm");
//       }
//     }
//   }
// );

// musicPlayer.on("play", () => {
//   soundPlayer.pause();
//   showMusicPlaying.value = true;
// });
// musicPlayer.on("pause", () => {
//   showMusicPlaying.value = false;
// });

// soundPlayer.on("play", () => {
//   musicPlayer.pause();
//   showCommentaryPlaying.value = true;
//   //设置当前播放中音乐来源
//   if (!musicPlayer.pauseFromOther) {
//     musicPlayer.pauseFromOther = true;
//   }
// });
// soundPlayer.on("pause", () => {
//   console.log(11111);
//   showCommentaryPlaying.value = false;
// });
</script>

<style lang="scss" scoped>
.control {
  position: absolute;
  right: 20px;
  bottom: 8px;
  display: flex;
  z-index: 9;

  > li {
    width: 26px;
    height: 26px;
    margin: 0 10px;
    cursor: pointer;

    > img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>