easthospital_iot-daoshi-v/src/views/Guide/Guide.vue

<template>
  <View>
    <ScrollView scroll-x :list="currentBuildingFloorsList" class="floors-list animate__fast animate__animated animate__fadeIn">
      <div style="display: inline-block; white-space: nowrap">
        <div
          @click="handleSelectFloor(index)"
          :class="{ active: floorIdx === index, current: currentFloor.floorCode === item.floorCode }"
          class="floors-item"
          v-for="(item, index) of currentBuildingFloorsList"
          :key="item.floorCode"
          v-show="index !== 0"
        >
          {{ item.floor }}
        </div>
      </div>
    </ScrollView>
    <div class="control-area">
      <div class="map-control-wrapper animate__fast animate__animated animate__fadeInUp">
        <div class="map-item" @click="handleMapIcon(item, index)" v-for="(item, index) of buttonList" :key="item.name">
          <img :src="mapIdx === index ? item.iconActive : item.icon" alt="" class="map-icon" />
          <span class="map-name">{{ switchLanguage(item, 'name') }}</span>
        </div>
      </div>
    </div>
    <img src="../../assets/images/map/hands.svg" alt="" class="hands" />
    <div class="shop-list-wrapper">
      <BrandScroll v-if="initiated" :shop="shop" :need-focus="true" @click="handleShop" @nav="handleShopNav" :list="selectedShopList" :config="config" />
    </div>
  </View>
</template>

<script setup>
import { ref, watch, onBeforeUnmount, computed, nextTick } from 'vue'
import { storeToRefs } from 'pinia'
import { useStore } from '@/store/root'
import { RESET, DIRECTION, list as buttonList } from './list'
import View from '@/layouts/View.vue'
import { hideMapDialog, setShopActive, setShopInactive, showFacility } from '@/composables/useInitMap'
import { getBrandListByFormat } from '@/http/brand/api'
import BrandScroll from '@/components/BrandScroll/BrandScroll.vue'
import ScrollView from '@/base/ScrollView/ScrollView.vue'
import { getIndexList } from '@/http/api'
import { useRouter } from 'vue-router'

const router = useRouter()
const shopList = ref([])

const store = useStore()
const { currentBuildingFloorsList, currentFloor, config, shop, facility, indexTimestamp } = storeToRefs(store)

getIndexList().then(({ data }) => {
  store.SET_INDEX_LIST(data)
})

getBrandListByFormat().then(({ data }) => {
  shopList.value = data.list
})
const selectedShopList = ref([])

const mapIdx = ref(-1)
const mapTimer = ref(null)
const mapIconTimer = ref(null)

//我的位置
function onClickDeviceSite() {
  hideMapDialog()
  window.Map_QM.onShowDeviceSite()
}
function handleMapIcon(item, index) {
  store.SET_SHOP(null)
  clearTimeout(mapIconTimer.value)
  mapIdx.value = index
  switch (item.name) {
    case RESET:
      window.Map_QM.showFloor(currentFloor.value.floorOrder)
      onClickDeviceSite()
      filterAboutCurrentInfo()
      break
    case DIRECTION:
      window.Map_QM.onShowMeDir()
      filterAboutCurrentInfo(false)
      break

    default:
      break
  }
  clearTimeout(mapTimer.value)
  if (item.name === RESET) {
    mapTimer.value = setTimeout(() => {
      mapIdx.value = -1
      mapTimer.value = -1
      clearTimeout(mapTimer.value)
    }, 300)
  }
}

function handleShop(item) {
  mapIdx.value = -1
  store.SET_SHOP(item)
}
function handleShopNav(item) {
  console.log(item)
  mapIdx.value = -1
  router.push('/nav')
  store.SET_SHOP(item)
}

watch(shop, async nxt => {
  if (!nxt) {
    setShopInactive()
  } else if (nxt && initiated.value) {
    if (currentBuildingFloorsList.value[floorIdx.value].floorOrder !== nxt.floorOrder) {
      const index = currentBuildingFloorsList.value.findIndex(item => item.floorOrder === nxt.floorOrder)
      await changeFloor(index)
      setTimeout(() => setShopActive(nxt), 500)
    } else setShopActive(nxt)
  }
})

