|
|
|
@ -1,15 +1,14 @@ |
|
|
|
<template> |
|
|
|
<View title="地图导览" sub-title="map guide" :show-input="false"> |
|
|
|
<View> |
|
|
|
<Teleport to="body"> |
|
|
|
<div class="floors-list animate__fast animate__animated animate__fadeInRight"> |
|
|
|
<div class="floors-list animate__fast animate__animated animate__fadeIn"> |
|
|
|
<div |
|
|
|
@click="handleFloor(item, index)" |
|
|
|
:class="{ active: floorIdx === index }" |
|
|
|
:class="{ active: floorIdx === index, current: currentFloor.floorCode === item.floorCode }" |
|
|
|
class="floors-item" |
|
|
|
v-for="(item, index) of currentBuildingFloorsList" |
|
|
|
:key="item.floorCode" |
|
|
|
> |
|
|
|
<img src="../../assets/images/guide/guide_zhong.png" v-if="currentFloor.floorCode === item.floorCode" class="current" alt="" /> |
|
|
|
{{ item.floor }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -23,22 +22,24 @@ |
|
|
|
<span class="map-name">{{ switchLanguage(item, 'name') }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="facility-list"> |
|
|
|
<FacilityItem class="margin" @click="_handleFacility(item)" :facility="item" v-for="item of facilityList" :key="item.title" /> |
|
|
|
</div> |
|
|
|
<img src="../../assets/images/map/hands.svg" alt="" class="hands" /> |
|
|
|
</div> |
|
|
|
</Teleport> |
|
|
|
|
|
|
|
<div class="shop-list-wrapper"> |
|
|
|
<ScrollView class="shop-scroll" :list="selectedShopList"> |
|
|
|
<TransitionGroup name="zoom" tag="div" class="shop-content"> |
|
|
|
<ShopItem @click="handleShop(item)" :shop="item" :config="config" v-for="item of selectedShopList" :key="item.shopId" /> |
|
|
|
</TransitionGroup> |
|
|
|
</ScrollView> |
|
|
|
<BrandScroll @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" /> |
|
|
|
<img v-else src="./gridActive.svg" /> |
|
|
|
</div> |
|
|
|
<div :class="{ btn: true, active: isRow }" @click="isRow = true"> |
|
|
|
<img v-if="!isRow" src="./row.svg" /> |
|
|
|
<img v-else src="./rowActive.svg" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</View> |
|
|
|
<MockInput class="position" /> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
@ -46,25 +47,24 @@ import { ref, watch, onBeforeUnmount } from 'vue' |
|
|
|
import { storeToRefs } from 'pinia' |
|
|
|
import { useStore } from '@/store/root' |
|
|
|
import { list, RESET, DIRECTION, ACTIVITY_BRAND } from './list' |
|
|
|
import { useFacilityNav } from '@/composables/useFacilityNav' |
|
|
|
import View from '@/layouts/View.vue' |
|
|
|
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
|
|
import FacilityItem from '@/base/FacilityItem/FacilityItem.vue' |
|
|
|
import { hideMapDialog } from '@/composables/useInitMap' |
|
|
|
import MockInput from '@/components/MockInput/MockInput.vue' |
|
|
|
import ShopItem from '@/base/ShopItem/ShopItem.vue' |
|
|
|
import { getBrandListByFormat } from '@/http/brand/api' |
|
|
|
import BrandScroll from '@/components/BrandScroll/BrandScroll.vue' |
|
|
|
|
|
|
|
const shopList = ref([]) |
|
|
|
const isRow = ref(false) |
|
|
|
const store = useStore() |
|
|
|
const { currentBuildingFloorsList, currentFloor, shopList, config, facilityList } = storeToRefs(store) |
|
|
|
|
|
|
|
const { _handleFacility } = useFacilityNav() |
|
|
|
const { currentBuildingFloorsList, currentFloor, config } = storeToRefs(store) |
|
|
|
|
|
|
|
try { |
|
|
|
window.Map_QM?.showFloor?.(currentFloor.value.floorOrder) |
|
|
|
} catch (error) { |
|
|
|
console.log('error: ', error) |
|
|
|
} |
|
|
|
|
|
|
|
getBrandListByFormat().then(({ data }) => { |
|
|
|
shopList.value = data.list |
|
|
|
}) |
|
|
|
const selectedShopList = ref([]) |
|
|
|
const idle = ref(null) |
|
|
|
|
|
|
|
@ -131,7 +131,10 @@ function handleFloor(item, index) { |
|
|
|
window.Map_QM.showFloor(item.floorOrder) |
|
|
|
idle.value = requestIdleCallback(() => { |
|
|
|
floorIdx.value = index |
|
|
|
selectedShopList.value = shopList.value.filter(shop => shop.floor === item.floor) |
|
|
|
selectedShopList.value = shopList.value.map(brand => ({ |
|
|
|
...brand, |
|
|
|
shopList: brand.shopList.filter(shop => shop.floor === item.floor) |
|
|
|
})) |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
@ -140,7 +143,10 @@ function filterAboutCurrentInfo() { |
|
|
|
cancelIdleCallback(idle.value) |
|
|
|
idle.value = requestIdleCallback(() => { |
|
|
|
floorIdx.value = currentBuildingFloorsList.value.findIndex(item => item.floorCode === currentFloor.value.floorCode) |
|
|
|
selectedShopList.value = shopList.value.filter(item => item.floor === currentFloor.value.floor) |
|
|
|
selectedShopList.value = shopList.value.map(brand => ({ |
|
|
|
...brand, |
|
|
|
shopList: brand.shopList.filter(shop => shop.floor === currentFloor.value.floor) |
|
|
|
})) |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
@ -166,38 +172,54 @@ watch( |
|
|
|
<style lang="scss" scoped> |
|
|
|
.floors-list { |
|
|
|
position: absolute; |
|
|
|
right: 4px; |
|
|
|
top: 320px; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
top: 1050px; |
|
|
|
height: 100px; |
|
|
|
z-index: 60; |
|
|
|
display: flex; |
|
|
|
background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%); |
|
|
|
.floors-item { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: flex-end; |
|
|
|
justify-content: center; |
|
|
|
position: relative; |
|
|
|
margin-bottom: 12px; |
|
|
|
min-width: 98px; |
|
|
|
height: 48px; |
|
|
|
border-radius: 8px; |
|
|
|
height: 100px; |
|
|
|
font-family: 'Montserrat'; |
|
|
|
font-style: normal; |
|
|
|
font-weight: 700; |
|
|
|
font-family: 'font_bold'; |
|
|
|
padding-left: 56px; |
|
|
|
padding-right: 21px; |
|
|
|
font-size: 18px; |
|
|
|
line-height: 21px; |
|
|
|
color: var(--color-black-opacity-6); |
|
|
|
font-size: 28px; |
|
|
|
line-height: 96%; |
|
|
|
/* identical to box height, or 27px */ |
|
|
|
|
|
|
|
text-align: center; |
|
|
|
|
|
|
|
/* W/100% */ |
|
|
|
|
|
|
|
color: #ffffff; |
|
|
|
transition: all 0.5s; |
|
|
|
.current { |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
left: 24px; |
|
|
|
transform: translateY(-50%); |
|
|
|
width: 16px; |
|
|
|
&.current { |
|
|
|
background: rgba(0, 0, 0, 0.1); |
|
|
|
&::after { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
height: 20px; |
|
|
|
display: flex; |
|
|
|
content: '您在本层'; |
|
|
|
background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%); |
|
|
|
font-weight: 700; |
|
|
|
font-size: 12px; |
|
|
|
color: rgba(0, 0, 0, 0.8); |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
} |
|
|
|
&.active { |
|
|
|
background: var(--color-linear-lightgoldenyellow); |
|
|
|
color: var(--color-black-opacity-8); |
|
|
|
font-size: 24px; |
|
|
|
font-family: 'font_bold'; |
|
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #ffffff 100%); |
|
|
|
color: rgba(0, 0, 0, 0.8); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -206,81 +228,40 @@ watch( |
|
|
|
width: 1080px; |
|
|
|
height: 914px; |
|
|
|
left: 0px; |
|
|
|
top: 1006px; |
|
|
|
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; |
|
|
|
background: rgba(255, 255, 255, 0.4); |
|
|
|
border-radius: 8px; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
img { |
|
|
|
width: 24px; |
|
|
|
height: 24px; |
|
|
|
} |
|
|
|
&.active { |
|
|
|
background: #ffffff; |
|
|
|
} |
|
|
|
} |
|
|
|
.btn + .btn { |
|
|
|
margin-left: 8px; |
|
|
|
} |
|
|
|
} |
|
|
|
.shop-scroll { |
|
|
|
height: 914px; |
|
|
|
overflow: hidden; |
|
|
|
margin-left: 170px; |
|
|
|
} |
|
|
|
} |
|
|
|
.position { |
|
|
|
position: absolute; |
|
|
|
left: 170px; |
|
|
|
top: 968px; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-content { |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(4, 212px); |
|
|
|
gap: 24px 8px; |
|
|
|
padding-top: 134px; |
|
|
|
padding-bottom: 24px; |
|
|
|
padding-right: 40px; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 6px; |
|
|
|
padding: 12px 0; |
|
|
|
} |
|
|
|
.logo-wrapper { |
|
|
|
flex-shrink: 0; |
|
|
|
width: 48px; |
|
|
|
height: 48px; |
|
|
|
background-color: var(--color-white-opacity); |
|
|
|
border-radius: 8px; |
|
|
|
padding: 4px; |
|
|
|
margin-right: 24px; |
|
|
|
.logo { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
object-fit: contain; |
|
|
|
} |
|
|
|
} |
|
|
|
.shop-right { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
.name-info { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
.name { |
|
|
|
font-weight: 700; |
|
|
|
font-size: 14px; |
|
|
|
color: var(--color-black-opacity-6); |
|
|
|
font-family: 'font_bold'; |
|
|
|
padding-bottom: 6px; |
|
|
|
} |
|
|
|
.house-num { |
|
|
|
font-weight: 700; |
|
|
|
font-family: 'font_bold'; |
|
|
|
font-size: 14px; |
|
|
|
line-height: 200%; |
|
|
|
color: var(--color-black-opacity-4); |
|
|
|
} |
|
|
|
.industry { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
font-size: 12px; |
|
|
|
color: var(--color-black-opacity-4); |
|
|
|
} |
|
|
|
.industru-icon { |
|
|
|
margin-left: 8px; |
|
|
|
width: 14px; |
|
|
|
} |
|
|
|
|
|
|
|
.control-area { |
|
|
|
position: absolute; |
|
|
|
@ -288,45 +269,39 @@ watch( |
|
|
|
align-items: flex-start; |
|
|
|
justify-content: space-between; |
|
|
|
height: 104px; |
|
|
|
left: 170px; |
|
|
|
right: 24px; |
|
|
|
top: 854px; |
|
|
|
top: 952px; |
|
|
|
z-index: 51; |
|
|
|
|
|
|
|
.hands { |
|
|
|
position: fixed; |
|
|
|
top: 37px; |
|
|
|
right: 170px; |
|
|
|
top: 408px; |
|
|
|
right: 68px; |
|
|
|
width: 246px; |
|
|
|
height: 80px; |
|
|
|
z-index: 51; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.map-control-wrapper { |
|
|
|
display: flex; |
|
|
|
margin-right: 35px; |
|
|
|
} |
|
|
|
.map-item { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
margin-right: 16px; |
|
|
|
margin-left: 12px; |
|
|
|
} |
|
|
|
.map-icon { |
|
|
|
margin-bottom: 6px; |
|
|
|
width: 44px; |
|
|
|
margin-bottom: 8px; |
|
|
|
width: 52px; |
|
|
|
} |
|
|
|
.map-name { |
|
|
|
font-weight: 700; |
|
|
|
font-size: 12px; |
|
|
|
color: var(--color-black-opacity-4); |
|
|
|
transform: scale(0.83); |
|
|
|
} |
|
|
|
.facility-list { |
|
|
|
display: flex; |
|
|
|
align-items: flex-start; |
|
|
|
} |
|
|
|
.margin { |
|
|
|
margin-right: 16px; |
|
|
|
line-height: 14px; |
|
|
|
text-align: center; |
|
|
|
color: rgba(0, 0, 0, 0.6); |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
