中介个人搜索求房源新增底部加载提示

2023-07-21 14:04:44 +08:00 · 2023-07-21 14:04:44 +08:00 · fb81238823
commit fb81238823
parent c53cc10101
10 changed files with 115 additions and 49 deletions
--- a/src/components/loadMore/loadMoreText.vue
+++ b/src/components/loadMore/loadMoreText.vue
@ -0,0 +1,36 @@
+<template>
+    <div class="dis-f jus-x bottom-tps">
+      - {{ props.loadText }} -
+    </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+const props= defineProps({
+    loadText:String
+})
+</script>
+
+<style lang="less" scoped>
+
+.dis-f {
+  display: flex;
+}
+
+.jus-x {
+  justify-content: center;
+}
+
+.al-item {
+  align-items: center;
+}
+.bottom-tps {
+  font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 14px;
+  color: #555555;
+  text-align: center;
+  padding: 30px 0;
+}
+</style>
--- a/src/components/seachModule/seachModule.vue
+++ b/src/components/seachModule/seachModule.vue
@ -170,7 +170,8 @@ let seachList = (item) => {
        path: '/seachPage',
        query: {
            keyword: seachAllType.keyword,
-            isNeedHousing:routePath.value === '/needHousing'
+            isNeedHousing:routePath.value === '/needHousing',
+            houseingPageType:routePath.value === '/needHousing'?6:routePath.value === '/intermediaryHousing'?1:routePath.value === '/personHousing'?0:''
        }
    })
    // if (routePath.value === '/') {
--- a/src/components/seachPage/input.vue
+++ b/src/components/seachPage/input.vue
@ -29,30 +29,25 @@
                        :class="{ 'select-top-btn-bg': tabType === 'person' }">
                        <div class="top-btn" :class="[tabType === 'person' ? 'select-top-btn' : 'first-no-select']"
                            v-show="tabType === 'person'">
-                            个人房源 {{ seachKey.key&&seachKey.key.personal&&seachKey.key.personal.count }}
+                            个人房源 {{ seachKey.key && seachKey.key.personal && seachKey.key.personal.count }}
                        </div>
-                        个人房源 {{ seachKey.key&&seachKey.key.personal&&seachKey.key.personal.count }}
+                        个人房源 {{ seachKey.key && seachKey.key.personal && seachKey.key.personal.count }}
                        <div class="second-select" v-show="tabType === 'intermediary'">
                            <div class="box">

                            </div>
                        </div>
                    </div>
-                    <div class="top-btn dis-f jus-x al-item first" v-if="isNeedHousing" @click="selectPage('person')"
-                        :class="{ 'select-top-btn-bg': tabType === 'person' }">
-                        <div class="top-btn" :class="[tabType === 'person' ? 'select-top-btn' : 'first-no-select']"
-                            v-show="tabType === 'person'">
-                            求房源 {{ seachKey.key&&seachKey.key.personal&&seachKey.key.personal.count }}
-                        </div>
-                        求房源 {{ seachKey.key&&seachKey.key.personal&&seachKey.key.personal.count }}
-                        <div class="second-select" v-show="tabType === 'intermediary'">
-                            <div class="box">
-
-                            </div>
+                    <div class="top-btn dis-f jus-x al-item first" v-if="isNeedHousing"
+                        :class="{ 'select-top-btn-bg': tabType === 'need' }">
+                        <div class="top-btn" :class="[tabType === 'need' ? 'select-top-btn' : 'first-no-select']"
+                            v-show="tabType === 'need'">
+                            求房源
                        </div>
+                        求房源
                    </div>
-                    <div class="top-btn dis-f jus-x al-item second" v-if="!isNeedHousing" @click="selectPage('intermediary')"
-                        :class="{ 'select-top-btn-bg': tabType === 'intermediary' }">
+                    <div class="top-btn dis-f jus-x al-item second" v-if="!isNeedHousing"
+                        @click="selectPage('intermediary')" :class="{ 'select-top-btn-bg': tabType === 'intermediary' }">
                        <div class="first-select" v-show="tabType === 'person'">
                            <div class="box">

