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>

123
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>
@@ -111,17 +113,20 @@
<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">
<img src="../assets/img/detail/moreNot.svg" class="icon left-icon" alt=""
@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">
<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')"
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">
@@ -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>
@@ -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">
@@ -269,8 +274,7 @@
<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,7 +367,8 @@
<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>
@@ -449,7 +457,19 @@
</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 -->
@@ -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,10 +649,14 @@ 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)
@@ -781,6 +807,7 @@ let getHousingInfo = () => {
name: housingInfo['data']['info'].address,
})
concatInfo['data'] = store.state.indexData.wechat
recommendList()
} else {
ElMessage({
message: res.message
@@ -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,6 +1277,7 @@ 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;