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-25 15:12:25 +08:00
parent d999e79f10
commit 761793fe06
3 changed files with 168 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -112,6 +112,7 @@ let props = defineProps({
let data = reactive({ data: {} }) let data = reactive({ data: {} })
watchEffect(() => { watchEffect(() => {
data.data = props.item data.data = props.item
console.log(123,data.data)
}) })

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

@@ -1,5 +1,4 @@
<template> <template>
<div>
<div class="waterfall-box" v-if="itemData.type !== 'adv'" <div class="waterfall-box" v-if="itemData.type !== 'adv'"
:class="{ 'waterfall-box-housing': itemData.type === 'housing' }"> :class="{ 'waterfall-box-housing': itemData.type === 'housing' }">
<div class="flexflex pos-r"> <div class="flexflex pos-r">
@@ -85,7 +84,6 @@
<!-- 广告 --> <!-- 广告 -->
</div> </div>
<img :src="itemData.imageLocal || itemData.image" class="live-img" v-if="itemData.type === 'adv'" alt=""> <img :src="itemData.imageLocal || itemData.image" class="live-img" v-if="itemData.type === 'adv'" alt="">
</div>
</template> </template>
<script setup> <script setup>

243
src/views/detail.vue
View File

@@ -88,7 +88,9 @@
租期 租期
</div> </div>
<div class="type-text"> <div class="type-text">
{{ !housingInfo['data']||housingInfo['data'] && housingInfo['data'].info.rentalduration === '0' ? {{ !housingInfo['data'] || housingInfo['data'] &&
housingInfo['data'].info.rentalduration
=== '0' ?
'不限' : `${housingInfo['data'] && housingInfo['data'].info.rentalduration} '不限' : `${housingInfo['data'] && housingInfo['data'].info.rentalduration}
${housingInfo['data'] && housingInfo['data'].info.rentalperiod}` }} ${housingInfo['data'] && housingInfo['data'].info.rentalperiod}` }}
</div> </div>
@@ -108,21 +110,24 @@
<div class="image-box"> <div class="image-box">
<div class="dis-f al-item"> <div class="dis-f al-item">
<img src="../assets/img/detail/videoIcon.png" class="img-video" alt=""> <img src="../assets/img/detail/videoIcon.png" class="img-video" alt="">
<div class="num-box">{{ housingInfo['data'] &&housingInfo['data'].info.video? <div class="num-box">{{ housingInfo['data'] && housingInfo['data'].info.video ?
housingInfo['data']&&housingInfo['data'].info.video.length:0 }}</div> housingInfo['data'] && housingInfo['data'].info.video.length : 0 }}</div>
<img src="../assets/img/detail/imageIcon.png" class="img-icon" alt=""> <img src="../assets/img/detail/imageIcon.png" class="img-icon" alt="">
<div class="num-box">{{housingInfo['data'] &&housingInfo['data'].info.picturegroup.length ||0 }}</div> <div class="num-box">{{ housingInfo['data'] && housingInfo['data'].info.picturegroup.length
|| 0 }}</div>
</div> </div>
<div class="img-list-box dis-f jus-x al-item" @click="imageShow=true"> <div class="img-list-box dis-f jus-x al-item" @click="imageShow = true">
<img src="../assets/img/detail/moreNot.svg" class="icon left-icon" alt="" <img src="../assets/img/detail/moreNot.svg" class="icon left-icon" alt=""
@click.stop="moveImageList('left')" v-show="imgListTab===0"> @click.stop="moveImageList('left')" v-show="imgListTab === 0">
<img src="../assets/img/detail/moreAllow.svg" class="icon left-icon" alt="" <img src="../assets/img/detail/moreAllow.svg" class="icon left-icon" alt=""
style="transform: rotate(180deg);" @click.stop="moveImageList('left')" v-show="imgListTab>0"> style="transform: rotate(180deg);" @click.stop="moveImageList('left')"
v-show="imgListTab > 0">
<img src="../assets/img/detail/moreAllow.svg" class="icon right-icon" alt="" <img src="../assets/img/detail/moreAllow.svg" class="icon right-icon" alt=""
@click.stop="moveImageList('right')" v-show="imgList.length-1!==imgListTab"> @click.stop="moveImageList('right')" v-show="imgList.length - 1 !== imgListTab">
<img src="../assets/img/detail/moreNot.svg" class="icon right-icon" alt="" <img src="../assets/img/detail/moreNot.svg" class="icon right-icon" alt=""
style="transform: rotate(180deg);" @click.stop="moveImageList('right')" v-show="imgList.length-1===imgListTab"> style="transform: rotate(180deg);" @click.stop="moveImageList('right')"
<div class="dis-f al-item list-box" ref="imageList" v-if="imgList.length > 0" > v-show="imgList.length - 1 === imgListTab">
<div class="dis-f al-item list-box" ref="imageList" v-if="imgList.length > 0">
<div v-for="(item, i) in imgList" :key="i"> <div v-for="(item, i) in imgList" :key="i">
<div class="video" v-if="item && !item.thumbnail"> <div class="video" v-if="item && !item.thumbnail">
<div class="icon-box dis-f jus-x al-item"> <div class="icon-box dis-f jus-x al-item">
@@ -132,8 +137,8 @@
@error="setImageWidth(i)" alt=""> @error="setImageWidth(i)" alt="">
</div> </div>
<div class="img dis-f" v-if="item && item.thumbnail"> <div class="img dis-f" v-if="item && item.thumbnail">
<img class="img" style="margin:0;" ref="imgData" :src="item.thumbnail" @load="setImageWidth(i)" <img class="img" style="margin:0;" ref="imgData" :src="item.thumbnail"
@error="setImageWidth(i)" alt=""> @load="setImageWidth(i)" @error="setImageWidth(i)" alt="">
</div> </div>
</div> </div>
</div> </div>
@@ -154,8 +159,8 @@
<span class="text"> <span class="text">
{{ {{
indexData['data'] && indexData['data'] &&
indexData['data']['config']&& indexData['data']['config'] &&
indexData['data']['config']['property'][housingInfo['data'] && indexData['data']['config']['property'][housingInfo['data'] &&
housingInfo['data'].info.property] housingInfo['data'].info.property]
}} }}
</span> </span>
@@ -171,7 +176,7 @@
<span class="text" style="margin-left:0;"> <span class="text" style="margin-left:0;">
{{ {{
indexData['data'] && indexData['data'] &&
indexData['data']['config']&& indexData['data']['config'] &&
indexData['data']['config']['elevator'][housingInfo['data'] && indexData['data']['config']['elevator'][housingInfo['data'] &&
housingInfo['data'].info.elevator] housingInfo['data'].info.elevator]
}} }}
@@ -187,7 +192,7 @@
housingInfo['data'] && housingInfo['data'] &&
housingInfo['data'].info.sunshinearea housingInfo['data'].info.sunshinearea
!== -1 ? !== -1 ?
indexData['data']['config']&& indexData['data']['config'] &&
indexData['data']['config']['sunshinearea'][housingInfo['data'] && indexData['data']['config']['sunshinearea'][housingInfo['data'] &&
housingInfo['data'].info.sunshinearea] : '' housingInfo['data'].info.sunshinearea] : ''
}} }}
@@ -211,7 +216,7 @@
<span class="text"> <span class="text">
{{ {{
indexData['data'] && indexData['data'] &&
indexData['data']['config']&& indexData['data']['config'] &&
indexData['data']['config']['gender'][housingInfo['data'] && indexData['data']['config']['gender'][housingInfo['data'] &&
housingInfo['data'].info.gender] housingInfo['data'].info.gender]
}} }}
@@ -222,11 +227,11 @@
<div class="map-box"> <div class="map-box">
<div class="dis-f al-item title-box"> <div class="dis-f al-item title-box">
<img src="../assets/img/detail/mapIcon.png" class="img" alt=""> <img src="../assets/img/detail/mapIcon.png" class="img" alt="">
<span class="title">{{ <!-- <span class="title">{{
location[housingInfo['data']&&housingInfo['data']['info'].location.substring(0, 1)] location[housingInfo['data']&&housingInfo['data']['info'].location.substring(0, 1)]
}} > {{ }} > {{
location[housingInfo['data']&&housingInfo['data']['info'].location] location[housingInfo['data']&&housingInfo['data']['info'].location]
}}</span> }}</span> -->
</div> </div>
<div class="dis-f jus-x" style="margin-top:15px;"> <div class="dis-f jus-x" style="margin-top:15px;">
<!-- <div class="map-s"> <!-- <div class="map-s">
@@ -265,12 +270,11 @@
alt=""> alt="">
</div> </div>
{{ item && item.name }} {{ item && item.name }}
<div v-for="(items,i) in item.point" :key="i"> <div v-for="(items, i) in item.point" :key="i">
<span class="address-info"> <span class="address-info">
{{ items.title }} {{ items.title }}
</span> </span>
<span <span v-html="setDistanceList(items && `${items.distance}`)">
v-html="setDistanceList(items &&`${items.distance}`)">
</span> </span>
<!-- <span class="distance-text"> <!-- <span class="distance-text">
1.1公里 1.1公里
@@ -319,14 +323,17 @@
<img src="../assets/img/detail/moreBoxIcon.png" class="more-icon" alt=""> <img src="../assets/img/detail/moreBoxIcon.png" class="more-icon" alt="">
<span class="title">更多介绍</span> <span class="title">更多介绍</span>
</div> </div>
<div class="introduce-text" v-html="housingInfo['data']&&housingInfo['data'].info.introduction"> <div class="introduce-text"
v-html="housingInfo['data'] && housingInfo['data'].info.introduction">
</div> </div>
</div> </div>
<div class="houseing-info-box dis-f al-item jus-bet"> <div class="houseing-info-box dis-f al-item jus-bet">
<div class="dis-f al-item houseing-info-box-s"> <div class="dis-f al-item houseing-info-box-s">
房源ID: <span class="houseing-id" @click="clone('123456789')">{{ housingInfo['data'] && housingInfo['data'].info.uid }}</span> 房源ID: <span class="houseing-id" @click="clone('123456789')">{{ housingInfo['data'] &&
housingInfo['data'].info.uid }}</span>
<span class="browse-box"> <span class="browse-box">
浏览: <span class="text">{{ housingInfo['data'] && housingInfo['data'].info.count_view }}</span> 浏览: <span class="text">{{ housingInfo['data'] && housingInfo['data'].info.count_view
}}</span>
</span> </span>
</div> </div>
<div class="dis-f al-item houseing-info-box-s"> <div class="dis-f al-item houseing-info-box-s">
@@ -360,12 +367,13 @@
<div> <div>
如房源信息中有内容侵犯了您的合法权益，可点击屏幕右侧的举报或联系寄托方同学（微信号 如房源信息中有内容侵犯了您的合法权益，可点击屏幕右侧的举报或联系寄托方同学（微信号
<el-dropdown> <el-dropdown>
<span class="text-line" @click="clone('gternet2')">{{ concatInfo.data&&concatInfo.data.wechat }}</span> <span class="text-line" @click="clone('gternet2')">{{
concatInfo.data && concatInfo.data.wechat }}</span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item> <el-dropdown-item>
<div class="wx-qrcode-s"> <div class="wx-qrcode-s">
<img :src="concatInfo.data&&concatInfo.data.wechatqrcode" <img :src="concatInfo.data && concatInfo.data.wechatqrcode"
style="width:130px;height:130px" alt=""> style="width:130px;height:130px" alt="">
</div> </div>
</el-dropdown-item> </el-dropdown-item>
@@ -392,7 +400,7 @@
<div class="user-type"> <div class="user-type">
{{ {{
indexData['data'] && indexData['data'] &&
indexData['data']['config']&& indexData['data']['config'] &&
indexData['data']['config']['intermediary'][housingInfo['data'] && indexData['data']['config']['intermediary'][housingInfo['data'] &&
housingInfo['data'].info.intermediary] housingInfo['data'].info.intermediary]
}} }}
@@ -401,8 +409,8 @@
<div class="dis-f al-item jus-x time-box"> <div class="dis-f al-item jus-x time-box">
<img src="../assets/img/detail/timeIcon.svg" class="icon" alt=""> <img src="../assets/img/detail/timeIcon.svg" class="icon" alt="">
<span> <span>
{{ checkUpdateTime(housingInfo['data'] && housingInfo['data'].info.updatetime) {{ checkUpdateTime(housingInfo['data'] && housingInfo['data'].info.updatetime)
}} </span> }} </span>
</div> </div>
<div class="dis-f jus-x"> <div class="dis-f jus-x">
<div class="contact-btn" @click="getConcatData"> <div class="contact-btn" @click="getConcatData">
@@ -434,7 +442,7 @@
</div> </div>
<div class="dis-f jus-x "> <div class="dis-f jus-x ">
<div class="crowd-box dis-f jus-x al-item"> <div class="crowd-box dis-f jus-x al-item">
<img :src="concatInfo.data&&concatInfo.data.wechatqrcode" class="img" alt=""> <img :src="concatInfo.data && concatInfo.data.wechatqrcode" class="img" alt="">
</div> </div>
</div> </div>
<div class="dis-f jus-x s-w-100"> <div class="dis-f jus-x s-w-100">
@@ -449,11 +457,23 @@
</div> </div>
</div> </div>
</div> </div>
<footerTool></footerTool> <!-- 推荐 -->
<div class="dis-f jus-x">
<div class="body-maxWidth housing-title" style="margin-top:30px;">
附近房源
</div>
</div>
<div class="dis-f jus-x al-item">
<div class="body-maxWidth" ref="gridContainer" style="margin-top:15px;">
<indexWaterfallBox v-for="(items, i) in recommendListData" :data="items" :key="items.id">
</indexWaterfallBox>
</div>
</div>
<!-- <footerTool></footerTool> -->
<div class="pop-box" v-show="showConcat" @click="showConcat = !showConcat"> <div class="pop-box" v-show="showConcat" @click="showConcat = !showConcat">
<!-- 两种信息 --> <!-- 两种信息 -->
<!-- third-concat --> <!-- third-concat -->
<div class="pop-big-box" v-show="concatData.data&&concatData.data.count>1"> <div class="pop-big-box" v-show="concatData.data && concatData.data.count > 1">
<div class="pop-info-box dis-f jus-x al-item"> <div class="pop-info-box dis-f jus-x al-item">
<div class="pop-big-bg dis-f jus-x al-item"> <div class="pop-big-bg dis-f jus-x al-item">
<div class="user-liner-box dis-f al-item"> <div class="user-liner-box dis-f al-item">
@@ -568,16 +588,16 @@
<img src="../assets/img/detail/close.png" class="close-img" alt=""> <img src="../assets/img/detail/close.png" class="close-img" alt="">
</div> </div>
<!-- 一种信息 --> <!-- 一种信息 -->
<div class="pop" v-show="concatData.data&&concatData.data.count===1"> <div class="pop" v-show="concatData.data && concatData.data.count === 1">
<div class="pop-bg-s-box dis-f jus-x al-item"> <div class="pop-bg-s-box dis-f jus-x al-item">
<div class="pop-bg-s"> <div class="pop-bg-s">
<div class="pos-a pop-bg-s" style="z-index:666;"> <div class="pos-a pop-bg-s" style="z-index:666;">
<div class="title s-w-100"> <div class="title s-w-100">
联系方式 联系方式
</div> </div>
<div class="s-w-100 mg-t-35" v-if="concatData.data&&concatData.data.wechatdata"> <div class="s-w-100 mg-t-35" v-if="concatData.data && concatData.data.wechatdata">
<div class="wx-qrcode s-w-100 dis-f al-item jus-x"> <div class="wx-qrcode s-w-100 dis-f al-item jus-x">
<img :src="concatData.data&&concatData.data.wechatdata.url" class="img" alt=""> <img :src="concatData.data && concatData.data.wechatdata.url" class="img" alt="">
</div> </div>
<div style="margin-top:15px"> <div style="margin-top:15px">
<div> <div>
@@ -588,7 +608,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="s-w-100" v-if="concatData.data&&concatData.data.whatsapp"> <div class="s-w-100" v-if="concatData.data && concatData.data.whatsapp">
<div class="whatsapp-title"> <div class="whatsapp-title">
WhatsApp WhatsApp
</div> </div>
@@ -597,7 +617,8 @@
</div> </div>
</div> </div>
<div class="s-w-100 dis-f jus-x al-item mg-t-35"> <div class="s-w-100 dis-f jus-x al-item mg-t-35">
<div class="clone-btn dis-f al-item jus-x" v-if="concatData.data&&concatData.data.whatsapp"> <div class="clone-btn dis-f al-item jus-x"
v-if="concatData.data && concatData.data.whatsapp">
<img src="../assets/img/detail/cloneIcon.png" class="icon" alt=""> <img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
复制 复制
</div> </div>
@@ -611,6 +632,7 @@
<img src="../assets/img/detail/popBg.svg" class="img" alt=""> <img src="../assets/img/detail/popBg.svg" class="img" alt="">
</div> </div>
</div> </div>
</div> </div>
<watchImage :show="imageShow" :close="cloaseImageShow" :list="imgList"></watchImage> <watchImage :show="imageShow" :close="cloaseImageShow" :list="imgList"></watchImage>
<!-- 右下角咨询 --> <!-- 右下角咨询 -->
@@ -627,15 +649,19 @@ import watchImage from '../components/detail/imageWatch.vue'
import breadcrumb from '../components/detail/breadcrumb.vue' import breadcrumb from '../components/detail/breadcrumb.vue'
import mapInfo from '../components/public/viewMap.vue' import mapInfo from '../components/public/viewMap.vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue";
import Masonry from 'masonry-layout';
import store from '@/store'; import store from '@/store';
// //加载状态
let loadMore = ref(true) let loadMore = ref(true)
//推荐列表页数
let pages = ref(1) let pages = ref(1)
//查看图片 //查看图片
let imageShow= ref(false) let imageShow = ref(false)
let cloaseImageShow=()=>{ let cloaseImageShow = () => {
imageShow.value=false imageShow.value = false
} }
//图片组实例 //图片组实例
@@ -644,7 +670,7 @@ let imageList = ref(null)
let imgList = ref([]) let imgList = ref([])
//图片距离 //图片距离
let imageLIst=ref([]) let imageLIst = ref([])
let imgListTab = ref(0) let imgListTab = ref(0)
//计时器 //计时器
@@ -653,20 +679,20 @@ let interval = ''
let moveImageList = (type) => { let moveImageList = (type) => {
if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imageLIst.value.length - 1 && type === 'right')) return if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imageLIst.value.length - 1 && type === 'right')) return
type === 'left' ? imgListTab.value-- : imgListTab.value++ type === 'left' ? imgListTab.value-- : imgListTab.value++
setOffsetWidth(imageLIst.value[imgListTab.value],type) setOffsetWidth(imageLIst.value[imgListTab.value], type)
} }
//设置滚动 //设置滚动
let setOffsetWidth = (num, type) => { let setOffsetWidth = (num, type) => {
let scroll = 0 let scroll = 0
let clientWidth=imageList.value.clientWidth let clientWidth = imageList.value.clientWidth
let scrollWidth=imageList.value.scrollWidth let scrollWidth = imageList.value.scrollWidth
interval = setInterval(() => { interval = setInterval(() => {
if(!imageList.value){ if (!imageList.value) {
clearInterval(interval) clearInterval(interval)
return return
} }
scroll = type === 'left' ? imageList.value.scrollLeft -= 10 : imageList.value.scrollLeft += 10 scroll = type === 'left' ? imageList.value.scrollLeft -= 10 : imageList.value.scrollLeft += 10
if ((type === 'left'?num>=scroll:num <= scroll)||scroll+clientWidth>=scrollWidth) { if ((type === 'left' ? num >= scroll : num <= scroll) || scroll + clientWidth >= scrollWidth) {
clearInterval(interval) clearInterval(interval)
} }
}) })
@@ -675,7 +701,7 @@ let setOffsetWidth = (num, type) => {
let imgData = ref(null) let imgData = ref(null)
//获取图片宽度 //获取图片宽度
let setImageWidth = (num) => { let setImageWidth = (num) => {
imageLIst.value[num]=imgData.value[num] && imgData.value[num].offsetLeft-20 imageLIst.value[num] = imgData.value[num] && imgData.value[num].offsetLeft - 20
} }
//学校地址数据 //学校地址数据
@@ -738,11 +764,11 @@ let indexData = reactive({})
//房源详情 //房源详情
let housingInfo = reactive({}) let housingInfo = reactive({})
//联系 //联系
let concatInfo= reactive({}) let concatInfo = reactive({})
let setHousingArr = () => { let setHousingArr = () => {
let arr = [] let arr = []
arr = housingInfo['data'].info.video?arr.concat(housingInfo['data'] && housingInfo['data'].info.video):[] arr = housingInfo['data'].info.video ? arr.concat(housingInfo['data'] && housingInfo['data'].info.video) : []
arr = arr.concat(housingInfo['data'] && housingInfo['data'].info.picturegroup) arr = arr.concat(housingInfo['data'] && housingInfo['data'].info.picturegroup)
imgList.value = imgList.value.concat(arr) imgList.value = imgList.value.concat(arr)
imgList.value = imgList.value.concat(arr) imgList.value = imgList.value.concat(arr)
@@ -753,7 +779,7 @@ let location = store.state.indexData.config && store.state.indexData.config.loca
let setNavigation = () => { let setNavigation = () => {
let type = store.state.indexData.config && store.state.indexData.config.type let type = store.state.indexData.config && store.state.indexData.config.type
indexData['data'] = store.state.indexData indexData['data'] = store.state.indexData
if(!location)return if (!location) return
store.state.routeList['thirdIndex'] = { store.state.routeList['thirdIndex'] = {
path: "", path: "",
title: `${location[housingInfo['data']['info'].location.substring(0, 1)]}${type[housingInfo['data']['info'].type.substring(0, 1)]}房源` title: `${location[housingInfo['data']['info'].location.substring(0, 1)]}${type[housingInfo['data']['info'].type.substring(0, 1)]}房源`
@@ -780,7 +806,8 @@ let getHousingInfo = () => {
address: true, address: true,
name: housingInfo['data']['info'].address, name: housingInfo['data']['info'].address,
}) })
concatInfo['data']=store.state.indexData.wechat concatInfo['data'] = store.state.indexData.wechat
recommendList()
} else { } else {
ElMessage({ ElMessage({
message: res.message message: res.message
@@ -790,47 +817,47 @@ let getHousingInfo = () => {
} }
//收藏 //收藏
let setOperation=()=>{ let setOperation = () => {
api.operation({ api.operation({
token:housingInfo['data'].token token: housingInfo['data'].token
}).then(res=>{ }).then(res => {
console.log(res) console.log(res)
if(res.code===200){ if (res.code === 200) {
housingInfo['data'].info.count_fav=res.data.count housingInfo['data'].info.count_fav = res.data.count
housingInfo['data'].isfav=res.data.status housingInfo['data'].isfav = res.data.status
}else{ } else {
ElMessage({ ElMessage({
message:res.message message: res.message
}) })
} }
}) })
} }
//获取联系方式 //获取联系方式
let concatData=reactive({}) let concatData = reactive({})
let getConcatData=()=>{ let getConcatData = () => {
showConcat.value=true showConcat.value = true
if(concatData['data'])return if (concatData['data']) return
api.contactData({ api.contactData({
token:housingInfo['data'].token token: housingInfo['data'].token
}).then(res=>{ }).then(res => {
console.log(res) console.log(res)
if(res.code===200){ if (res.code === 200) {
concatData['data']=res.data concatData['data'] = res.data
let dataCount=0 let dataCount = 0
Object.keys(concatData['data']).map(res=>{ Object.keys(concatData['data']).map(res => {
if(concatData['data'][res]){ if (concatData['data'][res]) {
dataCount++ dataCount++
} }
}) })
concatData['data']['count']=dataCount concatData['data']['count'] = dataCount
console.log(concatData) console.log(concatData)
} }
}) })
} }
//判断更新时间 //判断更新时间
let checkUpdateTime=(Time)=>{ let checkUpdateTime = (Time) => {
const now = new Date(); const now = new Date();
let time = new Date(Time) let time = new Date(Time)
const diff = now - time; const diff = now - time;
@@ -860,8 +887,57 @@ const onPageSrcoll = (e) => {
} }
} }
} }
//瀑布流列表
let recommendListData = ref([])
//广告参数
let pagevalue = ref(0)
//加载提示
let loadText = ref('加载中......')
//获取瀑布流数据
let recommendList = () => {
api.recommendList({
page: pages.value,
limit: 10,
type: 'nearby',
pagevalue: pagevalue.value,
token: housingInfo['data'].token
}).then(res => {
console.log(res)
if (res.code === 200) {
if (res.data.pagevalue) {
recommendListData.value = recommendListData.value.concat(res.data.data)
pagevalue.value = res.data.pagevalue
}
if (res.data.data.length >= 30) {
loadMore.value = true
} else {
loadMore.value = false
loadText.value = '到底了'
}
nextTick(() => {
console.log(recommendListData.value)
masonryInstance.reloadItems();
masonryInstance.layout();
})
} else {
ElMessage({
message: res.message,
center: true,
})
}
})
}
//瀑布流模块
const gridContainer = ref(null);
let masonryInstance = null
onMounted(() => { onMounted(() => {
getHousingInfo() getHousingInfo()
masonryInstance = new Masonry(gridContainer.value, {
itemSelector: '.item',
gutter: 20
});
setTimeout(() => { setTimeout(() => {
window.addEventListener('scroll', onPageSrcoll, true); window.addEventListener('scroll', onPageSrcoll, true);
}, 1000) }, 1000)
@@ -871,10 +947,6 @@ onBeforeUnmount(() => {
window.removeEventListener('scroll', onPageSrcoll, true); window.removeEventListener('scroll', onPageSrcoll, true);
}) })
onMounted(() => {
})
</script> </script>
<style scoped> <style scoped>
img { img {
@@ -924,6 +996,14 @@ img {
position: absolute; position: absolute;
} }
.housing-title {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 20px;
color: #333;
}
.clone-btn { .clone-btn {
width: 100px; width: 100px;
height: 32px; height: 32px;
@@ -1197,9 +1277,10 @@ img {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529); -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
margin: 0 auto; margin: 0 auto;
.img{
width:130px; .img {
height:130px; width: 130px;
height: 130px;
} }
} }