feat: 导览样式更新

package.json

@@ -9,6 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@better-scroll/indicators": "^2.5.0",
     "@better-scroll/observe-image": "^2.4.2",
     "@better-scroll/scroll-bar": "^2.4.2",
     "@vueuse/core": "^9.9.0",

src/base/ScrollView/ScrollView.vue

@@ -10,9 +10,11 @@ import { useStore } from '@/store/root'
 import BScroll from '@better-scroll/core'
 import ScrollBar from '@better-scroll/scroll-bar'
 import ObserveImage from '@better-scroll/observe-image'
+import Indicators from '@better-scroll/indicators'
 
 BScroll.use(ScrollBar)
 BScroll.use(ObserveImage)
+BScroll.use(Indicators)
 
 const props = defineProps({
   list: [Array, String],
@@ -20,7 +22,6 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
-
   observeImage: {
     type: Boolean,
     default: false
@@ -40,6 +41,10 @@ const props = defineProps({
   autoTop: {
     type: Boolean,
     default: true
+  },
+  indicators: {
+    type: Object,
+    default: undefined
   }
 })
 
@@ -61,7 +66,9 @@ function _initScroll() {
     stopPropagation: props.stopPropagation,
     scrollbar: props.scrollbar,
     observeImage: props.observeImage,
-    probeType: props.probeType
+    probeType: props.probeType,
+    indicators: document.getElementById('indicator') ? [{ relationElement: document.getElementById('indicator'), relationElementHandleElementIndex: 0 }] : undefined
+    // ...(props.indicators ? { indicators: props.indicators } : {})
   })
 }
 

src/components/BrandScroll/BrandScroll.vue

@@ -1,5 +1,10 @@
 <template>
-  <ScrollView ref="scroll" :class="['brand-scroll', $route.path === '/guide' ? 'guide' : 'brand']" scrollbar>
+  <ScrollView
+    ref="scroll"
+    :indicators="!indicatorWrapper ? undefined : [{ relationElement: indicatorWrapper, relationElementHandleElementIndex: 0 }]"
+    :class="['brand-scroll', $route.path === '/guide' ? 'guide' : 'brand']"
+    scrollbar
+  >
     <div class="brand-content">
       <div class="groups" v-for="item of list" v-show="item.shopList.length" :key="item.name">
         <h1 class="info">
@@ -21,6 +26,9 @@
         </TransitionGroup>
       </div>
     </div>
+    <!-- <div class="indicator" id="indicator" ref="indicatorWrapper">
+      <div class="handle"></div>
+    </div> -->
   </ScrollView>
 </template>
 
@@ -32,7 +40,7 @@ import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/root'
 const store = useStore()
 const { currentFloor } = storeToRefs(store)
-
+const indicatorWrapper = ref(null)
 const scroll = ref(null)
 const props = defineProps({
   list: Array,
@@ -88,10 +96,23 @@ watch([scroll, () => props.shop], () => {
 
 <style lang="scss" scoped>
 .brand-scroll {
+  position: relative;
   overflow: hidden;
   height: 1255px;
   margin-left: 68px;
-
+  .indicator {
+    position: absolute;
+    height: 250px;
+    top: 102px;
+    right: 43px;
+    width: 77px;
+    .handle {
+      position: absolute;
+      width: 77px;
+      height: 32px;
+      background: center / cover no-repeat url(./handle.png);
+    }
+  }
   &.guide {
     height: 770px;
   }

src/views/Guide/Guide.vue

@@ -224,7 +224,9 @@ function filterAboutCurrentInfo() {
   const floorCode = shop.value ? shop.value.floorCode : currentFloor.value.floorCode
   const floor = shop.value ? shop.value.floor : currentFloor.value.floor
   const floorOrder = shop.value ? shop.value.floorOrder : currentFloor.value.floorOrder
+  try {
     window.Map_QM.showFloor(floorOrder)
+  } catch (error) {}
   floorIdx.value = currentBuildingFloorsList.value.findIndex(item => item.floorCode === floorCode)
   selectedShopList.value = shopList.value.map(brand => ({
     ...brand,
@@ -530,6 +532,7 @@ const handleFacility = async fac => {
     }
     &.current {
       background: rgba(0, 0, 0, 0.1);
+
       &::after {
         position: absolute;
         left: 0;
@@ -544,6 +547,25 @@ const handleFacility = async fac => {
         color: var(--guide-currentColor);
         align-items: center;
         justify-content: center;
+        @media (min-aspect-ratio: 1/1) {
+          position: absolute;
+          left: auto;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          width: 24px;
+          height: auto;
+          display: flex;
+          content: '您在本层';
+          background: var(--guide-currentBg);
+          font-weight: 700;
+          font-size: 12px;
+          color: var(--guide-currentColor);
+          align-items: center;
+          justify-content: center;
+          writing-mode: vertical-rl;
+          text-orientation: upright;
+        }
       }
     }
     &.active {
@@ -588,14 +610,14 @@ const handleFacility = async fac => {
   align-items: flex-start;
   justify-content: space-between;
   height: 104px;
-  right: 24px;
+  left: 68px;
   top: 952px;
   z-index: 51;
 
   .hands {
     position: fixed;
     top: 408px;
-    right: 68px;
+    left: 68px;
     width: 246px;
     height: 80px;
     z-index: 51;