个人/中介房源求房源页面

2023-07-18 16:30:48 +08:00
parent eb1bed2973
commit d1d1bf3e18
14 changed files with 561 additions and 157 deletions
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -363,7 +363,6 @@ onMounted(() => {

 onBeforeUnmount(() => {
  window.removeEventListener('scroll', onPageSrcoll, true);
-  console.log('卸载', window.scroll)
 })


--- a/src/views/housingView/intermediary.vue
+++ b/src/views/housingView/intermediary.vue
@@ -1,24 +1,134 @@
 <template>
    <div>
        <pageTopBar></pageTopBar>
-        <seachModule></seachModule>
+        <seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
        <div class="dis-f jus-x al-item">
            <div class="body-maxWidth mg-t-35">
-                <div class="dis-f jus-bet">
-                    <div>
-                        <biserialItem></biserialItem>
+                <div class="dis-f jus-bet" v-show="dataList.data && dataList.data.length > 0">
+                    <div ref="list">
+                        <biserialItem v-for="(item, i) in pageList['1']" :key="i" :item="item" :imgLoad="watchImgLoad"
+                            listId="1"></biserialItem>
                    </div>
-                    <div></div>
+                    <div>
+                        <biserialItem v-for="(item, i) in pageList['2']" :key="i" :item="item" :imgLoad="watchImgLoad"
+                            listId="2"></biserialItem>
+                    </div>
+                </div>
+                <div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
+                    <noList></noList>
                </div>
            </div>
        </div>
+        <listBtmPrompt></listBtmPrompt>
    </div>
 </template>
-
+  
 <script setup>
+import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick } from 'vue'
 import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
 import seachModule from "../../components/seachModule/seachModule.vue";
 import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
+import listBtmPrompt from "../../components/public/have-questions.vue";
+import noList from "../../components/public/empty-duck.vue";
+import api from "../../utils/api";
+import tool from '../../toolJs/downLoadMore'
+
+//获取数据
+let pages = ref(1)
+let dataList = reactive({ data: [], count: 0 })
+let dataCount = ref(0)
+let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })
+let seachSelectData = reactive({ data: {} })
+let loading = ref(false)
+provide('count', dataCount)
+
+//保存搜索设置
+let setSeachSelectData = (data) => {
+    pages.value = 1
+    seachSelectData.data = {
+        ...data
+    }
+    loading.value = true
+    getDataList(seachSelectData.data)
+}
+
+//初始化列表参数
+let setInitial = () => {
+    pageList[1] = []
+    pageList[2] = []
+    pageList.height1 = 0
+    pageList.height2 = 0
+}
+
+//获取搜索数据
+let getDataList = (data) => {
+    let postData = {
+        page: pages.value,
+        intermediary:1,
+        ...data
+    }
+    api.getLists(postData).then(res => {
+        if (res.code === 200) {
+            loading.value = true
+            dataList.data = res.data.data
+            if (res.data.data.length === 0) {
+                loading.value = false
+                return
+            }
+            if (pages.value === 1) {
+                setInitial()
+            }
+            pageList.tab = 1
+            dataList.count = res.data.count
+            dataCount.value = res.data.count
+            nextTick(() => {
+                pageList['1'].push(dataList.data[0])
+                pageList['2'].push(dataList.data[1])
+            })
+        } else {
+            // ElMessage(res.message)
+        }
+    })
+}
+
+//添加数据
+let addListData = () => {
+    let num = null
+    if (pageList.tab >= 18) return
+    pageList.tab++
+    if (pageList.height1 > pageList.height2) {
+        num = 2
+    } else {
+        num = 1
+    }
+    pageList[num].push(dataList.data[pageList.tab])
+}
+
+//监听图片加载
+let watchImgLoad = (id, listId, height) => {
+    pageList[`height${listId}`] += height
+    addListData()
+}
+
+//加载更多
+let downLoadMore = () => {
+    tool.loadMore(() => {
+        if (!loading.value) return
+        pages.value++
+        getDataList(seachSelectData.data)
+    })
+}
+
+//listImg
+onMounted(() => {
+    getDataList()
+    window.addEventListener('scroll', downLoadMore, true);
+})
+
+onBeforeUnmount(() => {
+    window.removeEventListener('scroll', downLoadMore, true);
+})
+
 </script>
 <style scoped>
 img {
@@ -57,5 +167,16 @@ img {
 .mg-t-35 {
    margin-top: 35px;
 }
+
+.no-list-box {
+    height: 500px;
+    background: inherit;
+    background-color: rgba(255, 255, 255, 1);
+    border: none;
+    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);
+}
 </style>
  
--- a/src/views/housingView/needHousing.vue
+++ b/src/views/housingView/needHousing.vue
@@ -1,25 +1,140 @@
 <template>
    <div>
        <pageTopBar></pageTopBar>
-        <seachModule></seachModule>
+        <seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
        <div class="dis-f jus-x al-item">
            <div class="body-maxWidth mg-t-35">
-                <div class="dis-f jus-bet">
-                    <div>
-                        <biserialItem></biserialItem>
+                <div class="dis-f jus-bet" v-show="dataList.data && dataList.data.length > 0">
+                    <div ref="list">
+                        <biserialItem v-for="(item, i) in pageList['1']" :key="i" :item="item" :imgLoad="watchImgLoad"
+                            listId="1"></biserialItem>
                    </div>
-                    <div></div>
+                    <div>
+                        <biserialItem v-for="(item, i) in pageList['2']" :key="i" :item="item" :imgLoad="watchImgLoad"
+                            listId="2"></biserialItem>
+                    </div>
+                </div>
+                <div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
+                    <noList></noList>
                </div>
            </div>
        </div>
-
+        <listBtmPrompt></listBtmPrompt>
    </div>
 </template>
  
 <script setup>
+import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick } from 'vue'
 import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
 import seachModule from "../../components/seachModule/seachModule.vue";
 import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
