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-31 11:42:24 +08:00
parent a6eb45baed
commit 6793e4cd3e
9 changed files with 196 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<template>
<div class="list-item" ref="list" @click="watchInfo" :class="{'s-w-100':detailShow}">
<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="">
<div class="authentication-box dis-f al-item" v-if="data && data.data && data.data.verified == 1 && !detailShow">
@@ -245,7 +245,7 @@ img {
}
}
.list-item {
.item {
width: 590px;
background-color: rgba(255, 255, 255, 1);
border: none;

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

@@ -1,5 +1,5 @@
<template>
<div class="waterfall-box" v-if="itemData.type !== 'adv'"
<div class="item" v-if="itemData.type !== 'adv'"
:class="{ 'waterfall-box-housing': itemData.type === 'housing' }" @click="watchInfo">
<div class="flexflex pos-r">
<div class="box-tab-type" v-if="itemData.intermediarytext">
@@ -184,7 +184,7 @@ let watchAdv = () => {
border-radius: 16px 16px 35px 16px !important;
}
.waterfall-box {
.item {
width: 285px;
background: inherit;
background-color: rgba(255, 255, 255, 1);

6
src/utils/api.js
View File

@@ -2,7 +2,7 @@ import axios from "./axios";
export default{
index:(params={})=>{//首页数据
return axios.get('/tenement/pc/api/home',params)
return axios.post('/tenement/pc/api/home',params)
},
getApartment:(params={})=>{//获取首页公寓数据
return axios.get('/tenement/pc/api/home/getApartment',params)
@@ -20,13 +20,13 @@ export default{
return axios.get('/tenement/pc/api/search',params)
},
getLists:(params={})=>{//获取搜索数据 个人/中介/求房源
return axios.post('/tenement/pc/api/lists',params)
return axios.get('/tenement/pc/api/lists',params)
},
apartment:(params={})=>{//获取公寓列表
return axios.get('/tenement/pc/api/apartment',params)
},
details:(params={})=>{//房源详情
return axios.post('/tenement/pc/api/details',params)
return axios.get('/tenement/pc/api/details',params)
},
operation:(params={})=>{//收藏/取消收藏
return axios.post('/tenement/pc/api/user/operation',params)

156
src/views/HomeView.vue
View File

@@ -108,79 +108,12 @@
</div>
<div class="dis-f jus-x">
<div class="body-maxWidth dis-f al-item">
<div class="waterfall-box s-w-100">
<div>
<div v-show="waterfallList['1'].length === 0">
<skeletonBox v-show="waterfallList['1'].length === 0" v-for="item in noWaterfallList['1']" :key="item">
</skeletonBox>
</div>
<div ref="waterfall1" v-show="waterfallList['1'].length > 0">
<div class="waterfall-first-box dis-f">
<div class="info-box dis-f jus-x al-item first" @click="indexWaterfallBoxCheck('/personHousing')">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/person.png" class="img" alt="">
</div>
<div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[0].name }}</div>
</div>
</div>
<div class="info-box dis-f jus-x al-item second" @click="indexWaterfallBoxCheck('/intermediaryHousing')">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/intermediary.png" class="img" alt="">
</div>
<div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[1].name }}</div>
</div>
</div>
<div class="info-box dis-f jus-x al-item third" @click="indexWaterfallBoxCheck('/apartment')">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/brand.png" class="img" alt="">
</div>
<div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[2].name }}</div>
</div>
</div>
<div class="info-box dis-f jus-x al-item" @click="indexWaterfallBoxCheck('/needHousing')">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/seek.png" class="img" alt="">
</div>
<div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[3].name }}</div>
</div>
</div>
</div>
<!-- 骨架屏 -->
<indexWaterfallBox v-for="(item, i) in waterfallList['1']" :data="item" :key="i"></indexWaterfallBox>
</div>
</div>
<div>
<div v-show="waterfallList['2'].length === 0">
<skeletonBox v-show="waterfallList['2'].length === 0" v-for="item in noWaterfallList['2']" :key="item">
</skeletonBox>
</div>
<div ref="waterfall2" v-show="waterfallList['2'].length > 0">
<indexWaterfallBox v-for="(item, i) in waterfallList['2']" :data="item" :key="i"></indexWaterfallBox>
</div>
<!-- <img src="../assets/homeImage/liveImg.svg" class="live-img" alt=""> -->
</div>
<div>
<div v-show="waterfallList['3'].length === 0">
<skeletonBox v-show="waterfallList['3'].length === 0" v-for="item in noWaterfallList['3']" :key="item">
</skeletonBox>
</div>
<div ref="waterfall3" v-show="waterfallList['3'].length > 0">
<indexWaterfallBox v-for="(item, i) in waterfallList['3']" :data="item" :key="i"></indexWaterfallBox>
</div>
</div>
<div>
<div v-show="waterfallList['4'].length === 0">
<skeletonBox v-show="waterfallList['4'].length === 0" v-for="item in noWaterfallList['4']" :key="item">
</skeletonBox>
</div>
<div ref="waterfall4" v-show="waterfallList['4'].length > 0">
<indexWaterfallBox v-for="(item, i) in waterfallList['4']" :data="item" :key="i"></indexWaterfallBox>
</div>
</div>
<div v-show="waterfallList.length === 0">
<skeletonBox v-for="item in noWaterfallList" :key="item">
</skeletonBox>
</div>
<div class="waterfall-box s-w-100" ref="list" v-show="waterfallList.length >0">
<indexWaterfallBox v-for="(item, i) in waterfallList" :data="item" :key="i"></indexWaterfallBox>
</div>
</div>
</div>
@@ -207,7 +140,10 @@ import store from '../store/index';
import api from "../utils/api";
import { ElMessage } from 'element-plus'
import backToTop from '@/components/public/backToTop.vue'
import Masonry from 'masonry-layout';
//瀑布实例
let listMasonryInstance = null
//
let informationData = ref([
{}, {}
@@ -263,23 +199,8 @@ let currentInstance = null
let pagevalue = ref(0)
//瀑布流数据
let pages = ref(1)
let waterfallList = reactive({ 1: [], 2: [], 3: [], 4: [] })
let noWaterfallList = reactive({ 1: 3, 2: 3, 3: 3, 4: 3 })
//判断最小值
let getMinHeight = (data) => {
if (!currentInstance.ctx.$refs&&!currentInstance.ctx.$refs.waterfall1) return
let waterfallAll = [
currentInstance.ctx.$refs.waterfall1.offsetHeight,
currentInstance.ctx.$refs.waterfall2.offsetHeight,
currentInstance.ctx.$refs.waterfall3.offsetHeight,
currentInstance.ctx.$refs.waterfall4.offsetHeight
]
let min = Math.min(waterfallAll[0], waterfallAll[1], waterfallAll[2], waterfallAll[3])
let index = waterfallAll.indexOf(min)
waterfallList[index + 1].push(data)
// console.log(index,waterfallAll)
}
let waterfallList = ref([])
let noWaterfallList = ref(3)
//轮播
let bannerList = reactive({ data: [] })
@@ -291,14 +212,6 @@ let banner = () => {
})
}
//瀑布流添加
let addListData = (data) => {
data.map((res) => {
setTimeout(() => {
getMinHeight(res)
}, 500)
})
}
//开关
let loadMore = ref(true)
let loadText = ref('加载中.....')
@@ -313,7 +226,8 @@ let getRecommendList = () => {
console.log(res)
if (res.code === 200) {
if (res.data.pagevalue) {
addListData(res.data.data)
if (pages.value === 1) waterfallList.value = []
waterfallList.value = waterfallList.value.concat(res.data.data)
pagevalue.value = res.data.pagevalue
}
if (res.data.data.length >= 30) {
@@ -322,6 +236,10 @@ let getRecommendList = () => {
loadMore.value = false
loadText.value = '到底了'
}
nextTick(() => {
listMasonryInstance.reloadItems();
listMasonryInstance.layout();
})
} else {
ElMessage({
message: res.message,
@@ -347,7 +265,6 @@ let listDataTypeChange = (item) => {
//监听滚动条
const onPageSrcoll = (e) => {
if (!loadMore.value || waterfallList['4'].length === 0) return
let body = document.documentElement ? document.documentElement : document.body ?
document.body :
document.querySelector('.element');
@@ -365,29 +282,23 @@ const onPageSrcoll = (e) => {
//瀑布流模块
const router = useRouter()
let indexWaterfallBoxCheck = (res) => {
console.log(res)
router.push({
path: res
})
}
//跳转个人房源
let personHouseingInfo = (type, data, areaItem) => {
console.log(type, data, areaItem)
let areaItems={}
let setData=null
if(type==="location"){
areaItems=JSON.parse(areaItem)
setData=data.toString()
}else{
setData=data.id
let areaItems = {}
let setData = null
if (type === "location") {
areaItems = JSON.parse(areaItem)
setData = data.toString()
} else {
setData = data.id
}
router.push({
path: `/personHousing`,
query: {
[type]:setData,
areaItem:areaItems['id']?`${areaItems['id']}`:''
[type]: setData,
areaItem: areaItems['id'] ? `${areaItems['id']}` : ''
},
// params:{
// type,
@@ -396,14 +307,19 @@ let personHouseingInfo = (type, data, areaItem) => {
})
}
const list = ref(null)
onMounted(() => {
listMasonryInstance = new Masonry(list.value, {
itemSelector: '.item',
gutter: 20,
percentPosition: true
});
document.documentElement.scrollTop = 0
currentInstance = getCurrentInstance()
setTimeout(() => {
getRecommendList()
banner()
window.addEventListener('scroll', onPageSrcoll, true);
}, 1000)
getRecommendList()
banner()
window.addEventListener('scroll', onPageSrcoll, true);
})
onBeforeUnmount(() => {

99
src/views/detail.vue
View File

@@ -17,9 +17,9 @@
housingInfo['data'] &&
housingInfo['data'].isintermediary == 1" alt="">
<div class="line" v-if="housingInfo['data'] && housingInfo['data'].info.verified
||pageType == 2 &&
housingInfo['data'] &&
housingInfo['data'].isintermediary == 1"></div>
|| pageType == 2 &&
housingInfo['data'] &&
housingInfo['data'].isintermediary == 1"></div>
<span class="need-houing-type" v-if="pageType == 3">预算</span>
<span class="unit">HK$</span>
<span class="rent" v-if="pageType != 3">{{ housingInfo['data'] &&
@@ -73,7 +73,8 @@
</div>
</div>
<div class="concat-btn-box" :class="{ 'concat-btn-show': concatType }">
<div class="contact-btn top-contact-btn" style="margin:0 0 0 10px;" @click="getConcatData">
<div class="contact-btn top-contact-btn" style="margin:0 0 0 10px;"
@click="getConcatData">
联系方式
</div>
</div>
@@ -85,8 +86,9 @@
<div class="info-box">
<div class="detail-price-box">
<span class="need-houing-type" v-if="pageType == 3">预算</span>
<span class="unit" :style="{'font-size':pageType===3?'20px':''}">HK$</span><span class="rent" v-if="pageType != 3">{{
housingInfo['data'] && housingInfo['data'].info.rent }}</span>
<span class="unit" :style="{ 'font-size': pageType === 3 ? '20px' : '' }">HK$</span><span
class="rent" v-if="pageType != 3">{{
housingInfo['data'] && housingInfo['data'].info.rent }}</span>
<span class="rent" v-if="pageType == 3">
{{
housingInfo['data'] && housingInfo['data'].info.rent[0]
@@ -145,8 +147,9 @@
</div>
</div>
</div>
<div class="image-box" v-if="(housingInfo['data'] && housingInfo['data'].info && housingInfo['data'].info.video) ||
(housingInfo['data'] && housingInfo['data'].info && housingInfo['data'].info.picturegroup)">
<div class="image-box"
v-if="(housingInfo['data'] && housingInfo['data'].info && housingInfo['data'].info.video) ||
(housingInfo['data'] && housingInfo['data'].info && housingInfo['data'].info.picturegroup)">
<div class="dis-f al-item">
<img src="../assets/img/detail/videoIcon.png" v-if="housingInfo['data'] &&
housingInfo['data'].info.video &&
@@ -230,15 +233,16 @@
<div class="title-box">
所在楼层
</div>
<div class="text"
v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.floor" :key="i"
:class="{ 'mg-l-30': i === 0 }">
{{
item == 0 ? '不限' :
indexData['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['floor'][item]
}}
<div class="text">
<span v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.floor"
:key="i" :class="[i === 0 ? 'mg-l-30' : 'mg-l-10']">
{{
item == 0 ? '不限' :
indexData['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['floor'][item]
}}
</span>
<!-- {{ housingInfo['data'] && housingInfo['data'].info.floor }} -->
</div>
</div>
@@ -261,16 +265,18 @@
<div class="title-box">
晾晒区
</div>
<div class="text"
v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.sunshinearea"
:key="i" :class="{ 'mg-l-30': i === 0 }">
{{
item == 0 ? '不限' :
indexData['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['sunshinearea'][housingInfo['data'] &&
housingInfo['data'].info.sunshinearea]
}}
<div class="text">
<span
v-for="(item, i) in housingInfo['data'] && housingInfo['data'].info.sunshinearea"
:key="i" :class="[i === 0 ? 'mg-l-30' : 'mg-l-10']">
{{
item == 0 ? '不限' :
indexData['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['sunshinearea'][housingInfo['data'] &&
housingInfo['data'].info.sunshinearea]
}}
</span>
</div>
</div>
<div class="info dis-f al-item"
@@ -449,7 +455,8 @@
location && location[housingInfo['data'] && housingInfo['data']['info'].location]
}}</span>
</div>
<div class="dis-f jus-x" style="margin-top:15px;" v-if="housingInfo['data'] && housingInfo['data'].info.latitude">
<div class="dis-f jus-x" style="margin-top:15px;"
v-if="housingInfo['data'] && housingInfo['data'].info.latitude">
<div>
<mapInfo :latlng="{
longitude: housingInfo['data'].info.longitude * 1,
@@ -579,8 +586,9 @@
<div>
如房源信息中有内容侵犯了您的合法权益，可点击屏幕右侧的举报或联系寄托方同学（微信号
<el-dropdown>
<span class="text-line line-h-30" @click="clone(concatInfo.data && concatInfo.data.wechat)">{{
concatInfo.data && concatInfo.data.wechat }}</span>
<span class="text-line line-h-30"
@click="clone(concatInfo.data && concatInfo.data.wechat)">{{
concatInfo.data && concatInfo.data.wechat }}</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>
@@ -613,7 +621,7 @@
<img src="../assets/homeImage/intermediaryTabImg.png" class="intermediary-logo" alt="">
</div>
<div class="dis-f jus-x"
v-if="pageType!=2||(pageType == 2 && housingInfo['data'] && housingInfo['data'].isintermediary != 1)">
v-if="pageType != 2 || (pageType == 2 && housingInfo['data'] && housingInfo['data'].isintermediary != 1)">
<div class="user-type">
{{
indexData['data'] &&
@@ -642,7 +650,8 @@
<div class="dis-f al-item jus-x time-box"
v-if="housingInfo['data'] && housingInfo['data'].verifiedlistingcount">
<img src="../assets/img/detail/presonNumIcon.png" class="icon" alt="">
<div class="dis-f al-item">认证房源 x {{ housingInfo['data'] && housingInfo['data'].verifiedlistingcount }}</div>
<div class="dis-f al-item">认证房源 x {{ housingInfo['data'] &&
housingInfo['data'].verifiedlistingcount }}</div>
</div>
</div>
<div class="intermediary-info-box" v-if="housingInfo['data'] && housingInfo['data'].contacts">
@@ -744,7 +753,8 @@
<div class="dis-f jus-x" v-if="pageType != 3 && (recommendListData.length > 0 || publisherList.length > 0)">
<div class="body-maxWidth housing-title" style="margin-top:50px;">
{{ pageType == 2 && housingInfo['data'].isintermediary ? `发布者的其他房源（${publisherList.length}）` :
pageType == 1 && housingInfo['data'] && housingInfo['data']['info'].verified ? `发布者的其他认证房源（${publisherList.length}）`:'附近房源' }}
pageType == 1 && housingInfo['data'] && housingInfo['data']['info'].verified ?
`发布者的其他认证房源（${publisherList.length}）` : '附近房源' }}
</div>
</div>
<div class="dis-f jus-x al-item" style="position: relative;" v-if="pageType != 3">
@@ -1206,11 +1216,11 @@ let setNavigation = () => {
},
secondaryIndex: {
path: '/needHousing',
title:'求房源'
title: '求房源'
}
}
}
console.log(111,store.state.routeList)
console.log(111, store.state.routeList)
}
//中介数据
let contacts = reactive({
@@ -1236,7 +1246,7 @@ let getHousingInfo = () => {
})
concatInfo['data'] = store.state.indexData.wechat
if (res.data.contacts) contacts['data'] = res.data.contacts
if ((pageType.value == 2 && housingInfo['data'].isintermediary)||(pageType.value ==1 && housingInfo['data']['info'].verified)) {
if ((pageType.value == 2 && housingInfo['data'].isintermediary) || (pageType.value == 1 && housingInfo['data']['info'].verified)) {
getPublisherList()
} else if (pageType.value != 3) {
recommendList()
@@ -1884,8 +1894,8 @@ img {
}
}
.top-contact-btn{
width:200px !important;
.top-contact-btn {
width: 200px !important;
}
.contact-btn {
@@ -2036,7 +2046,7 @@ img {
padding: 20px 10px;
margin-top: 30px;
box-sizing: border-box;
line-height:20px;
line-height: 20px;
.business-card-btn {
width: 100px;
@@ -2425,6 +2435,10 @@ img {
width: 100%;
}
.mg-l-10 {
margin-left: 10px;
}
.mg-l-30 {
margin-left: 30px;
}
@@ -2481,8 +2495,9 @@ img {
color: #7F7F7F;
font-size: 13px;
margin-top: 30px;
.line-h-30{
line-height:30px;
.line-h-30 {
line-height: 30px;
}
.wx-qrcode-s {
@@ -2535,7 +2550,7 @@ img {
font-weight: 400;
font-style: normal;
color: #7F7F7F;
font-size:13px;
font-size: 13px;
.houseing-info-box-s {
padding: 0 15px;

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

@@ -3,16 +3,9 @@
<pageTopBar></pageTopBar>
<seachModule :count="dataList.count" :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">
<div ref="list">
<biserialItem v-for="(item, i) in pageList['1']" :key="i" :item="item" :imgLoad="watchImgLoad"
listId="1"></biserialItem>
</div>
<div>
<biserialItem v-for="(item, i) in pageList['2']" :key="i" :item="item" :imgLoad="watchImgLoad"
listId="2"></biserialItem>
</div>
<div class="body-maxWidth mg-t-35" >
<div v-show="dataList.data && dataList.data.length > 0" ref="list">
<biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
</div>
<div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
<noList></noList>
@@ -44,12 +37,15 @@ 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'
import Masonry from 'masonry-layout';
//瀑布实例
let listMasonryInstance = null
//获取数据
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 pageList = ref([])
let seachSelectData = reactive({ data: {} })
let loading = ref(true)
let loadingText=ref(' 加载中... ')
@@ -65,14 +61,6 @@ let setSeachSelectData = (data) => {
getDataList(seachSelectData.data)
}
//初始化列表参数
let setInitial = () => {
pageList[1] = []
pageList[2] = []
pageList.height1 = 0
pageList.height2 = 0
}
//获取搜索数据
let getDataList = (data) => {
if(!loading.value)return
@@ -92,14 +80,16 @@ let getDataList = (data) => {
loadingText.value=' 加载中... '
}
if (pages.value === 1) {
setInitial()
pageList.value = []
}
pageList.value = pageList.value.concat(res.data.data)
pageList.tab = 1
dataList.count = res.data.count
dataCount.value = res.data.count
nextTick(() => {
if(dataList.data[0])pageList['1'].push(dataList.data[0])
if(dataList.data[1])pageList['2'].push(dataList.data[1])
listMasonryInstance.reloadItems();
listMasonryInstance.layout();
if (dataList.data.length >= 20) loading.value = true
})
} else {
ElMessage({
@@ -110,32 +100,6 @@ let getDataList = (data) => {
})
}
//添加数据
let addListData = () => {
let num = null
if (pageList.tab > (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
if(dataList.data.length>=20){
loading.value = true
}else{
loading.value = false
}
return
}
pageList.tab++
if (pageList.height1 > pageList.height2) {
num = 2
} else {
num = 1
}
pageList[num].push(dataList.data[pageList.tab])
}
//监听图片加载
let watchImgLoad = (id, listId, height) => {
pageList[`height${listId}`] += height
addListData()
}
//加载更多
let downLoadMore = () => {
tool.loadMore(() => {
@@ -145,8 +109,15 @@ let downLoadMore = () => {
})
}
let list = ref('')
//listImg
onMounted(() => {
listMasonryInstance = new Masonry(list.value, {
itemSelector: '.item',
gutter: 20,
percentPosition: true
});
getDataList()
window.addEventListener('scroll', downLoadMore, true);
})

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

@@ -3,16 +3,9 @@
<pageTopBar></pageTopBar>
<seachModule :count="dataList.count" :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">
<div ref="list">
<biserialItem v-for="(item, i) in pageList['1']" :key="i" :item="item" :imgLoad="watchImgLoad"
listId="1"></biserialItem>
</div>
<div>
<biserialItem v-for="(item, i) in pageList['2']" :key="i" :item="item" :imgLoad="watchImgLoad"
listId="2"></biserialItem>
</div>
<div class="body-maxWidth mg-t-35" >
<div v-show="dataList.data && dataList.data.length > 0" ref="list">
<biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
</div>
<div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
<noList></noList>
@@ -44,12 +37,16 @@ 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'
import Masonry from 'masonry-layout';
//瀑布实例
let listMasonryInstance = null
//获取数据
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 pageList = ref([])
let seachSelectData = reactive({ data: {} })
let loading = ref(true)
let loadingText=ref(' 加载中... ')
@@ -65,14 +62,6 @@ let setSeachSelectData = (data) => {
getDataList(seachSelectData.data)
}
//初始化列表参数
let setInitial = () => {
pageList[1] = []
pageList[2] = []
pageList.height1 = 0
pageList.height2 = 0
}
//获取搜索数据
let getDataList = (data) => {
if(!loading.value)return
@@ -92,14 +81,16 @@ let getDataList = (data) => {
loadingText.value=' 加载中... '
}
if (pages.value === 1) {
setInitial()
pageList.value = []
}
pageList.value = pageList.value.concat(res.data.data)
pageList.tab = 1
dataList.count = res.data.count
dataCount.value = res.data.count
nextTick(() => {
if(dataList.data[0])pageList['1'].push(dataList.data[0])
if(dataList.data[1])pageList['2'].push(dataList.data[1])
listMasonryInstance.reloadItems();
listMasonryInstance.layout();
if (dataList.data.length >= 20) loading.value = true
})
} else {
ElMessage({
@@ -110,33 +101,6 @@ let getDataList = (data) => {
})
}
//添加数据
let addListData = () => {
let num = null
if (pageList.tab > (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
console.log(dataList.data.length,20,loading.value)
if(dataList.data.length>=20){
loading.value = true
}else{
loading.value = false
}
return
}
pageList.tab++
if (pageList.height1 > pageList.height2) {
num = 2
} else {
num = 1
}
pageList[num].push(dataList.data[pageList.tab])
}
//监听图片加载
let watchImgLoad = (id, listId, height) => {
pageList[`height${listId}`] += height
addListData()
}
//加载更多
let downLoadMore = () => {
tool.loadMore(() => {
@@ -146,8 +110,15 @@ let downLoadMore = () => {
})
}
let list = ref('')
//listImg
onMounted(() => {
listMasonryInstance = new Masonry(list.value, {
itemSelector: '.item',
gutter: 20,
percentPosition: true
});
getDataList()
window.addEventListener('scroll', downLoadMore, true);
})

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

@@ -4,15 +4,8 @@
<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">
<div ref="list">
<biserialItem v-for="(item, i) in pageList['1']" :key="i" :item="item" :imgLoad="watchImgLoad"
listId="1"></biserialItem>
</div>
<div>
<biserialItem v-for="(item, i) in pageList['2']" :key="i" :item="item" :imgLoad="watchImgLoad"
listId="2"></biserialItem>
</div>
<div v-show="dataList.data && dataList.data.length > 0" ref="list">
<biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
</div>
<div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
<noList></noList>
@@ -28,7 +21,6 @@
<circle-btn></circle-btn>
<back-to-top></back-to-top>
</template>
<script setup>
@@ -46,16 +38,19 @@ 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'
import Masonry from 'masonry-layout';
//路由
const router = useRouter()
//瀑布实例
let listMasonryInstance = null
//获取数据
let pages = ref(1)
let dataList = reactive({ data: [], count: 0 })
let dataList = reactive({ data: [], count: null })
let dataCount = ref(0)
let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })
let pageList = ref([])
let seachSelectData = reactive({ data: {} })
let loading = ref(true)
let loadingText = ref(' 加载中... ')
@@ -72,14 +67,6 @@ let setSeachSelectData = (data) => {
getDataList(seachSelectData.data)
}
//初始化列表参数
let setInitial = () => {
pageList[1] = []
pageList[2] = []
pageList.height1 = 0
pageList.height2 = 0
}
//获取搜索数据
let getDataList = (data) => {
if (!loading.value) return
@@ -92,20 +79,22 @@ let getDataList = (data) => {
api.getLists(postData).then(res => {
if (res.code === 200) {
dataList.data = res.data.data
if(res.data.data.length<20){
loadingText.value=' 到底了 '
}else{
loadingText.value=' 加载中... '
if (res.data.data.length < 20) {
loadingText.value = ' 到底了 '
} else {
loadingText.value = ' 加载中... '
}
if (pages.value === 1) {
setInitial()
pageList.value = []
}
pageList.value = pageList.value.concat(res.data.data)
pageList.tab = 1
dataList.count = res.data.count
dataCount.value = res.data.count
nextTick(() => {
if (dataList.data[0]) pageList['1'].push(dataList.data[0])
if (dataList.data[1]) pageList['2'].push(dataList.data[1])
listMasonryInstance.reloadItems();
listMasonryInstance.layout();
if (dataList.data.length >= 20) loading.value = true
})
} else {
ElMessage({
@@ -116,31 +105,6 @@ let getDataList = (data) => {
})
}
//添加数据
let addListData = () => {
let num = null
if (pageList.tab > (dataList.count > 20 ? dataList.data.length - 2 : dataList.count - 2)) {
if (dataList.data.length >= 20) {
loading.value = true
} else {
loading.value = false
}
return
}
pageList.tab++
if (pageList.height1 > pageList.height2) {
num = 2
} else {
num = 1
}
pageList[num].push(dataList.data[pageList.tab])
}
//监听图片加载
let watchImgLoad = (id, listId, height) => {
pageList[`height${listId}`] += height
addListData()
}
//加载更多
let downLoadMore = () => {
@@ -151,18 +115,25 @@ let downLoadMore = () => {
})
}
let list = ref(null)
//listImg
onMounted(() => {
let {type,data}=router.currentRoute.value.query
let typeData = null
if (data) typeData = JSON.parse(data)
if (data && Object.keys(data).length > 0) {
if (type !== 'location') {
seachSelectData.data = { [type]: typeData.id }
} else {
seachSelectData.data = { [type]: typeData }
}
}
listMasonryInstance = new Masonry(list.value, {
itemSelector: '.item',
gutter: 20,
percentPosition: true
});
// let { type, data } = router.currentRoute.value.query
// let typeData = null
// if (data) typeData = JSON.parse(data)
// if (data && Object.keys(data).length > 0) {
// if (type !== 'location') {
// seachSelectData.data = { [type]: typeData.id }
// } else {
// seachSelectData.data = { [type]: typeData }
// }
// }
getDataList(seachSelectData.data)
window.addEventListener('scroll', downLoadMore, true);
})

39
src/views/seachIndex.vue
View File

@@ -4,18 +4,12 @@
<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="dis-f jus-bet"
v-show="dataList.data && dataList.data.length > 0 && seachSelectData.data.tabType !== 'apartment' && seachSelectData.data.intermediary !== ''">
<div ref="list">
<biserialItem v-for="(item, i) in pageList['1']" :key="i" :item="item" :imgLoad="watchImgLoad"
listId="1"></biserialItem>
</div>
<div>
<biserialItem v-for="(item, i) in pageList['2']" :key="i" :item="item" :imgLoad="watchImgLoad"
listId="2"></biserialItem>
</div>
<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 v-show="seachSelectData.data && seachSelectData.data.tabType === 'apartment' && dataList.data && dataList.data.length > 0"
<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>
@@ -56,12 +50,14 @@ let routeQuery = reactive({ data: {} })
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 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)
//保存搜索设置
@@ -110,19 +106,26 @@ let getDataList = (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(() => {
if (dataList.data[0]) pageList['1'].push(dataList.data[0])
if (dataList.data[1]) pageList['2'].push(dataList.data[1])
// if (dataList.data[0]) pageList['1'].push(dataList.data[0])
// if (dataList.data[1]) pageList['2'].push(dataList.data[1])
console.log('listMasonryInstance',listMasonryInstance)
listMasonryInstance.reloadItems();
listMasonryInstance.layout();
})
} else {
let data = res.data
@@ -135,7 +138,7 @@ let getDataList = (data) => {
masonryInstance.reloadItems();
masonryInstance.layout();
if (res.data.data.length >= 20) {
console.log(123)
// console.log(123)
loading.value = true
}
})
@@ -191,8 +194,14 @@ let downLoadMore = () => {
let inputModuleInfo = ref(null)
const gridContainer = ref(null);
const list = ref(null)
//listImg
onMounted(() => {
listMasonryInstance = new Masonry(list.value, {
itemSelector: '.item',
gutter: 20,
percentPosition:true
});
masonryInstance = new Masonry(gridContainer.value, {
itemSelector: '.item',
gutter: 20