shuangchuangzhou_2022/src/pages/mobilescene/raside/menu.vue

<template>
  <div class="rmenu">
    <ul v-if="menuType == 'func' && isShowfunc">
      <li :class="{ rmactive: isBgm && item.id == 'music' }" v-for="(item, i) in menu" :key="i">
        <img @click="onClick(item)" :title="item.name" :src="require(`@/assets/images/proj2022/mobile/menu/${item.img}.png`)" alt="" />
      </li>
    </ul>
    <div class="control">
      <img @click.stop="onClickNavigate('up')" :src="require(`@/assets/images/proj2022/mobile/up@2x.png`)" alt="" />
      <img @click.stop="onClickNavigate('down')" :src="require(`@/assets/images/proj2022/mobile/down@2x.png`)" alt="" />
    </div>
  </div>
</template>

<script>
import { Booth } from "@/data/booth.js";
import { g_findCloseNum } from "@/utils/index.js";

let findNextItem = (arr, currentItem) => {
  let idx = arr.findIndex((item) => item == currentItem);
  if (idx == arr.length - 1) {
    idx = 0;
  } else {
    idx += 1;
  }

  return arr[idx];
};

let findPrevItem = (arr, currentItem) => {
  let idx = arr.findIndex((item) => item == currentItem);
  if (idx == 0) {
    idx = arr.length - 1;
  } else {
    idx -= 1;
  }

  return arr[idx];
};

export default {
  props: ["tourStatus", "menuType", 'isShowfunc', "currentPanoid"],
  computed: {
    nextZhanXiang() {
      let zhanqu = Booth.find((item) => item.id === this.theme);
      let panoArr = zhanqu.company.map((item) => item.panoId);
      let currentIdx = panoArr.indexOf(this.currentPanoid);
      let nextPanoItem = "";
      if (currentIdx > -1) {
        if (currentIdx == panoArr.length - 1) {
          zhanqu = findNextItem(Booth, zhanqu);
          nextPanoItem = zhanqu.company[0];
        } else {
          currentIdx += 1;
          nextPanoItem = zhanqu.company[currentIdx];
        }
      } else {
        let ttt = g_findCloseNum(
          zhanqu.company.map((item) => item.panoId),
          this.currentPanoid
        );
        nextPanoItem = zhanqu.company.find((item) => item.panoId == ttt);
      }
      return nextPanoItem;
    },

    prevZhanXiang() {
      let zhanqu = Booth.find((item) => item.id === this.theme);
      let panoArr = zhanqu.company.map((item) => item.panoId);
      let currentIdx = panoArr.indexOf(this.currentPanoid);
      let prevPanoItem = "";
      if (currentIdx > -1) {
        if (currentIdx == 0) {
          zhanqu = findPrevItem(Booth, zhanqu);
          prevPanoItem = zhanqu.company[0];
        } else {
          currentIdx -= 1;
          prevPanoItem = zhanqu.company[currentIdx];
        }
      } else {
        let ttt = g_findCloseNum(
          zhanqu.company.map((item) => item.panoId),
          this.currentPanoid
        );
        prevPanoItem = zhanqu.company.find((item) => item.panoId == ttt);
      }
      return prevPanoItem;
    },
  },
  data() {
    let bgmAudio = new Audio();
    bgmAudio.src = require(`@/assets/audio/bgm.mp3`);
    bgmAudio.loop = true;

    return {
      current: "play",
      bgmAudio,
      isBgm: false,
      menu: [
        {
          id: "daka",
          name: "打卡",
          img: "record",
          cp: "daka",
        },
        {
          id: "content",
          name: "评论",
          img: "message",
          cp: "vcontent",
        },
        {
          id: "zan",
          img: "like",
          name: "点赞",
        },
        {
          id: "qrcode",
          name: "分享",
          img: "share",
          cp: "qrcode",
        },
      ],
    };
  },
  watch: {
    isBgm: {
      immediate: true,
      handler: function(newVal) {
        !newVal ? this.bgmAudio.pause() : this.bgmAudio.play();
      },
    },
    tourStatus(newVal) {
      if (newVal) {
        this.isBgm = false;
      } else {
        let status = localStorage.getItem("g_bgmstatus");
        if (status === "open") {
          this.isBgm = true;
        }
      }
    },
  },
  mounted() {
    this.isBgm = true;
    localStorage.setItem("g_bgmstatus", this.isBgm ? "open" : "close");

    this.$nextTick(() => {
      setTimeout(() => {
        if (this.bgmAudio.paused) {
          this.isBgm = false;
          localStorage.setItem("g_bgmstatus", this.isBgm ? "open" : "close");
        }
        this.$bus.$on("toggleBGM", (data) => {
          if (!data) {
            this.isBgm = data;
          } else {
            let status = localStorage.getItem("g_bgmstatus");
            if (status === "open") {
              this.isBgm = data;
            }
          }
        });
      });
    });
  },
  methods: {
    onClickNavigate(type) {
      if (type == "up") {
        this.$bus.$emit("ifrMessage", {
          events: "flyToPano",
          data: this.nextZhanXiang,
        });
      } else {
        this.$bus.$emit("ifrMessage", {
          events: "flyToPano",
          data: this.prevZhanXiang,
        });
      }
    },
    onClick(item) {
      item.path && this.$router.push(item.path);
      item.cp && this.$bus.$emit("opencp", item.cp);
    },
  },
};
</script>

<style lang="less" scoped>
.rmenu {
  position: fixed;
  right: 20px;
  bottom: 130px;
  width: 45px;
  > ul {
    width: 100%;
    border-radius: 31px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 2px 0;
    backdrop-filter: blur(12px) brightness(100%);
    > li {
      text-align: center;
      width: 100%;
      margin: 10px auto;
      > img {
        width: 80%;
        cursor: pointer;
      }
    }
  }
  .control {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 20px;
    > img {
      width: 100%;
      margin: 5px 0;
    }
  }
}
</style>