gter.net/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

搜索页

Browse Source
This commit is contained in:
luJianJun 2023-07-19 18:23:56 +08:00
parent ea4b66db95
commit 9900a77f14
9 changed files with 675 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/biserialListItem/biserialListItem.vue
View File

@ -33,11 +33,11 @@
}}
</div>
</div>
<div class="address-text dis-f al-item">
<div class="address-text dis-f al-item" v-if="data && data.data && data.data.location">
<img src="../../assets/homeImage/addMarker.png" class="img" alt="">
<span>{{
location && location.data && location.data[1] ? `${location && location.data &&
location.data[data && data.data && data.data.location.substring(0, 1)]} > ${location &&
location.data[data && data.data && data.data.location&&data.data.location.substring(0, 1)]} > ${location &&
location.data[data && data.data && data.data.location]}` : ''
}}</span>
</div>

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

@ -97,9 +97,6 @@ const props = defineProps({
}
})
//数据包
let configData = store.state.indexData.config
let getDataList = props.getDataList
//搜索框

581
src/components/seachPage/input.vue
View File

@ -3,9 +3,9 @@
<div class="body-maxWidth ">
<div class="input-box dis-f al-item jus-bet body-maxWidth">
<div class="dis-f al-item">
<el-input v-model="seachVal" class="input-s" placeholder="Pick a date">
<el-input v-model="seachVal" class="input-s" placeholder="Pick a date" @keyup.enter='seachList'>
<template #suffix>
<img src="../../assets/homeImage/seachIcon.svg" class="icon" alt="">
<img src="../../assets/homeImage/seachIcon.svg" class="icon" alt="" @click="seachList">
</template>
</el-input>
<div class="map-box dis-f jus-x al-item">
@ -25,23 +25,295 @@
</div>
<div class="seach-info-box body-maxWidth">
<div class="top-box dis-f al-item">
<div class="top-btn dis-f jus-x al-item">
<div class="top-btn dis-f jus-x al-item first" @click="selectPage('person')"
:class="{ 'select-top-btn-bg': tabType === 'person' }">
<div class="top-btn" :class="[tabType === 'person' ? 'select-top-btn' : 'first-no-select']"
v-show="tabType === 'person'">
个人房源 521
</div>
个人房源 521
<div class="second-select" v-show="tabType === 'intermediary'">
<div class="box">
</div>
</div>
</div>
<div class="top-btn dis-f jus-x al-item">
<div class="top-btn dis-f jus-x al-item second" @click="selectPage('intermediary')"
:class="{ 'select-top-btn-bg': tabType === 'intermediary' }">
<div class="first-select" v-show="tabType === 'person'">
<div class="box">
</div>
</div>
<div class="third-select" v-show="tabType === 'apartment'">
<div class="box">
</div>
</div>
<div class="top-btn" :class="[tabType === 'intermediary' ? 'select-top-btn' : 'first-no-select']"
v-show="tabType === 'intermediary'">
中介房源 82
</div>
中介房源 82
</div>
<div class="top-btn dis-f jus-x al-item">
<div class="top-btn dis-f jus-x al-item third" @click="selectPage('apartment')"
:class="{ 'select-top-btn-bg': tabType === 'apartment' }">
<div class="second-select-third-box" v-show="tabType === 'intermediary'">
<div class="box">
</div>
</div>
<div class="top-btn" :class="[tabType === 'apartment' ? 'select-top-btn' : 'first-no-select']"
v-show="tabType === 'apartment'">
品牌公寓 6
</div>
学生公寓 6
</div>
</div>
<div v-show="tabType === 'apartment'" :class="{ 'show-box-pd': !showSelectModule }">
<apartmentSelect @handleTransfer="setSeachConditions" :seachPage="false" ref="apartmentSelectInfo"></apartmentSelect>
</div>
<div class="seach-select-info" v-show="tabType !== 'apartment'">
<div class="select-box" :class="{ 'seach-select-h': showSelectModule }"
:style="{ 'overflow': showSelectModule ? 'visible' : 'hidden' }">
<selectTabBox :setSeachCondition="setSeachConditions" ref="selectTabBoxInfo"></selectTabBox>
</div>
<div :class="{ 'show-box-pd': !showSelectModule }">
<div class="box" :class="{ 'show-box': showSelectModule }">
<div class="dis-f jus-x al-item" :style="{ 'height': !showSelectModule ? '60px' : '40px' }"
@click="showSelectModule = !showSelectModule">
<div class="dis-f al-item">
<span v-show="showSelectModule">收起筛选条件</span>
<span class="text-tps" v-show="!showSelectModule">筛选</span> <span
v-show="!showSelectModule">&nbsp:&nbsp</span>
<div v-show="!showSelectModule">
<span v-for="(item, i) in typeText" :key="item">
{{ item }}c
<span v-show="i !== typeText.length - 1" class="text-icon">&nbsp|&nbsp </span>
</span>
</div>
<img src="../../assets/homeImage/listMore.svg" class="icon-img"
:class="{ 'down-icon': showSelectModule }" alt="">
</div>
</div>
</div>
</div>
</div>
<div>
<div class="btm-list" :class="{ 'apartment-btm': tabType === 'apartment' }">
<div class="dis-f al-item">
共<span class="count">{{ count || 0 }}</span>条
{{ tabType === 'person' ?
'个人房源' : tabType === 'intermediary' ?
'中介房源' : tabType === 'apartment' ?
'品牌公寓' : '' }} <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">
{{ item.title }}
<img src="../../assets/homeImage/closeIcon.svg" @click="deleteSelect(i)" class="img"
alt="">
</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>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { reactive, ref, shallowReactive, defineProps, watchEffect } from 'vue'
import selectTabBox from "../selectTabBox/selectTabBox.vue";
import apartmentSelect from '../apartment/seachModule.vue'
import store from '../../store/index';
import api from '@/utils/api';
const props = defineProps({
getDataList: {
type: Function
},
count: {
type: Number
}
})
//选项卡
let tabType = ref('person')
let selectTabBoxInfo = ref(null)//个人/中介筛选实例
let apartmentSelectInfo=ref(null)//公寓筛选实例
//设置请求数据
let selectPage = (type) => {
if(type==='apartment'){
selectTabBoxInfo.value.cleanSelect()//清空筛选数据
}else{
apartmentSelectInfo.value.cleanSelect()
}
//清空数据
if(type==='apartment')
seachAllType = reactive({
keyword: '',
location: [],
searchid: '',
intermediary: 0
})
tabType.value = type
seachAllType['tabType'] = type
if (type === 'person') {
seachAllType['intermediary'] = 0
} else if (type === 'intermediary') {
seachAllType['intermediary'] = 1
} else {
seachAllType['intermediary'] = ''
}
getDataList(seachAllType, tabType.value)
}
let getDataList = props.getDataList
//搜索内容
let seachVal = ref('')
//搜索key
let seachKey = reactive({ key: {} })
//搜索数据
let seachAllType = reactive({
keyword: '',
location: [],
searchid: '',
intermediary: 0
})
//设置搜索数据
let setSeachConditions = (type, data) => {
if (seachAllType['tabType'] !== 'apartment') {
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
}
if (type === 'school') {
seachAllType.location = []
}
if (type === 'location') {
seachAllType.school = ''
}
} else {
seachAllType = {
...data
}
}
// console.log('seachAllType', seachAllType)
// return
getDataList(seachAllType, tabType.value)
}
//设置当前搜索key
let setPageKey = () => {
return tabType.value === 'person' ? seachKey.key.personal.searchid : tabType.value === 'intermediary' ? seachKey.key.intermediary.searchid : seachKey.key.studentapartment.searchid
}
//搜索初始化
let searchInit = (data) => {
api.search({ keyword: data }).then(res => {
if (res.code === 200) {
seachKey.key = res.data
seachAllType.searchid = setPageKey()
// console.log(seachAllType)
getDataList(seachAllType, tabType.value)
} else {
}
})
}
//搜索数据
let seachList = (item) => {
console.log(seachVal.value)
if (!seachVal.value) {
return
}
searchInit(seachVal.value)
}
//筛选词条
let typeText = ['地理位置', '出租方式', '租金', '租期', '性别要求', '发布时间', '其他']
//显示筛选组件
let showSelectModule = ref(false)
//选中地区
let selectData = reactive({ data: [] })
let selectTabCheck = reactive({
id: '',
title: '',
data: []
})
//最新发布选项
let listSort = shallowReactive({
type: [
{ title: '最新发布', type: 'timestamp' },
{ title: '热门', type: 'hotnum' },
{ title: '价格从低到高', type: 'rentasc' },
{ title: '价格从高到低', type: 'rentdesc' }
],
checkType: 'timestamp',
check: '最新发布'
})
//搜索列表排序
let listSortCheck = (item) => {
listSort.checkType = item.type
listSort.check = item.title
setSeachConditions('orderby', item.type)
}
let seachArea = {};//区域找房
//获取区域下列数据
let getLocationData = (data) => {
for (let item in data) {
if (!seachArea.data[item.substring(0, 1) - 1].data) seachArea.data[item.substring(0, 1) - 1].data = []
if (item.length > 1) {
seachArea.data[item.substring(0, 1) - 1].data.push({
title: data[item],
id: item
})
}
}
}
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)
})
</script>
<style scoped>
@ -82,6 +354,20 @@ img {
margin-top: 35px;
}
.seach-select-h {
max-height: 500px !important;
}
.select-box {
max-height: 0;
transition: max-height 0.4s ease-in-out;
}
.show-box-pd {
padding: 0 20px;
transition: all 0.1s linear;
}
.seach-info-box {
background: #fff;
border-radius: 16px;
@ -89,6 +375,54 @@ img {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
.seach-select-info {
padding: 25px 0px;
.show-box {
width: 100% !important;
height: 40px !important;
min-height: 40px !important;
border-radius: 0 !important;
border-bottom: 1px solid #ebebeb !important;
}
.box {
width: 1160px;
min-height: 60px;
background: inherit;
background-color: rgba(246, 246, 246, 1);
border: none;
border-radius: 10px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
color: #555555;
font-size: 15px;
.icon-img {
width: 6px;
transform: rotate(90deg);
margin-left: 20px;
}
.down-icon {
transform: rotate(270deg);
transition: all 0.3s ease-in-out;
}
.text-tps {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
color: #000000;
}
.text-icon {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
color: #D7D7D7;
}
}
}
.top-box {
height: 45px;
width: 100%;
@ -101,30 +435,196 @@ img {
font-size: 17px;
color: #FFFFFF;
.select-top-btn{
.select-top-bos-show {
-moz-box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
-webkit-box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
}
.first{
bottom:0;
left:0;
.select-top-btn-bg {
background: #fff !important;
height: 50px !important;
width: 200px;
border-radius: 16px 16px 0 0;
-moz-box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
-webkit-box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
}
.second{
left:180px;
bottom:0;
.select-top-btn {
height: 45px;
width: 180px !important;
line-height: 50px;
background: #fff !important;
border-radius: 16px 16px 0 0;
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 17px;
color: #000000;
text-align: center;
bottom: 0;
z-index: 66;
}
.third{
left:360px;
bottom:0;
.bg-f {
background: #fff !important;
}
.first {
bottom: 0;
left: 0;
background: #62b1ff;
.second-select {
position: absolute;
background: #fff;
top: 0;
right: -4px;
height: 45px;
width: 30px;
z-index: 88;
.box {
border-radius: 0 0 16px 0;
background: #62b1ff;
height: 45px;
width: 30px;
}
}
}
.first-no-select {
border-radius: 0px 0px 16px 0 !important;
width: 180px;
left: 14px;
z-index: 88;
}
.second {
left: 200px;
bottom: 0;
background: #62b1ff;
.first-select {
position: absolute;
background: #fff;
top: 0;
left: -4px;
height: 45px;
width: 30px;
.box {
border-radius: 0 0 0 16px;
background: #62b1ff;
height: 45px;
width: 30px;
}
}
.third-select {
position: absolute;
background: #fff;
top: 0;
right: -4px;
height: 45px;
width: 30px;
z-index: 88;
.box {
border-radius: 0 0 16px 0;
background: #62b1ff;
height: 45px;
width: 30px;
}
}
}
.third {
left: 400px;
bottom: 0;
background: #62b1ff;
.second-select-third-box {
position: absolute;
background: #fff;
top: 0;
left: -4px;
height: 45px;
width: 30px;
z-index: 88;
.box {
border-radius: 0 0 0 16px;
background: #62b1ff;
height: 45px;
width: 30px;
}
}
}
.top-btn {
width: 180px;
width: 200px;
height: 45px;
position: absolute;
border-radius: 16px 16px 0 0;
}
}
}
.apartment-btm {
padding: 25px 20px !important;
}
.btm-list {
padding: 0 20px 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;
}
}
.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;
}
}
.input-box {
height: 92px;
background: inherit;
@ -209,6 +709,43 @@ img {
}
}
.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);
}
.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;
}
::v-deep .el-input__wrapper {
color: #333333 !important;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
@ -219,5 +756,11 @@ img {
border-radius: 8px;
box-shadow: 0px 0px 0px !important;
background-color: rgba(246, 246, 246, 1);
}</style>
}
::v-deep .el-dropdown-menu__item {
--el-dropdown-menuItem-hover-color: #7F7F7F;
--el-dropdown-menuItem-hover-fill: rgba(246, 246, 246, 1);
}
</style>

