new_era/src/pages/scene/menu.vue

<template>
  <div class="raside">
    <vsearch @isshowSearch="handleShowSearch" />
    <div v-show="!showsearch">
      <rmenu :tourStatus="tourStatus" @play="toggle" />

      <div class="smenu">
        <template>
          <ul>
            <li v-for="(item, i) in menu" :key="i">
              <div @click="onClick(item)">
                <div
                  :title="item.name"
                  :class="{ iactive: currentActive.id == item.id }"
                  :style="{ backgroundImage: `url(${require(`@/assets/images/proj2022/xueliezhen/${item.id}.png`)})` }"
                ></div>

                <span>{{ item.name }}</span>
              </div>
            </li>
          </ul>
        </template>

        <transition name="likeAddAnimate">
          <div class="good" v-show="isShowGood">
            <div class="num">+{{ 1 }}</div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import { supCount, getsupCount } from "@/config/api";

import vsearch from "./raside/search.vue";
import rmenu from "./raside/rmenu.vue";
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];
};

let menu = [
  {
    id: "like",
    maidiancode: "p_func1",
    name: "点赞",
  },
  {
    id: "message",
    name: "留言",
    maidiancode: "p_func2",
    cp: "vcontent",
  },
  {
    id: "share",
    name: "分享",
    maidiancode: "p_func3",
    cp: "qrcode",
  },
  {
    id: "clear",
    name: "清屏",
  },
];
export default {
  props: ["tourStatus", "currentPanoid"],

  data() {
    return {
      menu,
      goodNum: 1099,
      isShowGood: false,
      showsearch: false,
      isShowZX: true,
      currentActive: {},
      flying: false,
    };
  },
  components: { vsearch, rmenu },
  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[zhanqu.company.length - 1];
        } 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;
    },
  },
  methods: {
    handleShowSearch(data) {
      this.showsearch = data;
    },
    onClick(item) {
      this.currentActive = item;
      item.maidiancode &&
        window.goldlog.record(`/spec.1.1`, "", `snsScene=${item.maidiancode}&product=pcweb&pagename=中国网络文明建设成果展云展示`, "");

      setTimeout(() => {
        this.currentActive = {};
      }, 1000);
      if (item.id == "clear") {
        this.$bus.$emit("toggleClear", true);

        document.querySelector("#ifr").contentWindow.postMessage(
          {
            source: "toggleClear",
            data: true,
          },
          "*"
        );
        return;
      }

      item.path && this.$router.push(item.path);
      item.cp && this.$emit("opencp", item.cp);

      if (item.id == "like") {
        this.dianzan();
      }
    },
    onClickNavigate(type) {
      if (document.querySelector("#ifr").contentWindow.player.flying) {
        return;
      }
      if (type == "up") {
        this.$bus.$emit("ifrMessage", {
          events: "flyToPano",
          data: this.nextZhanXiang,
        });
      } else {
        this.$bus.$emit("ifrMessage", {
          events: "flyToPano",
          data: this.prevZhanXiang,
        });
      }
    },
    dianzan() {
      if (this.isShowGood) return;
      // getsupCount((res) => {
      //   console.log(111111,res);
      //   this.goodNum = Number(this.goodNum ? this.goodNum : (res.voteNum || 0) );
      this.isShowGood = true;
      setTimeout(() => {
        this.isShowGood = false;
      }, 2500);
      supCount(() => {});
      // });
    },
    toggle() {
      let fn = this.tourStatus ? "stopTour" : "startAndPlay";
      this.$bus.$emit("ifrMessage", {
        events: "toggleTour",
        data: fn,
      });
    },
  },
  mounted() {
    this.$bus.$on("toggleShowZX", (data) => {
      this.isShowZX = data;
    });

    this.$bus.$on("resetMenuActive", () => {
      this.currentActive = {};
    });
  },
};
</script>

<style lang="less" scoped>
.raside {
  position: fixed;
  top: 170px;
  right: 0;
  z-index: 999;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  .smenu {
    bottom: 22px;
    left: 0;
    position: fixed;
    transition: 0.3s ease all;
    width: 100%;
    .fandb {
      border-radius: 60px;
      width: 285px;
      height: 45px;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      border-radius: 31px;
      backdrop-filter: blur(6px);
      display: flex;
      justify-content: center;
      align-items: center;
      .line {
        display: inline-block;
        width: 1px;
        height: 45px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, #ffffff 48%, rgba(255, 255, 255, 0.5) 100%);
      }
      > div {
        display: flex;
        cursor: pointer;
        width: 49%;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
    }

    > ul {
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: absolute;
      right: 10px;
      bottom: 0;
      > li {
        display: inline-block;
        padding: 0 8px;
        > div {
          cursor: pointer;
          display: flex;
          flex-direction: column;
          text-align: center;
          justify-content: center;
          > div {
            width: 50px;
            height: 50px;
            overflow: hidden;
            background-position: 0 0;
            background-size: auto 100%;
            &.iactive {
              animation: boom-open-data 1s steps(25) forwards;
            }
          }
        }
      }
    }
  }

  .smtop {
    bottom: 162px;
    .good {
      bottom: 176px;
    }
  }
  .likeAddAnimate-enter-active,
  .likeAddAnimate-leave-active {
    transition: all 2.5s ease;
  }
  .likeAddAnimate-enter,
  .likeAddAnimate-leave {
    transform: translate(-10%, 0) scale(0);
    opacity: 0;
  }
  .likeAddAnimate-enter-to,
  .likeAddAnimate-leave-to {
    transform: translate(-10%, -70px) scale(1.05);
    opacity: 1;
  }
  .good {
    position: fixed;
    bottom: 36px;
    right: 230px;
    display: flex;
    z-index: 999;
    .pic {
      width: 35px;
      > img {
        width: 100%;
        height: 100%;
      }
    }
    .num {
      margin-top: 10px;
      margin-left: 0;
    }
  }
}
</style>