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

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

@@ -12,7 +12,7 @@
<div class="triangle"></div>
</div>
<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>
<div class="seach-btn dis-f al-item jus-x" @click="seachList">
<img src="../../assets/homeImage/seachImg.svg" class="img" alt="">
@@ -24,7 +24,7 @@
<div class="title">
历史搜索
</div>
<div class="info-box">
<div class="info-box" @click="setSeachVal(item)">
<div v-for="(item, i) in historyArr.data" :key="i" class="btn">
{{ item }}
</div>
@@ -74,9 +74,8 @@
</div>
<!-- -->
<div
v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing' || routePath === '/needHousing'" :count="counti">
<selectTabBox></selectTabBox>
{{ counti }}
v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing' || routePath === '/needHousing'">
<selectTabBox :setSeachCondition="setSeachConditions"></selectTabBox>
</div>
</div>
</div>
@@ -93,15 +92,17 @@ import store from '../../store/index';
import api from "../../utils/api";
const props = defineProps({
count:{
type:Number,
default:0
getDataList: {
type: Function
}
})
let counti = ref(0)
//数据包
let configData = store.state.indexData.config
let getDataList = props.getDataList
//搜索框
let seachValue = ref('')
let historyShow = ref(false);
let setHistoryShow = () => {
historyShow.value = !historyShow.value
@@ -112,6 +113,12 @@ let allHireType = {};//合租
let seachArea = {};//区域找房
let historyArr = reactive({ data: [] })//历史查找记录
let hotArr = reactive({ data: [] })
let seachAllType = reactive({
seachValue: '',
location: [],
types: ''
})
//获取区域下列数据
let getLocationData = (data) => {
@@ -138,7 +145,6 @@ watchEffect(() => {
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)
hotArr.data = store.state.indexData.hotSearcheWords
counti.value=props.count
})
//获取历史搜索记录
@@ -146,14 +152,39 @@ historyArr.data = JSON.parse(localStorage.getItem('historyArr')) || []
//搜索数据
let seachList = () => {
console.log()
let data = {
searchid: seachAllType.seachValue,
types: ''
}
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({
historyShow,
seachValue
historyShow
})
</script>
<style scoped>

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

@@ -16,8 +16,8 @@
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.title)" v-for="(item, i) in list" :key="i">
<div class="dis-f al-item">{{ item.title }} <div class="dis-f al-item"
@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="{ 'check-data': selectData.data && selectData.data.length > 0 }">
{{
@@ -34,7 +34,7 @@
</div>
<div class="hid-box">
<checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
:closeSeach="closeSeach" :list="selectTabCheck.data" :watchData="watchData">
:closeSeach="closeSeach" :list="selectTabCheck.data">
</checkBoxGroup>
</div>
</div>
@@ -44,7 +44,7 @@
class="img" alt="">
</div>
<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="">
</div>
<el-carousel :autoplay="false" arrow="never" :loop="false" height="50px"
@@ -53,8 +53,8 @@
<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.title === items.title }, { 'mg-r-15': (i + 1) % 9 !== 0 }]">
{{ items.title }}
:class="[{ 'info-box-check': schoolSelectObj.id === items.id }, { 'mg-r-15': (i + 1) % 9 !== 0 }]">
{{ items.name }}
</div>
</div>
</el-carousel-item>
@@ -65,10 +65,10 @@
<!-- 求房源 -->
<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="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;"
: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">
<div class="dis-f al-item">{{ item.title }} <div class="dis-f al-item"
v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp > &nbsp
@@ -81,11 +81,12 @@
</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">
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" :list="selectTabCheck.data" :watchData="watchData">
:closeSeach="closeSeach" :list="selectTabCheck.data">
</checkBoxGroup>
</div>
</div>
@@ -130,9 +131,9 @@
<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">
<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">
<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">
@@ -150,7 +151,7 @@
<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="hireDate.id = item.id">{{ item.title
:class="{ 'btn-check': hireDate.id === item.id }" @click="setHireDate(item)">{{ item.title
}}
</div>
</div>
@@ -161,7 +162,7 @@
<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="gender.id = item.id">{{ item.title }}
:class="{ 'btn-check': gender.id === item.id }" @click="setGender(item)">{{ item.title }}
</div>
</div>
</div>
@@ -171,7 +172,7 @@
<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="releaseObj.id = item.id">{{
:class="{ 'btn-check': releaseObj.id === item.id }" @click="setReleaseObj(item)">{{
item.title }}
</div>
</div>
@@ -182,7 +183,7 @@
<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">
<el-checkbox-group v-model="otherCheck.list" @change="setOtherCheck">
<el-checkbox :label="item.id">{{ item.title }}</el-checkbox>
</el-checkbox-group>
</div>
@@ -193,7 +194,10 @@
</div>
<div class="btm-list">
<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 v-show="selectTabCheck.id && selectTabCheck.title">{{ selectTabCheck.title }}:</div>
<div v-for="(item, i) in selectData.data" :key="i" class="btm-btn">
@@ -203,66 +207,86 @@
</div>
</div>
<span class="dis-f al-item sort-text">
最新发布
<img class="img" src="../../assets/homeImage/sortIcon.png" alt="">
<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" @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>
</div>
</template>
<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 checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
import store from '../../store/index';
//数据包
let configData = reactive({ data: {} })
const { proxy } = getCurrentInstance()
const props = defineProps({
count:{
type:Number,
default:0
setSeachCondition:{
type:Function
}
})
//当前数据数量
let counti = ref(0)
watchEffect(()=>{
counti.value=props.count
console.log(counti.value)
let setSeachCondition=props.setSeachCondition
//最新发布选项
let listSort = shallowReactive({
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: ''
}, {
title: '港岛',
name: '港岛',
id: 1,
data: [{
title: '上环',
id: 1
data: [] //{title: '上环',id: 1}, {title: '铜锣湾',id: 2}, { title: '天后',id: 3}, {title: '北角',id: 4}
}, {
title: '铜锣湾',
id: 2
}, {
title: '天后',
id: 3
}, {
title: '北角',
id: 4
}]
}, {
title: '九龙',
name: '九龙',
id: 2,
data: [{
title: '1',
id: '1'
}, {
title: '2',
id: '2'
}, {
title: '3',
id: '3'
}]
}]
data: []
}])
//设置区域数据
let setRegionList=()=>{
let arr=store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
arr.map((res,i)=>{
list[i]=res
})
list.unshift({
name:'不限',
id:''
})
}
//按区域/学校选择的地区
let selectData = reactive({ data: [] })
let selectTabCheck = reactive({
@@ -270,6 +294,7 @@ let selectTabCheck = reactive({
title: '',
data: []
})
//区域状态
let selectPosition = ref('region')
let showSelect = ref(false)
@@ -277,37 +302,39 @@ let showSelect = ref(false)
//学校区域状态
let schoolSelectObj = reactive({ id: '', title: '不限' })
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 arr = []
let arr = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : []
let num = 0
for (let i = 0; i < shcoolData.length; i++) {
if (!arr[num]) {
arr[num] = []
for (let i = 0; i < arr.length; i++) {
if (!shcoolData[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++
}
}
shcoolData = arr
}
setSchoolData()
//选择学校区域属性
let setSchoolObj = (obj) => {
schoolSelectObj.id = obj.id
schoolSelectObj.title = obj.title
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()
@@ -339,12 +366,9 @@ let selectSeach = (data = []) => {
})
selectData.data = arr
showSelect.value = false
setSeachCondition('location',data)
}
//监听选项
let watchData = (data) => {
// selectData.data = data
// console.log(selectData)
}
//监听路由
const route = useRoute()
@@ -356,44 +380,109 @@ let deleteSelect = (id) => {
selectData.data.splice(id, 1)
}
//搜索列表排序
let listSortCheck = (item) => {
listSort.checkType = item.type
listSort.check = item.title
}
//出租方式
let hireTypeArr = reactive([
{ hireType: [], title: '不限' },
{ hireType: [{ id: '', title: '不限' }, { id: '1', title: '独卫套房' }, { id: '2', title: '房间' },], title: '合租' },
{ hireType: [{ id: '', title: '不限' }, { id: '3', title: '3' }, { id: '4', title: '3' },], title: '整租' }])
let hireTypeArr = shallowReactive([{ hireType: [], title: '不限' }, { title: '合租', hireType: [] }, { hireType: [], title: '整租' }])
// { hireType: [{ id: '', title: '不限' }, { id: '1', title: '独卫套房' }, { id: '2', title: '房间' },], 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 setHireId = (title) => {
hireTypeObj.hireId = title
if(hireTypeObj.hireId != title){
hireTypeObj.id = ''
hireTypeObj.title = ''
}
hireTypeObj.hireId = title
}
let dropdownCommand = (obj) => {
hireTypeObj.id = obj.id
hireTypeObj.title = obj.title
setSeachCondition('types',obj.id)
}
//租金
let rentObj = reactive({ min: '', max: '' })
let setRent=()=>{
setSeachCondition('rent',rentObj)
}
//租期
let hireData = reactive([{ title: '不限', id: '' }, { title: '一年以上', id: 1 }, { title: '低于一年', id: 2 }])
let hireDate = reactive({ id: '', title: '' })
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: '' }, { title: '女', id: 1 }, { title: '男', id: 2 }])
let gender = reactive({ 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: '' }, { title: '三天', id: 1 }, { title: '一周', id: 2 }, { title: '一个月内', id: 3 }, { title: '两个月内', id: 4 }, { title: '三个月内', id: 5 }])
let releaseObj = reactive({ 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 = 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 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>
export default {
@@ -442,9 +531,11 @@ img {
.bor-b-das {
border-bottom: 1px dashed #ebebeb;
}
.housing-pd {
padding: 5px 0 25px 0;
}
.housing-pd-25 {
padding: 0 25px;
}
@@ -693,6 +784,7 @@ img {
.info-bor-b {
border-bottom: 1px dashed #ebebeb;
}
.need-housing-box {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
@@ -854,7 +946,7 @@ img {
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #50e3c2;
color: #333333;
margin-left: 10px;
.img {
@@ -878,6 +970,7 @@ img {
font-size: 14px;
color: #000000;
text-align: center;
cursor: pointer;
}
.img {

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

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

8108
yarn.lock
View File

File diff suppressed because it is too large Load Diff