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: {} })
watchEffect(() => {
data.data = props.item
console.log(123,data.data)
})

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

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

253
src/views/detail.vue
View File

@@ -88,7 +88,9 @@
租期
</div>
<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.rentalperiod}` }}
</div>
@@ -108,21 +110,24 @@
<div class="image-box">
<div class="dis-f al-item">
<img src="../assets/img/detail/videoIcon.png" class="img-video" alt="">
<div class="num-box">{{ housingInfo['data'] &&housingInfo['data'].info.video?
housingInfo['data']&&housingInfo['data'].info.video.length:0 }}</div>
<div class="num-box">{{ housingInfo['data'] && housingInfo['data'].info.video ?
housingInfo['data'] && housingInfo['data'].info.video.length : 0 }}</div>
<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 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=""
@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=""
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=""
@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=""
style="transform: rotate(180deg);" @click.stop="moveImageList('right')" v-show="imgList.length-1===imgListTab">
<div class="dis-f al-item list-box" ref="imageList" v-if="imgList.length > 0" >
style="transform: rotate(180deg);" @click.stop="moveImageList('right')"
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 class="video" v-if="item && !item.thumbnail">
<div class="icon-box dis-f jus-x al-item">
@@ -132,8 +137,8 @@
@error="setImageWidth(i)" alt="">
</div>
<div class="img dis-f" v-if="item && item.thumbnail">
<img class="img" style="margin:0;" ref="imgData" :src="item.thumbnail" @load="setImageWidth(i)"
@error="setImageWidth(i)" alt="">
<img class="img" style="margin:0;" ref="imgData" :src="item.thumbnail"
@load="setImageWidth(i)" @error="setImageWidth(i)" alt="">
</div>
</div>
</div>
@@ -154,8 +159,8 @@
<span class="text">
{{
indexData['data'] &&
indexData['data']['config']&&
indexData['data']['config']['property'][housingInfo['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['property'][housingInfo['data'] &&
housingInfo['data'].info.property]
}}
</span>
@@ -170,8 +175,8 @@
|
<span class="text" style="margin-left:0;">
{{
indexData['data'] &&
indexData['data']['config']&&
indexData['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['elevator'][housingInfo['data'] &&
housingInfo['data'].info.elevator]
}}
@@ -183,11 +188,11 @@
</div>
<span class="text">
{{
indexData['data'] &&
housingInfo['data'] &&
indexData['data'] &&
housingInfo['data'] &&
housingInfo['data'].info.sunshinearea
!== -1 ?
indexData['data']['config']&&
indexData['data']['config'] &&
indexData['data']['config']['sunshinearea'][housingInfo['data'] &&
housingInfo['data'].info.sunshinearea] : ''
}}
@@ -210,8 +215,8 @@
</div>
<span class="text">
{{
indexData['data'] &&
indexData['data']['config']&&
indexData['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['gender'][housingInfo['data'] &&
housingInfo['data'].info.gender]
}}
@@ -222,11 +227,11 @@
<div class="map-box">
<div class="dis-f al-item title-box">
<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]
}}</span>
}}</span> -->
</div>
<div class="dis-f jus-x" style="margin-top:15px;">
<!-- <div class="map-s">
@@ -265,12 +270,11 @@
alt="">
</div>
{{ 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">
{{ items.title }}
</span>
<span
v-html="setDistanceList(items &&`${items.distance}`)">
<span v-html="setDistanceList(items && `${items.distance}`)">
</span>
<!-- <span class="distance-text">
1.1公里
@@ -319,14 +323,17 @@
<img src="../assets/img/detail/moreBoxIcon.png" class="more-icon" alt="">
<span class="title">更多介绍</span>
</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 class="houseing-info-box dis-f al-item jus-bet">
<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="text">{{ housingInfo['data'] && housingInfo['data'].info.count_view }}</span>
浏览: <span class="text">{{ housingInfo['data'] && housingInfo['data'].info.count_view
}}</span>
</span>
</div>
<div class="dis-f al-item houseing-info-box-s">
@@ -360,12 +367,13 @@
<div>
如房源信息中有内容侵犯了您的合法权益，可点击屏幕右侧的举报或联系寄托方同学（微信号
<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>
<el-dropdown-menu>
<el-dropdown-item>
<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="">
</div>
</el-dropdown-item>
@@ -391,8 +399,8 @@
<div class="dis-f jus-x">
<div class="user-type">
{{
indexData['data'] &&
indexData['data']['config']&&
indexData['data'] &&
indexData['data']['config'] &&
indexData['data']['config']['intermediary'][housingInfo['data'] &&
housingInfo['data'].info.intermediary]
}}
@@ -401,8 +409,8 @@
<div class="dis-f al-item jus-x time-box">
<img src="../assets/img/detail/timeIcon.svg" class="icon" alt="">
<span>
{{ checkUpdateTime(housingInfo['data'] && housingInfo['data'].info.updatetime)
}} </span>
{{ checkUpdateTime(housingInfo['data'] && housingInfo['data'].info.updatetime)
}} </span>
</div>
<div class="dis-f jus-x">
<div class="contact-btn" @click="getConcatData">
@@ -434,7 +442,7 @@
</div>
<div class="dis-f jus-x ">
<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 class="dis-f jus-x s-w-100">
@@ -449,11 +457,23 @@
</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">
<!-- 两种信息 -->
<!-- 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-big-bg dis-f jus-x 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="">
</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">
<div class="pos-a pop-bg-s" style="z-index:666;">
<div class="title s-w-100">
联系方式
</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">
<img :src="concatData.data&&concatData.data.wechatdata.url" class="img" alt="">
<img :src="concatData.data && concatData.data.wechatdata.url" class="img" alt="">
</div>
<div style="margin-top:15px">
<div>
@@ -588,7 +608,7 @@
</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">
WhatsApp
</div>
@@ -597,7 +617,8 @@
</div>
</div>
<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="">
复制
</div>
@@ -611,6 +632,7 @@
<img src="../assets/img/detail/popBg.svg" class="img" alt="">
</div>
</div>
</div>
<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 mapInfo from '../components/public/viewMap.vue'
import { ElMessage } from 'element-plus'
import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue";
import Masonry from 'masonry-layout';
import store from '@/store';
//
//加载状态
let loadMore = ref(true)
//推荐列表页数
let pages = ref(1)
//查看图片
let imageShow= ref(false)
let cloaseImageShow=()=>{
imageShow.value=false
let imageShow = ref(false)
let cloaseImageShow = () => {
imageShow.value = false
}
//图片组实例
@@ -644,7 +670,7 @@ let imageList = ref(null)
let imgList = ref([])
//图片距离
let imageLIst=ref([])
let imageLIst = ref([])
let imgListTab = ref(0)
//计时器
@@ -653,20 +679,20 @@ let interval = ''
let moveImageList = (type) => {
if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imageLIst.value.length - 1 && type === 'right')) return
type === 'left' ? imgListTab.value-- : imgListTab.value++
setOffsetWidth(imageLIst.value[imgListTab.value],type)
setOffsetWidth(imageLIst.value[imgListTab.value], type)
}
//设置滚动
let setOffsetWidth = (num, type) => {
let scroll = 0
let clientWidth=imageList.value.clientWidth
let scrollWidth=imageList.value.scrollWidth
let clientWidth = imageList.value.clientWidth
let scrollWidth = imageList.value.scrollWidth
interval = setInterval(() => {
if(!imageList.value){
if (!imageList.value) {
clearInterval(interval)
return
}
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)
}
})
@@ -675,7 +701,7 @@ let setOffsetWidth = (num, type) => {
let imgData = ref(null)
//获取图片宽度
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 concatInfo= reactive({})
let concatInfo = reactive({})
let setHousingArr = () => {
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)
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 type = store.state.indexData.config && store.state.indexData.config.type
indexData['data'] = store.state.indexData
if(!location)return
if (!location) return
store.state.routeList['thirdIndex'] = {
path: "",
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,
name: housingInfo['data']['info'].address,
})
concatInfo['data']=store.state.indexData.wechat
concatInfo['data'] = store.state.indexData.wechat
recommendList()
} else {
ElMessage({
message: res.message
@@ -790,47 +817,47 @@ let getHousingInfo = () => {
}
//收藏
let setOperation=()=>{
let setOperation = () => {
api.operation({
token:housingInfo['data'].token
}).then(res=>{
token: housingInfo['data'].token
}).then(res => {
console.log(res)
if(res.code===200){
housingInfo['data'].info.count_fav=res.data.count
housingInfo['data'].isfav=res.data.status
}else{
if (res.code === 200) {
housingInfo['data'].info.count_fav = res.data.count
housingInfo['data'].isfav = res.data.status
} else {
ElMessage({
message:res.message
message: res.message
})
}
})
}
//获取联系方式
let concatData=reactive({})
let getConcatData=()=>{
showConcat.value=true
if(concatData['data'])return
let concatData = reactive({})
let getConcatData = () => {
showConcat.value = true
if (concatData['data']) return
api.contactData({
token:housingInfo['data'].token
}).then(res=>{
token: housingInfo['data'].token
}).then(res => {
console.log(res)
if(res.code===200){
concatData['data']=res.data
let dataCount=0
Object.keys(concatData['data']).map(res=>{
if(concatData['data'][res]){
if (res.code === 200) {
concatData['data'] = res.data
let dataCount = 0
Object.keys(concatData['data']).map(res => {
if (concatData['data'][res]) {
dataCount++
}
})
concatData['data']['count']=dataCount
concatData['data']['count'] = dataCount
console.log(concatData)
}
})
}
//判断更新时间
let checkUpdateTime=(Time)=>{
let checkUpdateTime = (Time) => {
const now = new Date();
let time = new Date(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(() => {
getHousingInfo()
masonryInstance = new Masonry(gridContainer.value, {
itemSelector: '.item',
gutter: 20
});
setTimeout(() => {
window.addEventListener('scroll', onPageSrcoll, true);
}, 1000)
@@ -871,10 +947,6 @@ onBeforeUnmount(() => {
window.removeEventListener('scroll', onPageSrcoll, true);
})
onMounted(() => {
})
</script>
<style scoped>
img {
@@ -924,6 +996,14 @@ img {
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 {
width: 100px;
height: 32px;
@@ -1197,9 +1277,10 @@ img {
-webkit-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;
.img{
width:130px;
height:130px;
.img {
width: 130px;
height: 130px;
}
}