修改求房源列表 筛选出现 位置报错问题 和增加 列表的更多数据

src/views/housingView/apartment.vue

@@ -7,13 +7,21 @@
     </div>
 
     <div class="list wid1200 flexflex" ref="gridContainer">
-        <apartment-item v-if="list.length != 0" v-for="(item, index) in list" :key="index" :item="item"></apartment-item>
+        <template v-if="list.length != 0">
+            <apartment-item v-for="(item, index) in list" :key="index" :item="item"></apartment-item>
+        </template>
     </div>
 
     <div v-if="list.length == 0" class="empty-box wid1200 flexcenter">
         <empty-duck :hintTextTwo="'建议放宽筛选条件'"></empty-duck>
     </div>
 
+    <!-- 其他附近房源 -->
+    <div v-if="moreList.length != 0" class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div>
+    <div class="wid1200" ref="moreShowList">
+        <apartment-item v-for="(item, index) in moreList" :key="index" :item="item"></apartment-item>
+    </div>
+
     <div class="bottom-tps" v-if="list.length != 0 && page == 0">- 到底了 -</div>
     <div class="bottom-tps" v-if="page != 0">- 下拉加载更多 -</div>
 
@@ -41,6 +49,7 @@ import Masonry from "masonry-layout"
 import { useRoute, useRouter } from "vue-router"
 import backToTop from "@/components/public/backToTop.vue"
 import store from "../../store/index"
+import api from "../../utils/api"
 
 const { proxy } = getCurrentInstance()
 
@@ -56,6 +65,7 @@ let list = ref([])
 let listCount = ref(0) // 列表数量
 
 let masonryInstance = null
+// let masonryInstanceMore = null
 
 onMounted(() => {
     // 初始化瀑布流
@@ -64,11 +74,16 @@ onMounted(() => {
         gutter: 20,
     })
 
+    // masonryInstanceMore = new Masonry(moreShowList.value, {
+    //     itemSelector: ".item",
+    //     gutter: 20,
+    // })
+
     pitchValue.value = store.state.apartmentPitchValue
     if (route.query["companyid"]) pitchValue.value["companyid"] = route.query["companyid"]
 
     // banner()  // 获取轮播图数据
-    getData()  // 获取列表数据
+    getData() // 获取列表数据
 
     window.addEventListener("scroll", handleScroll)
 })
@@ -109,6 +124,12 @@ const getData = () => {
                 loading.close()
                 requestLoading = false
             })
+
+            // 小于20 代表筛选 数据不够了，需要加载更多的 随便在这里初始化 更多的 瀑布流 HTML
+            // if (data.data.length < 20 && (pitchValue.value["school"] || pitchValue.value["location"].length != 0)) {
+            //     morePage.value = 1
+            //     getMoreList()
+            // }
         })
         .catch(err => {
             loading.close()
@@ -128,6 +149,7 @@ let pitchValue = ref({
     roomtype: 0,
     rent_min: null, // 租金
     rent_max: null, // 租金
+    location: [],
     school: 0,
     roomlistings: 0,
     keyword: "",
@@ -147,13 +169,49 @@ const handleTransfer = data => {
     }
 }
 
-//轮播
-// let bannerList = reactive({ data: [] })
-// let banner = () => {
-//     proxy.$get("/tenement/pc/api/banner").then(res => {
-//         if (res.code === 200) bannerList.data = res.data
-//     })
-// }
+let moreShowList = ref(null)
+let moreState = ref(false) // 更多列表 显示状态
+let morePage = ref(1)
+let moreList = ref([])
+let moreLoading = ref(false)
+
+// 加载更多数据列表
+const getMoreList = () => {
+    if (morePage.value == 0 || moreLoading.value) return
+    console.log("11111");
+    moreLoading.value = true
+    let postData = {
+        page: morePage.value,
+        ...pitchValue.value,
+    }
+
+    api.getMoreLists(postData).then(res => {
+        if (res.code != 200) return
+        const data = res.data
+        if (!data.data) return
+        
+        moreList.value = moreList.value.concat(data.data)
+        moreState.value = true
+        if (data.data && data.data.length < data.limit) morePage.value = 0
+        else {
+            morePage.value++
+            window.addEventListener("scroll", getMoreScroll, true)
+        }
+        nextTick(() => {
+            masonryInstanceMore.reloadItems()
+            masonryInstanceMore.layout()
+            moreLoading.value = false
+        })
+    })
+}
+
+const getMoreScroll = () => {
+    let body = document.documentElement ? document.documentElement : document.body ? document.body : document.querySelector(".element")
+    let scrollTop = body.scrollTop
+    let clientHeight = body.clientHeight
+    let offsetHeight = body.offsetHeight
+    if (scrollTop + clientHeight >= offsetHeight - 200 && !moreLoading.value) getMoreList()
+}
 </script>
 <style lang="less" scoped>
 .screen-box {
@@ -191,4 +249,14 @@ const handleTransfer = data => {
     text-align: center;
     padding: 30px 0;
 }
+
+.other-nearby-listings-box {
+    width: 100%;
+    height: 32px;
+    color: #525151;
+    background: rgba(245, 251, 255, 1);
+    font-size: 14px;
+    margin-top: 40px;
+    margin-bottom: 43px;
+}
 </style>