feat: 全部楼层业态

src/views/Guide/Guide.vue

@@ -1,16 +1,29 @@
 <template>
   <View>
     <Teleport to="body">
-      <div class="floors-list animate__fast animate__animated animate__fadeIn">
-        <div
-          @click="handleFloor(item, index)"
-          :class="{ active: floorIdx === index, current: currentFloor.floorCode === item.floorCode }"
-          class="floors-item"
-          v-for="(item, index) of currentBuildingFloorsList"
-          :key="item.floorCode"
-        >
-          {{ item.floor }}
+      <ScrollView scroll-x :list="currentBuildingFloorsList" class="floors-list animate__fast animate__animated animate__fadeIn">
+        <div style="display: inline-block; white-space: nowrap">
+          <div class="floors-item all" @click="showAll = true" :class="{ active: showAll }">全部楼层</div>
+          <div
+            @click="handleFloor(item, index)"
+            :class="{ active: !showAll && floorIdx === index, current: currentFloor.floorCode === item.floorCode }"
+            class="floors-item"
+            v-for="(item, index) of currentBuildingFloorsList"
+            :key="item.floorCode"
+          >
+            {{ item.floor }}
+          </div>
         </div>
+      </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>
+        </ScrollView>
       </div>
     </Teleport>
 
@@ -43,18 +56,21 @@
 </template>
 
 <script setup>
-import { ref, watch, onBeforeUnmount } from 'vue'
+import { ref, watch, onBeforeUnmount, onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/root'
 import { list, RESET, DIRECTION, ACTIVITY_BRAND } from './list'
 import View from '@/layouts/View.vue'
 import { hideMapDialog } from '@/composables/useInitMap'
-import { getBrandListByFormat } from '@/http/brand/api'
+import { getBrandListByFormat, getBrandListByFloor } from '@/http/brand/api'
 import BrandScroll from '@/components/BrandScroll/BrandScroll.vue'
+import ScrollView from '@/base/ScrollView/ScrollView.vue'
 
 const shopList = ref([])
+const showAll = ref(false)
 const isRow = ref(false)
 const store = useStore()
+const formatMap = ref({})
 const { currentBuildingFloorsList, currentFloor, config } = storeToRefs(store)
 
 try {
@@ -62,6 +78,11 @@ try {
 } catch (error) {
   console.log('error: ', error)
 }
+getBrandListByFloor().then(({ data }) => {
+  formatMap.value = data.list
+    .map(({ name, shopList }) => ({ name, format: Object.keys(shopList.reduce((acc, nxt) => ({ ...acc, [nxt.industryFatherName]: true }), {})).join('/') }))
+    .reduce((acc, nxt) => ({ ...acc, [nxt.name]: nxt.format }), {})
+})
 getBrandListByFormat().then(({ data }) => {
   shopList.value = data.list
 })
@@ -125,6 +146,7 @@ function handleShop(item) {
 
 const floorIdx = ref(-1)
 function handleFloor(item, index) {
+  showAll.value = false
   hideMapDialog()
   mapIdx.value = -1
   cancelIdleCallback(idle.value)
@@ -156,6 +178,11 @@ onBeforeUnmount(() => {
   clearTimeout(mapIconTimer.value)
 })
 
+onMounted(() => {
+  const facs = window.Map_QM.getAllIcon()
+  console.log(facs)
+})
+
 watch(
   [shopList, currentFloor],
   ([_shopList, _currentFloor]) => {
@@ -170,22 +197,69 @@ watch(
 </script>
 
 <style lang="scss" scoped>
+.allFloors {
+  position: absolute;
+  top: 408px;
+  left: 0;
+  right: 0;
+  height: 642px;
+  background: left / 150px 100% no-repeat linear-gradient(180deg, #6c7ca6 0%, #879aca 100%), #dee6f6;
+  z-index: 100;
+  .row {
+    height: 76px;
+    display: flex;
+    .left {
+      flex: 0 0 150px;
+      font-family: 'Montserrat';
+      font-style: normal;
+      font-weight: 700;
+      font-size: 28px;
+      line-height: 96%;
+
+      display: flex;
+      align-items: center;
+      text-align: center;
+      justify-content: center;
+
+      /* W/100% */
+
+      color: #ffffff;
+    }
+    .right {
+      flex: 1;
+      display: flex;
+      padding: 0 68px;
+      .format {
+        flex: 0 0 50%;
+        font-weight: 700;
+        font-size: 20px;
+        line-height: 23px;
+        display: flex;
+        align-items: center;
+        color: rgba(0, 0, 0, 0.8);
+      }
+      .facs {
+        flex: 0 0 50%;
+      }
+    }
+  }
+}
 .floors-list {
   position: absolute;
   left: 0;
   right: 0;
+  width: 100vw;
   top: 1050px;
   height: 100px;
   z-index: 60;
   display: block;
-  overflow-y: hidden;
-  overflow-x: scroll;
+  overflow: hidden;
   background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%);
+
   &::-webkit-scrollbar {
     display: none;
   }
   .floors-item {
-    flex: 1;
     display: inline-flex;
     width: 122.5px;
     align-items: center;
@@ -205,6 +279,13 @@ watch(
 
     color: #ffffff;
     transition: all 0.5s;
+    &.all {
+      width: 150px;
+      font-weight: 700;
+      font-size: 18px;
+      line-height: 96%;
+      vertical-align: bottom;
+    }
     &.current {
       background: rgba(0, 0, 0, 0.1);
       &::after {