daikan-international/src/components/basic/FloorSwitch.vue

<template>
  <div
    class="floor-switch"
    :class="{ disable: flying, showTours: showTours }"
    v-if="floors.length > 1 && mode != 'panorama'"
  >
    <ul>
      <li
        v-if="mode != 'floorplan'"
        :class="{ active: 'all' == floorId }"
        @click.stop="onGotoFloor('all')"
      >
        <b></b><span>全部</span>
      </li>
      <li
        v-for="item in floors"
        :key="item.id"
        :class="{ active: item.id == floorId }"
        @click.stop="onGotoFloor(item.id)"
      >
        <b></b><span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
  import { computed, unref, watch } from 'vue';
  import { useApp } from '/@/hooks/userApp';
  import { useSocket } from '/@/hooks/userSocket';
  import { useAppStore } from '/@/store/modules/app';
  import { useRtcStore } from '/@/store/modules/rtc';
  import { useSceneStore } from '/@/store/modules/scene';
  import { useTourStore } from '/@/store/modules/tour';
  const appStore = useAppStore();
  const sceneStore = useSceneStore();
  const tourStore = useTourStore();
  const mode = computed(() => appStore.mode);
  const flying = computed(() => appStore.flying);
  // eslint-disable-next-line vue/no-side-effects-in-computed-properties
  const floors = computed(() => sceneStore.floors.reverse());
  const floorId = computed(() => appStore.floorId);
  const showTours = computed(() => tourStore.showTours);
  const rtcStore = useRtcStore();

  const onGotoFloor = (id) => {
    //   store.commit("setFloor", id);
    if (rtcStore.isLeader || appStore.isTourMode) {
      const { socket } = useSocket();
      appStore.setFloor(id);
      if (rtcStore.isLeader) {
        socket &&
          socket.emit('action', {
            type: 'sync-floor',
            data: {
              floorId: id,
            },
          });
      }
    }
  };
  useApp().then((sdk) =>
    sdk.Camera.on('mode.beforeChange', ({ toMode, floorIndex }) => {
      // store.commit("mode", toMode);
      appStore.setMode(toMode);
      if (toMode != 'dollhouse') {
        //   store.commit("setFloorId", floorIndex);
        appStore.setFloorId(floorIndex);
      }
    }),
  );
  watch(
    () => [flying, mode],
    (val) => {
      if (!unref(val)[0].value && unref(val)[1].value === 'dollhouse') {
        console.log('dollhouse-all');
        setTimeout(() => {
          onGotoFloor('all');
        }, 50);
      }

      // if (!unref(val[0]) && unref(val[1]) === 'dollhouse') {
      // }
    },
    { deep: true, immediate: true },
  );
</script>

<style lang="scss" scoped>
  .floor-switch {
    pointer-events: all;
    position: absolute;
    bottom: calc(100% + 5px);
    left: 20px;
    z-index: 10;
    transition: bottom 0.1s;
    ul,
    li {
      padding: 0;
      margin: 0;
    }
    ul {
      position: relative;
      z-index: 2;
    }
    li {
      cursor: pointer;
      display: flex;
      align-items: center;
      position: relative;
      height: 50px;
      &:first-child {
        b {
          &::before {
            display: none;
          }
        }
        &.active {
          b {
            &::after {
              bottom: -10px;
            }
          }
        }
      }
      &:last-child {
        b {
          &::after {
            display: none;
          }
        }
        &.active {
          b {
            &::before {
              top: -10px;
            }
          }
        }
      }
      b {
        position: relative;
        width: 16px;
        height: 16px;
        background-color: #1c1c1c;
        border-radius: 50%;
        box-shadow: 0px 0px 2px 1px #404040;
        cursor: pointer;
        &::before {
          content: '';
          position: absolute;
          top: -5px;
          left: 50%;
          margin-left: -3px;
          background: #1c1c1c;
          width: 6px;
          height: 6px;
        }
        &::after {
          content: '';
          position: absolute;
          bottom: -5px;
          left: 50%;
          margin-left: -3px;
          background: #1c1c1c;
          width: 6px;
          height: 6px;
        }
      }
      span {
        margin-left: 10px;
        font-size: 14px;
        //color: #939393;
        cursor: pointer;
        color: #eeeeee;
        text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
      }
      &.active {
        b {
          left: -6px;
          width: 28px;
          height: 28px;
          border: solid 6px #1c1c1c;
          background-color: #404040;
          box-shadow: 0px 0px 2px 1px #404040;
          &::before {
            top: -10px;
          }
          &::after {
            bottom: -10px;
          }
        }
        span {
          margin-left: 0;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 32px;
          color: rgba(255, 255, 255, 0.88);
          border: solid 4px #1c1c1c;
          background-color: #404040;
          border-radius: 32px;
          box-shadow: 0px 0px 2px 1px #404040;
          padding: 0px 10px;
          text-shadow: none;
          &::before {
            content: '';
            position: absolute;
            left: -10px;
            background: #1c1c1c;
            width: 7px;
            height: 4px;
            box-shadow: -2px 0px 2px 1px #404040;
          }
          &::after {
            content: '';
            position: absolute;
            left: -16px;
            background: #1c1c1c;
            width: 6px;
            height: 11px;
            border-radius: 50%;
          }
        }
      }
    }
    &::after {
      content: '';
      position: absolute;
      left: 5px;
      top: 20px;
      bottom: 20px;
      width: 6px;
      background: #1c1c1c;
      box-shadow: 0px 0px 2px 1px #404040;
      z-index: 1;
    }
  }
  [is-mobile] {
    .floor-switch {
      bottom: 2.5rem;
      &.showTours {
        bottom: 5rem;
      }
      li {
        height: 45px;
        &:first-child {
          &.active {
            b {
              &::after {
                bottom: -6px;
              }
            }
          }
        }
        &:last-child {
          &.active {
            b {
              &::before {
                top: -6px;
              }
            }
          }
        }
        b {
          width: 14px;
          height: 14px;
          &::before {
            top: -3px;
            left: 50%;
            margin-left: -2px;
            width: 4px;
            height: 4px;
          }
          &::after {
            bottom: -3px;
            left: 50%;
            margin-left: -2px;
            width: 4px;
            height: 4px;
          }
        }
        span {
          font-size: 0.36842rem;
        }
        &.active {
          b {
            left: -3px;
            width: 20px;
            height: 20px;
            border: solid 4px #1c1c1c;
            &::before {
              top: -6px;
            }
            &::after {
              bottom: -6px;
            }
          }
          span {
            height: 30px;
            border: solid 3px #1c1c1c;
            border-radius: 30px;
            padding: 0px 10px;
            margin-left: 5px;
            &::before {
              left: -11px;
              width: 10px;
              height: 4px;
              box-shadow: -2px 0px 1px 1px #404040;
            }
            &::after {
              left: -14px;
              width: 3px;
              height: 6px;
              border-radius: 40%;
            }
          }
        }
      }
      &::after {
        left: 5px;
        top: 20px;
        bottom: 20px;
        width: 4px;
      }
    }

    @media (orientation: landscape) {
      .floor-switch {
        bottom: 1rem;
        li {
          span {
            font-size: 0.25rem;
          }
        }
      }
    }
  }
</style>