From dc9277605c4b834a13e79f2293422b6700698440 Mon Sep 17 00:00:00 2001
From: jiannibang <jiannibang@gmail.com>
Date: Thu, 22 Dec 2022 13:05:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=BC=E8=A7=88=E8=A1=8C=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E6=97=B6=E7=9A=84=E4=BA=8C=E7=BB=B4=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/base/ShopItem/ShopItem.vue |  96 +++++++++++++++++++++++++++++++--
 src/base/ShopItem/close.png    | Bin 0 -> 2393 bytes
 src/composables/useInitMap.js  |   6 ++-
 src/views/Guide/Guide.vue      |   6 ++-
 4 files changed, 100 insertions(+), 8 deletions(-)
 create mode 100644 src/base/ShopItem/close.png

diff --git a/src/base/ShopItem/ShopItem.vue b/src/base/ShopItem/ShopItem.vue
index afe0ad2..374e80f 100644
--- a/src/base/ShopItem/ShopItem.vue
+++ b/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;
     }
+    &.isFood {
+      .qrcode-wrapper {
+        background: #ffffff;
+        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 {
-      height: 160px;
-      background: #ffffff;
-      border-radius: 8px;
+      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);
     }
   }
 }
diff --git a/src/base/ShopItem/close.png b/src/base/ShopItem/close.png
new file mode 100644
index 0000000000000000000000000000000000000000..a1706416ed3c3dc24ec2b5892626f4f3235f62b6
GIT binary patch
literal 2393
zcmb7G`#Tc~7#_LHWixbKrq-q<_vGYmtl8$0EjsR%h{*lcNXJH(xsTDZliVpq(h1Aa
z)X0=rr&75s_s(oIBIa_OKjA#j`+o29zCV4>^ZxLC6i*KqB?T=7005wb#h?hg8v7sR
zWOipSZ^d<2<YO_u2>^fw{69)y39zNzP$Gfg;sj`VtMhHwNQEKYkpMtTf#T*lX#hY@
zh(#g2E=vgR_+FxUgEIzo{g;s6hHgKtqG;Uu)g3dWspm!nrkjR)jY^LmGb1a=5&Uu+
zZn~cE#0K1NR}1CR8_aUK^zh)|s%BgqlBx1^W53aq)!ew)#Mxglv7_EfZ(Y1|XMN{w
zNLP8<qSe}V4-4;UQ1VY)8=y^Qbe30|#E4%2$3-UiOSA>{(w}mJE};`Z*^#V3HJ`Zt
zpQl(4)lYP7|9&VR;o0ME9o0UdeHeQ5r5#CBIvK6f(8;NRwEZ<-MQm5Qp6l3Ip`McC
zC{NMIWrxnFKn|$R{K*sAdpc!p^uRf?1os9-?-EVpoWNlX;E4)X;3^p^q4fzozyB9f
znj_Vz*x@W`UwTe={$=nl7VTh@Y)9R={><v3@QFiZso5;)3d~GA=o28@OAB+>4neqG
zEg4!|i*%C*w}dzX^Ay1O{}UcVk||d{$_oN_UW9PHbutE@^KTT&pXM=aR9GKVwzEpK
zua<);utiSP*wXl1`Xh0py<EwD>FAL-z*9lQt7_1b6g~0{%WX;BF||X~>8Q)qicA&d
zNgG7Buvtu0r1GSSI@>%UV`~?3yOlg4xGNEhS(x1Ett5I(*VJ0Zjy;;BCyg*ekZkM)
zA*72waMyqzi6iZ}Cn9Srk=w=$2X<w1U}C9fZO0KK1z&p6;T?+`u&|$<NXrLoyfqGl
zQyTC7qPM#sWf(htPF!WYv5?lXc;L4r$v0ME)>$Y|Nxtasvs3q5EAwHZ`dNFH+oq)r
zQ<nENY^~)@3lv^J8MfAbWWM}a;WF>b?LtPJWELtmeLwa}{ETmB7(xM8>xD{Q*~=;`
zZK3vw{P00>L+EGx<tsa`B812%$lFJBbH7U^EaqkQ(SwxUV;7t3LakF(kW+PM@Utzh
zFk->;k0f#T$^;*im_eki@{&Fv`wx-__F%`=UO!|P9bS*7w7inBHUkYuZwTnH<W*~;
ztnA+dNh?|ilN?c#%5M;0BD~J{jC_HEsrEndV9ND0{bDmNPqN+0PAc;5&K<@FZt%>X
z3Da-}u6SSP^nLU0*9XbX*NWJ$Fi><A)}oRt2fUW7u7X@H<ziQ;VJ?jCQ}%M-UJ+V5
zHm?UPiR6Gi3(NrcgEPr8?<dQ@OUyq*M|j}hFg3S%7m|+qj5i8K*FN*zy-b(3j^tV1
znm{;14qULTvMic+saIVbo138QVI-Ld^axN++CoY4$Xo~i()*rseWEN>xy$=RLR1pm
zmbsEBR4c}xZ$UR$rHAnE8oqIU#Xn<}AqtodEgCNQ$<)$$^gtC%giurFzmQ(X81^bV
z1?1By1(BY~Q@X7`H-DJ4osUW|70xYn=8C0x31O#M*$mO-G%z@(MTnxfACLXEpqnV)
zMNy0UVh*b-(&Nv1b;I7~48n;=VoDDesHPX#VlUN^6qRx9sV{WN*b~7xzg|?jp6*<0
z$)k9Dxyu~_@UI$j8D}=lBhxPzI$_`YE||#8CBM}Fran0XoE&Bsvh|C6?s%Bl&I~Bp
z4Tz$ffF=cWP)=DxvwzyKVQKig%2N8ir`+51_Az*+Tbw${Q<uE`4jZI0LcUs%?v5}F
z+~i3#mV*d1d(~@13J09$)}U^(3DA?S`d5yjttX}5VQAC%BH^;FacaHHG5xPYOR1WE
zap;7McR-`UnW!<9z`yozVTQn8%bKu1(1KA@z10eKUQE)64&F3a`b*!)Af+?%C{exw
zJFRNbevfmSoizCPLP^=*_2WXI5x&OJpcc<%X1ZSF+^aZ_uUB~ekAK9u4@FF$D!!~;
z7jAjQCLW%x)<<2N+-^|rr@5ODiL^yLb7^SOuaAnt99rMb*kFf^3)BzeX)NV4*8CsK
z#8`H&6xKgIQg_kL5SZ{hV8!RL#d*e<(4O}5D*g|YnWQg7qj^iR<}okRtyiN?ugl12
z(Aitl|4GwL<6K;naBhfI7b-@UcNCK4NQa5W@@pT|V+w1O4h=ekejCk7xVn#uB|<j3
z>Q9!kdD6+Sy1adA^@?5PPVgtk+U}ZH*`8caz16Ol7rMGy!s}4k1|2X9CmF^pFIo<2
zn+GpsgbqYi7tdjve;C#tv5Y<m`ZfL2jr8-MK$+@vnkKaj@|YMjC1`DTOn<Tz!RKH2
zVsD1GIYyCN6qt0+>TZobxQ;87EOymr)i`*O^TU-383X4F=PJcI!snKJC>J)ohIYb^
z&))fp+v~A^Y|*jt;Z&ci{`e|=7BD<&mctmFx&|}$r~jFd>HH>OD3Sn+{=Ah^2+9Ou
zL|WB-uA@O3wNY@$Ba3{h?a64gjPMyVd(F+<T}sS^#k_Xe;n_d9*H9sKReb(=UT0!7
z1b@m-No!HZp9m>xTe)wL-`5@;G3l$c>9^pp*Fm8DY~)KXxk4)Fqp6xkP+89FK-Iy9
zQ_~N14-v~Fve`$%d?@#zN1n^m9a5|V5``9W6y63a(wNizVx1_?69at51MBk}ZB?+H
zYuUw>8`FssHanZ&V!w|*6266#15dYawL(5^UsN%<7sC`kk*D6u5_bk3-(X9;fouNJ
z$JK-)n-#aF8=(QQLadtcZh^l?XlLZSRc!q1R<*NU61x&pEAJw$@PBbbN&`v7;idcQ
z@}#zR51-Fj3Gh8|xbHbT$b$3<XzS5ly5$gph9QlvTLkMO-i6niaCLP)(S+TBdk~=T
zm-7sFSq>_w+EaOX6A4qz(}-=`OB=eFJf+b~bI5VOctof{0zr)sCh8$B@14G9^&~<O
zm0UmLf_;za0*^~FaByi=G2Gei9Gck=U$?M+C>v^y$Pg@d=?Jrc^~DXXi7!9ED>&OI
z0_&lKgP3@ba}b@&iVr{;0~jVBpBX9kfA>t(b~gaWj!@pM=B-Zd06HiJq|KeY-5&`6
Nz@G3xH94In{|m5tXZ-*G

literal 0
HcmV?d00001

diff --git a/src/composables/useInitMap.js b/src/composables/useInitMap.js
index f1d0275..4acee9f 100644
--- a/src/composables/useInitMap.js
+++ b/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)
diff --git a/src/views/Guide/Guide.vue b/src/views/Guide/Guide.vue
index df2fb1d..061f114 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, 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)