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

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

@@ -1,87 +1,74 @@
<template>
<div class="item" ref="list" @click="watchInfo" :class="{ 's-w-100': detailShow }">
<img src="../../assets/homeImage/corner.svg" class="detail-tab" v-if="detailShow && pageType == 1" alt="">
<img src="../../assets/homeImage/intermediaryCorner.svg" class="detail-tab" v-if="detailShow && pageType == 2"
alt="">
<img src="../../assets/homeImage/corner.svg" class="detail-tab" v-if="detailShow && pageType == 1" alt="" />
<img src="../../assets/homeImage/intermediaryCorner.svg" class="detail-tab" v-if="detailShow && pageType == 2" alt="" />
<div class="authentication-box dis-f al-item" v-if="data && data.data && data.data.verified == 1 && !detailShow">
<img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
<img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
<img src="../../assets/homeImage/authenticationText.png" class="text-img" alt="">
<img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="" />
<img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="" />
<img src="../../assets/homeImage/authenticationText.png" class="text-img" alt="" />
</div>
<div class="top-box">
<div class="title-text">
<img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img"
style="float:left;margin:3px 10px 0 0;" v-show="detailShow && data && data.data && data.data.verified == 1" alt="">
{{ data && data.data && data.data.subject || '暂无标题' }}
<img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img" style="float: left; margin: 3px 10px 0 0;" v-show="detailShow && data && data.data && data.data.verified == 1" alt="" />
{{ (data && data.data && data.data.subject) || "暂无标题" }}
</div>
<div class="mg-t-20 dis-f al-item-start jus-bet s-w-100">
<div>
<div class="dis-f al-item">
<div class="tab-item first-tab">
{{ data && data.data && data.data.gptype || '' }}
{{ (data && data.data && data.data.gptype) || "" }}
</div>
<div class="tab-item mg-l-8"
v-if="listData.data && listData.data.type[data && data.data && data.data.type]">
{{ listData.data && listData.data.type[data && data.data && data.data.type] || '' }}
<div class="tab-item mg-l-8" v-if="listData.data && listData.data.type[data && data.data && data.data.type]">
{{ (listData.data && listData.data.type[data && data.data && data.data.type]) || "" }}
</div>
<div class="tab-item mg-l-8"
v-if="data && data.data && data.data.elevator !== -1 && data.data.elevator">
{{ listData && listData.data && listData.data.elevator[data && data.data && data.data.elevator]
||
'' }}
<div class="tab-item mg-l-8" v-if="data && data.data && data.data.elevator !== -1 && data.data.elevator">
{{ (listData && listData.data && listData.data.elevator[data && data.data && data.data.elevator]) || "" }}
</div>
<div class="tab-item mg-l-8"
v-if="data && data.data && data.data.sunshinearea !== -1 && data.data.sunshinearea !== 0 && data.data.sunshinearea">
{{ listData && listData.data && listData.data.sunshinearea[data && data.data &&
data.data.sunshinearea] || '' }}
<div class="tab-item mg-l-8" v-if="data && data.data && data.data.sunshinearea !== -1 && data.data.sunshinearea !== 0 && data.data.sunshinearea">
{{ (listData && listData.data && listData.data.sunshinearea[data && data.data && data.data.sunshinearea]) || "" }}
</div>
<div class="tab-item mg-l-8"
v-if="listData && listData.data && listData.data.gender[data && data.data && data.data.gender] && data.data.gender">
{{
listData && listData.data && listData.data.gender[data && data.data && data.data.gender] ||
''
}}
<div class="tab-item mg-l-8" v-if="listData && listData.data && listData.data.gender[data && data.data && data.data.gender] && data.data.gender">
{{ (listData && listData.data && listData.data.gender[data && data.data && data.data.gender]) || "" }}
</div>
<div class="tab-item mg-l-8"
v-if="listData.data && listData.data.rentalduration">
{{ data.data.rentalduration
=== '0' ? '租期不限' :
listData.data.rentalduration[data.data && data.data.rentalduration] || ''
}}
<div class="tab-item mg-l-8" v-if="listData.data && listData.data.rentalduration">
{{ data.data.rentalduration === "0" ? "租期不限" : listData.data.rentalduration[data.data && data.data.rentalduration] || "" }}
</div>
</div>
<div class="address-text dis-f al-item"
v-if="data && data.data && data.data.location && !Array.isArray(data.data.location)">
<img src="../../assets/homeImage/addMarker.png" class="img" alt="">
<div class="address-text dis-f al-item" v-if="data && data.data && data.data.location && !Array.isArray(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 && data.data.location.substring(0, 1)]} >
${location &&
location.data[data && data.data && data.data.location]}` : ''
location && location.data && location.data[1]
? `${location && location.data && 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>
<div class="dis-f" style="flex-wrap: wrap;"
v-if="data && data.data && data.data.location && Array.isArray(data.data.location)">
<div class="address-text dis-f al-item mg-r-15" v-if="data && data.data && data.data.location"
v-for="(item, i) in data.data.location" :key="i">
<img src="../../assets/homeImage/addMarker.png" class="img" alt="">
<span>{{
location && location.data && location.data[1] ? `${location && location.data &&
location.data[item.substring(0,
1)]} >
${item.length === 1 ? '不限' : location &&
location.data[item]}` : ''
}}</span>
</div>
<div class="dis-f" style="flex-wrap: wrap;" v-if="data && data.data && data.data.location && Array.isArray(data.data.location)">
<template v-if="data && data.data && data.data.location">
<div class="address-text dis-f al-item mg-r-15" v-for="(item, i) in data.data.location" :key="i">
<img src="../../assets/homeImage/addMarker.png" class="img" alt="" />
<span>{{
location && location.data && location.data[1]
? `${location && location.data && location.data[Math.floor(item)]} >
${item.length === 1 ? "不限" : location && location.data[item]}`
: ""
}}</span>
<!-- <span>{{
location && location.data && location.data[1]
? `${location && location.data && location.data[item.substring(0, 1)]} >
${item.length === 1 ? "不限" : location && location.data[item]}`
: ""
}}</span> -->
</div>
</template>
</div>
<div class="price-text dis-f" style="align-items: end;">
<div class="unit">HK$</div>
<div class="price" v-if="!Array.isArray(data && data.data && data.data.rent)">{{ data && data.data
&& data.data.rent }}</div>
<div class="price" v-if="Array.isArray(data && data.data && data.data.rent)">{{ data && data.data
&&
data.data.rent[0] }}<span style="margin:0;" class="price" v-if="data && data.data && data.data.rent[1]">~{{ data && data.data && data.data.rent[1] }}</span></div>
<div class="price" v-if="!Array.isArray(data && data.data && data.data.rent)">{{ data && data.data && data.data.rent }}</div>
<div class="price" v-if="Array.isArray(data && data.data && data.data.rent)">
{{ data && data.data && data.data.rent[0] }}<span style="margin: 0;" class="price" v-if="data && data.data && data.data.rent[1]">~{{ data && data.data && data.data.rent[1] }}</span>
</div>
<span>/{{ data && data.data && data.data.rentalperiod }}</span>
<!-- <span class="time"
v-show="data && data.data && data.data.rentalduration != 0 && pageType == 2">[
@@ -93,70 +80,57 @@
<!-- 'img-150':routePath==='/detail' -->
<div class="img" :class="{ 'img-100': routePath === '/detail' && data && data.data && !data.data.isvideo }">
<div class="dis-f">
<img :src="data && data.data && data.data.ispic ? data && data.data.imageurl : data && data.data && data.data.isvideo ? data && data.data && data.data.imageurl : ''"
@load="loadFinish" @error="loadFinish" class="img "
:class="{ 'img-100': routePath === '/detail' && data && data.data && !data.data.isvideo }"
alt=""
v-if="data && data.data && data.data.ispic ? data && data.data.imageurl : data && data.data && data.data.isvideo ? data && data.data && data.data.imageurl : false">
<img :src="data && data.data && data.data.ispic ? data && data.data.imageurl : data && data.data && data.data.isvideo ? data && data.data && data.data.imageurl : ''" @load="loadFinish" @error="loadFinish" class="img" :class="{ 'img-100': routePath === '/detail' && data && data.data && !data.data.isvideo }" alt="" v-if="data && data.data && data.data.ispic ? data && data.data.imageurl : data && data.data && data.data.isvideo ? data && data.data && data.data.imageurl : false" />
<div class="s-img dis-f jus-x al-item" v-if="data && data.data && data.data.isvideo">
<img src="../../assets/homeImage/videoIcon.svg" class="img" alt="">
<img src="../../assets/homeImage/videoIcon.svg" class="img" alt="" />
</div>
</div>
</div>
</div>
<img src="../../assets/homeImage/corner.svg" class="tab-img" v-if="routePath === '/personHousing'" alt="">
<img src="../../assets/homeImage/intermediaryCorner.svg" v-if="routePath === '/intermediaryHousing'"
class="tab-img" alt="">
<img src="../../assets/homeImage/needHousingCorner.svg" v-if="routePath === '/needHousing'" class="tab-img"
alt="">
<img src="../../assets/homeImage/corner.svg" class="tab-img" v-if="routePath === '/personHousing'" alt="" />
<img src="../../assets/homeImage/intermediaryCorner.svg" v-if="routePath === '/intermediaryHousing'" class="tab-img" alt="" />
<img src="../../assets/homeImage/needHousingCorner.svg" v-if="routePath === '/needHousing'" class="tab-img" alt="" />
</div>
<div class="btm-line"></div>
<div class="btm-box dis-f al-item" :class="{ 'jus-bet': detailShow }">
<div class="dis-f al-item">
<img :src="data && data.data && data.data.avatar" class="user-img" alt="">
<img :src="data && data.data && data.data.avatar" class="user-img" alt="" />
<span class="user-name">{{ data && data.data && data.data.author }}</span>
<div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && !data.data.intermediary_text">
{{
listData && listData.data && listData.data.intermediary[data && data.data && data.data.intermediary] }}
{{ listData && listData.data && listData.data.intermediary[data && data.data && data.data.intermediary] }}
</div>
<div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && data.intermediary_text">{{
data &&
data.data.intermediary_text
}}</div>
<div class="btn" v-if="data && data.data && data.data.publishergender && pageType == 3">{{
listData && listData.data && listData.data.gender[data && data.data && data.data.publishergender]
}}</div>
<img src="../../assets/homeImage/intermediaryTabImg.png"
v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" alt="">
<div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && data.intermediary_text">{{ data && data.data.intermediary_text }}</div>
<div class="btn" v-if="data && data.data && data.data.publishergender && pageType == 3">{{ listData && listData.data && listData.data.gender[data && data.data && data.data.publishergender] }}</div>
<img src="../../assets/homeImage/intermediaryTabImg.png" v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" alt="" />
</div>
<!-- <img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img"
v-show="detailShow && data && data.data && data.data.verified == 1" alt=""> -->
</div>
</div>
</template>
<script setup>
import { ref, defineProps, reactive, onMounted, getCurrentInstance, watchEffect } from "vue";
import { useRoute, useRouter } from 'vue-router';
import store from '../../store/index';
import { ref, defineProps, reactive, onMounted, getCurrentInstance, watchEffect } from "vue"
import { useRoute, useRouter } from "vue-router"
import store from "../../store/index"
let props = defineProps({
item: {
type: Object
type: Object,
},
imgLoad: {
type: Function,
default: function () {
return () => { }
}
return () => {}
},
},
listId: {
type: [String, Number],
default: ''
default: "",
},
detailShow: {
type: Boolean,
default: false
}
default: false,
},
})
let data = reactive({ data: {} })
//显示样式
@@ -165,7 +139,6 @@ watchEffect(() => {
data.data = props.item
})
let listId = props.listId
let imgRef = null
let loadFinish = () => {
@@ -175,19 +148,18 @@ let loadFinish = () => {
//监听路由
const route = useRouter()
let routePath = ref('')
let routePath = ref("")
routePath.value = route.currentRoute.value.meta.path
//地区数据
let location = reactive({ data: {} })
location.data = store.state.indexData && store.state.indexData.config && store.state.indexData.config.location
//数据包
let listData = reactive({ data: {} })
listData.data = store.state.indexData && store.state.indexData.config || {}
listData.data = (store.state.indexData && store.state.indexData.config) || {}
let pageType = ref('')
let pageType = ref("")
//跳转
let router = useRouter()
@@ -195,7 +167,7 @@ let watchInfo = () => {
let seachData = router.currentRoute.value.query
if (pageType.value === 4) {
for (let key in data) {
store.state.seachSelect['seachPage'][key] = seachData[key]
store.state.seachSelect["seachPage"][key] = seachData[key]
}
}
// console.log(document.location.origin)
@@ -206,7 +178,6 @@ onMounted(() => {
imgRef = getCurrentInstance()
pageType.value = data.data.intermediary === 1 ? 2 : data.data.intermediary === 6 ? 3 : 1
})
</script>
<style scoped lang="less">
img {
@@ -352,7 +323,7 @@ img {
}
.title-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
@@ -374,11 +345,11 @@ img {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #7F7F7F;
color: #7f7f7f;
text-align: center;
}
@@ -387,14 +358,13 @@ img {
}
.address-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 15px;
color: #555555;
margin-top: 20px;
.img {
width: 18px;
height: 18px;
@@ -404,7 +374,7 @@ img {
}
.price-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
@@ -413,26 +383,26 @@ img {
line-height: 17px;
.time {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #7F7F7F;
color: #7f7f7f;
margin-left: 15px;
line-height: 19px;
}
.price {
font-family: 'Arial-Black', 'Arial Black', sans-serif;
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
font-size: 20px;
color: #F95D5D;
color: #f95d5d;
line-height: 20px;
margin: 0 5PX;
margin: 0 5px;
}
.unit {
font-family: 'Arial-Black', 'Arial Black', sans-serif;
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
color: #000000;
font-size: 14px;
@@ -464,7 +434,7 @@ img {
}
.user-name {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
color: #555555;
@@ -485,7 +455,7 @@ img {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
@@ -495,6 +465,3 @@ img {
}
}
</style>

2
src/components/pageTopBar/pageTopBar.vue
View File

@@ -43,7 +43,7 @@
<el-carousel :interval="5000" arrow="always" height="330" style="height: 330px;">
<el-carousel-item v-for="item in bannerLists.data" :key="item.feedId">
<div style="width: 100%; height: 100%;" class="dis-f jus-x al-item">
<img class="carousel-img" :src="item.imageurl" alt="" @click="openInfo(item)" />
<img class="carousel-img" :src="item.imageurl" alt="" :title="item.title" @click="openInfo(item)" />
</div>
</el-carousel-item>
</el-carousel>

1
src/components/public/apartment-item.vue
View File

@@ -72,6 +72,7 @@ const goapArtmentDetails = () => redirectToExternalWebsite(`/apartmentDetail?uni
height: 244px;
border-radius: 16px;
margin-bottom: 19px;
object-fit: cover;
}
.title {

5
src/store/index.js
View File

@@ -26,7 +26,10 @@ export default createStore({
showloginmodal: false, // 是否需要登录状态
apartmentPitchValue: {}, // 公寓筛选的值 全局化
needPitchValue: {}, // 求房源筛选的值 全局化
personPitchValue: {}, // 个人筛选的值 全局化
personPitchValue: {
types: 1.5,
// school: 314,
}, // 个人筛选的值 全局化
intermediaryPitchValue: {}, // 中介筛选的值 全局化
locationObj: {}, // 地区数据
bannerData: {}, // 所有轮播数据

3
src/utils/api.js
View File

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

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>