feat: 店铺弹窗

src/components/Map/Map.vue

@@ -4,12 +4,8 @@
     <div id="mapContainer" :class="$route.path === '/billboard' ? 'billboard' : $route.path === '/guide' ? 'guide' : ''" />
 
     <!-- 地图弹框 -->
-    <div id="shopInfo" class="boxShop boxShop2" :style="{ backgroundImage: `url(${require('@/assets/images/map/map-dialog.png')})` }">
-      <div id="shopNum">{{ switchLanguage(shop, 'shopName') }}</div>
-      <div style="display: flex; align-items: center">
-        <div class="pop-bottom" @click="handleDetail">{{ $t('detail') }}</div>
-        <div class="go-button" @click="handleGO">{{ $t('nav') }}</div>
-      </div>
+    <div id="shopInfo" class="boxShop">
+      <div>{{ switchLanguage(shop, 'shopName') }}</div>
     </div>
     <div id="moveFloorBG">
       <span id="moveFloor"></span>
@@ -24,17 +20,6 @@ import { useStore } from '@/store/root'
 
 const store = useStore()
 const { shop } = storeToRefs(store)
-
-const emits = defineEmits(['handle-GO', 'handle-Detail'])
-
-function handleGO() {
-  emits('handle-GO')
-}
-
-// 点击地图弹框详情
-function handleDetail() {
-  emits('handle-Detail')
-}
 </script>
 
 <style lang="scss" scoped>
@@ -60,42 +45,18 @@ function handleDetail() {
   position: absolute;
   z-index: 9000 !important;
   visibility: hidden;
-  width: 235px;
-  height: 158px;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center center;
-  #shopNum {
-    height: 75px;
-    line-height: 80px;
-    padding: 10px 36px 0 36px;
+  height: 36px;
+  background: center / 100% 100% no-repeat url(./bg.png);
+  div {
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 30px;
+    text-align: center;
+    border-radius: 100px;
     color: #ffffff;
-    font-family: 'font_medium';
-    font-size: 20px;
+    padding: 0 12px;
     @include no-wrap;
-  }
-  .go-button {
-    width: 50%;
-    text-align: center;
-    line-height: 50px;
-    font-weight: bold;
-    font-size: 18px;
-    color: #6a5e59;
-    height: 50px;
-    font-family: 'font_medium';
-    text-align: center;
-  }
-
-  .pop-bottom {
-    font-weight: bold;
-    font-size: 17px;
-    width: 50%;
-    height: 50px;
-    line-height: 50px;
-    color: #6a5e59;
-    overflow: hidden;
-    font-family: 'font_medium';
-    text-align: center;
+    z-index: 1;
   }
 }
 #moveFloorBG {

src/composables/useFacilityNav.js

@@ -16,11 +16,9 @@ export const useFacilityNav = () => {
     store.showVoice && store.SET_SHOW_VOICE(false)
     store.showDetail && store.SET_SHOW_DETAIL(false)
 
-    const facility = window.Map_QM.pathIcon({ type: item.type })
-    const floorName = store.currentBuildingFloorsList.find(floor => floor.floorOrder === facility.floor)?.floor
+    window.Map_QM.bounceIcon({ type: item.type })
 
-    handleFacility(item.title, facility.floor, floorName, item.imgUrl, facility.node, true)
-    router.push('/nav')
+    router.push('/guide')
   }
 
   return { _handleFacility }

src/composables/useInitMap.js

@@ -26,17 +26,17 @@ export const useInitMap = function () {
       Message({ text: '地图数据获取失败', type: 'success' })
     })
 }
-
+let lastShop
 //点击地图店铺box
 function onClickShop(event) {
   const store = useStore()
-  // store.shop.houseNum && store.shop.formatColor && window.Map_QM.changeMapIPState(store.shop.houseNum, store.shop.formatColor)
-
+  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, '#AD8164')
+    window.Map_QM.changeMapIPState(event.data.shopNum, '#516DD8')
   } else {
     hideMapDialog()
   }