重写筛选组件和筛选参数全局化
This commit is contained in:
A1300399510
6
src/assets/img/publicImage/arrow-black-down.svg
Normal file
6
src/assets/img/publicImage/arrow-black-down.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="7px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1494 -4445 )">
|
||||
<path d="M 11.8797595190381 0.721649484536082 C 11.9599198396794 0.801832760595645 12 0.894043528064146 12 0.998281786941581 C 12 1.10252004581901 11.9599198396794 1.19473081328751 11.8797595190381 1.27491408934708 L 6.27655310621242 6.87972508591065 C 6.19639278557114 6.95990836197022 6.10420841683367 7 6 7 C 5.89579158316633 7 5.80360721442886 6.95990836197022 5.72344689378757 6.87972508591065 L 0.120240480961924 1.27491408934708 C 0.0400801603206414 1.19473081328751 0 1.10252004581901 0 0.998281786941581 C 0 0.894043528064146 0.0400801603206414 0.801832760595645 0.120240480961924 0.721649484536082 L 0.721442885771543 0.120274914089347 C 0.801603206412826 0.0400916380297814 0.893787575150301 0 0.997995991983968 0 C 1.10220440881764 0 1.19438877755511 0.0400916380297814 1.27454909819639 0.120274914089347 L 6 4.84707903780069 L 10.7254509018036 0.120274914089347 C 10.8056112224449 0.0400916380297814 10.8977955911824 0 11.002004008016 0 C 11.1062124248497 0 11.1983967935872 0.0400916380297814 11.2785571142285 0.120274914089347 L 11.8797595190381 0.721649484536082 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 1494 4445 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
src/assets/img/publicImage/tick-green.svg
Normal file
6
src/assets/img/publicImage/tick-green.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="9px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1205 -4919 )">
|
||||
<path d="M 11.7832258064516 1.24242424242424 C 11.9277419354839 1.38383838383838 12 1.55555555555556 12 1.75757575757576 C 12 1.95959595959596 11.9277419354839 2.13131313131313 11.7832258064516 2.27272727272727 L 6.17806451612903 7.75757575757576 L 5.12516129032258 8.78787878787879 C 4.98064516129032 8.92929292929293 4.80516129032258 9 4.59870967741935 9 C 4.39225806451613 9 4.21677419354839 8.92929292929293 4.07225806451613 8.78787878787879 L 3.01935483870968 7.75757575757576 L 0.216774193548387 5.01515151515152 C 0.0722580645161291 4.87373737373737 0 4.7020202020202 0 4.5 C 0 4.2979797979798 0.0722580645161291 4.12626262626263 0.216774193548387 3.98484848484849 L 1.26967741935484 2.95454545454545 C 1.4141935483871 2.81313131313131 1.58967741935484 2.74242424242424 1.79612903225806 2.74242424242424 C 2.00258064516129 2.74242424242424 2.17806451612903 2.81313131313131 2.32258064516129 2.95454545454545 L 4.59870967741935 5.18939393939394 L 9.67741935483871 0.212121212121212 C 9.82193548387097 0.0707070707070704 9.99741935483871 0 10.2038709677419 0 C 10.4103225806452 0 10.5858064516129 0.0707070707070704 10.7303225806452 0.212121212121212 L 11.7832258064516 1.24242424242424 Z " fill-rule="nonzero" fill="#50e3c2" stroke="none" transform="matrix(1 0 0 1 1205 4919 )" />
|
||||
</g>
|
||||
</svg>
|
||||
@@ -89,14 +89,14 @@
|
||||
|
||||
<div class="option-area flexflex" :class="{ 'option-area-unfold': state == 'unfold' }">
|
||||
<div class="option-left">
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-item flexflex" style="padding-bottom: 10px;">
|
||||
<div class="option-title">学校附近</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<div class="item flexcenter" :class="{ pitch: 0 == pitchValue['school'] }" @click="selectOption('nearSchool', 0)">不限</div>
|
||||
<div class="item flexcenter" v-for="item in nearSchoolList" :class="{ pitch: item['id'] == pitchValue['school'] }" @click="selectOption('nearSchool', item.id)">{{ item["name"] }}</div>
|
||||
<div class="item flexcenter" v-for="(item, index) in nearSchoolList" :key="index" :class="{ pitch: item['id'] == pitchValue['school'] }" @click="selectOption('nearSchool', item.id)">{{ item["name"] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-item flexflex" style="padding-top: 20px;">
|
||||
<div class="option-title flexacenter">租金</div>
|
||||
<div class="option-box flexacenter flex1 option-input-box">
|
||||
<div class="flex1"><input class="option-input" type="number" v-model="pitchValue['rent_min']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" /><span style="font-size: 18px;">~</span><input class="option-input" type="number" v-model="pitchValue['rent_max']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" />HK$/月</div>
|
||||
@@ -108,39 +108,110 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option-item flexflex">
|
||||
<!-- <div class="option-item flexflex">
|
||||
<div class="option-title">房型</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<div class="item flexcenter" :class="{ pitch: 0 == pitchValue['roomtype'] }" @click="selectOption('roomType', 0)">不限</div>
|
||||
<div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['roomtype'] }" v-for="item in roomTypeList" @click="selectOption('roomType', item.id)">{{ item["name"] }}</div>
|
||||
<div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['roomtype'] }" v-for="(item, index) in roomTypeList" :key="index" @click="selectOption('roomType', item.id)">{{ item["name"] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="option-right">
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-title flexacenter">品牌</div>
|
||||
<div class="option-box flexacenter flex1">
|
||||
<el-dropdown trigger="click" popper-class="option-dropdown-box">
|
||||
<div class="option-dropdown flexacenter">
|
||||
<span class="option-dropdown-value">{{ brandKey[pitchValue["companyid"]] || "不限" }}</span>
|
||||
<img class="option-dropdown-img" src="@/assets/img/publicImage/arrow-black-down.svg" />
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :class="{ 'pitch': 0 == pitchValue['companyid'] }" @click="selectOption('brand', 0)">
|
||||
<div class="dropdown-value">不限</div>
|
||||
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :class="{ 'pitch': item.id == pitchValue['companyid'] }" v-for="(item, index) in brandList" :key="index" @click="selectOption('brand', item.id)">
|
||||
<div class="dropdown-value">{{ item["name"] }}</div>
|
||||
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-title flexacenter">房型</div>
|
||||
<div class="option-box flexacenter flex1">
|
||||
<el-dropdown trigger="click" popper-class="option-dropdown-box">
|
||||
<div class="option-dropdown flexacenter">
|
||||
<span class="option-dropdown-value">{{ roomTypeKey[pitchValue["roomtype"]] || "不限" }}</span>
|
||||
<img class="option-dropdown-img" src="@/assets/img/publicImage/arrow-black-down.svg" />
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :class="{ 'pitch': 0 == pitchValue['roomtype'] }" @click="selectOption('roomType', 0)">
|
||||
<div class="dropdown-value">不限</div>
|
||||
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :class="{ 'pitch': item.id == pitchValue['roomtype'] }" v-for="(item, index) in roomTypeList" :key="index" @click="selectOption('roomType', item.id)">
|
||||
<div class="dropdown-value">{{ item["name"] }}</div>
|
||||
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-title flexacenter">楼型</div>
|
||||
<div class="option-box flexacenter flex1">
|
||||
<el-dropdown trigger="click" popper-class="option-dropdown-box">
|
||||
<div class="option-dropdown flexacenter">
|
||||
<span class="option-dropdown-value">{{ roomlistingsKey[pitchValue["roomlistings"]] || "不限" }}</span>
|
||||
<img class="option-dropdown-img" src="@/assets/img/publicImage/arrow-black-down.svg" />
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :class="{ 'pitch': 0 == pitchValue['roomlistings'] }" @click="selectOption('roomlistings', 0)">
|
||||
<div class="dropdown-value">不限</div>
|
||||
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :class="{ 'pitch': item.id == pitchValue['roomlistings'] }" v-for="(item, index) in roomlistingsList" :key="index" @click="selectOption('roomlistings', item.id)">
|
||||
<div class="dropdown-value">{{ item["name"] }}</div>
|
||||
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="option-item flexflex">
|
||||
<div class="option-title">品牌</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<div class="item flexcenter" :class="{ pitch: 0 == pitchValue['companyid'] }" @click="selectOption('brand', 0)">不限</div>
|
||||
<div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['companyid'] }" v-for="item in brandList" @click="selectOption('brand', item.id)">
|
||||
<div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['companyid'] }" v-for="(item, index) in brandList" :key="index" @click="selectOption('brand', item.id)">
|
||||
{{ item["name"] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option-item flexflex">
|
||||
</div> -->
|
||||
<!-- <div class="option-item flexflex">
|
||||
<div class="option-title">楼型</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<div class="item flexcenter" :class="{ pitch: 0 == pitchValue['roomlistings'] }" @click="selectOption('roomlistings', 0)">不限</div>
|
||||
<div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['roomlistings'] }" v-for="item in roomlistingsList" @click="selectOption('roomlistings', item.id)">
|
||||
<div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['roomlistings'] }" v-for="(item, index) in roomlistingsList" :key="index" @click="selectOption('roomlistings', item.id)">
|
||||
{{ item["name"] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 收起按钮 -->
|
||||
<div class="pack-up flexcenter" v-if="state == 'unfold'" @click="state = 'pack'">收起筛选条件<img class="icon" src="@/assets/img/publicImage/triangle-black.svg" /></div>
|
||||
<!-- <div class="pack-up flexcenter" v-if="state == 'unfold'" @click="state = 'pack'">收起筛选条件<img class="icon" src="@/assets/img/publicImage/triangle-black.svg" /></div> -->
|
||||
|
||||
<div class="screen-footer flexacenter" v-if="props.seachPage">
|
||||
<div class="quantity flexacenter">
|
||||
@@ -182,7 +253,7 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits(["handleTransfer"])
|
||||
|
||||
let state = ref("pack") // 筛选状态 unfold 展开 pack 收起
|
||||
let state = ref("unfold") // 筛选状态 unfold 展开 pack 收起
|
||||
|
||||
//搜索框
|
||||
let historyShow = ref(false)
|
||||
@@ -197,10 +268,14 @@ historyArr.value = JSON.parse(localStorage.getItem("historyArr")) || []
|
||||
let nearSchoolList = reactive([{ name: "不限", id: 0 }]) //学校附近
|
||||
|
||||
let roomTypeList = reactive([]) // 房型
|
||||
let roomTypeKey = reactive([]) // 房型 键值对
|
||||
|
||||
let roomlistingsList = reactive([]) // 楼型
|
||||
let roomlistingsKey = reactive([]) // 楼型 键值对
|
||||
|
||||
let brandList = reactive([]) // 品牌数据
|
||||
let brandKey = reactive([]) // 品牌数据 键值对
|
||||
|
||||
// 筛选条件
|
||||
let pitchValue = ref({
|
||||
companyid: 0,
|
||||
@@ -215,8 +290,11 @@ let pitchValue = ref({
|
||||
watchEffect(() => {
|
||||
nearSchoolList = store.state.apartment.school || []
|
||||
roomTypeList = store.state.apartment.roomtype || []
|
||||
roomTypeKey = store.state.roomTypeKey || {}
|
||||
roomlistingsList = store.state.apartment.roomlistings || []
|
||||
roomlistingsKey = store.state.roomlistingsKey || {}
|
||||
brandList = store.state.apartment.brand || []
|
||||
brandKey = store.state.brandKey || {}
|
||||
hotArr.data = store.state.indexData.hotSearcheWords
|
||||
pitchValue.value = { ...pitchValue.value, ...props.initPitchValue }
|
||||
})
|
||||
@@ -379,8 +457,8 @@ let deleteSeachVal = i => {
|
||||
}
|
||||
|
||||
.location-box {
|
||||
width: 62px;
|
||||
height: 32px;
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
background: inherit;
|
||||
background-color: rgba(68, 68, 68, 1);
|
||||
border-radius: 8px;
|
||||
@@ -404,9 +482,7 @@ let deleteSeachVal = i => {
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
// bottom: -46px;
|
||||
// left: -6px;
|
||||
bottom: -39px;
|
||||
bottom: -47px;
|
||||
left: -7px;
|
||||
}
|
||||
|
||||
@@ -431,7 +507,7 @@ let deleteSeachVal = i => {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
margin-right: 1px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.tool-btn {
|
||||
@@ -569,12 +645,13 @@ let deleteSeachVal = i => {
|
||||
.option-area {
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
// height: 0;
|
||||
transition: height 0.25s linear 0s;
|
||||
|
||||
&.option-area-unfold {
|
||||
height: 335px;
|
||||
// height: 335px;
|
||||
border-top: 1px solid #ebebeb;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
|
||||
.option-left,
|
||||
@@ -672,6 +749,42 @@ let deleteSeachVal = i => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.option-right {
|
||||
padding-top: 18px;
|
||||
.option-item {
|
||||
margin-left: 32px;
|
||||
border-bottom: none !important;
|
||||
padding: 0;
|
||||
margin-bottom: 18px;
|
||||
|
||||
.option-title {
|
||||
width: 73px;
|
||||
}
|
||||
|
||||
.option-dropdown {
|
||||
width: 477px;
|
||||
height: 40px;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 10px;
|
||||
justify-content: space-between;
|
||||
padding-left: 12px;
|
||||
padding-right: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
.option-dropdown-value {
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.option-dropdown-img {
|
||||
width: 12px;
|
||||
height: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.seach-hiosory-box {
|
||||
@@ -807,13 +920,31 @@ let deleteSeachVal = i => {
|
||||
::v-deep .el-input__wrapper {
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
// border: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
/deep/ .el-input__wrapper {
|
||||
// border: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
/deep/ .el-input__inner {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 18px !important;
|
||||
width: 20px !important;
|
||||
}
|
||||
|
||||
.seach-btn {
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
// .screen-btn /deep/ .el-input__wrapper {
|
||||
// border: 1px solid #dcdfe6;
|
||||
// }
|
||||
|
||||
.seach-btn {
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
@@ -821,3 +952,50 @@ let deleteSeachVal = i => {
|
||||
margin-right: 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.el-popper.el-dropdown__popper.option-dropdown-box {
|
||||
width: 477px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 10px;
|
||||
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.188235294117647);
|
||||
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.188235294117647);
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.188235294117647);
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
|
||||
.el-dropdown-menu {
|
||||
padding: 20px 12px;
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
line-height: 24px;
|
||||
padding-left: 20px;
|
||||
background: #fff;
|
||||
justify-content: space-between;
|
||||
.dropdown-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(246, 246, 246, 1);
|
||||
}
|
||||
|
||||
&.pitch {
|
||||
color: #50e3c2;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
.dropdown-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.option-dropdown-box.el-dropdown__popper.el-popper[data-popper-placement^="bottom"] .el-popper__arrow::before {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -158,7 +158,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option-item flexflex" v-else>
|
||||
<div class="option-item flexacenter" style="height: 96px;" v-else>
|
||||
<div class="option-title">目标区域</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<div class="item flexcenter" :class="{ pitch: 0 == selectDistrictPitchShow }" @click="selectOption('location', [])">不限</div>
|
||||
@@ -252,7 +252,7 @@
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-title">其他</div>
|
||||
<div class="option-box flexacenter flex1">
|
||||
<div class="item-checkbox flexacenter" v-if="routePath == '/personHousing'" :class="{ pitch: pitchValue.isverified == 1 }" style="color: #f95d5d;" @click="selectCheckboxOption('isverified')">
|
||||
<div class="item-checkbox flexacenter item-checkbox-housing" v-if="routePath == '/personHousing'" :class="{ pitch: pitchValue.isverified == 1 }" @click="selectCheckboxOption('isverified')">
|
||||
<span class="item-checkbox__inner"></span>
|
||||
认证房源
|
||||
</div>
|
||||
@@ -268,11 +268,6 @@
|
||||
<span class="item-checkbox__inner"></span>
|
||||
有阳台
|
||||
</div>
|
||||
|
||||
<!-- <el-checkbox v-if="routePath == '/personHousing'" v-model="pitchValue.isverified" style="color: #f95d5d;" @change="selectCheckboxOption('isverified')" :key="pitchValue['isverified']" true-value="1" false-label="0">认证房源</el-checkbox>
|
||||
<el-checkbox v-if="routePath == '/intermediaryHousing'" v-model="pitchValue.isintermediary" @change="selectCheckboxOption('isintermediary')" :key="pitchValue['isintermediary']">认证中介</el-checkbox>
|
||||
<el-checkbox v-model="pitchValue.iselevator" @change="selectCheckboxOption('iselevator')" :key="pitchValue['iselevator']">有电梯</el-checkbox>
|
||||
<el-checkbox v-model="pitchValue.issunshinearea" @change="selectCheckboxOption('issunshinearea')" :key="pitchValue['issunshinearea']">有阳台</el-checkbox> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -312,7 +307,9 @@
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="sort-box">
|
||||
<el-dropdown-item class="sort-item" :class="{ pitch: item.type == pitchValue.orderby }" @click="selectOption('orderby', item.type)" v-for="item in orderbyList" :key="item.type">{{ item.name }}</el-dropdown-item>
|
||||
<el-dropdown-item class="sort-item" @click="selectOption('orderby', item.type)" v-for="item in orderbyList" :key="item.type">
|
||||
<div :class="{ pitch: item.type === pitchValue.orderby }">{{ item.name }}</div>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
@@ -397,7 +394,7 @@ onMounted(() => {
|
||||
pitchValue["school"] = ""
|
||||
const arr = queryParams["location"].split(",")
|
||||
pitchValue["location"] = arr
|
||||
selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0)
|
||||
// selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0)
|
||||
} else pitchValue = Object.assign({}, pitchValue, queryParams)
|
||||
} else if (routePath.value === "/intermediaryHousing") pitchValue = { ...pitchValue, ...store.state.intermediaryPitchValue }
|
||||
else pitchValue = { ...pitchValue, ...store.state.needPitchValue }
|
||||
@@ -407,6 +404,8 @@ onMounted(() => {
|
||||
geographicState.value = "school"
|
||||
}
|
||||
|
||||
if (pitchValue["location"].length > 0) selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0)
|
||||
|
||||
getDataList(pitchValue)
|
||||
})
|
||||
|
||||
@@ -549,6 +548,11 @@ onMounted(() => {
|
||||
//设置区域状态
|
||||
let setSelectPosition = type => {
|
||||
geographicState.value = type
|
||||
|
||||
if (type !== "school") return
|
||||
locationTemp.key = 0
|
||||
locationTemp.value = []
|
||||
locationTemp.state = false
|
||||
}
|
||||
|
||||
//学校区域状态
|
||||
@@ -635,6 +639,7 @@ const selectDistrict = type => {
|
||||
|
||||
locationTemp.key = 0
|
||||
locationTemp.state = false
|
||||
pitchValue["school"] = ""
|
||||
} else {
|
||||
// 点击选好了 数组为空代表 选择不限
|
||||
if (locationTemp.value.length == 0) locationTemp.value = [selectDistrictPitchShow.value]
|
||||
@@ -643,6 +648,7 @@ const selectDistrict = type => {
|
||||
locationTemp.value = []
|
||||
selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0)
|
||||
|
||||
pitchValue["school"] = ""
|
||||
locationTemp.key = 0
|
||||
locationTemp.state = false
|
||||
getDataList(pitchValue)
|
||||
@@ -1495,6 +1501,10 @@ defineExpose({
|
||||
margin-right: 20px;
|
||||
color: #606266;
|
||||
|
||||
&.item-checkbox-housing {
|
||||
color: #f95d5d;
|
||||
}
|
||||
|
||||
&.pitch {
|
||||
color: #000;
|
||||
font-weight: 650;
|
||||
@@ -1745,7 +1755,8 @@ defineExpose({
|
||||
margin-bottom: 30px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
&.pitch {
|
||||
.pitch {
|
||||
width: 100%;
|
||||
color: #000;
|
||||
font-weight: 650;
|
||||
position: relative;
|
||||
|
||||
42
src/main.js
42
src/main.js
@@ -78,30 +78,35 @@ app.use(store).use(router).use(Axios)
|
||||
|
||||
api.index()
|
||||
.then(res => {
|
||||
store.state.seachTypeData = res.data.combination
|
||||
store.state.indexData = res.data
|
||||
store.state.ListSelectBtn = res.data.recommendedTab
|
||||
store.state.user = res.data.user
|
||||
store.state.nav = res.data.nav
|
||||
store.state.wechat = res.data.wechat
|
||||
store.state.apartment = res.data.config.apartment
|
||||
store.state.schoolList = res.data.schoolList
|
||||
store.state.advData = res.data.adv
|
||||
store.state.typeKey = res.data.config.type
|
||||
store.state.locationKey = res.data.config.location
|
||||
const data = res.data
|
||||
store.state.seachTypeData = data.combination
|
||||
store.state.indexData = data
|
||||
store.state.ListSelectBtn = data.recommendedTab
|
||||
store.state.user = data.user
|
||||
store.state.nav = data.nav
|
||||
store.state.wechat = data.wechat
|
||||
store.state.apartment = data.config.apartment
|
||||
store.state.schoolList = data.schoolList
|
||||
store.state.advData = data.adv
|
||||
store.state.typeKey = data.config.type
|
||||
store.state.locationKey = data.config.location
|
||||
|
||||
// 将 location 转换为对象 好用于级联选择器
|
||||
const location = res.data.config.location || {}
|
||||
const type = res.data.config.type || {}
|
||||
const location = data.config.location || {}
|
||||
const type = data.config.type || {}
|
||||
|
||||
store.state.locationObj = optimalValue(location)
|
||||
store.state.typeObj = optimalValue(type)
|
||||
|
||||
store.state.brandKey = optimalValueArray(data.config.apartment.brand || [])
|
||||
store.state.roomTypeKey = optimalValueArray(data.config.apartment.roomtype || [])
|
||||
store.state.roomlistingsKey = optimalValueArray(data.config.apartment.roomlistings || [])
|
||||
})
|
||||
.finally(() => {
|
||||
app.mount("#app")
|
||||
})
|
||||
|
||||
// 优化值
|
||||
// 优化值 1 1.1 1.2 类似的值
|
||||
const optimalValue = data => {
|
||||
let obj = {}
|
||||
for (const key in data) {
|
||||
@@ -120,3 +125,12 @@ const optimalValue = data => {
|
||||
|
||||
return obj || {}
|
||||
}
|
||||
|
||||
// 优化值 数组 转对象
|
||||
const optimalValueArray = data => {
|
||||
let obj = {}
|
||||
data.forEach(item => {
|
||||
obj[item.id] = item.name
|
||||
})
|
||||
return obj
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user