公寓列表

src/views/housingView/apartment.vue

@@ -3,11 +3,14 @@
         <pageTopBar></pageTopBar>
         <!-- 筛选 -->
         <div class="screen-box wid1200">
-            <seach-module @handleTransfer="handleTransfer"></seach-module>
+            <seach-module @handleTransfer="handleTransfer" :count="listCount"></seach-module>
         </div>
 
         <div class="list wid1200 flexflex" ref="gridContainer">
-            <apartment-item v-for="item in list" :item="item"></apartment-item>
+            <apartment-item v-if="list.length != 0" v-for="item in list" :item="item"></apartment-item>
+        </div>
+        <div v-if="list.length == 0" class="empty-box wid1200 flexcenter">
+            <empty-duck :hintTextTwo="'建议放宽筛选条件'"></empty-duck>
         </div>
 
         <have-questions></have-questions>
@@ -23,6 +26,7 @@ import biserialItem from '../../components/biserialListItem/biserialListItem.vue
 import apartmentItem from '@/components/public/apartment-item.vue';
 import haveQuestions from '@/components/public/have-questions.vue'
 import pageFooter from '@/components/footer/footer.vue'
+import emptyDuck from '@/components/public/empty-duck.vue'
 import { ref, onMounted, onUnmounted, watch, getCurrentInstance, nextTick } from 'vue';
 import { ElLoading } from 'element-plus'
 import Masonry from 'masonry-layout';
@@ -38,6 +42,7 @@ const gridContainer = ref(null);
 
 
 let list = ref([])
+let listCount = ref(0) // 列表数量
 
 let masonryInstance = null
 
@@ -75,6 +80,8 @@ const getData = () => {
         let data = res.data
         list.value = list.value.concat(data.data)
         page = data.page * data.limit >= data.count ? 0 : page + 1
+
+        listCount = data.count
         nextTick(() => {
             masonryInstance.reloadItems();
             masonryInstance.layout();
@@ -93,25 +100,28 @@ const handleScroll = () => {
     const scrollHeight = document.documentElement.scrollHeight;
     const clientHeight = document.documentElement.clientHeight;
     const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
-
-    if (scrollTop + clientHeight >= scrollHeight) {
-        // 进行滚动到底部时的操作
-        console.log('已滚动到底部');
-        // 执行其他操作...
-        getData()
-    }
+    if (scrollTop + clientHeight >= scrollHeight) getData()
 };
 
 let pitchValue = {}
 
 // 筛选组件的参数的中转
 const handleTransfer = (data) => {
-    // console.log("data", data.value);
-    pitchValue = { ...data.value }
-    // console.log("data", pitchValue);
-    page = 1
-    list.value = []
-    getData()
+    for (const key in data.value) {
+        console.log(data.value[key] != pitchValue[key]);
+        if (data.value[key] != pitchValue[key]) {
+            pitchValue = { ...data.value }
+
+            page = 1
+            list.value = []
+            getData()
+        }
+        // if () {
+
+        // }
+    }
+
+
 }
 
 </script>
@@ -131,4 +141,16 @@ const handleTransfer = (data) => {
         width: 386px;
     }
 }
+
+.empty-box {
+    width: 1200px;
+    height: 500px;
+    background-color: rgba(255, 255, 255, 1);
+    border-radius: 16px;
+    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
+    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
+    justify-content: center;
+    margin: 0 auto;
+}
 </style>