client_iot-daoshi-template-v/src/components/BrandScroll/BrandScroll.vue

<template>
  <ScrollView ref="scroll" :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">
          {{ item.name }}<span class="meta">/ {{ item.shopList.length }}个</span> <span v-if="item.name === currentFloor.floor" class="current">您在本层</span>
        </h1>
        <TransitionGroup name="zoom" mode="out-in" tag="div" :class="{ group: true, isRow }">
          <ShopItem
            :config="config"
            :isGuide="$route.path === '/guide' && !isRow"
            :isRow="isRow"
            :isFood="isFood"
            :shop="el"
            @click="handleShop(el)"
            v-for="el of item.shopList"
            :isActive="shop && shop.shopId === el.shopId"
            :key="el.shopId"
          />
        </TransitionGroup>
      </div>
    </div>
  </ScrollView>
</template>

<script setup>
import { ref, nextTick, watch } from 'vue'
import ShopItem from '@/base/ShopItem/ShopItem.vue'
import ScrollView from '@/base/ScrollView/ScrollView.vue'
import { storeToRefs } from 'pinia'
import { useStore } from '@/store/root'
const store = useStore()
const { currentFloor } = storeToRefs(store)

const scroll = ref(null)
const props = defineProps({
  list: Array,
  config: Object,
  isRow: Boolean,
  isFood: Boolean,
  shop: Object,
  needFocus: Boolean
})

const emits = defineEmits(['click'])
function handleShop(item) {
  emits('click', item)
}
watch(
  () => props.isRow,
  () =>
    nextTick(() => {
      scroll.value.refresh()
    })
)
watch(
  () => props.list,
  () =>
    nextTick(() => {
      scroll.value.refresh()
      scroll.value.scrollTo(0, 0)
      if (props.shop) {
        const el = document.getElementById(props.shop.houseNumber)
        if (!el) return
        nextTick(() => {
          scroll.value.scrollToElement(el, 500, 0, -100)
        })
      }
    })
)

watch([scroll, () => props.shop], () => {
  if (!props.needFocus || !scroll.value || !props.shop || !props.list) return
  const el = document.getElementById(props.shop.houseNumber)
  if (!el) return
  nextTick(() => {
    scroll.value.scrollToElement(el, 500, 0, -100)
  })
})
</script>

<style lang="scss" scoped>
.brand-scroll {
  overflow: hidden;
  height: 1255px;
  margin-left: 68px;

  &.guide {
    height: 770px;
  }
  &.brand {
    height: 1512px;
  }
  :deep(.bscroll-vertical-scrollbar) {
    top: 102px !important;
    width: 48px !important;
    background: center / 6px 250px no-repeat url(@/assets/images/scrollBar.png);
    border-radius: 6px;
    opacity: 1 !important;
    height: 250px !important;
    &::after {
      position: absolute;
      content: '';
      left: 0;

      top: 120px;
      margin: auto;
      width: 48px;
      height: 61px;
      background: center / cover no-repeat url(@/assets/images/scrollHand.png);
    }
    .bscroll-indicator {
      height: 95px !important;
      width: 6px !important;
      left: 0;
      right: 0;
      margin: auto;
      background: #ffffff !important;
      border-radius: 6px !important;
      border: none !important;
    }
  }
}
.brand-content {
  padding-top: 40px;
  padding-bottom: 180px;
}
.info {
  font-weight: 900;
  font-size: 32px;
  line-height: 38px;
  color: var(--brand-floorNameColor);
  padding-bottom: 24px;
  display: flex;
  align-items: baseline;
  .meta {
    margin-left: 12px;
    font-weight: 500;
    font-size: 20px;
    line-height: 23px;
    color: var(--brand-floorMetaColor);
  }
  .current {
    display: flex;
    width: 96px;
    height: 27px;
    background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%);
    font-size: 16px;
    color: #ffffff;
    justify-content: center;
    align-items: center;
    border-radius: var(--global-radius, 6px);
    margin-left: 12px;
  }
}
.group {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 24px 8px;
  margin-bottom: 40px;
  padding-right: 68px;
}
.isRow {
  &.group {
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
  }
}
@media (min-aspect-ratio: 1/1) {
  .brand-scroll {
    height: calc(100vh - 280px);
    &.brand {
      height: calc(100vh - 280px);
    }
    &.guide {
      height: calc(100vh - 280px);
      margin-left: 54px;
      .group {
        grid-template-columns: 1fr 1fr;
        gap: 24px 8px;
        &.isRow {
          grid-template-columns: 1fr;
          gap: 8px;
        }
      }
    }
  }
  .group {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 32px 29px;
  }
}
</style>