+import listBtmPrompt from "../../components/public/have-questions.vue";
+import noList from "../../components/public/empty-duck.vue";
+import api from "../../utils/api";
+import tool from '../../toolJs/downLoadMore'
+
+//获取数据
+let pages = ref(1)
+let dataList = reactive({ data: [], count: 0 })
+let dataCount = ref(0)
+let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })
+let seachSelectData = reactive({ data: {} })
+let loading = ref(false)
+provide('count', dataCount)
+
+//保存搜索设置
+let setSeachSelectData = (data) => {
+    pages.value = 1
+
+    // if(data.location.length>0){
+    //     data.location=JSON.stringify(data.location)
+    // }
+    seachSelectData.data = {
+        ...data
+    }
+    loading.value = true
+    // console.log('seachSelectData',seachSelectData.data)
+    // return
+    getDataList(seachSelectData.data)
+}
+
+//初始化列表参数
+let setInitial = () => {
+    pageList[1] = []
+    pageList[2] = []
+    pageList.height1 = 0
+    pageList.height2 = 0
+}
+
+//获取搜索数据
+let getDataList = (data) => {
+    let postData = {
+        page: pages.value,
+        intermediary:0,
+        ...data
+    }
+    api.getLists(postData).then(res => {
+        if (res.code === 200) {
+            loading.value = true
+            dataList.data = res.data.data
+            if (res.data.data.length === 0) {
+                loading.value = false
+                return
+            }
+            if (pages.value === 1) {
+                setInitial()
+            }
+            pageList.tab = 1
+            dataList.count = res.data.count
+            dataCount.value = res.data.count
+            nextTick(() => {
+                pageList['1'].push(dataList.data[0])
+                pageList['2'].push(dataList.data[1])
+            })
+        } else {
+            // ElMessage(res.message)
+        }
+    })
+}
+
+//添加数据
+let addListData = () => {
+    let num = null
+    if (pageList.tab >= 18) return
+    pageList.tab++
+    if (pageList.height1 > pageList.height2) {
+        num = 2
+    } else {
+        num = 1
+    }
+    pageList[num].push(dataList.data[pageList.tab])
+}
+
+//监听图片加载
+let watchImgLoad = (id, listId, height) => {
+    pageList[`height${listId}`] += height
+    addListData()
+}
+
+//加载更多
+let downLoadMore = () => {
+    tool.loadMore(() => {
+        if (!loading.value) return
+        pages.value++
+        getDataList(seachSelectData.data)
+    })
+}
+
+//listImg
+onMounted(() => {
+    getDataList()
+    window.addEventListener('scroll', downLoadMore, true);
+})
+
+onBeforeUnmount(() => {
+    window.removeEventListener('scroll', downLoadMore, true);
+})
+
 </script>
 <style scoped>
 img {
@@ -58,5 +173,16 @@ img {
 .mg-t-35 {
    margin-top: 35px;
 }
+
+.no-list-box {
+    height: 500px;
+    background: inherit;
+    background-color: rgba(255, 255, 255, 1);
+    border: none;
+    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);
+}
 </style>
  
--- a/src/views/housingView/person.vue
+++ b/src/views/housingView/person.vue
@@ -1,17 +1,22 @@
 <template>
    <div>
        <pageTopBar></pageTopBar>
-        <seachModule :count="dataList.count" :getDataList="getDataList"></seachModule>
+        <seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
        <div class="dis-f jus-x al-item">
            <div class="body-maxWidth mg-t-35">
-                <div class="dis-f jus-bet">
+                <div class="dis-f jus-bet" v-show="dataList.data && dataList.data.length > 0">
                    <div ref="list">
-                        <biserialItem v-for="(item,i) in pageList[1]" :key="i" :item="item" :imgLoad="watchImgLoad" listId="1"></biserialItem>
+                        <biserialItem v-for="(item, i) in pageList['1']" :key="i" :item="item" :imgLoad="watchImgLoad"
+                            listId="1"></biserialItem>
                    </div>
                    <div>
-                        <biserialItem v-for="(item,i) in pageList[2]" :key="i" :item="item" :imgLoad="watchImgLoad" listId="2"></biserialItem>
+                        <biserialItem v-for="(item, i) in pageList['2']" :key="i" :item="item" :imgLoad="watchImgLoad"
+                            listId="2"></biserialItem>
                    </div>
                </div>
+                <div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
+                    <noList></noList>
+                </div>
            </div>
        </div>
        <listBtmPrompt></listBtmPrompt>
@@ -19,65 +24,109 @@
 </template>
  
 <script setup>
-import {reactive,onMounted,ref,provide} from 'vue'
+import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick } from 'vue'
 import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
 import seachModule from "../../components/seachModule/seachModule.vue";
 import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
 import listBtmPrompt from "../../components/public/have-questions.vue";
