feat: 导览品牌地图联动

public/static/qm/MainMap_QM.js

@@ -3541,6 +3541,18 @@ MainMap_QM.prototype = {
       }
     }
   },
+  setSelectShopMatByName: function (ipName) {
+    // #775544     #AD8164
+    for (let i = 0; i < Map_QM.mapArr[Config.selectBuild].length; i++) {
+      let shopArr = Map_QM.mapArr[Config.selectBuild][i].allObj.children
+      for (let k = 0; k < shopArr.length; k++) {
+        if (shopArr[k].name == ipName) {
+          Map_QM.setSelectShopMat(shopArr[k])
+          break
+        }
+      }
+    }
+  },
   /**
    * @api {方法} getMapIPData(ipName)  获取POI 基础数据
    * @apiGroup  地图交互

src/base/ShopItem/ShopItem.vue

@@ -1,17 +1,26 @@
 <template>
-  <div :class="{ 'group-item': true, isRow, isFood }" @click="handleShop">
-    <div :class="{ 'logo-wrapper': true, hasFood: isFood && shop.foodMaterialList.length }">
+  <div :id="shop.houseNumber" class="group-item" :class="{ isRow, isFood, isActive }" @click="handleShop">
+    <div class="logo-wrapper" :class="{ hasFood: isFood && shop.foodMaterialList.length }">
       <img loading="lazy" :src="config.sourceUrl + shop.logoUrl" alt="" class="shop-logo" />
     </div>
     <p class="name">
       <span class="shop-name">{{ switchLanguage(shop, 'shopName') }}</span>
-      <span class="name-right" v-if="$route.path === '/guide'"> {{ shop.distance ? shop.distance + '米' : '' }}<img v-if="shop.dir" :src="shop.dir" /> </span>
+      <span class="name-right" v-if="$route.path === '/guide'"> {{ shop.distance ? shop.distance + '米' : '' }}<img v-if="shop.dir" class="dir" :src="shop.dir" /> </span>
       <span class="name-right" v-else>{{ shop.floor }}</span>
     </p>
+    <Transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
+      <div v-if="isActive" class="qrcode-wrapper">
+        <div class="qrcode"></div>
+        扫码导航
+      </div>
+    </Transition>
   </div>
 </template>
 
 <script setup>
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useStore } from '@/store/root'
 const props = defineProps({
   shop: Object,
   config: Object,
@@ -19,6 +28,10 @@ const props = defineProps({
   isFood: Boolean
 })
 
+const store = useStore()
+const { shop: activeShop } = storeToRefs(store)
+const isActive = computed(() => activeShop.value && activeShop.value.shopId === props.shop.shopId)
+
 const emits = defineEmits(['click'])
 function handleShop() {
   emits('click', props.shop)
@@ -32,26 +45,25 @@ function handleShop() {
   background: rgba(255, 255, 255, 0.6);
   border-radius: 8px;
   overflow: hidden;
-}
-.logo-wrapper {
+  .logo-wrapper {
     width: 230px;
     height: 160px;
     padding: 20px 55px;
     background-color: #fff;
-}
-.shop-logo {
+  }
+  .shop-logo {
     width: 100%;
     height: 100%;
     object-fit: contain;
-}
-.name {
+  }
+  .name {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 40px;
     padding: 0 12px;
-}
-.shop-name {
+  }
+  .shop-name {
     font-weight: 700;
     font-size: 14px;
     line-height: 16px;
@@ -60,8 +72,8 @@ function handleShop() {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-}
-.name-right {
+  }
+  .name-right {
     display: flex;
     align-items: center;
     font-weight: 700;
@@ -69,18 +81,12 @@ function handleShop() {
     line-height: 14px;
     font-family: 'font_bold';
     color: rgba(0, 0, 0, 0.4);
-  img {
+  }
+  .dir {
     width: 20px;
     height: 20px;
     margin-left: 7px;
   }
-}
-.format-icon {
-  width: 14px;
-  margin-right: 8px;
-  height: 14px;
-}
-.group-item {
   &.isRow {
     display: flex;
     width: 460px;
@@ -96,6 +102,7 @@ function handleShop() {
     .name {
       flex: 1;
       padding: 0 24px;
+    }
     .shop-name {
       font-weight: 700;
       font-size: 18px;
@@ -106,13 +113,12 @@ function handleShop() {
       font-weight: 500;
       font-size: 18px;
       line-height: 21px;
-        img {
+    }
+    .dir {
       width: 32px;
       height: 32px;
     }
   }
-    }
-  }
   &.isFood {
     display: flex;
     flex-direction: column;
@@ -137,6 +143,7 @@ function handleShop() {
     .name {
       display: block;
       width: 100%;
+    }
     .shop-name {
       display: block;
       margin-top: 12px;
@@ -154,6 +161,27 @@ function handleShop() {
       margin-top: 6px;
     }
   }
+  &.isActive {
+    position: relative;
+
+    .qrcode-wrapper {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%);
+      font-weight: 700;
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.8);
+      text-align: center;
+      line-height: 40px;
+    }
+    .qrcode {
+      height: 160px;
+      background: #ffffff;
+      border-radius: 8px;
+    }
   }
 }
 </style>

src/components/BrandScroll/BrandScroll.vue

@@ -6,7 +6,7 @@
           {{ item.name }}<span class="meta">/ {{ item.shopList.length }}个</span> <span v-if="item.name === currentFloor.floor" class="current">您在本层</span>
         </h1>
         <TransitionGroup name="zoom" mode="out-in" tag="div" :class="{ group: true, isRow }">
-          <ShopItem :config="config" :isRow="isRow" :isFood="isFood" :shop="shop" @click="handleShop(shop)" v-for="shop of item.shopList" :key="shop.shopId" />
+          <ShopItem :config="config" :isRow="isRow" :isFood="isFood" :shop="el" @click="handleShop(el)" v-for="el of item.shopList" :key="el.shopId" />
         </TransitionGroup>
       </div>
     </div>
@@ -21,7 +21,7 @@ import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/root'
 
 const store = useStore()
-const { currentFloor } = storeToRefs(store)
+const { currentFloor, shop } = storeToRefs(store)
 
 const scroll = ref(null)
 const props = defineProps({
@@ -42,6 +42,14 @@ watch(
       scroll.value.refresh()
     })
 )
+watch(shop, nxt => {
+  if (!nxt) return
+  const el = document.getElementById(nxt.houseNumber)
+  if (!el) return
+  nextTick(() => {
+    scroll.value.scrollToElement(el, 500, 0, -100)
+  })
+})
 </script>
 
 <style lang="scss" scoped>

src/components/Map/Map.vue

@@ -5,7 +5,7 @@
 
     <!-- 地图弹框 -->
     <div id="shopInfo" class="boxShop">
-      <div>{{ switchLanguage(shop, 'shopName') }}</div>
+      <div>{{ shop ? switchLanguage(shop, 'shopName') : '' }}</div>
     </div>
     <div id="moveFloorBG">
       <span id="moveFloor"></span>

src/composables/useInitMap.js

@@ -28,18 +28,32 @@ export const useInitMap = function () {
     })
 }
 let lastShop
+const bounceShopAndChangeColor = data => {
+  if (lastShop) window.Map_QM.changeMapIPState(lastShop.houseNumber, lastShop.formatColor)
+  lastShop = data
+  if (!data) return
+  const xaxis = JSON.parse(data.xaxis).map(Number)
+  showMapDialog()
+  window.Map_QM.addElementLabel(document.getElementById('shopInfo'), xaxis[0], xaxis[2])
+  window.Map_QM.changeMapIPState(data.houseNumber, '#516DD8')
+}
+
+export const setShopActive = shop => {
+  bounceShopAndChangeColor(shop)
+  window.Map_QM.setSelectShopMatByName(shop.houseNumber)
+}
+
 //点击地图店铺box
 function onClickShop(event) {
+  console.log(event)
   const store = useStore()
-  if (lastShop) window.Map_QM.changeMapIPState(lastShop.shopNum, lastShop.entColor)
-  lastShop = event.data
-  if (event.data) {
-    showMapDialog()
-    window.Map_QM.addElementLabel(document.getElementById('shopInfo'), event.data.xaxis, event.data.yaxis)
-    store.SET_SHOP(event.data.shopData)
-    window.Map_QM.changeMapIPState(event.data.shopNum, '#516DD8')
-  } else {
+  if (!event.data) {
+    store.SET_SHOP(null)
+    bounceShopAndChangeColor(null)
     hideMapDialog()
+  } else {
+    store.SET_SHOP(event.data.shopData)
+    bounceShopAndChangeColor(event.data.shopData)
   }
 }
 

src/views/Guide/Guide.vue

@@ -69,7 +69,7 @@ import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/root'
 import { RESET, DIRECTION, ACTIVITY_BRAND, list as buttonList } from './list'
 import View from '@/layouts/View.vue'
-import { hideMapDialog } from '@/composables/useInitMap'
+import { hideMapDialog, setShopActive } from '@/composables/useInitMap'
 import { getBrandListByFormat, getBrandListByFloor } from '@/http/brand/api'
 import BrandScroll from '@/components/BrandScroll/BrandScroll.vue'
 import ScrollView from '@/base/ScrollView/ScrollView.vue'
@@ -158,7 +158,7 @@ function handleMapIcon(item, index) {
 function handleShop(item) {
   mapIdx.value = -1
   store.SET_SHOP(item)
-  store.SET_SHOW_DETAIL(true)
+  setShopActive(item)
 }
 
 const floorIdx = ref(-1)
@@ -189,7 +189,12 @@ function filterAboutCurrentInfo() {
     floorIdx.value = currentBuildingFloorsList.value.findIndex(item => item.floorCode === currentFloor.value.floorCode)
     selectedShopList.value = shopList.value.map(brand => ({
       ...brand,
-      shopList: brand.shopList.filter(shop => shop.floor === currentFloor.value.floor)
+      shopList: brand.shopList
+        .filter(shop => shop.floor === currentFloor.value.floor)
+        .map(shop => {
+          const meta = currentFloorShopMap.value[shop.shopId]
+          return { ...shop, ...(meta ? meta : {}) }
+        })
     }))
   })
 }
@@ -198,6 +203,7 @@ onBeforeUnmount(() => {
   cancelIdleCallback(idle.value)
   clearTimeout(mapTimer.value)
   clearTimeout(mapIconTimer.value)
+  hideMapDialog()
 })
 
 watch(