|
|
@ -1,132 +1,28 @@ |
|
|
<template> |
|
|
<template> |
|
|
<View title="品牌列表" sub-title="Brand list"> |
|
|
|
|
|
<div class="container flex"> |
|
|
|
|
|
<BrandRecommend @click="handleShop" :config="config" :list="recommendList" /> |
|
|
|
|
|
<div class="brand-left"> |
|
|
|
|
|
<div class="top-title"> |
|
|
|
|
|
<p class="title">{{ selectedTitle }}</p> |
|
|
|
|
|
<div class="currentfloor"> |
|
|
|
|
|
<img src="../../assets/images/guide/guide_zhong.png" class="zhong" alt="" /> |
|
|
|
|
|
<span class="floor"><i>当前楼层</i>{{ currentFloor.floor }}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="line"></div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="bottom-content"> |
|
|
|
|
|
<BrandScroll @click="handleShop" :list="selectedList" :config="config" /> |
|
|
|
|
|
|
|
|
|
|
|
<div class="brand-middle"> |
|
|
|
|
|
<Tabs class="width" :list="list" @click="handleTab" /> |
|
|
|
|
|
<Transition name="zoom" mode="out-in"> |
|
|
|
|
|
<Industry @click="handleFormat" v-if="tabIdx === 0" :config="config" :list="formatList" /> |
|
|
|
|
|
<div v-else class="floor-list"> |
|
|
|
|
|
<div |
|
|
|
|
|
class="floor-item" |
|
|
|
|
|
@click="handleFloor(item, index)" |
|
|
|
|
|
:class="[index === 0 ? 'width' : '', index === floorIdx ? 'active' : '']" |
|
|
|
|
|
v-for="(item, index) of mergeFloorsList" |
|
|
|
|
|
:key="item.floor" |
|
|
|
|
|
> |
|
|
|
|
|
{{ item.floor }} |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</Transition> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<View> |
|
|
|
|
|
<BrandScroll class="brand" @click="handleShop" :list="selectedList" :config="config" /> |
|
|
</View> |
|
|
</View> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script setup> |
|
|
<script setup> |
|
|
import { ref, computed } from 'vue' |
|
|
|
|
|
|
|
|
import { ref } from 'vue' |
|
|
import { storeToRefs } from 'pinia' |
|
|
import { storeToRefs } from 'pinia' |
|
|
import { useStore } from '@/store/root' |
|
|
import { useStore } from '@/store/root' |
|
|
import { getBrandList, getBrandListByFormat, getBrandListByFloor } from '@/http/brand/api' |
|
|
|
|
|
import { list } from './Tabs' |
|
|
|
|
|
|
|
|
import { getBrandListByFloor } from '@/http/brand/api' |
|
|
import View from '@/layouts/View.vue' |
|
|
import View from '@/layouts/View.vue' |
|
|
import Industry from '@/components/Industry/Industry.vue' |
|
|
|
|
|
import Tabs from '@/components/Tabs/Tabs.vue' |
|
|
|
|
|
import BrandRecommend from '@/components/BrandRecommend/BrandRecommend.vue' |
|
|
|
|
|
import BrandScroll from '@/components/BrandScroll/BrandScroll.vue' |
|
|
import BrandScroll from '@/components/BrandScroll/BrandScroll.vue' |
|
|
import { useStatistics } from '@/composables/useStatistics' |
|
|
|
|
|
|
|
|
|
|
|
const ALL_BRAND = '全部品牌' |
|
|
|
|
|
|
|
|
|
|
|
const store = useStore() |
|
|
const store = useStore() |
|
|
const { config, currentFloor, shopList } = storeToRefs(store) |
|
|
|
|
|
|
|
|
|
|
|
useStatistics('industry') |
|
|
|
|
|
|
|
|
const { config, shopList } = storeToRefs(store) |
|
|
|
|
|
|
|
|
const selectedList = ref([]) |
|
|
const selectedList = ref([]) |
|
|
const formatList = ref([]) |
|
|
|
|
|
const recommendList = ref([]) |
|
|
|
|
|
const selectedTitle = ref('') |
|
|
|
|
|
const idlecallback = ref(null) |
|
|
|
|
|
const data = { |
|
|
|
|
|
formatList: [], |
|
|
|
|
|
floorListBySort: [], |
|
|
|
|
|
brandListByFormat: [], |
|
|
|
|
|
brandListByFloor: [] |
|
|
|
|
|
} |
|
|
|
|
|
Promise.all([getBrandList(), getBrandListByFormat(), getBrandListByFloor()]).then(([brandList, listByFormat, listByFloor]) => { |
|
|
|
|
|
data.formatList = brandList.data.industryFatherList |
|
|
|
|
|
data.floorListBySort = brandList.data.floorList |
|
|
|
|
|
data.brandListByFormat = listByFormat.data.list |
|
|
|
|
|
data.brandListByFloor = listByFloor.data.list |
|
|
|
|
|
|
|
|
|
|
|
recommendList.value = brandList.data.recommendList |
|
|
|
|
|
formatList.value = data.formatList |
|
|
|
|
|
selectedList.value = listByFloor.data.list |
|
|
|
|
|
|
|
|
Promise.all([getBrandListByFloor()]).then(([_brandList]) => { |
|
|
|
|
|
const list = _brandList.data.list |
|
|
|
|
|
|
|
|
selectedTitle.value = ALL_BRAND |
|
|
|
|
|
|
|
|
selectedList.value = list |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
const tabIdx = ref(0) |
|
|
|
|
|
function handleTab(index) { |
|
|
|
|
|
tabIdx.value = index |
|
|
|
|
|
selectedTitle.value = ALL_BRAND |
|
|
|
|
|
selectedList.value = tabIdx.value === 0 ? data.brandListByFloor : data.brandListByFormat |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function handleFormat(format) { |
|
|
|
|
|
cancelIdleCallback(idlecallback.value) |
|
|
|
|
|
selectedTitle.value = format.industryName |
|
|
|
|
|
if (format.industryName === '全部品牌') { |
|
|
|
|
|
selectedList.value = data.brandListByFloor |
|
|
|
|
|
return |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
idlecallback.value = requestIdleCallback(() => { |
|
|
|
|
|
selectedList.value = data.brandListByFloor.map(item => ({ |
|
|
|
|
|
...item, |
|
|
|
|
|
shopList: item.shopList.filter(shop => shop[format.industryList ? 'industryFatherId' : 'industryId'] === format.industryId) |
|
|
|
|
|
})) |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const floorIdx = ref(0) |
|
|
|
|
|
const mergeFloorsList = computed(() => [{ floor: 'ALL' }, ...data.floorListBySort]) |
|
|
|
|
|
function handleFloor(item, index) { |
|
|
|
|
|
cancelIdleCallback(idlecallback.value) |
|
|
|
|
|
if (index === 0) { |
|
|
|
|
|
selectedTitle.value = ALL_BRAND |
|
|
|
|
|
} else { |
|
|
|
|
|
selectedTitle.value = item.floor |
|
|
|
|
|
} |
|
|
|
|
|
floorIdx.value = index |
|
|
|
|
|
if (item.floor === 'ALL') { |
|
|
|
|
|
selectedList.value = data.brandListByFloor |
|
|
|
|
|
return |
|
|
|
|
|
} |
|
|
|
|
|
idlecallback.value = requestIdleCallback(() => { |
|
|
|
|
|
selectedList.value = data.brandListByFormat.map(brand => ({ |
|
|
|
|
|
...brand, |
|
|
|
|
|
shopList: brand.shopList.filter(shop => shop.floor === item.floor) |
|
|
|
|
|
})) |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function handleShop(item) { |
|
|
function handleShop(item) { |
|
|
const shop = shopList.value.find(_shop => _shop.shopId === item.shopId) |
|
|
const shop = shopList.value.find(_shop => _shop.shopId === item.shopId) |
|
|
store.SET_SHOP(shop) |
|
|
store.SET_SHOP(shop) |
|
|
@ -135,93 +31,8 @@ function handleShop(item) { |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
.flex { |
|
|
|
|
|
|
|
|
.brand { |
|
|
position: relative; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.title { |
|
|
|
|
|
font-weight: 700; |
|
|
|
|
|
font-size: 24px; |
|
|
|
|
|
font-family: 'font_bold'; |
|
|
|
|
|
color: rgba(0, 0, 0, 0.8); |
|
|
|
|
|
padding-bottom: 12px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.bottom-content { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
margin-right: 40px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.brand-left { |
|
|
|
|
|
.top-title { |
|
|
|
|
|
margin-left: 170px; |
|
|
|
|
|
margin-right: 258px; |
|
|
|
|
|
margin-bottom: 14px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: baseline; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
.title { |
|
|
|
|
|
padding-bottom: 0; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.line { |
|
|
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.4); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.currentfloor { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
} |
|
|
|
|
|
.zhong { |
|
|
|
|
|
width: 16px; |
|
|
|
|
|
} |
|
|
|
|
|
.floor { |
|
|
|
|
|
font-weight: 700; |
|
|
|
|
|
font-size: 24px; |
|
|
|
|
|
font-family: 'font_bold'; |
|
|
|
|
|
color: rgba(0, 0, 0, 0.6); |
|
|
|
|
|
i { |
|
|
|
|
|
font-weight: 700; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
line-height: 19px; |
|
|
|
|
|
color: rgba(0, 0, 0, 0.4); |
|
|
|
|
|
padding-left: 7px; |
|
|
|
|
|
padding-right: 17px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.brand-middle { |
|
|
|
|
|
padding-top: 20px; |
|
|
|
|
|
.width { |
|
|
|
|
|
height: 180px; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
width: 200px; |
|
|
|
|
|
:deep(.tab) { |
|
|
|
|
|
height: 90px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.floor-list { |
|
|
|
|
|
width: 200px; |
|
|
|
|
|
border-radius: 8px; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
margin-top: 18px; |
|
|
|
|
|
} |
|
|
|
|
|
.floor-item { |
|
|
|
|
|
width: 200px; |
|
|
|
|
|
height: 72px; |
|
|
|
|
|
background: rgba(255, 255, 255, 0.6); |
|
|
|
|
|
line-height: 72px; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
font-family: 'font_bold'; |
|
|
|
|
|
font-weight: 700; |
|
|
|
|
|
font-size: 20px; |
|
|
|
|
|
color: rgba(0, 0, 0, 0.6); |
|
|
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
|
background: linear-gradient(90deg, #ffbd35 0%, #ffd260 100%); |
|
|
|
|
|
color: rgba(0, 0, 0, 0.8); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
flex: 1; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
