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

搜索页面

Browse Source
This commit is contained in:
luJianJun
2023-07-18 18:48:09 +08:00
parent d1d1bf3e18
commit 1cc8d070b5
12 changed files with 509 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/selectTabBox/selectTabBox.vue
View File

@@ -7,9 +7,9 @@
<div class="tab-text" v-if="routePath !== '/needHousing'">
<div class="dis-f">
<div class="btn jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'region' }"
@click="selectPosition = 'region'">按区域</div>
@click="setSelectPosition('region')">按区域</div>
<div class="btn jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'school' }"
@click="selectPosition = 'school'">按学校</div>
@click="setSelectPosition('school')">按学校</div>
</div>
<div class="select-tab-info">
<img :src="selectPosition === 'school' ? require('../../assets/homeImage/schoolRegionBg.svg') : require('../../assets/homeImage/checkBG.svg')"
@@ -72,7 +72,7 @@
@click="setSelectData(item.id, item.data, item.name)" v-for="(item, i) in list" :key="i">
<div class="dis-f al-item">{{ item.name }} <div class="dis-f al-item"
v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp>&nbsp
<div :class="{'select-num':selectData.data && selectData.data.length}">
<div :class="{ 'select-num': selectData.data && selectData.data.length }">
{{
selectData.data && selectData.data.length === 0 ? '不限' :
selectData.data && selectData.data.length
@@ -100,8 +100,7 @@
<div v-if="item.title !== '不限'">
<el-dropdown trigger="click">
<span class="dropdown-btn jus-x dis-f al-item"
:class="{ 'btn-check': hireTypeObj.hireId === item.title }"
@click="setHireId(item.title)">
:class="{ 'btn-check': hireTypeObj.hireId === item.title }" @click="setHireId(item)">
{{ item.title }}<span v-show="hireTypeObj.hireId === item.title"> > {{
hireTypeObj.title || '不限' }}</span>
<img :src="hireTypeObj.hireId === item.title ? require('../../assets/homeImage/dropDownIcon.svg') : require('../../assets/homeImage/selectInfoTabIcon.svg')"
@@ -122,7 +121,7 @@
</el-dropdown>
</div>
<div class="btn jus-x al-item dis-f" :class="{ 'btn-check': hireTypeObj.hireId === item.title }"
v-if="item.title === '不限'" @click="setHireId(item.title)">{{
v-if="item.title === '不限'" @click="setHireId(item)">{{
item.title }}</div>
</div>
</div>
@@ -322,6 +321,10 @@ let setSchoolData = () => {
let setSchoolObj = (obj) => {
schoolSelectObj.id = obj.id
schoolSelectObj.title = obj.title
selectTabCheck.id = '';
selectTabCheck.title = '不限'
selectTabCheck.data = [];
selectData.data = []
setSeachCondition('school', obj.id)
}
@@ -340,30 +343,44 @@ let nextSchoolData = () => {
schoolData.next()
}
//设置状态
let setSelectPosition = (type) => {
selectPosition.value = type
// if (type === 'school') {
// selectTabCheck.id = '';
// selectTabCheck.title = '不限'
// selectTabCheck.data = [];
// selectData.data = []
// } else {
// schoolSelectObj.id = ''
// schoolSelectObj.title = ''
// }
}
//点击区域/学校选项
let clearSelectTabCheck=ref(true)
let clearSelectTabCheck = ref(true)
let setSelectData = (id, data = [], title) => {
showSelect.value = true
console.log(id ,selectTabCheck.id, data, title)
if (id === selectTabCheck.id){
clearSelectTabCheck.value=false
if (id === selectTabCheck.id) {
clearSelectTabCheck.value = false
return
}
clearSelectTabCheck.value=true
}
clearSelectTabCheck.value = true
selectTabCheck.id = id;
selectTabCheck.title = title
selectTabCheck.data = data;
selectData.data = []
if(id===''){
schoolSelectObj.id = ''
schoolSelectObj.title = ''
if (id === '') {
setSeachCondition('location', [])
}
}
//取消按钮
let closeSeach = () => {
console.log(selectTabCheck,selectData)
// console.log(selectTabCheck,selectData)
showSelect.value = false
clearSelectTabCheck.value=false
clearSelectTabCheck.value = false
}
//确认按钮
let selectSeach = (data = []) => {
@@ -377,6 +394,11 @@ let selectSeach = (data = []) => {
})
selectData.data = arr
showSelect.value = false
schoolSelectObj.id = ''
schoolSelectObj.title = ''
if (data.length === 0 && selectTabCheck.id) {
data.push(selectTabCheck.id)
}
setSeachCondition('location', data)
}
@@ -420,12 +442,16 @@ let setHireTypeArr = (type, id) => {
let hireTypeObj = reactive({ id: '', title: '', hireId: '不限' })//出租方式所选
let setHireId = (title) => {
if (hireTypeObj.hireId != title) {
let setHireId = (item) => {
console.log(item)
if (hireTypeObj.hireId != item.title) {
hireTypeObj.id = ''
hireTypeObj.title = ''
}
hireTypeObj.hireId = title
if (item.hireType.length === 0) {
setSeachCondition('types', '')
}
hireTypeObj.hireId = item.title
}
let dropdownCommand = (obj) => {
@@ -442,9 +468,9 @@ let setRent = () => {
}
//清空租金
let cleanRent=()=>{
rentObj.min=''
rentObj.max=''
let cleanRent = () => {
rentObj.min = ''
rentObj.max = ''
setSeachCondition('rent', rentObj)
}
@@ -554,8 +580,9 @@ img {
.housing-pd {
padding: 5px 0 25px 0;
}
.pd-t-25{
padding-top:25px;
.pd-t-25 {
padding-top: 25px;
}
.housing-pd-25 {
@@ -894,7 +921,7 @@ img {
}
.select-num {
padding:0px 10px;
padding: 0px 10px;
background: inherit;
background-color: rgba(80, 227, 194, 1);
border: none;