feat: 导览-全部楼层面板

src/views/Guide/Guide.vue

@@ -17,10 +17,18 @@
       </ScrollView>
       <div class="allFloors" animate__fast animate__animated animate__fadeInUp v-if="showAll">
         <ScrollView>
-          <div class="row" v-for="(item, index) of currentBuildingFloorsList" :key="item.floorCode">
-            <div class="left">{{ item.floor }}</div>
-            <div class="right">
-              <div class="format">{{ formatMap[item.floor] }}</div>
+          <div>
+            <div class="row" :class="{ current: currentFloor.floorCode === item.floorCode }" v-for="item of currentBuildingFloorsList" :key="item.floorCode">
+              <div class="left">{{ item.floor }}</div>
+              <div class="right">
+                <div class="format">{{ formatMap[item.floor] }}</div>
+                <div class="facs">
+                  <div class="fac" v-for="fac of facMap[item.floorOrder]" :key="fac.type">
+                    <img :src="fac.imgUrl" alt="" />
+                    {{ fac.title }}
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </ScrollView>
@@ -71,8 +79,17 @@ const showAll = ref(false)
 const isRow = ref(false)
 const store = useStore()
 const formatMap = ref({})
+const facMap = ref({})
 const { currentBuildingFloorsList, currentFloor, config } = storeToRefs(store)
 
+try {
+  const facs = window.Map_QM.getAllIcon()
+
+  facMap.value = facs[0].map(list => Object.values(list.reduce((acc, nxt) => ({ ...acc, [nxt.type]: nxt }), {})))
+} catch (error) {
+  console.log('error: ', error)
+}
+
 try {
   window.Map_QM?.showFloor?.(currentFloor.value.floorOrder)
 } catch (error) {
@@ -178,10 +195,7 @@ onBeforeUnmount(() => {
   clearTimeout(mapIconTimer.value)
 })
 
-onMounted(() => {
-  const facs = window.Map_QM.getAllIcon()
-  console.log(facs)
-})
+onMounted(() => {})
 
 watch(
   [shopList, currentFloor],
@@ -208,6 +222,31 @@ watch(
   .row {
     height: 76px;
     display: flex;
+    &.current {
+      .left {
+        position: relative;
+        color: rgba(0, 0, 0, 0.8);
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #ffffff 100%);
+        &::after {
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          height: 20px;
+          display: flex;
+          content: '您在本层';
+          background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%);
+          font-weight: 700;
+          font-size: 12px;
+          color: rgba(0, 0, 0, 0.8);
+          align-items: center;
+          justify-content: center;
+        }
+      }
+      .right {
+        background: #fff;
+      }
+    }
     .left {
       flex: 0 0 150px;
       font-family: 'Montserrat';
@@ -229,8 +268,9 @@ watch(
       flex: 1;
       display: flex;
       padding: 0 68px;
+      border-bottom: 1px solid #fff;
       .format {
-        flex: 0 0 50%;
+        flex: 1;
         font-weight: 700;
         font-size: 20px;
         line-height: 23px;
@@ -239,7 +279,29 @@ watch(
         color: rgba(0, 0, 0, 0.8);
       }
       .facs {
-        flex: 0 0 50%;
+        flex: 0;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+
+        .fac {
+          display: flex;
+          flex-direction: column;
+          img {
+            width: 36px;
+            height: 36px;
+            margin-bottom: 8px;
+          }
+          font-weight: 700;
+          font-size: 12px;
+          line-height: 14px;
+          text-align: center;
+          color: rgba(0, 0, 0, 0.6);
+          align-items: center;
+        }
+        .fac + .fac {
+          margin-left: 16px;
+        }
       }
     }
   }