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