|
|
|
@ -5,7 +5,7 @@ |
|
|
|
<div style="display: inline-block; white-space: nowrap"> |
|
|
|
<div class="floors-item all" @click="showAll = true" :class="{ active: showAll }">全部楼层</div> |
|
|
|
<div |
|
|
|
@click="handleFloor(item, index)" |
|
|
|
@click="handleSelectFloor(index)" |
|
|
|
:class="{ active: !showAll && floorIdx === index, current: currentFloor.floorCode === item.floorCode }" |
|
|
|
class="floors-item" |
|
|
|
v-for="(item, index) of currentBuildingFloorsList" |
|
|
|
@ -48,7 +48,7 @@ |
|
|
|
</Teleport> |
|
|
|
|
|
|
|
<div class="shop-list-wrapper"> |
|
|
|
<BrandScroll @click="handleShop" :list="selectedShopList" :isRow="isRow" :config="config" /> |
|
|
|
<BrandScroll v-if="initiated" :shop="shop" :need-focus="true" @click="handleShop" :list="selectedShopList" :isRow="isRow" :config="config" /> |
|
|
|
<div class="switch"> |
|
|
|
<div :class="{ btn: true, active: !isRow }" @click="isRow = false"> |
|
|
|
<img v-if="isRow" src="./grid.svg" /> |
|
|
|
@ -64,7 +64,7 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import { ref, watch, onBeforeUnmount } from 'vue' |
|
|
|
import { ref, watch, onBeforeUnmount, computed, nextTick } from 'vue' |
|
|
|
import { storeToRefs } from 'pinia' |
|
|
|
import { useStore } from '@/store/root' |
|
|
|
import { RESET, DIRECTION, ACTIVITY_BRAND, list as buttonList } from './list' |
|
|
|
@ -80,7 +80,7 @@ const isRow = ref(false) |
|
|
|
const store = useStore() |
|
|
|
const formatMap = ref({}) |
|
|
|
const facMap = ref({}) |
|
|
|
const { currentBuildingFloorsList, currentFloor, config, currentFloorShopMap } = storeToRefs(store) |
|
|
|
const { currentBuildingFloorsList, currentFloor, config, currentFloorShopMap, shop } = storeToRefs(store) |
|
|
|
|
|
|
|
try { |
|
|
|
const facs = window.Map_QM.getAllIcon() |
|
|
|
@ -90,11 +90,6 @@ try { |
|
|
|
console.log('error: ', error) |
|
|
|
} |
|
|
|
|
|
|
|
try { |
|
|
|
window.Map_QM?.showFloor?.(currentFloor.value.floorOrder) |
|
|
|
} catch (error) { |
|
|
|
console.log('error: ', error) |
|
|
|
} |
|
|
|
getBrandListByFloor().then(({ data }) => { |
|
|
|
formatMap.value = data.list |
|
|
|
.map(({ name, shopList: list }) => ({ name, format: Object.keys(list.reduce((acc, nxt) => ({ ...acc, [nxt.industryFatherName]: true }), {})).join('/') })) |
|
|
|
@ -158,58 +153,86 @@ function handleMapIcon(item, index) { |
|
|
|
function handleShop(item) { |
|
|
|
mapIdx.value = -1 |
|
|
|
store.SET_SHOP(item) |
|
|
|
setShopActive(item) |
|
|
|
} |
|
|
|
watch(shop, async nxt => { |
|
|
|
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 handleFloor(item, index) { |
|
|
|
function changeFloor(index) { |
|
|
|
return new Promise(resolve => { |
|
|
|
const floor = currentBuildingFloorsList.value[index] |
|
|
|
showAll.value = false |
|
|
|
hideMapDialog() |
|
|
|
mapIdx.value = -1 |
|
|
|
cancelIdleCallback(idle.value) |
|
|
|
window.Map_QM.showFloor(item.floorOrder) |
|
|
|
window.Map_QM.showFloor(floor.floorOrder) |
|
|
|
idle.value = requestIdleCallback(() => { |
|
|
|
floorIdx.value = index |
|
|
|
selectedShopList.value = shopList.value.map(brand => ({ |
|
|
|
...brand, |
|
|
|
shopList: brand.shopList |
|
|
|
.filter(shop => shop.floor === item.floor) |
|
|
|
.map(shop => { |
|
|
|
const meta = currentFloorShopMap.value[shop.shopId] |
|
|
|
return { ...shop, ...(meta ? meta : {}) } |
|
|
|
.filter(item => item.floor === floor.floor) |
|
|
|
.map(item => { |
|
|
|
const meta = currentFloorShopMap.value[item.shopId] |
|
|
|
return { ...item, ...(meta ? meta : {}) } |
|
|
|
}) |
|
|
|
})) |
|
|
|
resolve() |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
const handleSelectFloor = index => { |
|
|
|
store.SET_SHOP(null) |
|
|
|
nextTick(() => { |
|
|
|
changeFloor(index) |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
//筛选当前楼层所需数据 |
|
|
|
function filterAboutCurrentInfo() { |
|
|
|
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 |
|
|
|
window.Map_QM.showFloor(floorOrder) |
|
|
|
cancelIdleCallback(idle.value) |
|
|
|
idle.value = requestIdleCallback(() => { |
|
|
|
floorIdx.value = currentBuildingFloorsList.value.findIndex(item => item.floorCode === currentFloor.value.floorCode) |
|
|
|
floorIdx.value = currentBuildingFloorsList.value.findIndex(item => item.floorCode === floorCode) |
|
|
|
selectedShopList.value = shopList.value.map(brand => ({ |
|
|
|
...brand, |
|
|
|
shopList: brand.shopList |
|
|
|
.filter(shop => shop.floor === currentFloor.value.floor) |
|
|
|
.map(shop => { |
|
|
|
const meta = currentFloorShopMap.value[shop.shopId] |
|
|
|
return { ...shop, ...(meta ? meta : {}) } |
|
|
|
.filter(item => item.floor === floor) |
|
|
|
.map(item => { |
|
|
|
const meta = currentFloorShopMap.value[item.shopId] |
|
|
|
return { ...item, ...(meta ? meta : {}) } |
|
|
|
}) |
|
|
|
})) |
|
|
|
}) |
|
|
|
nextTick(() => { |
|
|
|
if (shop.value) { |
|
|
|
setShopActive(shop.value) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const initiated = computed(() => selectedShopList.value && selectedShopList.value.length) |
|
|
|
onBeforeUnmount(() => { |
|
|
|
cancelIdleCallback(idle.value) |
|
|
|
clearTimeout(mapTimer.value) |
|
|
|
clearTimeout(mapIconTimer.value) |
|
|
|
hideMapDialog() |
|
|
|
store.SET_SHOP(null) |
|
|
|
}) |
|
|
|
|
|
|
|
watch( |
|
|
|
[shopList, currentFloor], |
|
|
|
([_shopList, _currentFloor]) => { |
|
|
|
if (_shopList.length && Reflect.ownKeys(_currentFloor).length) { |
|
|
|
console.log('guide page initiated') |
|
|
|
filterAboutCurrentInfo() |
|
|
|
} |
|
|
|
}, |
|
|
|
|
jiannibang
4 years ago