1248 lines
42 KiB
Vue
1248 lines
42 KiB
Vue
<template>
|
|
<div class="dis-f s-w-100" :style="[routePath === '/seachPage' ? '' : 'border-bottom:1px solid #ebebeb;']">
|
|
<div class="select-box s-w-50 bor-r">
|
|
<div class="dis-f bor-b-das" :class="{ 'al-item housing-pd': routePath === '/needHousing' }">
|
|
<div class="tab-title">{{ routePath === '/needHousing' ? '目标区域' : '地理位置' }}</div>
|
|
<!-- 中介/个人房源页面 -->
|
|
<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="setSelectPosition('region')">按区域</div>
|
|
<div class="btn jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'school' }"
|
|
@click="setSelectPosition('school')">按学校</div>
|
|
</div>
|
|
<div class="select-tab-info">
|
|
<img :src="selectPosition === 'school' ? require('../../assets/homeImage/schoolRegionBg.svg') : require('../../assets/homeImage/checkBG.svg')"
|
|
class="img" alt="">
|
|
<div class="info-box" v-show="selectPosition === 'region'">
|
|
<div class="check-none dis-f al-item" :class="{ 'check-text': selectTabCheck.id === item.id }"
|
|
@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"> > 
|
|
<div
|
|
:class="{ 'check-data': selectData.data && selectData.data.length > 0 && selectData.data.length !== selectTabCheck.data.length }">
|
|
{{
|
|
selectData.data && selectData.data.length ===
|
|
0 || selectData.data.length === selectTabCheck.data.length ? '不限' :
|
|
selectData.data && selectData.data.length
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img src="../../assets/homeImage/selectInfoTabIcon.svg"
|
|
v-show="selectTabCheck.id !== item.id" class="img" alt="">
|
|
<img src="../../assets/homeImage/selectImg.svg" v-show="selectTabCheck.id === item.id"
|
|
class="img" alt="">
|
|
</div>
|
|
<div class="hid-box">
|
|
<checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
|
|
:closeSeach="closeSeach" :clearList="clearSelectTabCheck" :list="selectTabCheck.data"
|
|
ref="checkBoxGroupInfo">
|
|
</checkBoxGroup>
|
|
</div>
|
|
</div>
|
|
<div class="school-info-box" v-show="selectPosition === 'school'">
|
|
<div class="lef-btn" @click="prevSchoolData">
|
|
<img :src="schoolPages === 0 ? require('../../assets/homeImage/selectInfoTabIcon.svg') : require('../../assets/homeImage/selectImg.svg')"
|
|
class="img" alt="">
|
|
</div>
|
|
<div class="right-btn" @click="nextSchoolData">
|
|
<img :src="schoolPages === shcoolData.length - 1 ? require('../../assets/homeImage/selectInfoTabIcon.svg') : require('../../assets/homeImage/selectImg.svg')"
|
|
class="img" alt="">
|
|
</div>
|
|
<el-carousel :autoplay="false" arrow="never" :loop="false" height="50px"
|
|
indicator-position="none" class="s-w-100" ref="schoolData">
|
|
<el-carousel-item v-for="(item, i) in shcoolData" :key="i">
|
|
<div class="school-carousel-box">
|
|
<div v-for="(items, i) in item" :key="items" @click="setSchoolObj(items)"
|
|
class="carousel-info-box"
|
|
:class="[{ 'info-box-check': schoolSelectObj.id === items.id }, { 'mg-r-15': (i + 1) % 9 !== 0 }]">
|
|
{{ items.name }}
|
|
</div>
|
|
</div>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 求房源 -->
|
|
<div class="need-housing-box dis-f al-item" v-if="routePath === '/needHousing'">
|
|
<div class="select-tab-info" style="margin-top:0;">
|
|
<div class="housing-info-box info-box" v-show="selectPosition === 'region'"
|
|
style="position: relative;padding: 0;height:30px;width: 420px;">
|
|
<div class="check-none dis-f al-item btn"
|
|
:class="[{ 'btn-check': selectTabCheck.id === item.id }]" style="margin-right:10px;"
|
|
@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"> > 
|
|
<div :class="{ 'select-num': selectData.data && selectData.data.length }">
|
|
{{
|
|
selectData.data && selectData.data.length ===
|
|
0 || selectData.data.length === selectTabCheck.data.length ? '不限' :
|
|
selectData.data && selectData.data.length
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img :src="selectTabCheck.id === item.id ? require('../../assets/homeImage/dropDownIcon.svg') : require('../../assets/homeImage/selectInfoTabIcon.svg')"
|
|
class="img" :class="{ 'mg-l-30': selectTabCheck.id === item.id }" alt=""
|
|
v-show="i !== 0">
|
|
</div>
|
|
<div class="hid-box">
|
|
<checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
|
|
:closeSeach="closeSeach" :clearList="clearSelectTabCheck" :list="selectTabCheck.data" ref="checkBoxGroupInfo">
|
|
</checkBoxGroup>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dis-f pad-t-b-15 bor-b-das" :class="{ 'housing-pd pd-t-25': routePath === '/needHousing' }">
|
|
<div class="tab-title">{{ routePath === '/needHousing' ? '求租方式' : '出租方式' }}</div>
|
|
<div class="tab-text dis-f al-item" style="padding-bottom:0;">
|
|
<div class="dis-f" v-for="(item, i) in hireTypeArr" :key="i">
|
|
<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)">
|
|
{{ 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')"
|
|
class="img" :class="{ 'mg-l-30': hireTypeObj.hireId === item.title }" alt="">
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu class="pd-10 el-dropdown-menu">
|
|
<el-dropdown-item v-for="(items, j) in item.hireType" :key="j">
|
|
<div class="dropdown-text" @click="dropdownCommand(items)"
|
|
:class="{ 'dropdown-check-text': hireTypeObj.id === items.id }">{{
|
|
items.title
|
|
}}
|
|
<div class="type-icon" v-show="hireTypeObj.id === items.id"></div>
|
|
</div>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</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)">{{
|
|
item.title }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dis-f al-item" style="padding:30px 0;">
|
|
<div class="tab-title">{{ routePath === '/needHousing' ? '租金预算' : '租金' }}</div>
|
|
<div class="dis-f al-item rent-box jus-bet">
|
|
<div class="dis-f al-item">
|
|
<input type="text" class="input" v-model="rentObj.min" @blur="setRent">
|
|
<span class="tab-icon">~</span>
|
|
<input type="text" class="input" v-model="rentObj.max" @blur="setRent">
|
|
<span class="unit-box">HK$/月</span>
|
|
</div>
|
|
<div class="clean-btn dis-f al-item jus-x" v-show="rentObj.min || rentObj.max" @click="cleanRent">
|
|
<div class="dis-f jus-x al-item">
|
|
<img class="img-box" src="@/assets/img/publicImage/round-fork.svg" alt="">
|
|
</div>
|
|
清除金额
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="select-box s-w-50">
|
|
<div class="dis-f bor-b-das">
|
|
<div class="tab-title">租期</div>
|
|
<div class="select-btn-box">
|
|
<div class="dis-f">
|
|
<div class="btn jus-x al-item dis-f" v-for="(item, i) in hireData" :key="i"
|
|
:class="{ 'btn-check': hireDate.id === item.id }" @click="setHireDate(item)">{{ item.title
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dis-f bor-b-das pd-t-20">
|
|
<div class="tab-title">{{ routePath === '/needHousing' ? '求租者性别' : '性别' }}</div>
|
|
<div class="select-btn-box">
|
|
<div class="dis-f">
|
|
<div class="btn jus-x al-item dis-f" v-for="(item, i) in genderData" :key="i"
|
|
:class="{ 'btn-check': gender.id === item.id }" @click="setGender(item)">{{ item.title }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dis-f bor-b-das pd-t-20">
|
|
<div class="tab-title">发布时间</div>
|
|
<div class="select-btn-box">
|
|
<div class="dis-f">
|
|
<div class="dropdown-btn min-btn jus-x al-item dis-f" v-for="(item, i) in releaseTime" :key="i"
|
|
:class="{ 'btn-check': releaseObj.id === item.id }" @click="setReleaseObj(item)">{{
|
|
item.title }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dis-f pd-t-20">
|
|
<div class="tab-title">其他</div>
|
|
<div class="select-btn-box">
|
|
<div class="dis-f">
|
|
<div class="dropdown-btn min-btn jus-x al-item dis-f" v-for="(item, i) in otherData" :key="i">
|
|
<el-checkbox-group v-model="otherCheck.list" @change="setOtherCheck">
|
|
<el-checkbox :label="item.id">{{ item.title }}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="btm-list" v-if="routePath !== '/seachPage'">
|
|
<div class="dis-f al-item">
|
|
共<span class="count">{{ count || 0 }}</span>条
|
|
{{ routePath === '/personHousing' ?
|
|
'个人房源' : routePath === '/intermediaryHousing' ?
|
|
'中介房源' : routePath === '/needHousing' ?
|
|
'求房源' : '' }} <span v-show="selectTabCheck.title && selectTabCheck.id">
|
|
 
|
|
|
|
|
 </span>
|
|
<div class="dis-f al-item">
|
|
<div v-show="selectTabCheck.id && selectTabCheck.title">{{ selectTabCheck.title }}:</div>
|
|
<div class="dis-f" style="flex-wrap: wrap;width:800px;">
|
|
<div v-for="(item, i) in selectData.data" :key="i" class="btm-btn">
|
|
{{ item.title }}
|
|
<img src="../../assets/homeImage/closeIcon.svg" @click="deleteSelect(i)" class="img" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="dis-f al-item sort-text">
|
|
<el-dropdown trigger="click">
|
|
<span class="dis-f al-item sort-text">
|
|
{{ listSort.check }}<img class="img" src="../../assets/homeImage/sortIcon.png" alt="">
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu class="pd-10 el-dropdown-menu">
|
|
<el-dropdown-item v-for="(items, j) in listSort.type" :key="j">
|
|
<div class="dropdown-text" :class="{ 'dropdown-check-text': listSort.checkType === items.type }"
|
|
@click="listSortCheck(items)">{{
|
|
items.title
|
|
}}
|
|
<div class="type-icon" v-show="listSort.checkType === items.type"></div>
|
|
</div>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject, shallowReactive, defineExpose, nextTick } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
|
|
import store from '../../store/index';
|
|
|
|
|
|
//数据包
|
|
let configData = reactive({ data: {} })
|
|
|
|
//保存筛选参数
|
|
// let setStoreSelectData=(obj,data,type)=>{
|
|
// console.log(store.state.seachSelect)
|
|
// // otherCheck['list']
|
|
// // releaseObj.id
|
|
// // gender.id
|
|
// // hireDate.id
|
|
// // hireDate.title
|
|
// // hireTypeObj.id
|
|
// // hireTypeObj.title
|
|
// // hireTypeObj.hireId
|
|
// // selectTabCheck.id
|
|
// // selectTabCheck.title
|
|
// // selectTabCheck.data
|
|
// // selectData.data
|
|
// // schoolSelectObj.id
|
|
// // schoolSelectObj.title
|
|
// }
|
|
|
|
//监听路由
|
|
const route = useRouter()
|
|
let routePath = ref('')
|
|
let routeQuery = reactive({ data: {} })
|
|
routePath.value = route.currentRoute.value.meta.path
|
|
routeQuery.data = route.currentRoute.value.query
|
|
const { proxy } = getCurrentInstance()
|
|
|
|
const props = defineProps({
|
|
setSeachCondition: {
|
|
type: Function
|
|
}
|
|
})
|
|
|
|
let setSeachCondition = props.setSeachCondition
|
|
|
|
//最新发布选项
|
|
let listSort = shallowReactive({
|
|
type: [
|
|
{ title: '最新发布', type: 'timestamp' },
|
|
{ title: '热门', type: 'hotnum' },
|
|
{ title: '价格从低到高', type: 'rentasc' },
|
|
{ title: '价格从高到低', type: 'rentdesc' }
|
|
],
|
|
checkType: 'timestamp',
|
|
check: '最新发布'
|
|
})
|
|
|
|
//列表总数
|
|
const count = inject('count')
|
|
|
|
|
|
let list = shallowReactive([{
|
|
name: '不限',
|
|
id: ''
|
|
}, {
|
|
name: '港岛',
|
|
id: 1,
|
|
data: [] //{title: '上环',id: 1}, {title: '铜锣湾',id: 2}, { title: '天后',id: 3}, {title: '北角',id: 4}
|
|
}, {
|
|
name: '九龙',
|
|
id: 2,
|
|
data: []
|
|
}])
|
|
//设置区域数据
|
|
let setRegionList = () => {
|
|
let arr = store.state.seachTypeData[1] ? JSON.parse(JSON.stringify(store.state.seachTypeData[1].where)) : []
|
|
arr.map((res, i) => {
|
|
list[i] = res
|
|
})
|
|
list.unshift({
|
|
name: '不限',
|
|
id: ''
|
|
})
|
|
// console.log('arr', JSON.stringify(list))
|
|
routerQuerySet()
|
|
// console.log(store.state.seachTypeData)
|
|
}
|
|
|
|
//按区域/学校选择的地区
|
|
let selectData = reactive({ data: [] })
|
|
let selectTabCheck = reactive({
|
|
id: '',
|
|
title: '',
|
|
data: []
|
|
})
|
|
|
|
//区域状态
|
|
let selectPosition = ref('region')
|
|
let showSelect = ref(false)
|
|
|
|
//学校区域状态
|
|
let schoolSelectObj = reactive({ id: '', title: '不限' })
|
|
let schoolPages = ref(0) //页数
|
|
let shcoolData = shallowReactive([])
|
|
let setSchoolData = () => {
|
|
let arr = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : []
|
|
let num = 0
|
|
for (let i = 0; i < arr.length; i++) {
|
|
if (!shcoolData[num]) {
|
|
shcoolData[num] = []
|
|
}
|
|
if (shcoolData[num].length < 9) shcoolData[num].push(arr[i])
|
|
|
|
if (shcoolData[num].length === 9) {
|
|
num++
|
|
}
|
|
}
|
|
}
|
|
|
|
//选择学校区域属性
|
|
let setSchoolObj = (obj) => {
|
|
schoolSelectObj.id = obj.id
|
|
schoolSelectObj.title = obj.title
|
|
selectTabCheck.id = '';
|
|
selectTabCheck.title = '不限'
|
|
selectTabCheck.data = [];
|
|
selectData.data = []
|
|
setSeachCondition('school', obj.id)
|
|
}
|
|
|
|
//学校轮播组件
|
|
let prevSchoolData = () => {
|
|
if (schoolPages.value === 0) return
|
|
const schoolData = proxy.$refs.schoolData
|
|
schoolPages.value--
|
|
schoolData.prev()
|
|
}
|
|
|
|
let nextSchoolData = () => {
|
|
if (schoolPages.value === shcoolData.length - 1) return
|
|
const schoolData = proxy.$refs.schoolData
|
|
schoolPages.value++
|
|
schoolData.next()
|
|
}
|
|
|
|
//设置状态
|
|
let setSelectPosition = (type) => {
|
|
selectPosition.value = type
|
|
}
|
|
|
|
//点击区域/学校选项
|
|
let clearSelectTabCheck = ref(true)
|
|
let setSelectData = (id, data = [], title) => {
|
|
showSelect.value = true
|
|
if (id === selectTabCheck.id) {
|
|
clearSelectTabCheck.value = false
|
|
return
|
|
}
|
|
clearSelectTabCheck.value = true
|
|
selectTabCheck.id = id;
|
|
selectTabCheck.title = title
|
|
selectTabCheck.data = data;
|
|
selectData.data = []
|
|
schoolSelectObj.id = ''
|
|
schoolSelectObj.title = ''
|
|
if (id === '') {
|
|
setSeachCondition('location', [])
|
|
}
|
|
}
|
|
//取消按钮
|
|
let closeSeach = () => {
|
|
// console.log(selectTabCheck,selectData)
|
|
showSelect.value = false
|
|
clearSelectTabCheck.value = false
|
|
}
|
|
//根据地区id查找地区
|
|
let seachAreaId = (data) => {
|
|
let arr = []
|
|
data.map(res => {
|
|
selectTabCheck.data.map(item => {
|
|
if (res === item.id) {
|
|
arr.push(item)
|
|
}
|
|
})
|
|
})
|
|
return arr
|
|
}
|
|
|
|
//设置当前地区选项
|
|
let checkBoxGroupInfo = ref(null)
|
|
let setCheckBoxData = (data) => {
|
|
checkBoxGroupInfo.value && checkBoxGroupInfo.value.setCheckData(data)
|
|
}
|
|
|
|
//确认按钮
|
|
let selectSeach = (data = []) => {
|
|
selectData.data = seachAreaId(data)
|
|
showSelect.value = false
|
|
schoolSelectObj.id = ''
|
|
schoolSelectObj.title = ''
|
|
if (data.length === 0 && selectTabCheck.id) {
|
|
data.push(selectTabCheck.id)
|
|
}
|
|
// console.log(selectData,selectTabCheck)
|
|
// store.state.routeList['hireTypeObj']=JSON.parse(JSON.stringify(hireTypeObj))
|
|
// return
|
|
setSeachCondition('location', data)
|
|
}
|
|
|
|
//底部删除按钮
|
|
let deleteSelect = (i) => {
|
|
let data = []
|
|
selectData.data.splice(i, 1)
|
|
selectData.data.map(res => {
|
|
data.push(res.id)
|
|
})
|
|
checkBoxGroupInfo.value.setCheckData(data)
|
|
setSeachCondition('location', data)
|
|
}
|
|
|
|
//搜索列表排序
|
|
let listSortCheck = (item) => {
|
|
listSort.checkType = item.type
|
|
listSort.check = item.title
|
|
setSeachCondition('orderby', item.type)
|
|
}
|
|
|
|
|
|
|
|
//出租方式
|
|
let hireTypeArr = shallowReactive([{ hireType: [], title: '不限' }, { title: '合租', id: 1, hireType: [] }, { hireType: [], id: 2, title: '整租' }])
|
|
|
|
//设置出租方式
|
|
let setHireTypeArr = (type, id) => {
|
|
let arr = []
|
|
type.map((item, index) => {
|
|
arr.push({
|
|
id: item.id,
|
|
title: item.name
|
|
})
|
|
})
|
|
return arr
|
|
}
|
|
|
|
|
|
let hireTypeObj = reactive({ id: '', title: '', hireId: '不限' })//出租方式所选
|
|
|
|
let setHireId = (item) => {
|
|
if (hireTypeObj.hireId != item.title) {
|
|
hireTypeObj.id = ''
|
|
hireTypeObj.title = ''
|
|
}
|
|
if (item.hireType.length === 0) {
|
|
setSeachCondition('types', '')
|
|
}
|
|
hireTypeObj.hireId = item.title
|
|
}
|
|
|
|
let dropdownCommand = (obj) => {
|
|
hireTypeObj.id = obj.id
|
|
hireTypeObj.title = obj.title
|
|
store.state.routeList['hireTypeObj'] = JSON.parse(JSON.stringify(hireTypeObj))
|
|
setSeachCondition('types', obj.id)
|
|
}
|
|
|
|
//租金
|
|
let rentObj = reactive({ min: '', max: '' })
|
|
|
|
let setRent = () => {
|
|
setSeachCondition('rent', rentObj)
|
|
}
|
|
|
|
//清空租金
|
|
let cleanRent = () => {
|
|
rentObj.min = ''
|
|
rentObj.max = ''
|
|
setSeachCondition('rent', rentObj)
|
|
}
|
|
|
|
//租期
|
|
let hireData = reactive([{ title: '不限', id: 0 }, { title: '一年以上', id: 1 }, { title: '低于一年', id: 2 }])
|
|
let hireDate = reactive({ id: 0, title: '' })
|
|
//设置租期
|
|
let setHireDate = (item) => {
|
|
hireDate.id = item.id
|
|
setSeachCondition('rentalduration', item.id)
|
|
}
|
|
|
|
//性别
|
|
let genderData = reactive([{ title: '不限', id: 0 }, { title: '女', id: 1 }, { title: '男', id: 2 }])
|
|
let gender = reactive({ id: 0 })
|
|
//设置性别
|
|
let setGender = (item) => {
|
|
gender.id = item.id
|
|
setSeachCondition('gender', item.id)
|
|
}
|
|
|
|
//发布时间
|
|
let releaseTime = reactive([{ title: '不限', id: 0 }, { title: '三天', id: 'triduum' }, { title: '一周', id: 'hebdomad' }, { title: '一个月内', id: 'onemonth' }, { title: '两个月内', id: 'twomonth' }, { title: '三个月内', id: 'trimester' }])
|
|
let releaseObj = reactive({ id: 0 })
|
|
|
|
//设置发布时间
|
|
let setReleaseObj = (item) => {
|
|
releaseObj.id = item.id
|
|
setSeachCondition('publish', item.id)
|
|
}
|
|
|
|
//其他
|
|
let otherData = ref([{ title: '认证房源', id: 'isverified' }, { title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }])
|
|
let otherCheck = reactive({ list: [] })
|
|
|
|
//设置其他
|
|
let setOtherCheck = (data) => {
|
|
setSeachCondition('', data)
|
|
}
|
|
|
|
//清除筛选
|
|
let cleanSelect = () => {
|
|
// cleanRent()
|
|
otherCheck['list'] = []
|
|
releaseObj.id = 0
|
|
gender.id = 0
|
|
hireDate.id = 0
|
|
hireDate.title = ''
|
|
hireTypeObj.id = 0
|
|
hireTypeObj.title = ''
|
|
hireTypeObj.hireId = '不限'
|
|
selectTabCheck.id = '';
|
|
selectTabCheck.title = '不限'
|
|
selectTabCheck.data = [];
|
|
selectData.data = []
|
|
schoolSelectObj.id = ''
|
|
schoolSelectObj.title = '不限'
|
|
rentObj.min = ''
|
|
rentObj.max = ''
|
|
// setCheckData([])
|
|
}
|
|
|
|
//查找数据
|
|
let getAddressListId = (id, type) => {
|
|
let data = null
|
|
let checkList = type === 'location' ? list : type === 'types' ? hireTypeArr : type === 'school' ? store.state.seachTypeData[0].where : ''
|
|
let dataId = type === 'types' ? id.substring(0, 1) : id
|
|
checkList.map(res => {
|
|
if (res.id == dataId) {
|
|
if (type === 'types') {
|
|
data = getHireType(res.hireType, id)
|
|
} else {
|
|
data = res
|
|
}
|
|
}
|
|
})
|
|
return data
|
|
}
|
|
|
|
//查找出租类型
|
|
let getHireType = (data, id) => {
|
|
console.log(data)
|
|
let obj = null
|
|
data.map(res => {
|
|
if (res.id == id) obj = res
|
|
})
|
|
return obj
|
|
}
|
|
|
|
//解数据
|
|
let deconstructionData = (data = {}) => {
|
|
//第一个为type
|
|
//type第一个参数为一级区域 第二个参数为二级区域
|
|
let seachData = {}
|
|
let key = Object.keys(data)
|
|
key.map((res, index) => {
|
|
if (index === 0) {//类型
|
|
seachData['type'] = res
|
|
seachData['selectData'] = seachData['type'] === 'location' ? data[res].split(',') : seachData['type'] === 'types' ? getAddressListId(data[res], 'types') : seachData['type'] === 'school' ? getAddressListId(data[res], 'school') : ''
|
|
}
|
|
if (index === 1) {//类型参数
|
|
if (seachData['type'] === 'location') {
|
|
let address = getAddressListId(data[res], 'location')
|
|
seachData['areaItem'] = {}
|
|
seachData['areaItem'].id = address.id
|
|
seachData['areaItem'].name = address.name
|
|
seachData['areaItem'].data = address.data
|
|
}
|
|
}
|
|
if (index === 2) {
|
|
seachData['cotenancy'] = res
|
|
seachData['cotenancyData'] = getAddressListId(data[res], 'types')
|
|
}
|
|
})
|
|
return seachData
|
|
}
|
|
|
|
let deconstructionSeachData = null
|
|
|
|
//根据路由设置参数
|
|
let setRouterQuerySet = ref(true)
|
|
let routerQuerySet = () => {
|
|
if(routePath.value==='/seachPage'){
|
|
deconstructionSeachData = routeQuery.data
|
|
}else{
|
|
deconstructionSeachData = deconstructionData(routeQuery.data)
|
|
}
|
|
//路由参数设置
|
|
if ((deconstructionSeachData.houseingPageType == '1') || (routePath.value === '/intermediaryHousing')) {
|
|
otherData.value = [{ title: '认证中介', id: 'isintermediary' }, { title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }]
|
|
} else if ((routeQuery.data && routeQuery.data.houseingPageType === '6') || (routePath.value === '/needHousing')) {
|
|
otherData.value = [{ title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }]
|
|
} else {
|
|
otherData.value = [{ title: '认证房源', id: 'isverified' }, { title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }]
|
|
}
|
|
if (Object.keys(routeQuery.data).length > 0) {
|
|
if (Object.keys(deconstructionSeachData).length === 0) return
|
|
// let data = deconstructionSeachData.areaItem
|
|
if (deconstructionSeachData.type === 'school') {
|
|
|
|
selectPosition.value = 'school'
|
|
schoolSelectObj.id = deconstructionSeachData.selectData.id
|
|
schoolSelectObj.title = deconstructionSeachData.selectData.name
|
|
setSeachCondition('school', schoolSelectObj.id )
|
|
|
|
} else if (deconstructionSeachData.type === 'types') {
|
|
|
|
let type = deconstructionSeachData.selectData.id.toString().substring(0, 1)
|
|
hireTypeObj.id = deconstructionSeachData.selectData.id
|
|
hireTypeObj.title = deconstructionSeachData.selectData.title
|
|
hireTypeObj.hireId = type == 1 ? '合租' : type == 2 ? '整租' : '不限'
|
|
setSeachCondition('types', hireTypeObj.id )
|
|
|
|
} else if (deconstructionSeachData.type === 'location') {
|
|
|
|
selectTabCheck.id = deconstructionSeachData.areaItem.id;
|
|
selectTabCheck.title = deconstructionSeachData.areaItem.title;
|
|
selectTabCheck.data = deconstructionSeachData.areaItem.data;
|
|
selectData.data = seachAreaId(deconstructionSeachData.selectData)
|
|
|
|
if (deconstructionSeachData.cotenancy) {
|
|
let type = deconstructionSeachData.cotenancyData.id.toString().substring(0, 1)
|
|
hireTypeObj.id = deconstructionSeachData.cotenancyData.id
|
|
hireTypeObj.title = deconstructionSeachData.cotenancyData.title
|
|
hireTypeObj.hireId = type == 1 ? '合租' : type == 2 ? '整租' : '不限'
|
|
}
|
|
console.log(deconstructionSeachData)
|
|
|
|
setSeachCondition('location', deconstructionSeachData.selectData[0]?deconstructionSeachData.selectData:[deconstructionSeachData.areaItem.id],{type:'types',id:hireTypeObj.id} )
|
|
if(deconstructionSeachData.selectData[0])
|
|
nextTick(() => {
|
|
setCheckBoxData(deconstructionSeachData.selectData)//设置地区选项
|
|
|
|
})
|
|
}
|
|
}
|
|
setRouterQuerySet.value = false
|
|
}
|
|
|
|
watchEffect(() => {
|
|
configData.data = store.state.indexData.config
|
|
if (configData.data) {
|
|
hireTypeArr[1].hireType = setHireTypeArr(store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[0].data : [], 1)
|
|
hireTypeArr[2].hireType = setHireTypeArr(store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[1].data : [], 2)
|
|
console.log('route', route)
|
|
if (setRouterQuerySet.value) {
|
|
setRegionList()//设置地区数据
|
|
setSchoolData()//设置学校数据
|
|
}
|
|
}
|
|
})
|
|
|
|
defineExpose({
|
|
cleanSelect,
|
|
routerQuerySet
|
|
})
|
|
</script>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.dis-f {
|
|
display: flex;
|
|
}
|
|
|
|
.jus-x {
|
|
justify-content: center;
|
|
}
|
|
|
|
.al-item {
|
|
align-items: center;
|
|
}
|
|
|
|
.s-w-100 {
|
|
width: 100%;
|
|
}
|
|
|
|
.bor-r {
|
|
border-right: 1px dashed #ebebeb;
|
|
}
|
|
|
|
.s-w-50 {
|
|
width: 50%;
|
|
}
|
|
|
|
img {
|
|
object-fit: contain;
|
|
}
|
|
|
|
.pad-t-b-15 {
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.pd-10 {
|
|
padding: 10px;
|
|
}
|
|
|
|
.bor-b-das {
|
|
border-bottom: 1px dashed #ebebeb;
|
|
}
|
|
|
|
.housing-pd {
|
|
padding: 5px 0 25px 0;
|
|
}
|
|
|
|
.pd-t-25 {
|
|
padding-top: 25px;
|
|
}
|
|
|
|
.housing-pd-25 {
|
|
padding: 0 25px;
|
|
}
|
|
|
|
.jus-bet {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.dropdown-text {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #7F7F7F;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.type-icon {
|
|
width: 6px;
|
|
height: 14px;
|
|
background: inherit;
|
|
background-color: rgba(80, 227, 194, 1);
|
|
border: none;
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
|
|
.el-dropdown-menu {
|
|
width: 150px;
|
|
background: inherit;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
box-sizing: border-box;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: rgba(235, 235, 235, 1);
|
|
border-radius: 10px;
|
|
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
|
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
|
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
|
}
|
|
|
|
.dropdown-check-text {
|
|
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
|
font-weight: 650;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #000000;
|
|
}
|
|
|
|
.select-box {
|
|
padding: 20px 24px 0px 25px;
|
|
|
|
.needHousing-box {
|
|
height: 50px;
|
|
}
|
|
|
|
.select-tab-info {
|
|
position: relative;
|
|
margin-top: 5px;
|
|
|
|
.school-info-box {
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 5px 0px;
|
|
|
|
.school-carousel-box {
|
|
height: 100%;
|
|
padding: 0 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.mg-r-15 {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.carousel-info-box {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #7F7F7F;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.info-box-check {
|
|
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
|
font-weight: 650;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #000000;
|
|
}
|
|
}
|
|
|
|
.lef-btn {
|
|
width: 30px;
|
|
height: 50px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-right: 1px dashed #ebebeb;
|
|
border-left: 1px solid #ebebeb;
|
|
border-top: 1px solid #ebebeb;
|
|
border-bottom: 1px solid #ebebeb;
|
|
background: #fff;
|
|
border-radius: 10px 0 0 10px;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 66;
|
|
|
|
.img {
|
|
width: 10px;
|
|
height: 10px;
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
.right-btn {
|
|
border-left: 1px dashed #ebebeb;
|
|
border-right: 1px solid #ebebeb;
|
|
border-top: 1px solid #ebebeb;
|
|
border-bottom: 1px solid #ebebeb;
|
|
background: #fff;
|
|
border-radius: 0 10px 10px 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 30px;
|
|
height: 50px;
|
|
z-index: 66;
|
|
|
|
.img {
|
|
width: 10px;
|
|
height: 10px;
|
|
transform: rotate(270deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.housing-info-box {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 30px;
|
|
position: relative;
|
|
top: 0 !important;
|
|
}
|
|
|
|
.info-box {
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20px;
|
|
|
|
.hid-box {
|
|
position: absolute;
|
|
z-index: 666;
|
|
left: 0;
|
|
top: 56px;
|
|
width: 100%;
|
|
}
|
|
|
|
.check-text {
|
|
font-family: 'ArialMT', 'Arial', sans-serif;
|
|
font-weight: 600 !important;
|
|
font-style: normal;
|
|
font-size: 13px;
|
|
letter-spacing: normal;
|
|
color: #000 !important;
|
|
vertical-align: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.check-none {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #7F7F7F;
|
|
line-height: 20px;
|
|
vertical-align: none;
|
|
text-align: center;
|
|
line-height: normal;
|
|
text-transform: none;
|
|
margin-right: 30px;
|
|
cursor: pointer;
|
|
|
|
.check-data {
|
|
width: 24px;
|
|
height: 16px;
|
|
background: inherit;
|
|
background-color: rgba(0, 0, 0, 1);
|
|
border: none;
|
|
border-radius: 13px;
|
|
-moz-box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
color: #FFFFFF;
|
|
line-height: 16px;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.img {
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.img {
|
|
width: 459px;
|
|
height: 55px;
|
|
}
|
|
}
|
|
|
|
.tab-title {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #B5B5B5;
|
|
text-align: left;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
margin-right: 35px;
|
|
width: 70px;
|
|
}
|
|
|
|
.info-bor-b {
|
|
border-bottom: 1px dashed #ebebeb;
|
|
}
|
|
|
|
.need-housing-box {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #7F7F7F;
|
|
text-align: center;
|
|
height: 50px;
|
|
}
|
|
|
|
.tab-text {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #7F7F7F;
|
|
text-align: center;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.pd-t-20 {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.select-btn-box {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #7F7F7F;
|
|
text-align: center;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 5px 10px;
|
|
height: 30px;
|
|
display: flex;
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
border-radius: 10px;
|
|
margin-right: 10px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.btn:hover {
|
|
border: 1px solid rgba(235, 235, 235, 1)
|
|
}
|
|
|
|
.dropdown-btn:hover {
|
|
border: 1px solid rgba(235, 235, 235, 1);
|
|
}
|
|
|
|
.dropdown-btn {
|
|
height: 30px;
|
|
display: flex;
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
border-radius: 10px;
|
|
margin-right: 10px;
|
|
text-align: center;
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
|
|
.mg-l-30 {
|
|
margin-left: 30px !important;
|
|
}
|
|
|
|
.img {
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.min-btn {
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.btn-check {
|
|
color: #50E3C2 !important;
|
|
border: 1px solid #50E3C2 !important;
|
|
background: #eefcf9;
|
|
}
|
|
|
|
.select-num {
|
|
padding: 0px 10px;
|
|
background: inherit;
|
|
background-color: rgba(80, 227, 194, 1);
|
|
border: none;
|
|
border-radius: 13px;
|
|
-moz-box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.rent-box {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #555555;
|
|
width: 455px;
|
|
|
|
.clean-btn {
|
|
width: 96px;
|
|
height: 30px;
|
|
background: inherit;
|
|
background-color: rgba(246, 246, 246, 1);
|
|
border: none;
|
|
border-radius: 50px;
|
|
font-family: 'ArialMT', 'Arial', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 13px;
|
|
letter-spacing: normal;
|
|
color: #333333;
|
|
cursor: pointer;
|
|
|
|
.img-box {
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-right: 5px;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.tab-icon {
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.unit-box {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.input {
|
|
width: 100px;
|
|
height: 40px;
|
|
background: inherit;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
box-sizing: border-box;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: rgba(179, 179, 179, 1);
|
|
border-radius: 10px;
|
|
padding: 0 10px;
|
|
}
|
|
}
|
|
|
|
.btm-list {
|
|
padding: 25px 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
color: #555555;
|
|
font-size: 15px;
|
|
|
|
.btm-btn {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #333333;
|
|
margin-left: 10px;
|
|
|
|
.img {
|
|
width: 8px;
|
|
height: 8px;
|
|
margin-left: 8px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.count {
|
|
font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial', sans-serif;
|
|
font-weight: 700;
|
|
color: #000000;
|
|
margin: 0 5px;
|
|
}
|
|
|
|
.sort-text {
|
|
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
|
font-weight: 650;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #000000;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.img {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
/deep/ .el-dropdown-menu__item {
|
|
--el-dropdown-menuItem-hover-color: #7F7F7F;
|
|
--el-dropdown-menuItem-hover-fill: rgba(246, 246, 246, 1);
|
|
}
|
|
|
|
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
|
|
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
|
font-weight: 650;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #000000;
|
|
}
|
|
|
|
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
|
|
background: #50e3c2;
|
|
border-color: #50e3c2;
|
|
}
|
|
</style>
|
|
|