@ -65,9 +60,9 @@
                        </div>
                        <div class="top-btn" :class="[tabType === 'intermediary' ? 'select-top-btn' : 'first-no-select']"
                            v-show="tabType === 'intermediary'">
-                            中介房源 {{ seachKey.key&&seachKey.key.intermediary&&seachKey.key.intermediary.count }}
+                            中介房源 {{ seachKey.key && seachKey.key.intermediary && seachKey.key.intermediary.count }}
                        </div>
-                        中介房源 {{ seachKey.key&&seachKey.key.intermediary&&seachKey.key.intermediary.count }}
+                        中介房源 {{ seachKey.key && seachKey.key.intermediary && seachKey.key.intermediary.count }}
                    </div>
                    <div class="top-btn dis-f jus-x al-item third" @click="selectPage('apartment')"
                        :class="{ 'select-top-btn-bg': tabType === 'apartment' }" v-if="!isNeedHousing">
@ -78,9 +73,9 @@
                        </div>
                        <div class="top-btn" :class="[tabType === 'apartment' ? 'select-top-btn' : 'first-no-select']"
                            v-show="tabType === 'apartment'">
-                            品牌公寓 {{ seachKey.key&&seachKey.key.studentapartment&&seachKey.key.studentapartment.count }}
+                            品牌公寓 {{ seachKey.key && seachKey.key.studentapartment && seachKey.key.studentapartment.count }}
                        </div>
-                        学生公寓 {{ seachKey.key&&seachKey.key.studentapartment&&seachKey.key.studentapartment.count }}
+                        学生公寓 {{ seachKey.key && seachKey.key.studentapartment && seachKey.key.studentapartment.count }}
                    </div>
                </div>
                <div v-show="tabType === 'apartment'" :class="{ 'show-box-pd': !showSelectModule }">
@ -209,20 +204,47 @@ let selectPage = (type) => {
    } else {
        seachAllType['intermediary'] = ''
    }
-    getDataList(seachAllType, tabType.value)
+    getDataList(seachAllType)
 }

 let getDataList = props.getDataList

 //搜索内容
 let seachVal = ref('')
-let isNeedHousing=ref(false)
+let isNeedHousing = ref(false)
 seachVal.value = route.currentRoute.value.query.keyword

 //判断是否从求房源页面跳转
-isNeedHousing.value = route.currentRoute.value.query.isNeedHousing==='true'
+isNeedHousing.value = route.currentRoute.value.query.isNeedHousing === 'true'
+
+//判断当前是什么页面
+let houseingPageType = route.currentRoute.value.query.houseingPageType
+
+//页面判断
+let checkPageType = () => {
+    // houseingPageType 0个人 1中介 6求房源
+    let type = houseingPageType === '0' ? 'person' : houseingPageType === '1' ? 'intermediary' : houseingPageType === '6' ? 'need' : 'apartment'
+    tabType.value = type
+    seachAllType['tabType'] = type
+    if (type === 'person') {
+        seachAllType['intermediary'] = 0
+    } else if (type === 'intermediary') {
+        seachAllType['intermediary'] = 1
+    } else if (type === 'need') {
+        seachAllType['intermediary'] = 6
+        seachAllType['keyword'] = seachVal.value
+    } else {
+        seachAllType['intermediary'] = ''
+    }
+}
+
+
 //搜索key
