daikan-international/src/components/custom/panel.vue

<template>
  <div class="panel" :class="{ show }" v-if="panelShow">
    <!-- 暂时隐藏 33729 -->
    <span class="icon" @click="handlePlayTours" v-if="hasTours && false">
      <Icon type="play" />
    </span>
    <!-- <span class="icon" @click="handleDetail">
      <Icon type="detail" />
    </span> -->
    <span class="icon" @click="showScenes = !showScenes" v-if="sceneList.length > 1">
      <Icon type="scene" />
    </span>
    <span class="icon" v-if="hasMusic" @click="handleMusic">
      <Icon type="music_on" v-if="!isPlayMusic" />
      <Icon type="music_off" v-else />
    </span>
    <span class="ctrl" :class="{ show }" @click="show = !show">
      <Icon type="arrows" />
    </span>
  </div>
  <audio id="music" loop :src="musicURL" v-if="musicURL?.length"> </audio>
  <SceneList v-if="showScenes" @close="showScenes = false" @change-scene="changeScene" />
</template>

<script setup lang="ts">
  import SceneList from '/@/components/chatRoom/sceneList.vue';
  //import { useMusicPlayer } from "@/utils/sound";
  // import { changeScene } from "@/store/room";
  import Icon from '/@/components/basic/icon/index.vue';
  import { computed, onMounted, ref, unref, watchEffect } from 'vue';
  import { useRoom } from '/@/hooks/useRoom';
  import { useTourPlayer } from '/@/hooks/userTourPlayer';
  import { useSceneStore } from '/@/store/modules/scene';
  // import { useAppStore } from '/@/store/modules/app';

  const { initialRoom, changeScene, sceneList } = useRoom();
  const sceneStore = useSceneStore();
  // const appStore = useAppStore();
  // const hasMusic = computed(
  //   () => sceneStore.metadata.music?.length || sceneStore.metadata.musicFile?.length,
  // );
  const hasMusic = computed(() => sceneStore.metadata.music?.length);
  const musicURL = computed(() => sceneStore.musicURL);

  const show = ref(false);
  const isPlayMusic = ref(false);

  watchEffect(() => {
    console.log('hasMusic', hasMusic, musicURL);
  });
  onMounted(() => {
    initialRoom();
  });

  const showScenes = ref(false);
  const { hasTours } = useTourPlayer();
  // const panelShow = computed(
  //   () => unref(hasTours) || unref(sceneList).length > 1 || unref(hasMusic),
  // );
  const panelShow = computed(() => unref(sceneList).length > 1 || unref(hasMusic));

  console.log('panelShow', unref(panelShow));

  function handlePlayTours() {
    const { player, playing } = useTourPlayer();
    if (!unref(playing)) {
      player.play();
    } else {
      player.pause();
    }
  }
  function handleMusic() {
    const useMusicPlayer: HTMLAudioElement | null = document.getElementById(
      'music',
    ) as HTMLAudioElement;
    if (!unref(isPlayMusic)) {
      useMusicPlayer && useMusicPlayer.play();
      isPlayMusic.value = true;
    } else {
      useMusicPlayer && useMusicPlayer.pause();
      isPlayMusic.value = false;
    }
  }
  // const handleDetail = () => {
  //   if (appStore.isShowIntroPanel) {
  //     appStore.setShowIntroPanel(false);
  //   } else {
  //     appStore.setShowIntroPanel(true);
  //   }
  // };
</script>

<style lang="scss" scoped>
  .panel {
    position: fixed;
    top: calc(100% - 90px);
    left: 0;
    z-index: 22;
    height: 44px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0px 24px 24px 0px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: 30px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    // width: 110px;
    transform: translateX(calc(-100% + 30px));

    &.show {
      transform: translateX(0);
    }

    > .icon {
      margin: 0 10px;
    }
  }

  .icon {
    font-size: 24px;
    height: 1em;
    color: #fff;

    &.active {
      color: #ed5d18;
    }
  }

  .ctrl {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) rotateZ(180deg);
    font-size: 12px;

    &.show {
      transform: translateY(-50%);
    }
  }
</style>