+import noList from "../../components/public/empty-duck.vue";
 import api from "../../utils/api";
+import tool from '../../toolJs/downLoadMore'
+
 //获取数据
-let pages=ref(1)
-let dataList= reactive({data:[],count:0})
-let dataCount=ref(0)
-let pageList=reactive({1:[],2:[],height1:0,height2:0,tab:2})
+let pages = ref(1)
+let dataList = reactive({ data: [], count: 0 })
+let dataCount = ref(0)
+let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })
+let seachSelectData = reactive({ data: {} })
+let loading = ref(false)
 provide('count', dataCount)
-let getDataList=(data)=>{
-    let postData={
-        page:pages.value,
+
+//保存搜索设置
+let setSeachSelectData = (data) => {
+    pages.value = 1
+    seachSelectData.data = {
        ...data
    }
-    api.getLists(postData).then(res=>{
-        console.log(res.data)
-        if(res.code===200){
-            dataList.count=res.data.count
-            dataCount.value=res.data.count
-            dataList.data=res.data
-            // console.log(dataList.data)
-            pageList[1].push(dataList.data.data[0])
-            pageList[2].push(dataList.data.data[1])
-        }else{
-            ElMessage(res.message)
+    loading.value = true
+    getDataList(seachSelectData.data)
+}
+
+//初始化列表参数
+let setInitial = () => {
+    pageList[1] = []
+    pageList[2] = []
+    pageList.height1 = 0
+    pageList.height2 = 0
+}
+
+//获取搜索数据
+let getDataList = (data) => {
+    let postData = {
+        page: pages.value,
+        intermediary:0,
+        ...data
+    }
+    api.getLists(postData).then(res => {
+        if (res.code === 200) {
+            loading.value = true
+            dataList.data = res.data.data
+            if (res.data.data.length === 0) {
+                loading.value = false
+                return
+            }
+            if (pages.value === 1) {
+                setInitial()
+            }
+            pageList.tab = 1
+            dataList.count = res.data.count
+            dataCount.value = res.data.count
+            nextTick(() => {
+                pageList['1'].push(dataList.data[0])
+                pageList['2'].push(dataList.data[1])
+            })
+        } else {
+            // ElMessage(res.message)
        }
    })
 }

 //添加数据
-let addListData=()=>{
-    let num=null
-    if(pageList.tab>=19)return
-    ++pageList.tab
-    // console.log(pageList.height1,pageList.height2)
-   if(pageList.height1>pageList.height2){
-        num=2
-    }else{
-        num=1
+let addListData = () => {
+    let num = null
+    if (pageList.tab >= 18) return
+    pageList.tab++
+    if (pageList.height1 > pageList.height2) {
+        num = 2
+    } else {
+        num = 1
    }
-    pageList[num].push(dataList.data.data[pageList.tab])
+    pageList[num].push(dataList.data[pageList.tab])
 }

 //监听图片加载
-let watchImgLoad=(id,listId,height)=>{ 
-    // console.log(listId,height)
-    pageList[`height${listId}`]+=height
-    // console.log(pageList)
+let watchImgLoad = (id, listId, height) => {
+    pageList[`height${listId}`] += height
    addListData()
 }

-
+//加载更多
+let downLoadMore = () => {
+    tool.loadMore(() => {
+        if (!loading.value) return
+        pages.value++
+        getDataList(seachSelectData.data)
+    })
+}

 //listImg
-onMounted(()=>{
+onMounted(() => {
    getDataList()
+    window.addEventListener('scroll', downLoadMore, true);
+})
+
+onBeforeUnmount(() => {
+    window.removeEventListener('scroll', downLoadMore, true);
 })

 </script>
@@ -118,5 +167,16 @@ img {
 .mg-t-35 {
    margin-top: 35px;
 }
+
+.no-list-box {
+    height: 500px;
+    background: inherit;
+    background-color: rgba(255, 255, 255, 1);
+    border: none;
+    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);
+}
 </style>