feat: 导览行显示时的二维码

src/base/ShopItem/ShopItem.vue

@@ -9,15 +9,30 @@
       <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 v-if="isActive && !isRow" class="qrcode-wrapper">
         <QRCodeFromText
           class="qrcode"
           :size="120"
           :text="`${config.mobileNav}?s=${currentFloor.floorOrder}_${currentFloor.location}_屏幕的位置&e=${shop.houseNumber}`"
         ></QRCodeFromText>
-        扫码导航
+        <div class="qrcode-meta">扫码导航</div>
       </div>
     </Transition>
+    <Teleport to="body">
+      <Transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
+        <div v-if="isActive && isRow" class="qrcode-modal" @click="deactivate">
+          <div class="content" @click.stop="void 0">
+            <div class="close" @click="deactivate"></div>
+            <QRCodeFromText
+              class="qrcode"
+              :size="135"
+              :text="`${config.mobileNav}?s=${currentFloor.floorOrder}_${currentFloor.location}_屏幕的位置&e=${shop.houseNumber}`"
+            ></QRCodeFromText>
+            <div class="qrcode-meta">扫码导航</div>
+          </div>
+        </div>
+      </Transition></Teleport
+    >
   </div>
 </template>
 
@@ -41,6 +56,7 @@ const emits = defineEmits(['click'])
 function handleShop() {
   emits('click', props.shop)
 }
+const deactivate = () => store.SET_SHOP(null)
 </script>
 
 <style lang="scss" scoped>
@@ -176,19 +192,89 @@ function handleShop() {
       right: 0;
       bottom: 0;
       background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%);
+    }
+    .qrcode {
+      height: 160px;
+      background: #ffffff;
+      border-radius: 8px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .qrcode-meta {
       font-weight: 700;
       font-size: 14px;
       color: rgba(0, 0, 0, 0.8);
       text-align: center;
       line-height: 40px;
     }
-    .qrcode {
-      height: 160px;
+    &.isFood {
+      .qrcode-wrapper {
         background: #ffffff;
-      border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .qrcode {
+        height: 180px;
+      }
+      .qrcode-meta {
+        width: 194px;
+        height: 45px;
+        background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%);
+        border-radius: 100px;
+        line-height: 45px;
+        margin-top: 9px;
+      }
+    }
+    &.isRow {
+      background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%);
+    }
+  }
+}
+.qrcode-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  .content {
+    position: absolute;
+    width: 300px;
+    height: 300px;
+    left: 391px;
+    bottom: 427px;
+    background: rgba(255, 255, 255, 0.8);
+    box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(7px);
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .close {
+      position: absolute;
+      width: 56px;
+      height: 56px;
+      right: 8px;
+      top: 8px;
+      background: center / cover no-repeat url(./close.png);
+    }
+    .qrcode {
+      width: 150px;
+      height: 150px;
       display: flex;
       justify-content: center;
       align-items: center;
+      margin-top: 60px;
+    }
+    .qrcode-meta {
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 23px;
+      text-align: center;
+      margin-top: 27px;
+      color: rgba(0, 0, 0, 0.8);
     }
   }
 }

src/composables/useInitMap.js

@@ -43,9 +43,13 @@ export const setShopActive = shop => {
   window.Map_QM.setSelectShopMatByName(shop.houseNumber)
 }
 
+export const setShopInactive = () => {
+  hideMapDialog()
+  bounceShopAndChangeColor(null)
+}
+
 //点击地图店铺box
 function onClickShop(event) {
-  console.log(event)
   const store = useStore()
   if (!event.data) {
     store.SET_SHOP(null)

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, setShopActive } from '@/composables/useInitMap'
+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'
@@ -155,7 +155,9 @@ function handleShop(item) {
   store.SET_SHOP(item)
 }
 watch(shop, async nxt => {
-  if (nxt && initiated.value) {
+  if (!nxt) {
+    setShopInactive()
+  } else if (nxt && initiated.value) {
     if (currentBuildingFloorsList.value[floorIdx.value].floorOrder !== nxt.floorOrder) {
       const index = currentBuildingFloorsList.value.findIndex(item => item.floorOrder === nxt.floorOrder)
       await changeFloor(index)