liyongle
3 years ago
13 changed files with 2512 additions and 7 deletions
File diff suppressed because one or more lines are too long
@ -1 +1,5 @@ |
|||
{"code":200,"msg":"操作成功","data":[60,60]} |
|||
{ |
|||
"code": 200, |
|||
"msg": "操作成功", |
|||
"data": [600, 600] |
|||
} |
|||
|
|||
@ -1 +1,148 @@ |
|||
{"code":200,"msg":"操作成功","data":{"allShopNum":5,"floorList":[{"building":"A","floor":"B4","buildingCode":"suG1YjUhWnvRBJm3ULnCo","floorCode":"uDKfemAB1vCVZsudb_hmh"},{"building":"A","floor":"B3","buildingCode":"suG1YjUhWnvRBJm3ULnCo","floorCode":"ktEJNAQBDLLr_o7bpQh74"},{"building":"A","floor":"LG2","buildingCode":"suG1YjUhWnvRBJm3ULnCo","floorCode":"DvdHx4Xhv2C5Yc_dxyDup"},{"building":"A","floor":"LG","buildingCode":"suG1YjUhWnvRBJm3ULnCo","floorCode":"Y_gTy-qqMogOmHJlbDsIr"},{"building":"A","floor":"L1","buildingCode":"suG1YjUhWnvRBJm3ULnCo","floorCode":"-vH5uZXijKrzlJQIIIkba"},{"building":"A","floor":"L2","buildingCode":"suG1YjUhWnvRBJm3ULnCo","floorCode":"vVq2ZOi0H7-tpjZHRdZyE"},{"building":"A","floor":"L3","buildingCode":"suG1YjUhWnvRBJm3ULnCo","floorCode":"UHo56B1ktH2zS6gLnzuij"},{"building":"A","floor":"L4","buildingCode":"suG1YjUhWnvRBJm3ULnCo","floorCode":"6JbqB2VzMiXV52gvPE4K4"},{"building":"A","floor":"L5","buildingCode":"suG1YjUhWnvRBJm3ULnCo","floorCode":"hZs9j374JhdAK_IsNV1vc"},{"building":"A","floor":"L6","buildingCode":"suG1YjUhWnvRBJm3ULnCo","floorCode":"sC2NmA7VAOxLZ1-Su3DXo"}],"recommendList":[{"industryName":"餐饮","shopCode":"N58iWdPNw2wAB0X8BxmW1","shopName":"星巴克","shopNameEn":"","logoUrl":"/iotFile/2023/04/18/Jrw0_ifPRL40HwIJuQMv7.png","industryUrl":"/iotFile/2023/04/19/T25A8zEygrRp9WxBOlXj_.png","building":"A","floor":"L1","intro":"","introEn":"","businessHours":"","contact":"","isNewShop":0,"xaxis":"","yaxis":"","navXaxis":"","navYaxis":"","doorMaterialList":["/iotFile/2023/04/19/V2UUfgleZ3SUV4H_shCq2.jpeg"],"foodMaterialList":[],"buildingCode":"suG1YjUhWnvRBJm3ULnCo","buildingOrder":0,"floorCode":"-vH5uZXijKrzlJQIIIkba","floorOrder":4}],"industryFatherList":[{"fileUrl":"/iotFile/2023/04/19/T25A8zEygrRp9WxBOlXj_.png","isSpecial":0,"industryCode":"p4E21-vTzrb-rU0FQnzcG","industryName":"餐饮","shopNum":3,"industryList":[{"industryCode":"GOK_kIXzGq7PVYMB2AJlt","industryName":"美食","shopNum":3}]},{"fileUrl":"/iotFile/2023/04/19/0QbPfyN2cvDiy1te5odlp.png","isSpecial":0,"industryCode":"Hqv9P3BtktRX919qjQZWv","industryName":"餐饮1","shopNum":2,"industryList":[]}],"buildingList":[{"building":"A","buildingCode":"suG1YjUhWnvRBJm3ULnCo","buildingOrder":0,"floorList":[{"floor":"B4","floorCode":"uDKfemAB1vCVZsudb_hmh","floorOrder":0},{"floor":"B3","floorCode":"ktEJNAQBDLLr_o7bpQh74","floorOrder":1},{"floor":"LG2","floorCode":"DvdHx4Xhv2C5Yc_dxyDup","floorOrder":2},{"floor":"LG","floorCode":"Y_gTy-qqMogOmHJlbDsIr","floorOrder":3},{"floor":"L1","floorCode":"-vH5uZXijKrzlJQIIIkba","floorOrder":4},{"floor":"L2","floorCode":"vVq2ZOi0H7-tpjZHRdZyE","floorOrder":5},{"floor":"L3","floorCode":"UHo56B1ktH2zS6gLnzuij","floorOrder":6},{"floor":"L4","floorCode":"6JbqB2VzMiXV52gvPE4K4","floorOrder":7},{"floor":"L5","floorCode":"hZs9j374JhdAK_IsNV1vc","floorOrder":8},{"floor":"L6","floorCode":"sC2NmA7VAOxLZ1-Su3DXo","floorOrder":9}]}]}} |
|||
{ |
|||
"code": 200, |
|||
"msg": "操作成功", |
|||
"data": { |
|||
"allShopNum": 5, |
|||
"floorList": [{ |
|||
"building": "A", |
|||
"floor": "B4", |
|||
"buildingCode": "suG1YjUhWnvRBJm3ULnCo", |
|||
"floorCode": "uDKfemAB1vCVZsudb_hmh" |
|||
}, { |
|||
"building": "A", |
|||
"floor": "B3", |
|||
"buildingCode": "suG1YjUhWnvRBJm3ULnCo", |
|||
"floorCode": "ktEJNAQBDLLr_o7bpQh74" |
|||
}, { |
|||
"building": "A", |
|||
"floor": "LG2", |
|||
"buildingCode": "suG1YjUhWnvRBJm3ULnCo", |
|||
"floorCode": "DvdHx4Xhv2C5Yc_dxyDup" |
|||
}, { |
|||
"building": "A", |
|||
"floor": "LG", |
|||
"buildingCode": "suG1YjUhWnvRBJm3ULnCo", |
|||
"floorCode": "Y_gTy-qqMogOmHJlbDsIr" |
|||
}, { |
|||
"building": "A", |
|||
"floor": "L1", |
|||
"buildingCode": "suG1YjUhWnvRBJm3ULnCo", |
|||
"floorCode": "-vH5uZXijKrzlJQIIIkba" |
|||
}, { |
|||
"building": "A", |
|||
"floor": "L2", |
|||
"buildingCode": "suG1YjUhWnvRBJm3ULnCo", |
|||
"floorCode": "vVq2ZOi0H7-tpjZHRdZyE" |
|||
}, { |
|||
"building": "A", |
|||
"floor": "L3", |
|||
"buildingCode": "suG1YjUhWnvRBJm3ULnCo", |
|||
"floorCode": "UHo56B1ktH2zS6gLnzuij" |
|||
}, { |
|||
"building": "A", |
|||
"floor": "L4", |
|||
"buildingCode": "suG1YjUhWnvRBJm3ULnCo", |
|||
"floorCode": "6JbqB2VzMiXV52gvPE4K4" |
|||
}, { |
|||
"building": "A", |
|||
"floor": "L5", |
|||
"buildingCode": "suG1YjUhWnvRBJm3ULnCo", |
|||
"floorCode": "hZs9j374JhdAK_IsNV1vc" |
|||
}, { |
|||
"building": "A", |
|||
"floor": "L6", |
|||
"buildingCode": "suG1YjUhWnvRBJm3ULnCo", |
|||
"floorCode": "sC2NmA7VAOxLZ1-Su3DXo" |
|||
}], |
|||
"recommendList": [{ |
|||
"industryName": "餐饮", |
|||
"shopCode": "N58iWdPNw2wAB0X8BxmW1", |
|||
"shopName": "星巴克", |
|||
"shopNameEn": "", |
|||
"logoUrl": "/iotFile/2023/04/18/Jrw0_ifPRL40HwIJuQMv7.png", |
|||
"industryUrl": "/iotFile/2023/04/19/T25A8zEygrRp9WxBOlXj_.png", |
|||
"building": "A", |
|||
"floor": "L1", |
|||
"intro": "", |
|||
"introEn": "", |
|||
"businessHours": "", |
|||
"contact": "", |
|||
"isNewShop": 0, |
|||
"xaxis": "", |
|||
"yaxis": "", |
|||
"navXaxis": "", |
|||
"navYaxis": "", |
|||
"doorMaterialList": ["/iotFile/2023/04/19/V2UUfgleZ3SUV4H_shCq2.jpeg"], |
|||
"foodMaterialList": [], |
|||
"buildingCode": "suG1YjUhWnvRBJm3ULnCo", |
|||
"buildingOrder": 0, |
|||
"floorCode": "-vH5uZXijKrzlJQIIIkba", |
|||
"floorOrder": 4 |
|||
}], |
|||
"industryFatherList": [{ |
|||
"fileUrl": "/iotFile/2023/04/19/T25A8zEygrRp9WxBOlXj_.png", |
|||
"isSpecial": 0, |
|||
"industryCode": "p4E21-vTzrb-rU0FQnzcG", |
|||
"industryName": "餐饮", |
|||
"shopNum": 3, |
|||
"industryList": [{ |
|||
"industryCode": "GOK_kIXzGq7PVYMB2AJlt", |
|||
"industryName": "美食", |
|||
"shopNum": 3 |
|||
}] |
|||
}, { |
|||
"fileUrl": "/iotFile/2023/04/19/0QbPfyN2cvDiy1te5odlp.png", |
|||
"isSpecial": 0, |
|||
"industryCode": "Hqv9P3BtktRX919qjQZWv", |
|||
"industryName": "餐饮1", |
|||
"shopNum": 2, |
|||
"industryList": [] |
|||
}], |
|||
"buildingList": [{ |
|||
"building": "A", |
|||
"buildingCode": "suG1YjUhWnvRBJm3ULnCo", |
|||
"buildingOrder": 0, |
|||
"floorList": [{ |
|||
"floor": "B4", |
|||
"floorCode": "uDKfemAB1vCVZsudb_hmh", |
|||
"floorOrder": 0 |
|||
}, { |
|||
"floor": "B3", |
|||
"floorCode": "ktEJNAQBDLLr_o7bpQh74", |
|||
"floorOrder": 1 |
|||
}, { |
|||
"floor": "LG2", |
|||
"floorCode": "DvdHx4Xhv2C5Yc_dxyDup", |
|||
"floorOrder": 2 |
|||
}, { |
|||
"floor": "LG", |
|||
"floorCode": "Y_gTy-qqMogOmHJlbDsIr", |
|||
"floorOrder": 3 |
|||
}, { |
|||
"floor": "L1", |
|||
"floorCode": "-vH5uZXijKrzlJQIIIkba", |
|||
"floorOrder": 4 |
|||
}, { |
|||
"floor": "L2", |
|||
"floorCode": "vVq2ZOi0H7-tpjZHRdZyE", |
|||
"floorOrder": 5 |
|||
}, { |
|||
"floor": "L3", |
|||
"floorCode": "UHo56B1ktH2zS6gLnzuij", |
|||
"floorOrder": 6 |
|||
}, { |
|||
"floor": "L4", |
|||
"floorCode": "6JbqB2VzMiXV52gvPE4K4", |
|||
"floorOrder": 7 |
|||
}, { |
|||
"floor": "L5", |
|||
"floorCode": "hZs9j374JhdAK_IsNV1vc", |
|||
"floorOrder": 8 |
|||
}, { |
|||
"floor": "L6", |
|||
"floorCode": "sC2NmA7VAOxLZ1-Su3DXo", |
|||
"floorOrder": 9 |
|||
}] |
|||
}] |
|||
} |
|||
} |
|||
|
|||
@ -1 +1,9 @@ |
|||
{"code":200,"msg":"操作成功","data":{"content":"水游城位于南京市秦淮区建康路和中华路交叉路口东北角，属夫子庙商圈核心地段，距新街口仅2公里，是一个大型综合性商业项目，由上海鹏欣集团开发建设，建筑面积16.7万平方米，于2008年8月29日正式开业。\n水游城是以流动的水为主体，营造的一个集购物、休闲、餐饮、娱乐、旅游、文化等为一体的休闲购物主题公园。其中包括若干国际品牌的主力店及次主力店，业态以时尚、新潮为主流；一流的院线影城；餐饮包括异国风情美食街，大型特色餐饮，咖啡座、甜品屋、面包坊、茶餐厅地方以及风味小吃，根据不同消费群体分设于各个楼面。","contentEn":"Located in the northeast corner of the intersection of Jiankang Road and Zhonghua Road, Qinhuai District, Nanjing, Aqua City belongs to the core area of Fuzimiao business district, only 2 kilometers away from Xinjiekou, is a large-scale comprehensive commercial project, developed and constructed by Shanghai Pengxin Group, with a construction area of 167,000 square meters, officially opened on August 29, 2008.\nAqua City is a leisure and shopping theme park integrating shopping, leisure, catering,","fileList":["/iotFile/2023/04/18/_cZgZ4EEDd1T92c9IisYI.png"]}} |
|||
{ |
|||
"code": 200, |
|||
"msg": "操作成功", |
|||
"data": { |
|||
"content": "水游城位于南京市秦淮区建康路和中华路交叉路口东北角，属夫子庙商圈核心地段，距新街口仅2公里，是一个大型综合性商业项目，由上海鹏欣集团开发建设，建筑面积16.7万平方米，于2008年8月29日正式开业。\n水游城是以流动的水为主体，营造的一个集购物、休闲、餐饮、娱乐、旅游、文化等为一体的休闲购物主题公园。其中包括若干国际品牌的主力店及次主力店，业态以时尚、新潮为主流；一流的院线影城；餐饮包括异国风情美食街，大型特色餐饮，咖啡座、甜品屋、面包坊、茶餐厅地方以及风味小吃，根据不同消费群体分设于各个楼面。", |
|||
"contentEn": "Located in the northeast corner of the intersection of Jiankang Road and Zhonghua Road, Qinhuai District, Nanjing, Aqua City belongs to the core area of Fuzimiao business district, only 2 kilometers away from Xinjiekou, is a large-scale comprehensive commercial project, developed and constructed by Shanghai Pengxin Group, with a construction area of 167,000 square meters, officially opened on August 29, 2008.\nAqua City is a leisure and shopping theme park integrating shopping, leisure, catering,", |
|||
"fileList": ["/iotFile/2023/04/18/_cZgZ4EEDd1T92c9IisYI.png"] |
|||
} |
|||
} |
|||
|
|||
|
After Width: | Height: | Size: 513 B |
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,108 @@ |
|||
<template> |
|||
<transition appear enter-active-class="animate__animated animate__zoomIn" leave-active-class="animate__animated animate__zoomOut"> |
|||
<div :key="shop.shopCode" class="shop-li"> |
|||
<!-- 图片 --> |
|||
<div class="banner-wrapper"> |
|||
<img v-lazy="shop.logoUrl" alt="" /> |
|||
</div> |
|||
<!-- 文字 --> |
|||
<div class="bottom"> |
|||
<span class="name">{{ switchLanguage(shop, 'shopName') }}</span> |
|||
<div class="bottom-info"> |
|||
<span class="floor-name"> |
|||
<img src="@/assets/images/brand/icon_pos.svg" alt="" /> |
|||
<span>{{ shop.floor + '-' + shop.houseNumber }}</span> |
|||
</span> |
|||
<div class="likes"> |
|||
<img src="@/assets/images/brand/icon_heart.svg" alt="" /> |
|||
111 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</transition> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
const props = defineProps<{ shop: Shop }>() |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.shop-li { |
|||
position: relative; |
|||
width: 230px; |
|||
height: 300px; |
|||
animation-duration: 0.3s; |
|||
|
|||
.banner-wrapper { |
|||
position: relative; |
|||
overflow: hidden; |
|||
width: 100%; |
|||
height: 230px; |
|||
background-color: #fff; |
|||
border-radius: 8px; |
|||
|
|||
img { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
width: 180px; |
|||
height: 180px; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
} |
|||
.bottom { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
width: 100%; |
|||
height: 54px; |
|||
padding-right: 0; |
|||
padding-left: 0; |
|||
margin-top: 16px; |
|||
font-family: 'font_bold'; |
|||
text-align: left; |
|||
flex-direction: column; |
|||
.name { |
|||
max-width: 90%; |
|||
font-size: 16px; |
|||
color: #685c3b; |
|||
|
|||
@include no-wrap(); |
|||
} |
|||
.bottom-info { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: flex-end; |
|||
.floor-name { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
color: #a6976f; |
|||
img { |
|||
width: 18px; |
|||
margin-right: 4px; |
|||
} |
|||
} |
|||
.likes { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 72px; |
|||
height: 28px; |
|||
padding: 0 8px; |
|||
font-size: 14px; |
|||
font-family: 'font_regular'; |
|||
color: #fff; |
|||
background: #b7a475; |
|||
border-radius: 900px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
img { |
|||
display: inline-block; |
|||
width: 18px; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,72 @@ |
|||
<template> |
|||
<div class="btn-title-group"> |
|||
<div |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
class="btn-item" |
|||
:class="{ active: currentTypeId === index }" |
|||
@click="changeType(item, index)" |
|||
> |
|||
<h4> |
|||
{{ switchLanguage(item, 'title') }} |
|||
</h4> |
|||
<div class="saw"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref } from 'vue' |
|||
|
|||
const currentTypeId = ref(0) |
|||
|
|||
const emit = defineEmits(['change-type']) |
|||
type TypeItem = { |
|||
title: string |
|||
titleEn: string |
|||
} |
|||
const props = defineProps<{ |
|||
list: TypeItem[] |
|||
}>() |
|||
|
|||
function changeType(item: TypeItem, index: number) { |
|||
currentTypeId.value = index |
|||
emit('change-type', { ...item, order: currentTypeId.value }) |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.btn-title-group { |
|||
z-index: 10; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
width: fit-content; |
|||
.btn-item { |
|||
display: flex; |
|||
|
|||
h4 { |
|||
width: 96px; |
|||
height: 40px; |
|||
font-size: 24px; |
|||
font-family: 'font_regular'; |
|||
color: #84754e; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
} |
|||
&:nth-child(odd) { |
|||
.saw { |
|||
width: 2px; |
|||
height: 26px; |
|||
margin-right: 40px; |
|||
margin-left: 40px; |
|||
background: #84754e; |
|||
} |
|||
} |
|||
&.active { |
|||
h4 { |
|||
border-bottom: 4px solid #84754e; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,270 @@ |
|||
<template> |
|||
<div class="brand-container"> |
|||
<!-- 线条 --> |
|||
<div class="line"></div> |
|||
<!-- 业态和字母切换按钮 --> |
|||
<typeBtnGroup class="type-wrapper" :list="typeBtnList" @change-type="changeType"></typeBtnGroup> |
|||
<!-- 业态按钮组 字母按钮组--> |
|||
<scrollView class="btn-wrapper" :refresh-delay="200" :scroll-x="true" :list="formatZMList" :pull-up="false"> |
|||
<ul class="btn-group"> |
|||
<li |
|||
v-for="(item, index) in formatZMList" |
|||
:key="index" |
|||
:class="{ active: index === formatIdx }" |
|||
class="format-item" |
|||
@click="handleClickFormat(item, index)" |
|||
> |
|||
{{ switchLanguage(item, 'industryName') }} |
|||
</li> |
|||
</ul> |
|||
</scrollView> |
|||
<!-- 楼层按钮组 --> |
|||
<ul class="floor-group"> |
|||
<li |
|||
v-for="(item, index) in floorList" |
|||
:key="index" |
|||
class="floor-item" |
|||
:class="{ active: floorIdx === index }" |
|||
@click="handleClickFloor(item, index)" |
|||
> |
|||
{{ item.floor }} |
|||
</li> |
|||
</ul> |
|||
<!-- 店铺 --> |
|||
<scroll-view ref="shopScroll" :scrollbar="true" class="shop-scroll" :list="copyShopList" :pull-up="false"> |
|||
<ul class="shop-group"> |
|||
<shopItem v-for="shop in copyShopList" :key="shop.shopCode" :shop="shop" @click="clickShop(shop)" /> |
|||
</ul> |
|||
</scroll-view> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import shopItem from '@/components/ShopItem/ShopItem.vue' |
|||
import typeBtnGroup from '@/components/TypeBtnList/TypeBtnList.vue' |
|||
import scrollView from '@/base/ScrollView/ScrollView.vue' |
|||
import { getBrandInfo } from '@/http/api/brand/index' |
|||
import { ref, computed, shallowRef } from 'vue' |
|||
|
|||
import { storeToRefs } from 'pinia' |
|||
import { useRootStore } from '@/store/root' |
|||
|
|||
const store = useRootStore() |
|||
const { shopList } = storeToRefs(store) |
|||
|
|||
type FloorItem = { |
|||
floor: string |
|||
floorCode: number |
|||
floorMapUrl: string |
|||
floorOrder: number |
|||
} |
|||
const currentTypeId = ref(0) |
|||
const formatIdx = ref(0) |
|||
const formatZMList = computed(() => { |
|||
if (currentTypeId.value === 0) { |
|||
return formatList.value |
|||
} |
|||
return zmList.value |
|||
}) |
|||
const formatList = ref<Industry[]>([]) |
|||
const zmList = ref<Industry[]>([]) |
|||
const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' |
|||
|
|||
const floorIdx = ref(-1) |
|||
const floorList = ref<FloorItem[]>([]) |
|||
|
|||
const copyShopList = shallowRef<Shop[]>([]) |
|||
|
|||
const typeBtnList = [ |
|||
{ |
|||
title: '业态筛选', |
|||
titleEn: 'Formats' |
|||
}, |
|||
{ |
|||
title: '字母筛选', |
|||
titleEn: 'Floors' |
|||
} |
|||
] |
|||
|
|||
// 品牌相关信息 |
|||
getBrandInfo().then(({ data }) => { |
|||
formatList.value.push({ |
|||
fileUrl: '', |
|||
isSpecial: 0, |
|||
industryCode: 0, |
|||
industryName: '全部类别', |
|||
industryNameEn: '', |
|||
shopNum: 0, |
|||
industryList: [] |
|||
}) |
|||
zmList.value.push({ |
|||
fileUrl: '', |
|||
isSpecial: 0, |
|||
industryCode: 0, |
|||
industryName: 'ALL', |
|||
industryNameEn: '', |
|||
shopNum: 0, |
|||
industryList: [] |
|||
}) |
|||
|
|||
data.industryFatherList.forEach(item => { |
|||
formatList.value.push(item) |
|||
}) |
|||
floorList.value = [ |
|||
{ |
|||
floor: 'ALL', |
|||
floorCode: 0, |
|||
floorMapUrl: '', |
|||
floorOrder: -1 |
|||
}, |
|||
...data.floorList?.reverse() |
|||
] |
|||
|
|||
letters.split('').forEach(letter => { |
|||
const temp = { |
|||
fileUrl: '', |
|||
industryCode: 0, |
|||
industryNameEn: '', |
|||
shopNum: 0, |
|||
industryList: [] |
|||
} |
|||
zmList.value.push({ industryName: letter, isSpecial: 0, ...temp }) |
|||
}) |
|||
|
|||
copyShopList.value = [...shopList.value] |
|||
}) |
|||
//切换业态和字母按钮组 |
|||
function changeType(item: any) { |
|||
currentTypeId.value = item.order |
|||
} |
|||
function resetIdx() { |
|||
formatIdx.value = 0 |
|||
floorIdx.value = 0 |
|||
} |
|||
//点击楼层 |
|||
function handleClickFloor(item: FloorItem, index: number) { |
|||
resetIdx() |
|||
floorIdx.value = index |
|||
if (index === 0) { |
|||
copyShopList.value = [...shopList.value] |
|||
return |
|||
} |
|||
copyShopList.value = shopList.value.filter(shop => shop.floor === item.floor) |
|||
} |
|||
//点击业态和字母 |
|||
function handleClickFormat(item: Industry, index: number) { |
|||
resetIdx() |
|||
formatIdx.value = index |
|||
if (index === 0) { |
|||
copyShopList.value = [...shopList.value] |
|||
return |
|||
} |
|||
if (currentTypeId.value === 0) { |
|||
copyShopList.value = shopList.value.filter(shop => shop.industryFatherCode === item.industryCode) |
|||
} else { |
|||
copyShopList.value = shopList.value.filter(shop => shop.initials?.charAt(0) === item.industryName) |
|||
} |
|||
} |
|||
//点击品牌 |
|||
function clickShop(item: Shop) { |
|||
store.SET_SHOP(item) |
|||
store.SET_SHOW_DETAIL(true) |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
:deep(.bscroll-vertical-scrollbar) { |
|||
background: rgb(0 0 0 / 1%); |
|||
border-radius: 8px; |
|||
opacity: 1 !important; |
|||
.bscroll-indicator { |
|||
background: #b7a475 !important; |
|||
border: none !important; |
|||
border-radius: 4px !important; |
|||
box-shadow: 0 8px 20px rgb(0 0 0 / 10%); |
|||
} |
|||
} |
|||
.brand-container { |
|||
.line { |
|||
position: absolute; |
|||
right: 0; |
|||
left: 0; |
|||
width: 1544px; |
|||
height: 1px; |
|||
margin: 288px auto; |
|||
background: #84754e; |
|||
opacity: 0.3; |
|||
} |
|||
.type-wrapper { |
|||
position: absolute; |
|||
right: 0; |
|||
left: 0; |
|||
margin: 140px auto 0; |
|||
} |
|||
.btn-wrapper { |
|||
position: absolute; |
|||
top: 228px; |
|||
left: 124px; |
|||
overflow: hidden; |
|||
width: 1706px; |
|||
.btn-group { |
|||
width: fit-content; |
|||
white-space: nowrap; |
|||
.format-item { |
|||
display: inline-block; |
|||
height: 36px; |
|||
padding: 0 24px; |
|||
margin-right: 40px; |
|||
font-size: 16px; |
|||
font-family: 'font_regular'; |
|||
color: #84754e; |
|||
background: rgb(255 255 255 / 40%); |
|||
border-radius: 108px; |
|||
line-height: 36px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
|
|||
&.active { |
|||
color: #fff; |
|||
background: #a6976f; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.floor-group { |
|||
position: absolute; |
|||
top: 319px; |
|||
left: 124px; |
|||
font-size: 24px; |
|||
font-family: 'font_bold'; |
|||
text-align: center; |
|||
color: #a6976f; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
|
|||
.floor-item { |
|||
margin-bottom: 32px; |
|||
|
|||
&.active { |
|||
font-size: 36px; |
|||
color: #595447; |
|||
} |
|||
} |
|||
} |
|||
.shop-scroll { |
|||
position: absolute; |
|||
top: 321px; |
|||
left: 289px; |
|||
overflow: hidden; |
|||
width: 1372px; |
|||
height: 759px; |
|||
padding-right: 24px; |
|||
|
|||
.shop-group { |
|||
display: grid; |
|||
grid-template-columns: repeat(5, 230px); |
|||
gap: 24px 48px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue