You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
613 lines
16 KiB
613 lines
16 KiB
<template>
|
|
<View>
|
|
<Teleport to="body">
|
|
<ScrollView v-if="!isH" scroll-x :list="currentBuildingFloorsList" class="floors-list animate__fast animate__animated animate__fadeIn">
|
|
<div style="display: inline-flex; white-space: nowrap; flex-direction: row-reverse">
|
|
<div
|
|
@click="handleSelectFloor(index)"
|
|
:class="{ active: !showAll && floorIdx === index, current: currentFloor.floorCode === item.floorCode }"
|
|
class="floors-item"
|
|
v-for="(item, index) of currentBuildingFloorsList"
|
|
:key="item.floorCode"
|
|
>
|
|
{{ item.floor }}
|
|
</div>
|
|
<div class="floors-item all" @click="showAll = true" :class="{ active: showAll }">全部楼层</div>
|
|
</div>
|
|
</ScrollView>
|
|
|
|
<ScrollView :list="currentBuildingFloorsList" class="allFloors" animate__fast animate__animated animate__fadeInUp v-if="!isH && showAll">
|
|
<div>
|
|
<div class="row" :class="{ current: currentFloor.floorCode === item.floorCode }" v-for="item of currentBuildingFloorsList" :key="item.floorCode">
|
|
<div class="left">{{ item.floor }}</div>
|
|
<div class="right">
|
|
<div class="format">{{ formatMap[item.floor] }}</div>
|
|
<div class="facs">
|
|
<div class="fac" v-for="fac of facMap[item.floorOrder]" :key="fac.type">
|
|
<img :src="fac.imgUrl" alt="" />
|
|
<template v-if="fac.title && fac.title.length > 4">
|
|
<div>{{ fac.title.slice(0, 3) }}</div>
|
|
<div>{{ fac.title.slice(3) }}</div>
|
|
</template>
|
|
<div v-else>{{ fac.title }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScrollView>
|
|
</Teleport>
|
|
<Teleport to="body">
|
|
<ScrollView v-if="isH" :list="currentBuildingFloorsList" class="floors-list-h animate__fast animate__animated animate__fadeIn" :class="{ all: showAll }">
|
|
<div>
|
|
<div class="floor-wrapper">
|
|
<div class="all-item" v-if="showAll"></div>
|
|
<div class="floors-item all" @click="showAll = true" :class="{ active: showAll }">全部楼层</div>
|
|
</div>
|
|
<div class="floor-wrapper" v-for="(item, index) of currentBuildingFloorsList" :key="item.floorCode">
|
|
<div class="all-item" :class="{ current: currentFloor.floorCode === item.floorCode }" v-if="showAll">
|
|
<div class="facs">
|
|
<div class="fac" v-for="fac of facMap[item.floorOrder]" :key="fac.type">
|
|
<img :src="fac.imgUrl" alt="" />
|
|
<template v-if="fac.title && fac.title.length > 4">
|
|
<div>{{ fac.title.slice(0, 3) }}</div>
|
|
<div>{{ fac.title.slice(3) }}</div>
|
|
</template>
|
|
<div v-else>{{ fac.title }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="format">{{ formatMap[item.floor] }}</div>
|
|
</div>
|
|
<div
|
|
@click="handleSelectFloor(index)"
|
|
:class="{ active: !showAll && floorIdx === index, current: currentFloor.floorCode === item.floorCode }"
|
|
class="floors-item"
|
|
>
|
|
{{ item.floor }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScrollView>
|
|
</Teleport>
|
|
<MapControl @handleMapIcon="handleMapIcon" :mapIdx="mapIdx"></MapControl>
|
|
|
|
<div class="shop-list-wrapper">
|
|
<BrandScroll v-if="initiated" class="guide" :shop="shop" :need-focus="true" @click="handleShop" :list="selectedShopList" :isRow="isRow" :config="config" />
|
|
<div class="switch">
|
|
<img class="btn" v-if="isRow" :src="theme.images.grid" @click="isRow = false" />
|
|
<img class="btn" v-else :src="theme.images.gridActive" @click="isRow = false" />
|
|
<img class="btn" v-if="!isRow" :src="theme.images.row" @click="isRow = true" />
|
|
<img class="btn" v-else :src="theme.images.rowActive" @click="isRow = true" />
|
|
</div>
|
|
</div>
|
|
</View>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, onBeforeUnmount, computed, nextTick } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
import { useStore } from '@/store/root'
|
|
import View from '@/layouts/View.vue'
|
|
import { hideMapDialog, setShopActive, setShopInactive } from '@/composables/useInitMap'
|
|
import { getBrandListByFormat, getBrandListByFloor } from '@/http/brand/api'
|
|
import BrandScroll from '@/components/BrandScroll/BrandScroll.vue'
|
|
import ScrollView from '@/base/ScrollView/ScrollView.vue'
|
|
import { useMediaQuery } from '@vueuse/core'
|
|
import MapControl from '@/components/MapControl/MapControl.vue'
|
|
import { RESET, DIRECTION } from '@/components/MapControl/list'
|
|
|
|
const isH = useMediaQuery('(min-aspect-ratio: 1/1)')
|
|
|
|
const shopList = ref([])
|
|
const showAll = ref(false)
|
|
const isRow = ref(false)
|
|
const store = useStore()
|
|
const formatMap = ref({})
|
|
const facMap = ref({})
|
|
const { currentBuildingFloorsList, currentFloor, config, currentFloorShopMap, shop, theme, facility } = storeToRefs(store)
|
|
|
|
try {
|
|
const facs = window.Map_QM.getAllIcon()
|
|
|
|
facMap.value = facs[0].map(list => Object.values(list.reduce((acc, nxt) => ({ ...acc, [nxt.type]: nxt }), {})))
|
|
} 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('/') }))
|
|
.reduce((acc, nxt) => ({ ...acc, [nxt.name]: nxt.format }), {})
|
|
})
|
|
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)
|
|
window.Map_QM.changeStateShopPro(false)
|
|
mapIdx.value = index
|
|
switch (item.name) {
|
|
case RESET:
|
|
onClickDeviceSite()
|
|
filterAboutCurrentInfo()
|
|
window.Map_QM.showFloor(currentFloor.value.floorOrder)
|
|
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)
|
|
}
|
|
watch(shop, nxt => {
|
|
if (!nxt) {
|
|
setShopInactive()
|
|
} else if (nxt && initiated.value) {
|
|
setShopActive(nxt)
|
|
const floor = currentBuildingFloorsList.value[floorIdx.value]
|
|
if (floor.floorOrder !== nxt.floorOrder) {
|
|
filterAboutCurrentInfo(false)
|
|
}
|
|
window.Map_QM.pathNode({ floor: nxt.floorOrder, node: nxt.yaxis })
|
|
}
|
|
})
|
|
|
|
const floorIdx = ref(-1)
|
|
function changeFloor(index) {
|
|
return new Promise(resolve => {
|
|
const floor = currentBuildingFloorsList.value[index]
|
|
showAll.value = false
|
|
hideMapDialog()
|
|
mapIdx.value = -1
|
|
floorIdx.value = index
|
|
selectedShopList.value = shopList.value.map(brand => ({
|
|
...brand,
|
|
shopList: brand.shopList
|
|
.filter(item => !!item.yaxis && item.floor === floor.floor)
|
|
.map(item => {
|
|
const meta = currentFloorShopMap.value[item.shopCode]
|
|
return { ...item, ...(meta ? meta : {}) }
|
|
})
|
|
}))
|
|
nextTick(() => {
|
|
window.Map_QM.showFloor(floor.floorOrder)
|
|
})
|
|
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
|
|
floorIdx.value = currentBuildingFloorsList.value.findIndex(item => item.floorCode === floorCode)
|
|
selectedShopList.value = shopList.value.map(brand => ({
|
|
...brand,
|
|
shopList: brand.shopList
|
|
.filter(item => !!item.yaxis && item.floor === floor)
|
|
.map(item => {
|
|
const meta = currentFloorShopMap.value[item.shopCode]
|
|
return { ...item, ...(meta ? meta : {}) }
|
|
})
|
|
}))
|
|
try {
|
|
needShowFloor &&
|
|
window.Map_QM.showFloor(floorOrder, () => {
|
|
if (shop.value) {
|
|
setShopActive(shop.value)
|
|
window.Map_QM.pathNode({ floor: shop.value.floorOrder, node: shop.value.yaxis })
|
|
} else if (facility.value) {
|
|
handleFacility(facility.value)
|
|
}
|
|
})
|
|
} catch (error) {
|
|
console.warn(error)
|
|
}
|
|
}
|
|
const initiated = computed(() => selectedShopList.value && selectedShopList.value.length)
|
|
onBeforeUnmount(() => {
|
|
clearTimeout(mapTimer.value)
|
|
clearTimeout(mapIconTimer.value)
|
|
hideMapDialog()
|
|
store.SET_SHOP(null)
|
|
setShopInactive()
|
|
store.SET_FACILITY(null)
|
|
})
|
|
|
|
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 = fac => {
|
|
window.Map_QM.pathNode(fac)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.allFloors {
|
|
position: absolute;
|
|
top: 408px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 642px;
|
|
background: var(--guide-allFloorBg);
|
|
z-index: 100;
|
|
overflow: hidden;
|
|
.row {
|
|
height: 89px;
|
|
display: flex;
|
|
&.current {
|
|
.left {
|
|
position: relative;
|
|
color: rgba(0, 0, 0, 0.8);
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #ffffff 100%);
|
|
&::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;
|
|
}
|
|
}
|
|
.right {
|
|
background: #fff;
|
|
}
|
|
}
|
|
.left {
|
|
flex: 0 0 150px;
|
|
font-family: 'Montserrat';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 28px;
|
|
line-height: 96%;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
justify-content: center;
|
|
|
|
/* W/100% */
|
|
|
|
color: #ffffff;
|
|
}
|
|
.right {
|
|
flex: 1;
|
|
display: flex;
|
|
padding: 0 60px 0 68px;
|
|
border-bottom: 1px solid #fff;
|
|
overflow: hidden;
|
|
.format {
|
|
flex: 1;
|
|
font-weight: 700;
|
|
font-size: 20px;
|
|
line-height: 23px;
|
|
display: flex;
|
|
align-items: center;
|
|
color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
.facs {
|
|
flex: 0;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-end;
|
|
padding-top: 9px;
|
|
.fac {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 52px;
|
|
img {
|
|
width: 36px;
|
|
height: 36px;
|
|
margin-bottom: 8px;
|
|
}
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
color: rgba(0, 0, 0, 0.6);
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.floors-list {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100vw;
|
|
top: 1050px;
|
|
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;
|
|
&.all {
|
|
width: 150px;
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
line-height: 96%;
|
|
vertical-align: bottom;
|
|
}
|
|
&.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);
|
|
}
|
|
}
|
|
}
|
|
.floors-list-h {
|
|
position: absolute;
|
|
right: 510px;
|
|
width: 100px;
|
|
top: 280px;
|
|
height: calc(100vh - 280px);
|
|
z-index: 60;
|
|
display: block;
|
|
overflow: hidden;
|
|
background: var(--guide-floorBg);
|
|
&.all {
|
|
width: calc(100vw - 510px);
|
|
background: var(--guide-allFloorBgH);
|
|
}
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.floor-wrapper {
|
|
width: 100%;
|
|
display: flex;
|
|
}
|
|
.all-item {
|
|
flex: 1;
|
|
display: flex;
|
|
padding: 0 68px 0 60px;
|
|
height: 94.44px;
|
|
overflow: hidden;
|
|
&.current {
|
|
background: #fff;
|
|
}
|
|
|
|
border-bottom: 1px solid #fff;
|
|
.format {
|
|
flex: 1;
|
|
font-weight: 700;
|
|
font-size: 20px;
|
|
line-height: 23px;
|
|
display: flex;
|
|
align-items: center;
|
|
color: rgba(0, 0, 0, 0.8);
|
|
justify-content: flex-end;
|
|
text-align: right;
|
|
}
|
|
.facs {
|
|
flex: 0;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-end;
|
|
padding-top: 16px;
|
|
.fac {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 52px;
|
|
img {
|
|
width: 36px;
|
|
height: 36px;
|
|
margin-bottom: 8px;
|
|
}
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
color: rgba(0, 0, 0, 0.6);
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
.floors-item {
|
|
flex: 0 0 100px;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
height: 94.44px;
|
|
font-family: 'Montserrat';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 28px;
|
|
line-height: 96%;
|
|
text-align: center;
|
|
color: var(--guide-floorColor);
|
|
transition: all 0.5s;
|
|
&.all {
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
line-height: 96%;
|
|
vertical-align: bottom;
|
|
}
|
|
&.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;
|
|
@media (min-aspect-ratio: 1/1) {
|
|
position: absolute;
|
|
left: auto;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 24px;
|
|
height: auto;
|
|
display: flex;
|
|
content: '您在本层';
|
|
background: var(--guide-currentBg);
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
color: var(--guide-currentColor);
|
|
align-items: center;
|
|
justify-content: center;
|
|
writing-mode: vertical-rl;
|
|
text-orientation: upright;
|
|
}
|
|
}
|
|
}
|
|
&.active {
|
|
background: var(--guide-floorActiveBg);
|
|
color: var(--guide-floorActiveColor);
|
|
}
|
|
}
|
|
}
|
|
.shop-list-wrapper {
|
|
position: absolute;
|
|
width: 1080px;
|
|
height: 914px;
|
|
left: 0px;
|
|
top: 1150px;
|
|
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;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|