Browse Source

fix: 修改品牌页面

pull/7/head
张耀 3 years ago
parent
commit
8d3059f5f0
  1. 4
      src/components/SearchKeyboard/SearchKeyboard.vue
  2. 90
      src/views/Brand/shopList.vue
  3. 2
      src/views/Search/Search.vue

4
src/components/SearchKeyboard/SearchKeyboard.vue

@ -215,7 +215,7 @@ watch(mode, newVal => {
handWritingRef.value.setCanvasSize()
handWritingRef.value.updateBound()
handWritingRef.value.reload()
}, 200)
}, 500)
}
})
@ -241,6 +241,8 @@ watch(wordsList, () => {
// padding: 48px 64px;
background: rgb(255 255 255 / 0%);
border-radius: 0;
--animate-duration: 200ms;
.btn-group {
position: absolute;
top: 0;

90
src/views/Brand/shopList.vue

@ -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;

2
src/views/Search/Search.vue

@ -142,7 +142,7 @@ const { handleFacility } = useFacilityNav()
const store = useRootStore()
const hotSearchList = ref([])
const { shopList, facilityList, language } = storeToRefs(store)
const { shopList, facilityList, language, shop } = storeToRefs(store)
// const route = useRoute()
const INPUT_MAX_LEN = computed(() => (mode.value === 'hand' ? 5 : 7))
const input = ref('')

Loading…
Cancel
Save