个人房源瀑布流

src/components/biserialListItem/biserialListItem.vue

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

src/components/indexWaterfallBox/indexWaterfallBox.vue

@@ -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>

src/views/detail.vue

@@ -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)"
+                                            <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>
@@ -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 
+                                                <span v-html="setDistanceList(items && `${items.distance}`)">
-                                                    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;