XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

重写筛选组件和筛选参数全局化

Browse Source
This commit is contained in:
A1300399510
2024-03-22 17:16:42 +08:00
parent 172b7274a9
commit 5db2d47c2d
22 changed files with 284 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
src/components/apartment/seachModule.vue
View File

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