|
|
|
@ -12,16 +12,8 @@ |
|
|
|
@click="handleSwitch" |
|
|
|
/> |
|
|
|
<!-- 店铺 --> |
|
|
|
<!-- <scroll-view |
|
|
|
class="shop-scroll" |
|
|
|
:style="{ |
|
|
|
top: recList.length === 0 ? '360px' : '' |
|
|
|
}" |
|
|
|
:list="selectedShopList" |
|
|
|
ref="shopScroll" |
|
|
|
> --> |
|
|
|
|
|
|
|
<swiper |
|
|
|
<scroll-view ref="shopScroll" class="shop-scroll" :refresh-delay="200" :pull-up="true" :list="pageList" @scroll-end="myScrollEnd"> |
|
|
|
<!-- <swiper |
|
|
|
ref="myScroll" |
|
|
|
class="shop-scroll animate__animated animate__fadeInUp" |
|
|
|
:speed="300" |
|
|
|
@ -38,30 +30,35 @@ |
|
|
|
:modules="modulesShop" |
|
|
|
@after-init="getSwiper" |
|
|
|
@reach-end="myScrollEnd" |
|
|
|
> |
|
|
|
<!-- |
|
|
|
@observer-update="updateSwiper" --> |
|
|
|
<swiper-slide v-for="(items, index) in pageList" :key="index" :data-floor-name="items.name"> |
|
|
|
<ul class="shop-items"> |
|
|
|
<div v-show="items.shopList && items.shopList.length" ref="shopDiv" class="shop-div" :data-floorname="items.name"> |
|
|
|
<div class="shop-floor"> |
|
|
|
{{ items.name }} |
|
|
|
<div class="top-right-txt" :style="{ width: items.name !== device.floor ? '0px' : '' }"> |
|
|
|
<img v-if="items.name === device.floor" src="../../assets/images/brand/pos.svg" class="pos-icon" alt="" /> |
|
|
|
<span v-if="items.name === device.floor">{{ $t('brand.pos') }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- :style="{ 'grid-template-columns': isH && recList.length === 0 ? 'repeat(5, 240px)' : null }" --> |
|
|
|
<div class="shop-wrapper"> |
|
|
|
<shopItem v-for="(item, idx) of items.shopList" :key="idx" class="item" :shop="item" @click="handleShop(item)" /> |
|
|
|
> |
|
|
|
<swiper-slide v-for="(items, index) in pageList" :key="index" :data-floor-name="items.name"> --> |
|
|
|
|
|
|
|
<ul class="shop-items"> |
|
|
|
<div |
|
|
|
v-for="(items, index) in pageList" |
|
|
|
v-show="items.shopList && items.shopList.length" |
|
|
|
:key="index" |
|
|
|
ref="shopDiv" |
|
|
|
class="shop-div" |
|
|
|
:data-floorname="items.name" |
|
|
|
> |
|
|
|
<div class="shop-floor"> |
|
|
|
{{ items.name }} |
|
|
|
<div class="top-right-txt" :style="{ width: items.name !== device.floor ? '0px' : '' }"> |
|
|
|
<img v-if="items.name === device.floor" src="../../assets/images/brand/pos.svg" class="pos-icon" alt="" /> |
|
|
|
<span v-if="items.name === device.floor">{{ $t('brand.pos') }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</ul> |
|
|
|
</swiper-slide> |
|
|
|
<!-- :style="{ 'grid-template-columns': isH && recList.length === 0 ? 'repeat(5, 240px)' : null }" --> |
|
|
|
<div class="shop-wrapper"> |
|
|
|
<shopItem v-for="(item, idx) of items.shopList" :key="idx" class="item" :shop="item" @click="handleShop(item)" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</ul> |
|
|
|
<!-- </swiper-slide> |
|
|
|
<div class="swiper-scrollbar"></div> |
|
|
|
</swiper> |
|
|
|
|
|
|
|
<!-- </scroll-view> --> |
|
|
|
</swiper> --> |
|
|
|
</scroll-view> |
|
|
|
|
|
|
|
<!-- 楼层和业态 --> |
|
|
|
<div class="right-control-area animate__animated animate__fadeInRight"> |
|
|
|
@ -114,12 +111,14 @@ |
|
|
|
</template> |
|
|
|
<script setup lang="ts"> |
|
|
|
import { ref, computed, nextTick, shallowRef, onMounted } from 'vue' |
|
|
|
import { FreeMode } from 'swiper' |
|
|
|
import { Swiper, SwiperSlide } from 'swiper/vue' |
|
|
|
import 'swiper/css' |
|
|
|
import 'swiper/css/pagination' |
|
|
|
import 'swiper/css/free-mode' |
|
|
|
// import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
|
|
// import { FreeMode } from 'swiper' |
|
|
|
// import { Swiper, SwiperSlide } from 'swiper/vue' |
|
|
|
// import 'swiper/css' |
|
|
|
// import 'swiper/css/pagination' |
|
|
|
// import 'swiper/css/free-mode' |
|
|
|
// const modulesShop = [FreeMode] |
|
|
|
|
|
|
|
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
|
|
// import CollapseVue from '@/base/Collapse/Collapse.vue' |
|
|
|
|
|
|
|
import { getBrandInfo } from '@/http/api/brand/index' |
|
|
|
@ -141,10 +140,9 @@ const store = useRootStore() |
|
|
|
const { device, currentBuildingFloorsList, shopListGroupByFloor, shopListGroupByIndustry } = storeToRefs(store) |
|
|
|
|
|
|
|
const { switchLanguage } = useSwitchLanguage() |
|
|
|
// const shopScroll = computed(() => document.querySelector('.shop-scroll>.swiper-wrapper')) |
|
|
|
const swiperRef = shallowRef() |
|
|
|
|
|
|
|
const modulesShop = [FreeMode] |
|
|
|
const shopScroll = ref() |
|
|
|
const swiperRef = shallowRef() |
|
|
|
|
|
|
|
const toggleFormatAndFloors = ref<0 | 1 | 2>(0) |
|
|
|
|
|
|
|
@ -231,15 +229,18 @@ selfListByIndustry.value = [...shopListGroupByIndustry.value] |
|
|
|
onMounted(() => { |
|
|
|
selectedShopList.value = selfListByIndustry.value |
|
|
|
}) |
|
|
|
function getSwiper(obj: any) { |
|
|
|
swiperRef.value = obj |
|
|
|
swiperRef.value.update() |
|
|
|
} |
|
|
|
// function getSwiper(obj: any) { |
|
|
|
// swiperRef.value = obj |
|
|
|
// swiperRef.value.update() |
|
|
|
// } |
|
|
|
|
|
|
|
function updateSwiper(time = 300, isToCurentFloor = false) { |
|
|
|
nextTick(() => { |
|
|
|
const timeId = setTimeout(() => { |
|
|
|
clearTimeout(timeId) |
|
|
|
if (shopScroll.value) { |
|
|
|
shopScroll.value.scrollTo(0, 0) |
|
|
|
} |
|
|
|
// showList.value = true |
|
|
|
if (swiperRef.value) { |
|
|
|
// console.dir('swiperRef.value :>> ', swiperRef) |
|
|
|
@ -475,6 +476,7 @@ function myScrollEnd() { |
|
|
|
} |
|
|
|
} |
|
|
|
.shop-scroll { |
|
|
|
overflow: hidden; |
|
|
|
width: 1388px; |
|
|
|
height: 770px; |
|
|
|
padding-bottom: 30px; |
|
|
|
|