518-JSSWLT/H5场景本地化/src/views/gui/compomemt/floorSelect.vue

<template>
  <div class="floorSelect" v-if="urlNum">
    <div class="floor_Box" @click="show = !show">
      <div class="floor_icon"></div>
    </div>
    <div class="floor_num">{{ numTxt }}</div>
    <!-- 点击出来的选择框 -->
    <div class="floor_show" v-show="show">
      <div
        @click="skipUrl(item.path)"
        class="floor_row"
        :class="{ floor_active: item.path == urlNum }"
        v-for="item in data"
        :key="item.id"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "floorSelect",
  components: {},
  data() {
    return {
      data: [
        { id: 4, name: "4层", path: "1197" },
        { id: 3, name: "3层", path: "1196" },
        { id: 2, name: "2层", path: "1195" },
        { id: 1, name: "1层", path: "1194" },
      ],
      show: false,
      urlNum: "",
      numTxt: "",
    };
  },
  computed: {},
  watch: {},
  methods: {
    skipUrl(url) {
      window.location.href =
        window.location.origin + window.location.pathname + `#/?m=${url}`;
      setTimeout(() => {
        location.reload(true);
      }, 200);
    },
  },
  created() {
    const num = window.number;
    const arr = ["1194", "1195", "1196", "1197"];
    if (arr.includes(num)) {
      // 隐藏原本的楼层选择
      setTimeout(() => {
        const dom = document.querySelector(".gui-floor");
        if (dom) {
          dom.style.display = "none";
        }
      }, 200);

      this.urlNum = num;
      this.numTxt =
        num == 1194 ? "1" : num == 1195 ? "2" : num == 1196 ? "3" : "4";
    }
  },
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.floorSelect {
  width: 48px;
  margin-right: 10px;
  height: 48px;
  color: #fff;
  font-size: 11px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  position: relative;

  .floor_Box {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    .floor_icon {
      width: 32px;
      height: 29px;
      background: url("../../../assets/img/floor-icon.png") left top no-repeat;
      background-size: 98%;
    }
  }

  .floor_num {
    pointer-events: none;
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
  }
  .floor_show {
    width: 86px;
    position: absolute;
    bottom: 50px;
    transition: all 0.3s;
    z-index: 100;
    left: -19px;
    .floor_row {
      border: 1px solid transparent;
      width: 86px;
      height: 30px;
      margin-bottom: 1px;
      font-size: 14px;
      cursor: pointer;
      overflow: hidden;
      white-space: nowrap;
      background-color: rgba(0, 0, 0, 0.5);
      text-align: center;
      line-height: 30px;
      color: #fff;
      &:hover {
        background-color: #1d95d0;
      }
    }
    .floor_active {
      background-color: #1d95d0;
      pointer-events: none;
    }
  }
}
</style>