const floorIdx = ref(-1)
function changeFloor(index) {
  return new Promise(resolve => {
    const floor = currentBuildingFloorsList.value[index]
    hideMapDialog()
    mapIdx.value = -1
    window.Map_QM.showFloor(floor.floorOrder)

    floorIdx.value = index
    selectedShopList.value = shopList.value.map(brand => ({
      ...brand,
      collapsed: false,
      shopList: brand.shopList.filter(item => item.floor === floor.floor)
    }))
    resolve()
  })
}
const handleSelectFloor = index => {
  store.SET_SHOP(null)
  nextTick(() => {
    changeFloor(index)
  })
}
//筛选当前楼层所需数据
function filterAboutCurrentInfo(needShowFloor = true) {
  const floorCode = shop.value ? shop.value.floorCode : currentFloor.value.floorCode
  const floor = shop.value ? shop.value.floor : currentFloor.value.floor
  const floorOrder = shop.value ? shop.value.floorOrder : currentFloor.value.floorOrder
  try {
    needShowFloor && window.Map_QM.showFloor(floorOrder)
  } catch (error) {
    console.warn(error)
  }

  floorIdx.value = currentBuildingFloorsList.value.findIndex(item => item.floorCode === floorCode)
  selectedShopList.value = shopList.value.map(brand => ({
    ...brand,
    collapsed: false,
    shopList: brand.shopList.filter(item => item.floor === floor)
  }))

  nextTick(() => {
    if (shop.value) {
      setShopActive(shop.value)
    } else if (facility.value) {
      handleFacility(facility.value)
    }
  })
}
const initiated = computed(() => selectedShopList.value && selectedShopList.value.length)
onBeforeUnmount(() => {
  clearTimeout(mapTimer.value)
  clearTimeout(mapIconTimer.value)
  hideMapDialog()
})

watch(
  [shopList, currentFloor],
  ([_shopList, _currentFloor]) => {
    if (_shopList.length && Reflect.ownKeys(_currentFloor).length) {
      console.log('guide page initiated')
      filterAboutCurrentInfo()
    }
  },
  {
    immediate: true
  }
)

watch(facility, fac => {
  if (fac) handleFacility(fac)
  else hideMapDialog()
})
const handleFacility = async fac => {
  const index = currentBuildingFloorsList.value.findIndex(item => item.floorOrder === fac.floor)
  console.log(index, currentBuildingFloorsList.value[index])
  await changeFloor(index)
  setTimeout(() => showFacility(fac), 500)
}

watch(indexTimestamp, v => {
  if (v) filterAboutCurrentInfo()
})
</script>

<style lang="scss" scoped>
.floors-list {
  position: absolute;
  left: 0;
  right: 0;
  width: 100vw;
  top: 972px;
  height: 100px;
  z-index: 60;
  display: block;
  overflow: hidden;
  background: var(--guide-floorBg);

  &::-webkit-scrollbar {
    display: none;
  }
  .floors-item {
    display: inline-flex;
    width: 122.5px;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100px;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 96%;
    /* identical to box height, or 27px */

    text-align: center;

    /* W/100% */

    color: var(--guide-floorColor);
    transition: all 0.5s;
    &.current {
      background: rgba(0, 0, 0, 0.1);
      &::after {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 20px;
        display: flex;
        content: '您在本层';
        background: var(--guide-currentBg);
        font-weight: 700;
        font-size: 12px;
        color: var(--guide-currentColor);
        align-items: center;
        justify-content: center;
      }
    }
    &.active {
      background: var(--guide-floorActiveBg);
      color: var(--guide-floorActiveColor);
    }
  }
}

.shop-list-wrapper {
  position: absolute;
  width: 1080px;
  height: 914px;
  left: 0px;
  top: 1072px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
  .switch {
    display: flex;
    position: absolute;
    top: 35px;
    right: 68px;
    .btn {
      display: flex;
      width: 48px;
      height: 48px;
      justify-content: center;
      align-items: center;
    }
    .btn + .btn {
      margin-left: 8px;
    }
  }
  .shop-scroll {
    height: 914px;
    overflow: hidden;
    margin-left: 170px;
  }
}

.control-area {
  position: absolute;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 104px;
  right: 24px;
  top: 874px;
  z-index: 51;
}
.hands {
  position: absolute;
  top: 330px;
  right: 68px;
  width: 246px;
  height: 80px;
  z-index: 51;
}

.map-control-wrapper {
  display: flex;
}
.map-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
}
.map-icon {
  margin-bottom: 8px;
  width: 52px;
}
.map-name {
  font-weight: 700;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  color: rgba(0, 0, 0, 0.6);
}
@media (min-aspect-ratio: 1/1) {
  .shop-list-wrapper {
    width: 510px;
    height: calc(100vh - 280px);
    right: 0px;
    bottom: 0;
    left: auto;
    top: auto;
    .switch {
      top: 24px;
    }
    .shop-scroll {
      height: 100%;
      margin-left: 54px;
    }
  }
  .control-area {
    left: 68px;
    bottom: 40px;
    right: auto;
    top: auto;
    height: auto;
    .hands {
      top: 280px;
      left: 68px;
      right: auto;
    }
  }
}
</style>