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-17 18:56:30 +08:00
parent 64c4020dbb
commit a198607e0a
4 changed files with 4316 additions and 4186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/seachModule/seachModule.vue
View File

@@ -12,7 +12,7 @@
<div class="triangle"></div> <div class="triangle"></div>
</div> </div>
<div class="dis-f al-item pos-r"> <div class="dis-f al-item pos-r">
<el-input v-model="seachValue" placeholder="搜索房源或输入房源ID" @keyup.enter='seachList' <el-input v-model="seachAllType.seachValue" placeholder="搜索房源或输入房源ID" @keyup.enter='seachList'
@blur="setHistoryShow" @focus="setHistoryShow" style="height:48px;width:460px;"></el-input> @blur="setHistoryShow" @focus="setHistoryShow" style="height:48px;width:460px;"></el-input>
<div class="seach-btn dis-f al-item jus-x" @click="seachList"> <div class="seach-btn dis-f al-item jus-x" @click="seachList">
<img src="../../assets/homeImage/seachImg.svg" class="img" alt=""> <img src="../../assets/homeImage/seachImg.svg" class="img" alt="">
@@ -24,7 +24,7 @@
<div class="title"> <div class="title">
历史搜索 历史搜索
</div> </div>
<div class="info-box"> <div class="info-box" @click="setSeachVal(item)">
<div v-for="(item, i) in historyArr.data" :key="i" class="btn"> <div v-for="(item, i) in historyArr.data" :key="i" class="btn">
{{ item }} {{ item }}
</div> </div>
@@ -74,9 +74,8 @@
</div> </div>
<!-- --> <!-- -->
<div <div
v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing' || routePath === '/needHousing'" :count="counti"> v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing' || routePath === '/needHousing'">
<selectTabBox></selectTabBox> <selectTabBox :setSeachCondition="setSeachConditions"></selectTabBox>
{{ counti }}
</div> </div>
</div> </div>
</div> </div>
@@ -92,16 +91,18 @@ import { useRoute } from 'vue-router';
import store from '../../store/index'; import store from '../../store/index';
import api from "../../utils/api"; import api from "../../utils/api";
const props=defineProps({ const props = defineProps({
count:{ getDataList: {
type:Number, type: Function
default:0
} }
}) })
let counti = ref(0)
//数据包
let configData = store.state.indexData.config
let getDataList = props.getDataList
//搜索框 //搜索框
let seachValue = ref('')
let historyShow = ref(false); let historyShow = ref(false);
let setHistoryShow = () => { let setHistoryShow = () => {
historyShow.value = !historyShow.value historyShow.value = !historyShow.value
@@ -112,6 +113,12 @@ let allHireType = {};//合租
let seachArea = {};//区域找房 let seachArea = {};//区域找房
let historyArr = reactive({ data: [] })//历史查找记录 let historyArr = reactive({ data: [] })//历史查找记录
let hotArr = reactive({ data: [] }) let hotArr = reactive({ data: [] })
let seachAllType = reactive({
seachValue: '',
location: [],
types: ''
})
//获取区域下列数据 //获取区域下列数据
let getLocationData = (data) => { let getLocationData = (data) => {
@@ -138,7 +145,6 @@ watchEffect(() => {
seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : [] seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
if (seachArea.data.length > 0 && !seachArea.data[0].data) getLocationData(store.state.indexData.config.location) if (seachArea.data.length > 0 && !seachArea.data[0].data) getLocationData(store.state.indexData.config.location)
hotArr.data = store.state.indexData.hotSearcheWords hotArr.data = store.state.indexData.hotSearcheWords
counti.value=props.count
}) })
//获取历史搜索记录 //获取历史搜索记录
@@ -146,14 +152,39 @@ historyArr.data = JSON.parse(localStorage.getItem('historyArr')) || []
//搜索数据 //搜索数据
let seachList = () => { let seachList = () => {
console.log()
let data = {
searchid: seachAllType.seachValue,
types: ''
}
localStorage.setItem('historyArr', JSON.stringify(historyArr.data)); localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
getDataList(data)
}
//设置搜索数据
let setSeachConditions = (type, data) => {
if (type === 'rent') {
seachAllType['rent_min'] = data.min
seachAllType['rent_max'] = data.max
} else if(type!==''){
seachAllType[type] = data
}else if(type===''){
data.indexOf('isverified')!==-1?seachAllType['isverified']=1:seachAllType['isverified']=0
data.indexOf('iselevator')!==-1?seachAllType['iselevator']=1:seachAllType['iselevator']=0
data.indexOf('issunshinearea')!==-1?seachAllType['issunshinearea']=1:seachAllType['issunshinearea']=0
}
console.log(seachAllType)
}
//点击历史搜索记录
let setSeachVal = (item) => {
seachAllType.seachValue = item
seachList()
} }
defineExpose({ defineExpose({
historyShow, historyShow
seachValue
}) })
</script> </script>
<style scoped> <style scoped>

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

@@ -1,10 +1,10 @@
<template> <template>
<div class="dis-f s-w-100" style="border-bottom:1px solid #ebebeb;"> <div class="dis-f s-w-100" style="border-bottom:1px solid #ebebeb;">
<div class="select-box s-w-50 bor-r"> <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="dis-f bor-b-das" :class="{ 'al-item housing-pd': routePath === '/needHousing' }">
<div class="tab-title">{{routePath==='/needHousing'?'目标区域':'地理位置'}}</div> <div class="tab-title">{{ routePath === '/needHousing' ? '目标区域' : '地理位置' }}</div>
<!-- 中介/个人房源页面 --> <!-- 中介/个人房源页面 -->
<div class="tab-text" v-if="routePath!=='/needHousing'"> <div class="tab-text" v-if="routePath !== '/needHousing'">
<div class="dis-f"> <div class="dis-f">
<div class="btn jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'region' }" <div class="btn jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'region' }"
@click="selectPosition = 'region'">按区域</div> @click="selectPosition = 'region'">按区域</div>
@@ -16,8 +16,8 @@
class="img" alt=""> class="img" alt="">
<div class="info-box" v-show="selectPosition === 'region'"> <div class="info-box" v-show="selectPosition === 'region'">
<div class="check-none dis-f al-item" :class="{ 'check-text': selectTabCheck.id === item.id }" <div class="check-none dis-f al-item" :class="{ 'check-text': selectTabCheck.id === item.id }"
@click="setSelectData(item.id, item.data, item.title)" v-for="(item, i) in list" :key="i"> @click="setSelectData(item.id, item.data, item.name)" v-for="(item, i) in list" :key="i">
<div class="dis-f al-item">{{ item.title }} <div class="dis-f al-item" <div class="dis-f al-item">{{ item.name }} <div class="dis-f al-item"
v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp > &nbsp v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp > &nbsp
<div :class="{ 'check-data': selectData.data && selectData.data.length > 0 }"> <div :class="{ 'check-data': selectData.data && selectData.data.length > 0 }">
{{ {{
@@ -34,7 +34,7 @@
</div> </div>
<div class="hid-box"> <div class="hid-box">
<checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach" <checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
:closeSeach="closeSeach" :list="selectTabCheck.data" :watchData="watchData"> :closeSeach="closeSeach" :list="selectTabCheck.data">
</checkBoxGroup> </checkBoxGroup>
</div> </div>
</div> </div>
@@ -44,7 +44,7 @@
class="img" alt=""> class="img" alt="">
</div> </div>
<div class="right-btn" @click="nextSchoolData"> <div class="right-btn" @click="nextSchoolData">
<img :src="schoolPages === shcoolData.length ? require('../../assets/homeImage/selectInfoTabIcon.svg') : require('../../assets/homeImage/selectImg.svg')" <img :src="schoolPages === shcoolData.length-1 ? require('../../assets/homeImage/selectInfoTabIcon.svg') : require('../../assets/homeImage/selectImg.svg')"
class="img" alt=""> class="img" alt="">
</div> </div>
<el-carousel :autoplay="false" arrow="never" :loop="false" height="50px" <el-carousel :autoplay="false" arrow="never" :loop="false" height="50px"
@@ -53,8 +53,8 @@
<div class="school-carousel-box"> <div class="school-carousel-box">
<div v-for="(items, i) in item" :key="items" @click="setSchoolObj(items)" <div v-for="(items, i) in item" :key="items" @click="setSchoolObj(items)"
class="carousel-info-box" class="carousel-info-box"
:class="[{ 'info-box-check': schoolSelectObj.title === items.title }, { 'mg-r-15': (i + 1) % 9 !== 0 }]"> :class="[{ 'info-box-check': schoolSelectObj.id === items.id }, { 'mg-r-15': (i + 1) % 9 !== 0 }]">
{{ items.title }} {{ items.name }}
</div> </div>
</div> </div>
</el-carousel-item> </el-carousel-item>
@@ -63,12 +63,12 @@
</div> </div>
</div> </div>
<!-- 求房源 --> <!-- 求房源 -->
<div class="need-housing-box dis-f al-item" v-if="routePath==='/needHousing'"> <div class="need-housing-box dis-f al-item" v-if="routePath === '/needHousing'">
<div class="select-tab-info" style="margin-top:0;"> <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="housing-info-box info-box" v-show="selectPosition === 'region'"
<div class="check-none dis-f al-item btn" style="position: relative;padding: 0;height:30px;width: 420px;">
:class="[{'btn-check':selectTabCheck.id === item.id}]" <div class="check-none dis-f al-item btn"
style="margin-right:10px;" :class="[{ 'btn-check': selectTabCheck.id === item.id }]" style="margin-right:10px;"
@click="setSelectData(item.id, item.data, item.title)" v-for="(item, i) in list" :key="i"> @click="setSelectData(item.id, item.data, item.title)" v-for="(item, i) in list" :key="i">
<div class="dis-f al-item">{{ item.title }} <div class="dis-f al-item" <div class="dis-f al-item">{{ item.title }} <div class="dis-f al-item"
v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp > &nbsp v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp > &nbsp
@@ -81,19 +81,20 @@
</div> </div>
</div> </div>
<img :src="selectTabCheck.id === item.id ? require('../../assets/homeImage/dropDownIcon.svg') : require('../../assets/homeImage/selectInfoTabIcon.svg')" <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"> class="img" :class="{ 'mg-l-30': selectTabCheck.id === item.id }" alt=""
v-show="i !== 0">
</div> </div>
<div class="hid-box"> <div class="hid-box">
<checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach" <checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
:closeSeach="closeSeach" :list="selectTabCheck.data" :watchData="watchData"> :closeSeach="closeSeach" :list="selectTabCheck.data">
</checkBoxGroup> </checkBoxGroup>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="dis-f pad-t-b-15 bor-b-das" :class="{'housing-pd':routePath==='/needHousing'}"> <div class="dis-f pad-t-b-15 bor-b-das" :class="{ 'housing-pd': routePath === '/needHousing' }">
<div class="tab-title">{{routePath==='/needHousing'?'求租方式':'出租方式'}}</div> <div class="tab-title">{{ routePath === '/needHousing' ? '求租方式' : '出租方式' }}</div>
<div class="tab-text dis-f al-item" style="padding-bottom:0;"> <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 class="dis-f" v-for="(item, i) in hireTypeArr" :key="i">
<div v-if="item.title !== '不限'"> <div v-if="item.title !== '不限'">
@@ -127,15 +128,15 @@
</div> </div>
</div> </div>
<div class="dis-f al-item" style="padding:25px 0;"> <div class="dis-f al-item" style="padding:25px 0;">
<div class="tab-title">{{routePath==='/needHousing'?'租金预算':'租金'}}</div> <div class="tab-title">{{ routePath === '/needHousing' ? '租金预算' : '租金' }}</div>
<div class="dis-f al-item rent-box jus-bet"> <div class="dis-f al-item rent-box jus-bet">
<div class="dis-f al-item"> <div class="dis-f al-item">
<input type="text" class="input" v-model="rentObj.min"> <input type="text" class="input" v-model="rentObj.min" @blur="setRent">
<span class="tab-icon">~</span> <span class="tab-icon">~</span>
<input type="text" class="input" v-model="rentObj.max"> <input type="text" class="input" v-model="rentObj.max" @blur="setRent">
<span class="unit-box">HK$/月</span> <span class="unit-box">HK$/月</span>
</div> </div>
<div class="clean-btn dis-f al-item jus-x" v-show="rentObj.min||rentObj.max"> <div class="clean-btn dis-f al-item jus-x" v-show="rentObj.min || rentObj.max">
<div class="img-box dis-f jus-x al-item"> <div class="img-box dis-f jus-x al-item">
<img class="img" src="../../assets/homeImage/closeIcon.svg" alt=""> <img class="img" src="../../assets/homeImage/closeIcon.svg" alt="">
</div> </div>
@@ -150,18 +151,18 @@
<div class="select-btn-box"> <div class="select-btn-box">
<div class="dis-f"> <div class="dis-f">
<div class="btn jus-x al-item dis-f" v-for="(item, i) in hireData" :key="i" <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="hireDate.id = item.id">{{ item.title :class="{ 'btn-check': hireDate.id === item.id }" @click="setHireDate(item)">{{ item.title
}} }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="dis-f bor-b-das pd-t-20"> <div class="dis-f bor-b-das pd-t-20">
<div class="tab-title">{{routePath==='/needHousing'?'求租者性别':'性别'}}</div> <div class="tab-title">{{ routePath === '/needHousing' ? '求租者性别' : '性别' }}</div>
<div class="select-btn-box"> <div class="select-btn-box">
<div class="dis-f"> <div class="dis-f">
<div class="btn jus-x al-item dis-f" v-for="(item, i) in genderData" :key="i" <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="gender.id = item.id">{{ item.title }} :class="{ 'btn-check': gender.id === item.id }" @click="setGender(item)">{{ item.title }}
</div> </div>
</div> </div>
</div> </div>
@@ -171,7 +172,7 @@
<div class="select-btn-box"> <div class="select-btn-box">
<div class="dis-f"> <div class="dis-f">
<div class="dropdown-btn min-btn jus-x al-item dis-f" v-for="(item, i) in releaseTime" :key="i" <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="releaseObj.id = item.id">{{ :class="{ 'btn-check': releaseObj.id === item.id }" @click="setReleaseObj(item)">{{
item.title }} item.title }}
</div> </div>
</div> </div>
@@ -182,7 +183,7 @@
<div class="select-btn-box"> <div class="select-btn-box">
<div class="dis-f"> <div class="dis-f">
<div class="dropdown-btn min-btn jus-x al-item dis-f" v-for="(item, i) in otherData" :key="i"> <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"> <el-checkbox-group v-model="otherCheck.list" @change="setOtherCheck">
<el-checkbox :label="item.id">{{ item.title }}</el-checkbox> <el-checkbox :label="item.id">{{ item.title }}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
@@ -193,9 +194,12 @@
</div> </div>
<div class="btm-list"> <div class="btm-list">
<div class="dis-f al-item"> <div class="dis-f al-item">
共<span class="count">{{ counti }}</span>条个人房源 <span v-show="selectTabCheck.title&&selectTabCheck.id"> &nbsp | &nbsp</span> 共<span class="count">{{ count || 0 }}</span>条个人房源 <span v-show="selectTabCheck.title && selectTabCheck.id">
&nbsp
|
&nbsp</span>
<div class="dis-f al-item"> <div class="dis-f al-item">
<div v-show="selectTabCheck.id&&selectTabCheck.title">{{ selectTabCheck.title }}:</div> <div v-show="selectTabCheck.id && selectTabCheck.title">{{ selectTabCheck.title }}:</div>
<div v-for="(item, i) in selectData.data" :key="i" class="btm-btn"> <div v-for="(item, i) in selectData.data" :key="i" class="btm-btn">
{{ item.title }} {{ item.title }}
<img src="../../assets/homeImage/closeIcon.svg" @click="deleteSelect(i)" class="img" alt=""> <img src="../../assets/homeImage/closeIcon.svg" @click="deleteSelect(i)" class="img" alt="">
@@ -203,66 +207,86 @@
</div> </div>
</div> </div>
<span class="dis-f al-item sort-text"> <span class="dis-f al-item sort-text">
最新发布 <el-dropdown trigger="click">
<img class="img" src="../../assets/homeImage/sortIcon.png" alt=""> <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" @click="listSortCheck(items)">
<div class="dropdown-text"
:class="{ 'dropdown-check-text': listSort.checkType === items.type }">{{
items.title
}}
<div class="type-icon" v-show="listSort.checkType === items.type"></div>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</span> </span>
</div> </div>
</template> </template>
<script setup> <script setup>
import { reactive, ref, getCurrentInstance,defineProps,watchEffect } from 'vue'; import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject,shallowReactive } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue"; import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
import store from '../../store/index';
//数据包
let configData = reactive({ data: {} })
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
const props=defineProps({ const props = defineProps({
count:{ setSeachCondition:{
type:Number, type:Function
default:0
} }
}) })
//当前数据数量 let setSeachCondition=props.setSeachCondition
let counti = ref(0)
watchEffect(()=>{ //最新发布选项
counti.value=props.count let listSort = shallowReactive({
console.log(counti.value) type: [
{ title: '最新发布', type: 'new' },
{ title: '热门', type: 'hot' },
{ title: '价格从低到高', type: 'sort' },
{ title: '加个从高到低' }
],
checkType: 'new',
check: '最新发布'
}) })
let list = [{ //列表总数
title: '不限', const count = inject('count')
let list = shallowReactive([{
name: '不限',
id: '' id: ''
}, { }, {
title: '港岛', name: '港岛',
id: 1, id: 1,
data: [{ data: [] //{title: '上环',id: 1}, {title: '铜锣湾',id: 2}, { title: '天后',id: 3}, {title: '北角',id: 4}
title: '上环',
id: 1
}, {
title: '铜锣湾',
id: 2
}, {
title: '天后',
id: 3
}, {
title: '北角',
id: 4
}]
}, { }, {
title: '九龙', name: '九龙',
id: 2, id: 2,
data: [{ data: []
title: '1', }])
id: '1' //设置区域数据
}, { let setRegionList=()=>{
title: '2', let arr=store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
id: '2' arr.map((res,i)=>{
}, { list[i]=res
title: '3', })
id: '3' list.unshift({
}] name:'不限',
}] id:''
})
}
//按区域/学校选择的地区 //按区域/学校选择的地区
let selectData = reactive({ data: [] }) let selectData = reactive({ data: [] })
let selectTabCheck = reactive({ let selectTabCheck = reactive({
@@ -270,6 +294,7 @@ let selectTabCheck = reactive({
title: '', title: '',
data: [] data: []
}) })
//区域状态 //区域状态
let selectPosition = ref('region') let selectPosition = ref('region')
let showSelect = ref(false) let showSelect = ref(false)
@@ -277,37 +302,39 @@ let showSelect = ref(false)
//学校区域状态 //学校区域状态
let schoolSelectObj = reactive({ id: '', title: '不限' }) let schoolSelectObj = reactive({ id: '', title: '不限' })
let schoolPages = ref(0) //页数 let schoolPages = ref(0) //页数
let shcoolData = [{ title: '不限' }, { title: '港大' }, { title: '科大' }, { title: '中大' }, { title: '城大' }, { title: '理工' }, { title: '浸会' }, { title: '教大' }, { title: '岭南' }, { title: '123' }, { title: '123' },] let shcoolData = shallowReactive([])
let setSchoolData = () => { let setSchoolData = () => {
let arr = [] let arr = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : []
let num = 0 let num = 0
for (let i = 0; i < shcoolData.length; i++) { for (let i = 0; i < arr.length; i++) {
if (!arr[num]) { if (!shcoolData[num]) {
arr[num] = [] shcoolData[num] = []
} }
if (arr[num].length < 9) arr[num].push(shcoolData[i]) if (shcoolData[num].length < 9) shcoolData[num].push(arr[i])
if (arr[num].length === 9) { if (shcoolData[num].length === 9) {
num++ num++
} }
} }
shcoolData = arr
} }
setSchoolData()
//选择学校区域属性 //选择学校区域属性
let setSchoolObj = (obj) => { let setSchoolObj = (obj) => {
schoolSelectObj.id = obj.id schoolSelectObj.id = obj.id
schoolSelectObj.title = obj.title schoolSelectObj.title = obj.title
setSeachCondition('school',obj.id)
} }
//学校轮播组件 //学校轮播组件
let prevSchoolData = () => { let prevSchoolData = () => {
if(schoolPages.value===0)return
const schoolData = proxy.$refs.schoolData const schoolData = proxy.$refs.schoolData
schoolPages.value-- schoolPages.value--
schoolData.prev() schoolData.prev()
} }
let nextSchoolData = () => { let nextSchoolData = () => {
if(schoolPages.value === shcoolData.length-1)return
const schoolData = proxy.$refs.schoolData const schoolData = proxy.$refs.schoolData
schoolPages.value++ schoolPages.value++
schoolData.next() schoolData.next()
@@ -329,7 +356,7 @@ let closeSeach = () => {
} }
//确认按钮 //确认按钮
let selectSeach = (data = []) => { let selectSeach = (data = []) => {
let arr = [] let arr=[]
data.map(res => { data.map(res => {
selectTabCheck.data.map(item => { selectTabCheck.data.map(item => {
if (res === item.id) { if (res === item.id) {
@@ -339,12 +366,9 @@ let selectSeach = (data = []) => {
}) })
selectData.data = arr selectData.data = arr
showSelect.value = false showSelect.value = false
setSeachCondition('location',data)
} }
//监听选项
let watchData = (data) => {
// selectData.data = data
// console.log(selectData)
}
//监听路由 //监听路由
const route = useRoute() const route = useRoute()
@@ -356,44 +380,109 @@ let deleteSelect = (id) => {
selectData.data.splice(id, 1) selectData.data.splice(id, 1)
} }
//搜索列表排序
let listSortCheck = (item) => {
listSort.checkType = item.type
listSort.check = item.title
}
//出租方式 //出租方式
let hireTypeArr = reactive([ let hireTypeArr = shallowReactive([{ hireType: [], title: '不限' }, { title: '合租', hireType: [] }, { hireType: [], title: '整租' }])
{ hireType: [], title: '不限' }, // { hireType: [{ id: '', title: '不限' }, { id: '1', title: '独卫套房' }, { id: '2', title: '房间' },], title: '合租' },
{ hireType: [{ id: '', title: '不限' }, { id: '1', title: '独卫套房' }, { id: '2', title: '房间' },], title: '合租' }, // { hireType: [{ id: '', title: '不限' }, { id: '3', title: '3' }, { id: '4', title: '3' },], title: '整租' }
{ hireType: [{ id: '', title: '不限' }, { id: '3', title: '3' }, { id: '4', title: '3' },], 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 hireTypeObj = reactive({ id: '', title: '', hireId: '不限' })//出租方式所选
let setHireId = (title) => { let setHireId = (title) => {
if(hireTypeObj.hireId != title){
hireTypeObj.id = ''
hireTypeObj.title = ''
}
hireTypeObj.hireId = title hireTypeObj.hireId = title
hireTypeObj.id = ''
hireTypeObj.title = ''
} }
let dropdownCommand = (obj) => { let dropdownCommand = (obj) => {
hireTypeObj.id = obj.id hireTypeObj.id = obj.id
hireTypeObj.title = obj.title hireTypeObj.title = obj.title
setSeachCondition('types',obj.id)
} }
//租金 //租金
let rentObj = reactive({ min: '', max: '' }) let rentObj = reactive({ min: '', max: '' })
let setRent=()=>{
setSeachCondition('rent',rentObj)
}
//租期 //租期
let hireData = reactive([{ title: '不限', id: '' }, { title: '一年以上', id: 1 }, { title: '低于一年', id: 2 }]) let hireData = reactive([{ title: '不限', id: 0 }, { title: '一年以上', id: 1 }, { title: '低于一年', id: 2 }])
let hireDate = reactive({ id: '', title: '' }) let hireDate = reactive({ id: 0, title: '' })
//设置租期
let setHireDate = (item)=>{
hireDate.id = item.id
setSeachCondition('rentalduration',item.id)
}
//性别 //性别
let genderData = reactive([{ title: '不限', id: '' }, { title: '女', id: 1 }, { title: '男', id: 2 }]) let genderData = reactive([{ title: '不限', id: 0 }, { title: '女', id: 1 }, { title: '男', id: 2 }])
let gender = reactive({ id: '' }) let gender = reactive({ id: 0 })
//设置性别
let setGender=(item)=>{
gender.id = item.id
setSeachCondition('gender',item.id)
}
//发布时间 //发布时间
let releaseTime = reactive([{ title: '不限', id: '' }, { title: '三天', id: 1 }, { title: '一周', id: 2 }, { title: '一个月内', id: 3 }, { title: '两个月内', id: 4 }, { title: '三个月内', id: 5 }]) 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: '' }) let releaseObj = reactive({ id: 0 })
//设置发布时间
let setReleaseObj=(item)=>{
releaseObj.id = item.id
setSeachCondition('publish',item.id)
}
//其他 //其他
let otherData = reactive([{ title: '认证房源', id: '' }, { title: '有电梯', id: 1 }, { title: '有阳台', id: 2 }]) let otherData = reactive([{ title: '认证房源', id: 'isverified' }, { title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }])
let otherCheck = reactive({ list: [] }) let otherCheck = reactive({ list: [] })
//设置其他
let setOtherCheck=(data)=>{
// data.indexOf('isverified')!==-1?setSeachCondition('isverified',1):setSeachCondition('isverified',0)
// data.indexOf('iselevator')!==-1?setSeachCondition('iselevator',1):setSeachCondition('iselevator',0)
// data.indexOf('issunshinearea')!==-1?setSeachCondition('issunshinearea',1):setSeachCondition('issunshinearea',0)
setSeachCondition('',data)
}
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)
setRegionList()//设置地区数据
setSchoolData()//设置学校数据
// list
// seachSchoolBtn.data = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : []
// hireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[0].data : []
// allHireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[1].data : []
// seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
}
})
</script> </script>
<script> <script>
export default { export default {
@@ -442,11 +531,13 @@ img {
.bor-b-das { .bor-b-das {
border-bottom: 1px dashed #ebebeb; border-bottom: 1px dashed #ebebeb;
} }
.housing-pd{
padding:5px 0 25px 0; .housing-pd {
padding: 5px 0 25px 0;
} }
.housing-pd-25{
padding:0 25px; .housing-pd-25 {
padding: 0 25px;
} }
.jus-bet { .jus-bet {
@@ -501,8 +592,8 @@ img {
.select-box { .select-box {
padding: 20px 24px 0px 25px; padding: 20px 24px 0px 25px;
.needHousing-box{ .needHousing-box {
height:50px; height: 50px;
} }
.select-tab-info { .select-tab-info {
@@ -597,12 +688,12 @@ img {
} }
} }
.housing-info-box{ .housing-info-box {
display: flex; display: flex;
align-items: center; align-items: center;
height:30px; height: 30px;
position: relative; position: relative;
top:0 !important; top: 0 !important;
} }
.info-box { .info-box {
@@ -693,14 +784,15 @@ img {
.info-bor-b { .info-bor-b {
border-bottom: 1px dashed #ebebeb; border-bottom: 1px dashed #ebebeb;
} }
.need-housing-box{
.need-housing-box {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 14px; font-size: 14px;
color: #7F7F7F; color: #7F7F7F;
text-align: center; text-align: center;
height:50px; height: 50px;
} }
.tab-text { .tab-text {
@@ -836,7 +928,7 @@ img {
border-style: solid; border-style: solid;
border-color: rgba(179, 179, 179, 1); border-color: rgba(179, 179, 179, 1);
border-radius: 10px; border-radius: 10px;
padding:0 10px; padding: 0 10px;
} }
} }
@@ -854,7 +946,7 @@ img {
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 14px; font-size: 14px;
color: #50e3c2; color: #333333;
margin-left: 10px; margin-left: 10px;
.img { .img {
@@ -878,6 +970,7 @@ img {
font-size: 14px; font-size: 14px;
color: #000000; color: #000000;
text-align: center; text-align: center;
cursor: pointer;
} }
.img { .img {

20
src/views/housingView/person.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<pageTopBar></pageTopBar> <pageTopBar></pageTopBar>
<seachModule :count="dataList.count"></seachModule> <seachModule :count="dataList.count" :getDataList="getDataList"></seachModule>
<div class="dis-f jus-x al-item"> <div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35"> <div class="body-maxWidth mg-t-35">
<div class="dis-f jus-bet"> <div class="dis-f jus-bet">
@@ -19,7 +19,7 @@
</template> </template>
<script setup> <script setup>
import {reactive,onMounted,ref} from 'vue' import {reactive,onMounted,ref,provide} from 'vue'
import pageTopBar from '../../components/pageTopBar/pageTopBar.vue'; import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
import seachModule from "../../components/seachModule/seachModule.vue"; import seachModule from "../../components/seachModule/seachModule.vue";
import biserialItem from '../../components/biserialListItem/biserialListItem.vue' import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
@@ -28,19 +28,25 @@ import api from "../../utils/api";
//获取数据 //获取数据
let pages=ref(1) let pages=ref(1)
let dataList= reactive({data:[],count:0}) let dataList= reactive({data:[],count:0})
let dataCount=ref(0)
let pageList=reactive({1:[],2:[],height1:0,height2:0,tab:2}) let pageList=reactive({1:[],2:[],height1:0,height2:0,tab:2})
let getDataList=()=>{ provide('count', dataCount)
let getDataList=(data)=>{
let postData={ let postData={
page:pages.value page:pages.value,
...data
} }
api.getLists(postData).then(res=>{ api.getLists(postData).then(res=>{
console.log(res.data) console.log(res.data)
if(res.code===200){ if(res.code===200){
dataList.count=res.data.count dataList.count=res.data.count
dataCount.value=res.data.count
dataList.data=res.data dataList.data=res.data
console.log(dataList.data) // console.log(dataList.data)
pageList[1].push(dataList.data.data[0]) pageList[1].push(dataList.data.data[0])
pageList[2].push(dataList.data.data[1]) pageList[2].push(dataList.data.data[1])
}else{
ElMessage(res.message)
} }
}) })
} }
@@ -50,7 +56,7 @@ let addListData=()=>{
let num=null let num=null
if(pageList.tab>=19)return if(pageList.tab>=19)return
++pageList.tab ++pageList.tab
console.log(pageList.height1,pageList.height2) // console.log(pageList.height1,pageList.height2)
if(pageList.height1>pageList.height2){ if(pageList.height1>pageList.height2){
num=2 num=2
}else{ }else{
@@ -61,7 +67,7 @@ let addListData=()=>{
//监听图片加载 //监听图片加载
let watchImgLoad=(id,listId,height)=>{ let watchImgLoad=(id,listId,height)=>{
console.log(listId,height) // console.log(listId,height)
pageList[`height${listId}`]+=height pageList[`height${listId}`]+=height
// console.log(pageList) // console.log(pageList)
addListData() addListData()

8108
yarn.lock
View File

File diff suppressed because it is too large Load Diff