client_iot-daoshi-template-v/src/views/Brand/Brand.vue

<template>
  <View>
    <MapControl @handleMapIcon="handleMapIcon" :mapIdx="mapIdx" v-if="showMap"></MapControl>
    <Teleport to="body">
      <Transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
        <div class="hide-map" v-if="showMap" @click="showMap = false">
          <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g>
              <path id="Vector" d="M24 22.1L33.9 32L36.728 29.172L24 16.444L11.272 29.172L14.1 32L24 22.1Z" fill="currentColor" />
            </g>
          </svg>
          <div v-if="isH">
            <div>点击</div>
            <div>收起地图</div>
          </div>
          <div v-else>点击收起地图</div>
        </div></Transition
      >
      <div class="brand-wrapper" :class="showMap ? 'showMap' : ''">
        <BrandScroll class="brand" :class="showMap ? 'showMap' : ''" :shop="shop" @click="handleShop" :list="selectedList" :isFood="isFood" :config="config" />
      </div>
    </Teleport>
  </View>
</template>

<script setup>
import { ref, computed, watch, onBeforeMount, onBeforeUnmount } from 'vue'
import { storeToRefs } from 'pinia'
import { useStore } from '@/store/root'
import { getBrandListByFloor } from '@/http/brand/api'
import View from '@/layouts/View.vue'
import BrandScroll from '@/components/BrandScroll/BrandScroll.vue'
import { hideMapDialog, setShopActive, setShopInactive } from '@/composables/useInitMap'
import MapControl from '@/components/MapControl/MapControl.vue'
import { RESET, DIRECTION } from '@/components/MapControl/list'
import { useMediaQuery } from '@vueuse/core'

const store = useStore()
const storeRefs = storeToRefs(store)
const { config, indexList, foodIndustryMap, shop, currentFloor, showMap, showSearch, path } = storeRefs
const mapIdx = ref(-1)
const mapTimer = ref(null)
const mapIconTimer = ref(null)
const selectedList = ref([])
const isFood = computed(() => path.value === '/foods')
const isH = useMediaQuery('(min-aspect-ratio: 1/1)')

Promise.all([getBrandListByFloor()]).then(([_brandList]) => {
  if (storeRefs.shop.value) shop.value = storeRefs.shop.value
  if (isFood.value) {
    const list = _brandList.data.list.map(item => ({
      name: item.name,
      shopList: item.shopList.filter(({ industryFatherCode }) => foodIndustryMap.value[industryFatherCode])
    }))
    selectedList.value = list
  } else {
    const recMap = indexList.value.recommendList.reduce((acc, { shopCode }) => ({ ...acc, [shopCode]: true }), {})
    const list = _brandList.data.list
    selectedList.value = list.map(({ name, shopList: _shopList }) => ({ name, shopList: _shopList.filter(({ shopCode }) => recMap[shopCode]) }))
  }
})
onBeforeMount(() => {
  store.SET_SHOW_MAP(false)
})

onBeforeUnmount(() => {
  if (!showSearch.value) store.SET_SHOP(null)
})
function handleShop(item) {
  if (shop.value?.shopCode === item.shopCode) {
    if (showMap.value) {
      window.Map_QM.pathNode({ floor: shop.value.floorOrder, node: shop.value.yaxis })
    } else store.SET_SHOW_MAP(true)
  }
  mapIdx.value = -1
  store.SET_SHOP(item)
}

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

watch(showMap, v => {
  if (v) {
    window?.Map_QM?.startRender()
    if (shop.value) {
      store.SET_SHOW_MAP(true)
      window.Map_QM.pathNode({ floor: shop.value.floorOrder, node: shop.value.yaxis })
    }
  } else {
    window?.Map_QM?.cancelRender()
  }
})

watch(shop, nxt => {
  if (!nxt) {
    setShopInactive()
  } else if (nxt && showMap.value) {
    setShopActive(nxt)
    window.Map_QM.pathNode({ floor: nxt.floorOrder, node: nxt.yaxis })
  }
})
</script>

<style lang="scss" scoped>
.hide-map {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
  height: 100px;
  left: 0;
  right: 0;
  background: var(--guide-floorBg);
  color: var(--guide-floorColor);
  top: 1050px;
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  svg {
    width: 48px;
    height: 48px;
  }
}
.brand-wrapper {
  position: absolute;
  top: 408px;
  height: 1512px;
  z-index: 20;
  background: var(--global-background);
  transition: all 0.5s ease-in-out;
  &.showMap {
    height: 770px;
    top: 1150px;
    .brand {
      height: 770px;
    }
  }
  .brand {
    height: 1512px;
  }
}
@media (min-aspect-ratio: 1/1) {
  .hide-map {
    left: 1310px;
    right: 510px;
    height: 800px;
    top: 280px;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-size: 20px;
    svg {
      transform: rotate(-90deg);
      margin-bottom: 27px;
    }
  }
  .brand-wrapper {
    top: 280px;
    width: 100vw;
    right: 0;
    height: 800px;
    .brand {
      height: 800px;
    }
    &.showMap {
      width: 510px;
      top: 280px;
      height: 800px;
      .brand {
        width: 456px;
        height: 800px;
      }
    }
  }
}
</style>