241 lines
7.5 KiB
Vue
241 lines
7.5 KiB
Vue
<template>
|
|
<div class="box-min-1200-src">
|
|
<pageTopBar></pageTopBar>
|
|
<inputModule :getDataList="setSeachSelectData" :count="dataCount" ref="inputModuleInfo"></inputModule>
|
|
<div class="dis-f jus-x al-item">
|
|
<div class="body-maxWidth mg-t-35">
|
|
<div class="body-maxWidth"
|
|
v-show="dataList.data && dataList.data.length > 0 && seachSelectData.data.tabType !== 'apartment' && seachSelectData.data.intermediary !== ''"
|
|
ref="list">
|
|
<biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
|
|
</div>
|
|
<div class="body-maxWidth" v-show="seachSelectData.data && seachSelectData.data.tabType === 'apartment' && dataList.data && dataList.data.length > 0"
|
|
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 hintText="暂无搜索结果" hintTextTwo="建议更换搜索关键词，或放宽筛选条件"></noList>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<loadMoreText :loadText="loadingText" v-show="dataList.data && dataList.data.length>0"></loadMoreText>
|
|
<listBtmPrompt></listBtmPrompt>
|
|
<footerTool></footerTool>
|
|
</div>
|
|
<back-to-top></back-to-top>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick } from 'vue'
|
|
import pageTopBar from '../components/pageTopBar/pageTopBar.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';
|
|
import { useRouter } from 'vue-router';
|
|
import { ElMessage } from 'element-plus'
|
|
import footerTool from '@/components/footer/footer.vue'
|
|
import loadMoreText from '../components/loadMore/loadMoreText.vue'
|
|
import backToTop from '@/components/public/backToTop.vue'
|
|
|
|
//路由
|
|
const route = useRouter()
|
|
let routeQuery = reactive({ data: {} })
|
|
|
|
//获取数据
|
|
let pages = ref(1)//页数
|
|
let dataList = reactive({ data: [], count: 0 })//个人/中介数据
|
|
let dataCount = ref(0)//数据数量
|
|
let pageList = ref([])
|
|
// let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })//双列瀑布数据
|
|
let seachSelectData = reactive({ data: {} })//搜索数据
|
|
let loading = ref(true)//开关
|
|
let loadingText = ref(` 下拉加载更多 `)
|
|
let listApartment = ref([])//公寓数据
|
|
let masonryInstance = null//瀑布实例
|
|
let listMasonryInstance = null
|
|
provide('count', dataCount)
|
|
|
|
//保存搜索设置
|
|
let setSeachSelectData = (data,type) => {
|
|
pages.value = 1
|
|
seachSelectData.data = {
|
|
...data
|
|
}
|
|
loading.value = true
|
|
getDataList(seachSelectData.data,type)
|
|
}
|
|
|
|
//初始化列表参数
|
|
let setInitial = () => {
|
|
pageList[1] = []
|
|
pageList[2] = []
|
|
pageList.height1 = 0
|
|
pageList.height2 = 0
|
|
}
|
|
|
|
//获取搜索数据
|
|
let getDataList = (data,type=true) => {
|
|
// console.log(data,type)
|
|
if(!type){ //是否继续搜索
|
|
seachSelectData.data.tabType !== 'apartment'?pageList.value = []:listApartment.value = []
|
|
dataList.data = []
|
|
dataCount.value = 0
|
|
loading.value = false
|
|
return
|
|
}
|
|
loadingText.value=' 加载中..... '
|
|
if (!loading.value) return
|
|
let postData = {
|
|
page: pages.value,
|
|
limit: 20,
|
|
...data
|
|
}
|
|
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)
|
|
dataList.data = res.data.data
|
|
if (res.data.data.length < 20) {
|
|
loadingText.value = ` 到底了 `
|
|
loading.value = false
|
|
} else {
|
|
loadingText.value = ' 下拉加载更多 '
|
|
loading.value = true
|
|
}
|
|
if (seachSelectData.data.tabType !== 'apartment') {
|
|
if (pages.value === 1) {
|
|
setInitial()
|
|
pageList.value = []
|
|
}
|
|
pageList.tab = 1
|
|
dataList.count = res.data.count
|
|
dataCount.value = res.data.count
|
|
pageList.value = pageList.value.concat(dataList.data)
|
|
nextTick(() => {
|
|
listMasonryInstance.reloadItems();
|
|
listMasonryInstance.layout();
|
|
})
|
|
} else {
|
|
let data = res.data
|
|
dataList.count = res.data.count
|
|
dataCount.value = res.data.count
|
|
if (pages.value === 1) listApartment.value = []
|
|
listApartment.value = listApartment.value.concat(data.data)
|
|
nextTick(() => {
|
|
masonryInstance.reloadItems();
|
|
masonryInstance.layout();
|
|
if (res.data.data.length >= 20) {
|
|
loading.value = true
|
|
}
|
|
})
|
|
}
|
|
inputModuleInfo.value.setListCount(seachSelectData.data, dataList.count)
|
|
|
|
} else {
|
|
ElMessage({
|
|
message: res.message,
|
|
center: true,
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
//加载更多
|
|
let downLoadMore = () => {
|
|
tool.loadMore(() => {
|
|
if (!loading.value) return
|
|
pages.value++
|
|
getDataList(seachSelectData.data)
|
|
})
|
|
}
|
|
|
|
|
|
let inputModuleInfo = ref(null)
|
|
const gridContainer = ref(null);
|
|
const list = ref(null)
|
|
//listImg
|
|
onMounted(() => {
|
|
listMasonryInstance = new Masonry(list.value, {
|
|
itemSelector: '.item',
|
|
gutter: 20,
|
|
});
|
|
masonryInstance = new Masonry(gridContainer.value, {
|
|
itemSelector: '.item',
|
|
gutter: 20
|
|
});
|
|
routeQuery.data = route.currentRoute.value.query
|
|
if (routeQuery.data.keyword && routeQuery.data.keyword.replace(/\s/g, "") && routeQuery.data.houseingPageType != 6) {
|
|
inputModuleInfo.value.searchInit(routeQuery.data.keyword)//调用搜索组件的搜索功能
|
|
// route.currentRoute.value.query.keyword = ''
|
|
} else {
|
|
inputModuleInfo.value.checkPageType()
|
|
}
|
|
window.addEventListener('scroll', downLoadMore, true);
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('scroll', downLoadMore, true);
|
|
})
|
|
|
|
</script>
|
|
<style scoped lang="less">
|
|
img {
|
|
object-fit: contain;
|
|
}
|
|
|
|
.dis-f {
|
|
display: flex;
|
|
}
|
|
|
|
.jus-x {
|
|
justify-content: center;
|
|
}
|
|
|
|
.al-item {
|
|
align-items: center;
|
|
}
|
|
|
|
.pos-r {
|
|
position: relative;
|
|
}
|
|
|
|
.body-maxWidth {
|
|
width: 1200px;
|
|
min-width: 1200px;
|
|
}
|
|
|
|
.s-w-100 {
|
|
width: 100%;
|
|
}
|
|
|
|
.jus-bet {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.mg-t-35 {
|
|
margin-top: 35px;
|
|
}
|
|
|
|
.no-list-box {
|
|
height: 500px;
|
|
background: inherit;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
border: none;
|
|
border-radius: 16px;
|
|
-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);
|
|
}
|
|
</style>
|
|
|