From c2673fea9bcb7ab919daa50b099fc4d4fee1a5f4 Mon Sep 17 00:00:00 2001
From: jiannibang <jiannibang@gmail.com>
Date: Wed, 21 Dec 2022 14:05:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=BC=E8=A7=88=E5=93=81=E7=89=8C?=
 =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E8=81=94=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/static/qm/MainMap_QM.js             |  12 ++
 src/base/ShopItem/ShopItem.vue             | 186 ++++++++++++---------
 src/components/BrandScroll/BrandScroll.vue |  12 +-
 src/components/Map/Map.vue                 |   2 +-
 src/composables/useInitMap.js              |  30 +++-
 src/views/Guide/Guide.vue                  |  12 +-
 6 files changed, 161 insertions(+), 93 deletions(-)

diff --git a/public/static/qm/MainMap_QM.js b/public/static/qm/MainMap_QM.js
index 32f7813..60765b0 100644
--- a/public/static/qm/MainMap_QM.js
+++ b/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  地图交互
diff --git a/src/base/ShopItem/ShopItem.vue b/src/base/ShopItem/ShopItem.vue
index f1e49d7..1ef424c 100644
--- a/src/base/ShopItem/ShopItem.vue
+++ b/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,55 +45,48 @@ function handleShop() {
   background: rgba(255, 255, 255, 0.6);
   border-radius: 8px;
   overflow: hidden;
-}
-.logo-wrapper {
-  width: 230px;
-  height: 160px;
-  padding: 20px 55px;
-  background-color: #fff;
-}
-.shop-logo {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-.name {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 40px;
-  padding: 0 12px;
-}
-.shop-name {
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 16px;
-  color: rgba(0, 0, 0, 0.8);
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.name-right {
-  display: flex;
-  align-items: center;
-  font-weight: 700;
-  font-size: 12px;
-  line-height: 14px;
-  font-family: 'font_bold';
-  color: rgba(0, 0, 0, 0.4);
-  img {
+  .logo-wrapper {
+    width: 230px;
+    height: 160px;
+    padding: 20px 55px;
+    background-color: #fff;
+  }
+  .shop-logo {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+  .name {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 40px;
+    padding: 0 12px;
+  }
+  .shop-name {
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 16px;
+    color: rgba(0, 0, 0, 0.8);
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .name-right {
+    display: flex;
+    align-items: center;
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 14px;
+    font-family: 'font_bold';
+    color: rgba(0, 0, 0, 0.4);
+  }
+  .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,21 +102,21 @@ function handleShop() {
     .name {
       flex: 1;
       padding: 0 24px;
-      .shop-name {
-        font-weight: 700;
-        font-size: 18px;
-        line-height: 21px;
-        color: rgba(0, 0, 0, 0.8);
-      }
-      .name-right {
-        font-weight: 500;
-        font-size: 18px;
-        line-height: 21px;
-        img {
-          width: 32px;
-          height: 32px;
-        }
-      }
+    }
+    .shop-name {
+      font-weight: 700;
+      font-size: 18px;
+      line-height: 21px;
+      color: rgba(0, 0, 0, 0.8);
+    }
+    .name-right {
+      font-weight: 500;
+      font-size: 18px;
+      line-height: 21px;
+    }
+    .dir {
+      width: 32px;
+      height: 32px;
     }
   }
   &.isFood {
@@ -137,22 +143,44 @@ function handleShop() {
     .name {
       display: block;
       width: 100%;
-      .shop-name {
-        display: block;
-        margin-top: 12px;
-        text-align: center;
-      }
-      .name-right {
-        display: block;
-        text-align: center;
-        font-family: 'Montserrat';
-        font-style: normal;
-        font-weight: 700;
-        font-size: 14px;
-        line-height: 17px;
-        color: rgba(0, 0, 0, 0.6);
-        margin-top: 6px;
-      }
+    }
+    .shop-name {
+      display: block;
+      margin-top: 12px;
+      text-align: center;
+    }
+    .name-right {
+      display: block;
+      text-align: center;
+      font-family: 'Montserrat';
+      font-style: normal;
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 17px;
+      color: rgba(0, 0, 0, 0.6);
+      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;
     }
   }
 }
diff --git a/src/components/BrandScroll/BrandScroll.vue b/src/components/BrandScroll/BrandScroll.vue
index 00393c7..ff3ff32 100644
--- a/src/components/BrandScroll/BrandScroll.vue
+++ b/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>
diff --git a/src/components/Map/Map.vue b/src/components/Map/Map.vue
index bb7df79..a03a7f7 100644
--- a/src/components/Map/Map.vue
+++ b/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>
diff --git a/src/composables/useInitMap.js b/src/composables/useInitMap.js
index 6762636..f1d0275 100644
--- a/src/composables/useInitMap.js
+++ b/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)
   }
 }
 
diff --git a/src/views/Guide/Guide.vue b/src/views/Guide/Guide.vue
index 5bfde8a..e17757a 100644
--- a/src/views/Guide/Guide.vue
+++ b/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(