-let seachKey = reactive({ key: {} })
+let seachKey = reactive({ key: {
+    personal:{},
+    intermediary:{},
+    studentapartment:{}
+} })

 //搜索数据
 let seachAllType = reactive({
@ -255,27 +277,26 @@ let setSeachConditions = (type, data) => {
            ...data
        }
    }
-    if(!seachVal.value){
-        seachAllType.searchid=''
+    if (!seachVal.value) {
+        seachAllType.searchid = ''
    }
    // console.log('seachAllType', seachAllType)
    // return
-    getDataList(seachAllType, tabType.value)
+    getDataList(seachAllType)
 }

 //设置当前搜索key
 let setPageKey = () => {
-    return tabType.value === 'person' ? seachKey.key.personal.searchid : tabType.value === 'intermediary' ? seachKey.key.intermediary.searchid : seachKey.key.studentapartment.searchid
+    return tabType.value === 'person' ? seachKey.key.personal.searchid : tabType.value === 'intermediary' ? seachKey.key.intermediary.searchid : tabType.value === 'apartment' ? seachKey.key.studentapartment.searchid : ''
 }

 //搜索初始化
 let searchInit = (data) => {
-    console.log(123456)
    api.search({ keyword: data }).then(res => {
        if (res.code === 200) {
            seachKey.key = res.data
            seachAllType.searchid = setPageKey()
-            getDataList(seachAllType, tabType.value)
+            getDataList(seachAllType)
        } else {
            ElMessage({
                message: res.message,
@ -286,11 +307,16 @@ let searchInit = (data) => {
 }
 //搜索数据
 let seachList = (item) => {
-    if(!seachVal.value.replace(/\s/g,""))return
+    if (!seachVal.value.replace(/\s/g, "")) return
    if (!seachVal.value) {
        return
    }
-    searchInit(seachVal.value)
+    if(seachAllType['intermediary']===6){
+        seachAllType['keyword']=seachVal.value
+        getDataList(seachAllType)
+    }else{
+        searchInit(seachVal.value)
+    }
 }

 //筛选词条
@ -339,6 +365,9 @@ let getLocationData = (data) => {
    }
 }

+//调用判断页面
+checkPageType()
+
 watchEffect(() => {
    seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
    if (seachArea.data.length > 0 && !seachArea.data[0].data) getLocationData(store.state.indexData.config.location)
--- a/src/main.js
+++ b/src/main.js
@ -41,7 +41,6 @@ import Axios from '@/utils/axios';

 api.index().then(res => {
  if (res.code === 200) {
-    console.log(123)
    store.state.seachTypeData = res.data.combination
    store.state.indexData = res.data
    store.state.ListSelectBtn = res.data.recommendedTab
--- a/src/router/index.js
+++ b/src/router/index.js
@ -104,10 +104,6 @@ router.beforeEach((to, from, next) => {
    store.state.routeList.secondaryIndex.title = from.meta.title
    store.state.routeList.secondaryIndex.path = from.path
  }
-
-  //
-  // =======
-  console.log(to, from);
  // >>>>>>> 542e853 (提交)
  next()
  let meta = to['meta'] || {}
--- a/src/toolJs/downLoadMore.js
+++ b/src/toolJs/downLoadMore.js
@ -6,7 +6,7 @@ const loadMore = (loadFunction) => {
    let scrollTop = body.scrollTop
    let clientHeight = body.clientHeight
    let offsetHeight = body.offsetHeight
-    if (scrollTop + clientHeight === offsetHeight) {
+    if (scrollTop + clientHeight >= offsetHeight-200) {
        loadFunction()
    }
  }
--- a/src/views/housingView/intermediary.vue
+++ b/src/views/housingView/intermediary.vue
@ -19,6 +19,7 @@
                </div>
            </div>
        </div>
+        <loadMoreText :loadText="loading?'加载中....':'到底了'"></loadMoreText>
        <listBtmPrompt></listBtmPrompt>
        <footerTool></footerTool>
    </div>
@ -38,6 +39,7 @@ import api from "../../utils/api";
 import tool from '../../toolJs/downLoadMore'
 import { ElMessage } from 'element-plus'
 import footerTool from '@/components/footer/footer.vue'
+import loadMoreText from '../../components/loadMore/loadMoreText.vue'

 //获取数据
 let pages = ref(1)
@ -102,7 +104,7 @@ let getDataList = (data) => {
 let addListData = () => {
    let num = null
    if (pageList.tab > (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
-        if(dataList.data.length>=20){
+        if(dataList.data.length>20){
            loading.value = true
        }else{
            loading.value = false
--- a/src/views/housingView/needHousing.vue
+++ b/src/views/housingView/needHousing.vue
@ -19,6 +19,7 @@
                </div>
            </div>
        </div>
+        <loadMoreText :loadText="loading?'加载中....':'到底了'"></loadMoreText>
        <listBtmPrompt></listBtmPrompt>
        <footerTool></footerTool>
    </div>
@ -39,6 +40,7 @@ import api from "../../utils/api";
 import tool from '../../toolJs/downLoadMore'
 import { ElMessage } from 'element-plus'
 import footerTool from '@/components/footer/footer.vue'
+import loadMoreText from '../../components/loadMore/loadMoreText.vue'

 //获取数据
 let pages = ref(1)
@ -104,7 +106,7 @@ let addListData = () => {
    let num = null
    if (pageList.tab > (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
        console.log(dataList.data.length,20,loading.value)
-        if(dataList.data.length>=20){
+        if(dataList.data.length>20){
            loading.value = true
        }else{
            loading.value = false
--- a/src/views/housingView/person.vue
+++ b/src/views/housingView/person.vue
@ -22,6 +22,7 @@
                </div>
            </div>
        </div>
+        <loadMoreText :loadText="loading?'加载中....':'到底了'"></loadMoreText>
        <listBtmPrompt></listBtmPrompt>
        <footerTool></footerTool>
    </div>
@ -43,6 +44,7 @@ import tool from '../../toolJs/downLoadMore'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import footerTool from '@/components/footer/footer.vue'
+import loadMoreText from '../../components/loadMore/loadMoreText.vue'

 //路由
 const router = useRouter()
@ -111,7 +113,7 @@ let getDataList = (data) => {
 let addListData = () => {
    let num = null
    if (pageList.tab > (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
-        if(dataList.data.length>=20){
+        if(dataList.data.length>20){
            loading.value = true
        }else{
            loading.value = false
@ -136,7 +138,6 @@ let watchImgLoad = (id, listId, height) => {
 //加载更多
 let downLoadMore = () => {
    tool.loadMore(() => {
-
        if (!loading.value||dataList.data.length==0) return
        pages.value++
        getDataList(seachSelectData.data)
--- a/src/views/seachIndex.vue
+++ b/src/views/seachIndex.vue
@ -23,6 +23,7 @@
                </div>
            </div>
        </div>
+        <loadMoreText :loadText="loading?'加载中....':'到底了'"></loadMoreText>
        <listBtmPrompt></listBtmPrompt>
        <footerTool></footerTool>
    </div>
@ -42,6 +43,7 @@ import Masonry from 'masonry-layout';
 import { useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus'
 import footerTool from '@/components/footer/footer.vue'
+import loadMoreText from '../components/loadMore/loadMoreText.vue'

 //路由
 const route = useRouter()
@ -59,7 +61,7 @@ let masonryInstance = null//瀑布实例
 provide('count', dataCount)

 //保存搜索设置
-let setSeachSelectData = (data, type) => {
+let setSeachSelectData = (data) => {
    pages.value = 1

    // if(data.location.length>0){
@ -71,7 +73,7 @@ let setSeachSelectData = (data, type) => {
    loading.value = true
    // console.log('seachSelectData', seachSelectData.data, type)
    // return
-    getDataList(seachSelectData.data, type)
+    getDataList(seachSelectData.data)
 }

 //初始化列表参数
@ -87,7 +89,6 @@ let getDataList = (data) => {
    if (!loading.value) return
    let postData = {
        page: pages.value,
-        intermediary: 0,
        limit:20,
        ...data
    }
@ -135,9 +136,9 @@ let getDataList = (data) => {
 //添加数据
 let addListData = () => {
    let num = null
-    console.log(pageList.tab , (dataList.count>20?dataList.data.length-2:dataList.count-2))
+    // console.log(pageList.tab , (dataList.count>20?dataList.data.length-2:dataList.count-2))
    if (pageList.tab > (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
-        if(dataList.data.length>=20){
+        if(dataList.data.length>20){
            loading.value = true
        }else{
            loading.value = false
@ -179,10 +180,9 @@ onMounted(() => {
        gutter: 20
    });
    routeQuery.data = route.currentRoute.value.query
-    console.log(routeQuery)
    if(routeQuery.data.keyword){
        inputModuleInfo.value.searchInit(routeQuery.data.keyword)//调用搜索组件的搜索功能
-        route.currentRoute.value.query={}
+        route.currentRoute.value.query.keyword=''
    }else{
        getDataList()
    }