XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改求房源列表 筛选出现 位置报错问题 和增加 列表的更多数据

Browse Source
This commit is contained in:
A1300399510
2024-04-07 17:57:04 +08:00
parent c3c446584d
commit ec95879d91
25 changed files with 395 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/views/housingView/apartment.vue
View File

@@ -7,13 +7,21 @@
</div>
<div class="list wid1200 flexflex" ref="gridContainer">
<apartment-item v-if="list.length != 0" v-for="(item, index) in list" :key="index" :item="item"></apartment-item>
<template v-if="list.length != 0">
<apartment-item v-for="(item, index) in list" :key="index" :item="item"></apartment-item>
</template>
</div>
<div v-if="list.length == 0" class="empty-box wid1200 flexcenter">
<empty-duck :hintTextTwo="'建议放宽筛选条件'"></empty-duck>
</div>
<!-- 其他附近房源 -->
<div v-if="moreList.length != 0" class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div>
<div class="wid1200" ref="moreShowList">
<apartment-item v-for="(item, index) in moreList" :key="index" :item="item"></apartment-item>
</div>
<div class="bottom-tps" v-if="list.length != 0 && page == 0">- 到底了 -</div>
<div class="bottom-tps" v-if="page != 0">- 下拉加载更多 -</div>
@@ -41,6 +49,7 @@ import Masonry from "masonry-layout"
import { useRoute, useRouter } from "vue-router"
import backToTop from "@/components/public/backToTop.vue"
import store from "../../store/index"
import api from "../../utils/api"
const { proxy } = getCurrentInstance()
@@ -56,6 +65,7 @@ let list = ref([])
let listCount = ref(0) // 列表数量
let masonryInstance = null
// let masonryInstanceMore = null
onMounted(() => {
// 初始化瀑布流
@@ -64,11 +74,16 @@ onMounted(() => {
gutter: 20,
})
// masonryInstanceMore = new Masonry(moreShowList.value, {
// itemSelector: ".item",
// gutter: 20,
// })
pitchValue.value = store.state.apartmentPitchValue
if (route.query["companyid"]) pitchValue.value["companyid"] = route.query["companyid"]
// banner() // 获取轮播图数据
getData() // 获取列表数据
getData() // 获取列表数据
window.addEventListener("scroll", handleScroll)
})
@@ -109,6 +124,12 @@ const getData = () => {
loading.close()
requestLoading = false
})
// 小于20 代表筛选 数据不够了，需要加载更多的 随便在这里初始化 更多的 瀑布流 HTML
// if (data.data.length < 20 && (pitchValue.value["school"] || pitchValue.value["location"].length != 0)) {
// morePage.value = 1
// getMoreList()
// }
})
.catch(err => {
loading.close()
@@ -128,6 +149,7 @@ let pitchValue = ref({
roomtype: 0,
rent_min: null, // 租金
rent_max: null, // 租金
location: [],
school: 0,
roomlistings: 0,
keyword: "",
@@ -147,13 +169,49 @@ const handleTransfer = data => {
}
}
//轮播
// let bannerList = reactive({ data: [] })
// let banner = () => {
// proxy.$get("/tenement/pc/api/banner").then(res => {
// if (res.code === 200) bannerList.data = res.data
// })
// }
let moreShowList = ref(null)
let moreState = ref(false) // 更多列表 显示状态
let morePage = ref(1)
let moreList = ref([])
let moreLoading = ref(false)
// 加载更多数据列表
const getMoreList = () => {
if (morePage.value == 0 || moreLoading.value) return
console.log("11111");
moreLoading.value = true
let postData = {
page: morePage.value,
...pitchValue.value,
}
api.getMoreLists(postData).then(res => {
if (res.code != 200) return
const data = res.data
if (!data.data) return
moreList.value = moreList.value.concat(data.data)
moreState.value = true
if (data.data && data.data.length < data.limit) morePage.value = 0
else {
morePage.value++
window.addEventListener("scroll", getMoreScroll, true)
}
nextTick(() => {
masonryInstanceMore.reloadItems()
masonryInstanceMore.layout()
moreLoading.value = false
})
})
}
const getMoreScroll = () => {
let body = document.documentElement ? document.documentElement : document.body ? document.body : document.querySelector(".element")
let scrollTop = body.scrollTop
let clientHeight = body.clientHeight
let offsetHeight = body.offsetHeight
if (scrollTop + clientHeight >= offsetHeight - 200 && !moreLoading.value) getMoreList()
}
</script>
<style lang="less" scoped>
.screen-box {
@@ -191,4 +249,14 @@ const handleTransfer = data => {
text-align: center;
padding: 30px 0;
}
.other-nearby-listings-box {
width: 100%;
height: 32px;
color: #525151;
background: rgba(245, 251, 255, 1);
font-size: 14px;
margin-top: 40px;
margin-bottom: 43px;
}
</style>

71
src/views/housingView/intermediary.vue
View File

@@ -13,7 +13,10 @@
</div>
<!-- 其他附近房源 -->
<!-- <div class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div> -->
<div v-if="moreList.length != 0" class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div>
<div style="width: 1200px;" ref="moreShowList">
<biserialItem v-for="(item, i) in moreList" :key="i" :item="item"></biserialItem>
</div>
</div>
</div>
<loadMoreText :loadText="loadingText" v-show="dataList.data && dataList.data.length > 0"></loadMoreText>
@@ -43,6 +46,8 @@ import store from "../../store/index"
//瀑布实例
let listMasonryInstance = null
let listMasonryInstanceMore = null
//获取数据
let pages = ref(1)
let dataList = reactive({ data: [], count: 0 })
@@ -76,7 +81,7 @@ let setSeachSelectData = (data, noMask = false) => {
}
//获取搜索数据
let getDataList = (data) => {
let getDataList = data => {
loadingText.value = " 加载中..... "
if (!loading.value) return
loading.value = false
@@ -86,6 +91,10 @@ let getDataList = (data) => {
limit: 20,
...data,
}
moreList.value = []
window.removeEventListener("scroll", getMoreScroll, true)
api.getLists(postData).then(res => {
if (res.code === 200) {
dataList.data = res.data.data
@@ -106,6 +115,12 @@ let getDataList = (data) => {
listMasonryInstance.layout()
if (dataList.data.length >= 20) loading.value = true
})
// 小于20 代表筛选 数据不够了，需要加载更多的 随便在这里初始化 更多的 瀑布流 HTML
if (res.data.data.length < 20 && (data["school"] || data["location"].length != 0)) {
morePage.value = 1
getMoreList(data)
}
} else {
ElMessage({
message: res.message,
@@ -126,12 +141,63 @@ let downLoadMore = () => {
let list = ref("")
let moreShowList = ref(null)
let moreState = ref(false) // 更多列表 显示状态
let morePage = ref(1)
let moreList = ref([])
let moreLoading = ref(false)
// 加载更多数据列表
const getMoreList = data => {
if (morePage.value == 0 || moreLoading.value) return
moreLoading.value = true
let postData = {
page: morePage.value,
intermediary: 1,
...seachSelectData.data,
}
if (!postData["orderby"]) postData["orderby"] = "timestamp"
api.getMoreLists(postData)
.then(res => {
if (res.code != 200) return
const data = res.data
moreList.value = moreList.value.concat(data.data)
moreState.value = true
if (data.data && data.data.length < data.limit) morePage.value = 0
else {
morePage.value++
window.addEventListener("scroll", getMoreScroll, true)
}
nextTick(() => {
listMasonryInstanceMore.reloadItems()
listMasonryInstanceMore.layout()
})
})
.finally(() => (moreLoading.value = false))
}
const getMoreScroll = () => {
let body = document.documentElement ? document.documentElement : document.body ? document.body : document.querySelector(".element")
let scrollTop = body.scrollTop
let clientHeight = body.clientHeight
let offsetHeight = body.offsetHeight
if (scrollTop + clientHeight >= offsetHeight - 200 && !moreLoading.value) getMoreList()
}
//listImg
onMounted(() => {
listMasonryInstance = new Masonry(list.value, {
itemSelector: ".item",
gutter: 20,
})
listMasonryInstanceMore = new Masonry(moreShowList.value, {
itemSelector: ".item",
gutter: 20,
})
// getDataList()
// banner()
window.addEventListener("scroll", downLoadMore, true)
@@ -196,5 +262,6 @@ img {
background: rgba(245, 251, 255, 1);
font-size: 14px;
margin-top: 40px;
margin-bottom: 43px;
}
</style>

77
src/views/housingView/needHousing.vue
View File

@@ -10,6 +10,13 @@
<div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
<noList hint-text-two="建议放宽筛选条件"></noList>
</div>
<!-- 其他附近房源 -->
<div v-if="moreList.length != 0" class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div>
<div style="width: 1200px;" ref="moreShowList">
<biserialItem v-for="(item, i) in moreList" :key="i" :item="item"></biserialItem>
</div>
</div>
</div>
<loadMoreText :loadText="loadingText" v-show="dataList.data && dataList.data.length > 0"></loadMoreText>
@@ -39,6 +46,8 @@ import store from "../../store/index"
//瀑布实例
let listMasonryInstance = null
let listMasonryInstanceMore = null
//获取数据
let pages = ref(1)
let dataList = reactive({ data: [], count: 0 })
@@ -73,6 +82,9 @@ let getDataList = data => {
...data,
}
moreList.value = []
window.removeEventListener("scroll", getMoreScroll, true)
api.getLists(postData).then(res => {
if (res.code === 200) {
dataList.data = res.data.data
@@ -93,6 +105,12 @@ let getDataList = data => {
listMasonryInstance.layout()
if (dataList.data.length >= 20) loading.value = true
})
// 小于20 代表筛选 数据不够了，需要加载更多的 随便在这里初始化 更多的 瀑布流 HTML
if (res.data.data.length < 20 && (data["school"] || data["location"].length != 0)) {
morePage.value = 1
getMoreList(data)
}
} else {
ElMessage({
message: res.message,
@@ -113,6 +131,50 @@ let downLoadMore = () => {
let list = ref("")
let moreShowList = ref(null)
let moreState = ref(false) // 更多列表 显示状态
let morePage = ref(1)
let moreList = ref([])
let moreLoading = ref(false)
// 加载更多数据列表
const getMoreList = data => {
if (morePage.value == 0 || moreLoading.value) return
moreLoading.value = true
let postData = {
page: morePage.value,
intermediary: 0,
...seachSelectData.data,
}
if (!postData["orderby"]) postData["orderby"] = "timestamp"
api.getMoreLists(postData).then(res => {
if (res.code != 200) return
const data = res.data
moreList.value = moreList.value.concat(data.data)
moreState.value = true
if (data.data && data.data.length < data.limit) morePage.value = 0
else {
morePage.value++
window.addEventListener("scroll", getMoreScroll, true)
}
nextTick(() => {
listMasonryInstanceMore.reloadItems()
listMasonryInstanceMore.layout()
moreLoading.value = false
})
})
}
const getMoreScroll = () => {
let body = document.documentElement ? document.documentElement : document.body ? document.body : document.querySelector(".element")
let scrollTop = body.scrollTop
let clientHeight = body.clientHeight
let offsetHeight = body.offsetHeight
if (scrollTop + clientHeight >= offsetHeight - 200 && !moreLoading.value) getMoreList()
}
// const needPitchValue = reactive({ ...store.state.needPitchValue })
onMounted(() => {
@@ -120,6 +182,12 @@ onMounted(() => {
itemSelector: ".item",
gutter: 20,
})
listMasonryInstanceMore = new Masonry(moreShowList.value, {
itemSelector: ".item",
gutter: 20,
})
// getDataList()
window.addEventListener("scroll", downLoadMore, true)
})
@@ -176,4 +244,13 @@ img {
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
}
.other-nearby-listings-box {
width: 100%;
height: 32px;
color: #525151;
background: rgba(245, 251, 255, 1);
font-size: 14px;
margin-top: 40px;
margin-bottom: 43px;
}
</style>

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

@@ -13,8 +13,10 @@
</div>
<!-- 其他附近房源 -->
<!-- <div class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div> -->
<div v-if="moreList.length != 0" class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div>
<div style="width: 1200px;" ref="moreShowList">
<biserialItem v-for="(item, i) in moreList" :key="i" :item="item"></biserialItem>
</div>
</div>
</div>
<loadMoreText :loadText="loadingText" v-show="dataList.data && dataList.data.length > 0"></loadMoreText>
@@ -26,7 +28,7 @@
</template>
<script setup>
import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick,getCurrentInstance } from "vue"
import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick, getCurrentInstance } from "vue"
import pageTopBar from "../../components/pageTopBar/pageTopBar.vue"
import seachModule from "../../components/seachModule/seachModule1.vue"
import biserialItem from "../../components/biserialListItem/biserialListItem.vue"
@@ -42,12 +44,14 @@ import loadMoreText from "../../components/loadMore/loadMoreText.vue"
import backToTop from "@/components/public/backToTop.vue"
import Masonry from "masonry-layout"
import store from "../../store/index"
import { set } from "nprogress"
//路由
const router = useRouter()
//瀑布实例
let listMasonryInstance = null
let listMasonryInstanceMore = null
//获取数据
let pages = ref(1)
@@ -61,7 +65,6 @@ provide("count", dataCount)
const { proxy } = getCurrentInstance()
//保存搜索设置
let setSeachSelectData = (data, noMask = false) => {
store.state.personPitchValue = data
@@ -96,6 +99,9 @@ let getDataList = data => {
}
if (!postData["orderby"]) postData["orderby"] = "timestamp"
moreList.value = []
window.removeEventListener("scroll", getMoreScroll, true)
api.getLists(postData).then(res => {
if (res.code === 200) {
dataList.data = res.data.data
@@ -116,6 +122,12 @@ let getDataList = data => {
listMasonryInstance.layout()
if (dataList.data.length >= 20) loading.value = true
})
// 小于20 代表筛选 数据不够了，需要加载更多的 随便在这里初始化 更多的 瀑布流 HTML
if (res.data.data.length < 20 && (data["school"] || data["location"].length != 0)) {
morePage.value = 1
getMoreList(data)
}
} else {
ElMessage({
message: res.message,
@@ -135,12 +147,62 @@ let downLoadMore = () => {
}
let list = ref(null)
let moreShowList = ref(null)
let moreState = ref(false) // 更多列表 显示状态
let morePage = ref(1)
let moreList = ref([])
let moreLoading = ref(false)
// 加载更多数据列表
const getMoreList = data => {
if (morePage.value == 0 || moreLoading.value) return
moreLoading.value = true
let postData = {
page: morePage.value,
intermediary: 0,
...seachSelectData.data,
}
if (!postData["orderby"]) postData["orderby"] = "timestamp"
api.getMoreLists(postData).then(res => {
if (res.code != 200) return
const data = res.data
moreList.value = moreList.value.concat(data.data)
moreState.value = true
if (data.data && data.data.length < data.limit) morePage.value = 0
else {
morePage.value++
window.addEventListener("scroll", getMoreScroll, true)
}
nextTick(() => {
listMasonryInstanceMore.reloadItems()
listMasonryInstanceMore.layout()
moreLoading.value = false
})
})
}
const getMoreScroll = () => {
let body = document.documentElement ? document.documentElement : document.body ? document.body : document.querySelector(".element")
let scrollTop = body.scrollTop
let clientHeight = body.clientHeight
let offsetHeight = body.offsetHeight
if (scrollTop + clientHeight >= offsetHeight - 200 && !moreLoading.value) getMoreList()
}
//listImg
onMounted(() => {
listMasonryInstance = new Masonry(list.value, {
itemSelector: ".item",
gutter: 20,
})
listMasonryInstanceMore = new Masonry(moreShowList.value, {
itemSelector: ".item",
gutter: 20,
})
// let { type, data } = router.currentRoute.value.query
// let typeData = null
// if (data) typeData = JSON.parse(data)
@@ -153,6 +215,7 @@ onMounted(() => {
// }
// banner()
// getDataList(seachSelectData.data)
window.addEventListener("scroll", downLoadMore, true)
})
@@ -216,5 +279,6 @@ img {
background: rgba(245, 251, 255, 1);
font-size: 14px;
margin-top: 40px;
margin-bottom: 43px;
}
</style>