0
src/components/seachPage/select.vue → src/components/seachPage/selectInfo.vue
View File

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

@ -1,5 +1,5 @@
<template>
<div class="dis-f s-w-100" style="border-bottom:1px solid #ebebeb;">
<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>
@ -127,7 +127,7 @@
</div>
</div>
<div class="dis-f al-item" style="padding:30px 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">
<input type="text" class="input" v-model="rentObj.min" @blur="setRent">
@ -191,9 +191,13 @@
</div>
</div>
</div>
<div class="btm-list">
<div class="btm-list" v-if="routePath !== '/seachPage'">
<div class="dis-f al-item">
共<span class="count">{{ count || 0 }}</span>条个人房源 <span v-show="selectTabCheck.title && selectTabCheck.id">
共<span class="count">{{ count || 0 }}</span>条
{{routePath === '/personHousing'?
'个人房源':routePath === '/intermediaryHousing'?
'中介房源':routePath === '/needHousing'?
'求房源':''}} <span v-show="selectTabCheck.title && selectTabCheck.id">
&nbsp
|
&nbsp</span>
@ -228,7 +232,7 @@
</template>
<script setup>
import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject, shallowReactive } from 'vue';
import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject, shallowReactive,defineExpose } from 'vue';
import { useRoute } from 'vue-router';
import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
import store from '../../store/index';
@ -237,6 +241,11 @@ import store from '../../store/index';
//数据包
let configData = reactive({ data: {} })
//监听路由
const route = useRoute()
let routePath = ref('')
routePath.value = route.path
const { proxy } = getCurrentInstance()
const props = defineProps({
@ -250,17 +259,18 @@ let setSeachCondition = props.setSeachCondition
//最新发布选项
let listSort = shallowReactive({
type: [
{ title: '最新发布', type: 'new' },
{ title: '热门', type: 'hot' },
{ title: '价格从低到高', type: 'sort' },
{ title: '加个从高到低' }
{ title: '最新发布', type: 'timestamp' },
{ title: '热门', type: 'hotnum' },
{ title: '价格从低到高', type: 'rentasc' },
{ title: '价格从高到低',type:'rentdesc'}
],
checkType: 'new',
checkType: 'timestamp',
check: '最新发布'
})
//列表总数
const count = inject('count')
const count=inject('count')
let list = shallowReactive([{
name: '不限',
@ -276,7 +286,7 @@ let list = shallowReactive([{
}])
//设置区域数据
let setRegionList = () => {
let arr = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
let arr = store.state.seachTypeData[1] ? JSON.parse(JSON.stringify(store.state.seachTypeData[1].where)) : []
arr.map((res, i) => {
list[i] = res
})
@ -284,6 +294,7 @@ let setRegionList = () => {
name: '不限',
id: ''
})
console.log(store.state.seachTypeData)
}
//按区域/学校选择的地区
@ -402,12 +413,6 @@ let selectSeach = (data = []) => {
setSeachCondition('location', data)
}
//监听路由
const route = useRoute()
let routePath = ref('')
routePath.value = route.path
//底部删除按钮
let deleteSelect = (id) => {
selectData.data.splice(id, 1)
@ -514,6 +519,25 @@ 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 = '不限'
}
watchEffect(() => {
configData.data = store.state.indexData.config
if (configData.data) {
@ -528,6 +552,10 @@ watchEffect(() => {
// seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
}
})
defineExpose({
cleanSelect
})
</script>
<script>
export default {

3
src/utils/api.js
View File

@ -21,6 +21,9 @@ export default{
},
getLists:(params={})=>{//获取搜索数据 个人/中介/求房源
return axios.post('/tenement/pc/api/lists',params)
},
apartment:(params={})=>{//获取公寓列表
return axios.get('/tenement/pc/api/apartment',params)
}
}

2
src/views/HomeView.vue
View File

@ -543,6 +543,7 @@ img {
.img-box:hover .img-list {
display: block;
cursor: pointer;
}
}
@ -634,6 +635,7 @@ img {
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
margin-bottom: 10px;
cursor: pointer;
}
.img {

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

@ -1,7 +1,7 @@
<template>
<div>
<pageTopBar></pageTopBar>
<seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
<seachModule :getDataList="setSeachSelectData"></seachModule>
<div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35">
<div class="dis-f jus-bet" v-show="dataList.data && dataList.data.length > 0">

88
src/views/seachIndex.vue
View File

@ -1,11 +1,11 @@
<template>
<div>
<pageTopBar></pageTopBar>
<inputModule></inputModule>
<!-- <seachModule :getDataList="setSeachSelectData"></seachModule> -->
<inputModule :getDataList="setSeachSelectData" :count="dataCount"></inputModule>
<div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35">
<div class="dis-f jus-bet" v-show="dataList.data && dataList.data.length > 0">
<div class="dis-f jus-bet"
v-show="dataList.data && dataList.data.length > 0 && seachSelectData.data.intermediary !== ''">
<div ref="list">
<biserialItem v-for="(item, i) in pageList['1']" :key="i" :item="item" :imgLoad="watchImgLoad"
listId="1"></biserialItem>
@ -15,6 +15,9 @@
listId="2"></biserialItem>
</div>
</div>
<div v-show="seachSelectData.data.intermediary === ''" ref="gridContainer">
<apartment-item v-for="item in listApartment" :item="item"></apartment-item>
</div>
<div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
<noList></noList>
</div>
@ -27,25 +30,28 @@
<script setup>
import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick } from 'vue'
import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
// import seachModule from "../components/seachModule/seachModule.vue";
import biserialItem from '../components/biserialListItem/biserialListItem.vue'
import listBtmPrompt from "../components/public/have-questions.vue";
import noList from "../components/public/empty-duck.vue";
import api from "../utils/api";
import tool from '../toolJs/downLoadMore'
import inputModule from '../components/seachPage/input.vue'
import apartmentItem from '@/components/public/apartment-item.vue';
import Masonry from 'masonry-layout';
//获取数据
let pages = ref(1)
let dataList = reactive({ data: [], count: 0 })
let dataCount = ref(0)
let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })
let seachSelectData = reactive({ data: {} })
let loading = ref(false)
let pages = ref(1)//页数
let dataList = reactive({ data: [], count: 0 })//个人/中介数据
let dataCount = ref(0)//数据数量
let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })//双列瀑布数据
let seachSelectData = reactive({ data: {} })//搜索数据
let loading = ref(true)//开关
let listApartment = ref([])//公寓数据
let masonryInstance = null//瀑布实例
provide('count', dataCount)
//保存搜索设置
let setSeachSelectData = (data) => {
let setSeachSelectData = (data, type) => {
pages.value = 1
// if(data.location.length>0){
@ -55,9 +61,9 @@ let setSeachSelectData = (data) => {
...data
}
loading.value = true
console.log('seachSelectData',seachSelectData.data)
return
getDataList(seachSelectData.data)
// console.log('seachSelectData', seachSelectData.data, type)
// return
getDataList(seachSelectData.data, type)
}
//初始化列表参数
@ -70,29 +76,48 @@ let setInitial = () => {
//获取搜索数据
let getDataList = (data) => {
if (!loading.value) return
let postData = {
page: pages.value,
intermediary:0,
intermediary: 0,
...data
}
api.getLists(postData).then(res => {
loading.value = false
let seachApi = null
if (seachSelectData.data.tabType !== 'apartment') {
seachApi = api.getLists(postData)
} else {
seachApi = api.apartment(postData)
}
seachApi.then(res => {
if (res.code === 200) {
console.log(res.data)
loading.value = true
dataList.data = res.data.data
if (res.data.data.length === 0) {
if (res.data.data.length < 20) {
loading.value = false
return
}
if (pages.value === 1) {
setInitial()
if (seachSelectData.data.tabType !== 'apartment') {
if (pages.value === 1) {
setInitial()
}
pageList.tab = 1
dataList.count = res.data.count
dataCount.value = res.data.count
nextTick(() => {
pageList['1'].push(dataList.data[0])
pageList['2'].push(dataList.data[1])
})
} else {
let data = res.data
listApartment.value = listApartment.value.concat(data.data)
nextTick(() => {
masonryInstance.reloadItems();
masonryInstance.layout();
})
}
pageList.tab = 1
dataList.count = res.data.count
dataCount.value = res.data.count
nextTick(() => {
pageList['1'].push(dataList.data[0])
pageList['2'].push(dataList.data[1])
})
} else {
// ElMessage(res.message)
}
@ -127,10 +152,15 @@ let downLoadMore = () => {
})
}
const gridContainer = ref(null);
//listImg
onMounted(() => {
// getDataList()
// window.addEventListener('scroll', downLoadMore, true);
masonryInstance = new Masonry(gridContainer.value, {
itemSelector: '.item',
gutter: 20
});
getDataList()
window.addEventListener('scroll', downLoadMore, true);
})
onBeforeUnmount(() => {