daikan-international/src/components/custom/main-shop.vue

<template>
  <div class="panel" :class="{ show }">
    <span class="icon" @click="playing ? pause() : play()" v-if="existsGuide">
      <Icon type="play" />
    </span>
    <span class="icon" @click="showScenes = !showScenes">
      <Icon type="scene" />
    </span>
    <span class="ctrl" :class="{ show }" @click="show = !show">
      <Icon type="arrows@2x" />
    </span>
  </div>
  <SceneList
    v-if="showScenes"
    @close="showScenes = false"
    @changeScene="changeScene"
  />
</template>

<script setup lang="ts">
import SceneList from "./scene-list.vue";
//import { useMusicPlayer } from "@/utils/sound";
import { changeScene } from "@/store/room";
import Icon from "@/components/icon/index.vue";
import { ref, onUnmounted } from "vue";
import { getApp } from "@/app";

const show = ref(false);
const app = getApp();
const playing = ref(false);
const existsGuide = ref(false);
const showScenes = ref(false);

app.use("TourPlayer").then((player) => {
  console.log("===>", player);
  player.on("play", ({ partId, frameId }) => (playing.value = true));
  player.on("pause", ({ partId, frameId }) => (playing.value = false));
  player.on("end", () => {
    playing.value = false;
  });
});

// 需要双向绑定时，重新设置数据
app.TourManager.on("loaded", (tours) => {
  existsGuide.value = !!tours.length;
});

const play = async () => {
  const player = await app.TourManager.player;
  player.play();
};

const pause = async () => {
  const player = await app.TourManager.player;
  player.pause();
};

// const timeout = setTimeout(() => {
//   const a = useMusicPlayer()

// }, 2000)

// onUnmounted(() => clearTimeout(timeout))
</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>