增加加载提示语 添加搜索同步url 修改搜索页搜索类型显示

src/App.vue

@@ -73,6 +73,11 @@ img {
   width: 1200px;
 }
 
+.box-min-1200-src{
+  min-width:1200px;
+  overflow-x: scroll;
+}
+
 /* // 全局css 加上以下代码，可以隐藏上下箭头 */
 
 /* // 取消input的上下箭头 */

src/components/seachModule/seachModule.vue

@@ -175,19 +175,18 @@ let seachList = (item) => {
         historyArr.data.push(seachAllType.keyword)
     }
     localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
+    sessionStorage.setItem('houseingPageType',routePath.value === '/needHousing' ? '6' : routePath.value === '/intermediaryHousing' ? '1' : routePath.value === '/personHousing' ? '0' : '0')
     route.push({
         path: '/seachPage',
         query: {
             keyword: seachAllType.keyword,
             isNeedHousing: routePath.value === '/needHousing',
-            houseingPageType: routePath.value === '/needHousing' ? 6 : routePath.value === '/intermediaryHousing' ? 1 : routePath.value === '/personHousing' ? 0 : 0
         }
     })
 }
 
 //设置搜索数据
 let setSeachConditions = (type, data,second=null) => {
-    console.log(type,data,second)
     if (type === 'rent') {
         seachAllType['rent_min'] = data.min
         seachAllType['rent_max'] = data.max

src/components/seachPage/input.vue

@@ -215,11 +215,14 @@ let selectPage = (type) => {
     seachAllType['searchid'] = setPageKey()
     if (type === 'person') {
         seachAllType['intermediary'] = 0
-        route.currentRoute.value.query.houseingPageType='0'
+        houseingPageType='0'
+        sessionStorage.setItem('houseingPageType',0)
         selectTabBoxInfo.value.routerQuerySet()
     } else if (type === 'intermediary') {
         seachAllType['intermediary'] = 1
-        route.currentRoute.value.query.houseingPageType='1'
+        houseingPageType='1'
+        sessionStorage.setItem('houseingPageType',1)
+        // route.currentRoute.value.query.houseingPageType='1'
         selectTabBoxInfo.value.routerQuerySet()
     } else {
         seachAllType['intermediary'] = ''
@@ -238,8 +241,8 @@ seachVal.value = route.currentRoute.value.query.keyword&&route.currentRoute.valu
 isNeedHousing.value = route.currentRoute.value.query.isNeedHousing === 'true'
 
 //判断当前是什么页面
-let houseingPageType = route.currentRoute.value.query.houseingPageType
+let houseingPageType = sessionStorage.getItem('houseingPageType')
-console.log('houseingPageType',route.currentRoute.value.query)
+console.log('houseingPageType',houseingPageType)
 let type = houseingPageType === '0' ? 'person' : houseingPageType === '1' ? 'intermediary' : houseingPageType === '6' ? 'need' : 'apartment'
 tabType.value = type
 
@@ -336,6 +339,7 @@ let searchInit = (data) => {
 }
 //搜索数据
 let seachList = (item) => {
+    let routeInfo = route.currentRoute.value
     if (!seachVal.value.replace(/\s/g, "")) return
     if (!seachVal.value) {
         return
@@ -346,6 +350,13 @@ let seachList = (item) => {
     } else {
         searchInit(seachVal.value)
     }
+    route.push({
+        path:routeInfo.path,
+        query:{
+            keyword:seachVal.value,
+            isNeedHousing:routeInfo.query.isNeedHousing
+        }
+    })
 }
 
 //筛选词条

src/components/selectTabBox/selectTabBox.vue

@@ -637,6 +637,7 @@ let setRouterQuerySet = ref(true)
 let routerQuerySet = () => {
     if(routePath.value==='/seachPage'){
         deconstructionSeachData = routeQuery.data
+        deconstructionSeachData.houseingPageType=sessionStorage.getItem('houseingPageType')
     }else{
        deconstructionSeachData = deconstructionData(routeQuery.data) 
     }

src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home">
+  <div class="home box-min-1200-src">
     <pageTopBar :bannerList="bannerList.data"></pageTopBar>
     <!-- 搜索模块 -->
     <seachModule :getDataList="personHouseingInfo"></seachModule>
@@ -21,7 +21,7 @@
               <div class="list-box">
                 <div class="dis-f al-item mg-b-5">
                   <img src="../assets/homeImage/informationO.png" class="img" alt="">
-                  <span class="title">攻略</span>
+                  <span class="title">{{ informationData && informationData[0].name }}</span>
                 </div>
                 <div v-for="(item, i) in informationData && informationData[0].list" :key="i"
                   class="dis-f al-item list-li">
@@ -34,7 +34,7 @@
               <div class="list-box">
                 <div class="dis-f al-item mg-b-5">
                   <img src="../assets/homeImage/informationT.png" class="img" alt="">
-                  <span class="title">科普</span>
+                  <span class="title">{{ informationData && informationData[1].name }}</span>
                 </div>
                 <div v-for="(item, i) in informationData && informationData[1].list" :key="i"
                   class="dis-f al-item list-li">
@@ -113,6 +113,23 @@
           </skeletonBox>
         </div>
         <div class="waterfall-box s-w-100" ref="list" v-show="waterfallList.length > 0">
+          <div class="waterfall-first-box item dis-f al-item jus-x" style="flex-wrap: wrap;">
+            <div v-for="(item, i) in indexData.data.tabs" :key="i" class="info-box dis-f al-item jus-x"
+            :class="[i==0?'first':i==1?'second':i==2?'third':'']"
+              style="flex-wrap: wrap;" @click="housingPage(item.path)">
+              <div>
+                <div class="img-box dis-f jus-x al-item">
+                  <img src="../assets/homeImage/person.png" alt="" v-if="i==0" class="img">
+                  <img src="../assets/homeImage/intermediary.png" alt="" v-if="i==1" class="img">
+                  <img src="../assets/homeImage/brand.png" alt="" v-if="i==2" class="img">
+                  <img src="../assets/homeImage/seek.png" alt="" v-if="i==3" class="img">
+                </div>
+                <div class="text-center s-w-100">
+                  {{ item.name }}
+                </div>
+              </div>
+            </div>
+          </div>
           <indexWaterfallBox v-for="(item, i) in waterfallList" :data="item" :key="i"></indexWaterfallBox>
         </div>
       </div>
@@ -168,18 +185,17 @@ watchEffect(() => {
   seachTypeData.data = store.state.seachTypeData
   indexData.data = store.state.indexData
   ListSelectBtn.data = store.state.ListSelectBtn
-  if (indexData.data.length) {
+  if (indexData.data.tabs.length) {
     indexData.data.tabs.map(res => {
-      if (res.name === "个人房源") {
+      if (res.url==='/pages/personList/personList') {
         res.path = '/personHousing'
-      } else if (res.name === "中介房源") {
+      } else if (res.url==='/pages/personList/personList?intermediary=1') {
         res.path = '/intermediaryHousing'
-      } else if (res.name === "求房源") {
+      } else if (res.url==="/pages/restOfWorld/restOfWorld") {
         res.path = '/needHousing'
-      } else if (res.name === "品牌公寓") {
+      } else if (res.url==='/pages/irentList/irentList') {
-        res.path = ''
+        res.path = '/apartment'
       }
-
     })
   }
   informationData.value = store.state.indexData.articleList
@@ -214,9 +230,10 @@ let banner = () => {
 
 //开关
 let loadMore = ref(true)
-let loadText = ref('加载中.....')
+let loadText = ref('下拉加载更多')
 //瀑布流数据
 let getRecommendList = () => {
+  loadText.value = '加载中.....'
   api.recommendList({
     page: pages.value,
     limit: 30,
@@ -232,6 +249,7 @@ let getRecommendList = () => {
       }
       if (res.data.data.length >= 30) {
         loadMore.value = true
+        loadText.value = '下拉加载更多'
       } else {
         loadMore.value = false
         loadText.value = '到底了'
@@ -253,10 +271,6 @@ let getRecommendList = () => {
 let listDataTypeChange = (item) => {
   ListSelectBtn.selectType = item.type
   loadMore.value = false
-  waterfallList[1] = []
-  waterfallList[2] = []
-  waterfallList[3] = []
-  waterfallList[4] = []
   pages.value = 1
   pagevalue.value = 0
   getRecommendList()
@@ -285,7 +299,6 @@ const router = useRouter()
 
 //跳转个人房源
 let personHouseingInfo = (type, data, areaItem) => {
-  console.log(type, data, areaItem)
   let areaItems = {}
   let setData = null
   if (type === "location") {
@@ -307,6 +320,13 @@ let personHouseingInfo = (type, data, areaItem) => {
   })
 }
 
+//跳转房源页
+let housingPage=(path)=>{
+  router.push({
+    path: path,
+  })
+}
+
 const list = ref(null)
 
 onMounted(() => {

src/views/detail.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="box-min-1200-src">
         <pageTopBar></pageTopBar>
         <div class="dis-f jus-x al-item">
             <div class="body-maxWidth mg-t-35">
@@ -205,7 +205,7 @@
                             <div class="title dis-f al-item">
                                 <img src="../assets/img/detail/infoIcon.png" class="img" alt="">
                                 <span>
-                                    基本信息
+                                    {{pageType != 3?'基本信息':'基本要求'}}
                                 </span>
                             </div>
                             <!--  -->
@@ -1345,9 +1345,10 @@ let recommendListData = ref([])
 //广告参数
 let pagevalue = ref(0)
 //加载提示
-let loadText = ref('加载中......')
+let loadText = ref('下拉加载更多')
 //获取瀑布流数据
 let recommendList = () => {
+    loadText.value='加载中.....'
     api.recommendList({
         page: pages.value,
         limit: 30,
@@ -1359,6 +1360,7 @@ let recommendList = () => {
         if (res.code === 200) {
             if (res.data.data && res.data.data.length >= 30) {
                 loadMore.value = true
+                loadText.value='下拉加载更多'
             } else {
                 loadMore.value = false
                 loadText.value = '到底了'

src/views/housingView/intermediary.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="box-min-1200-src">
         <pageTopBar></pageTopBar>
         <seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
         <div class="dis-f jus-x al-item">
@@ -48,7 +48,7 @@ let dataCount = ref(0)
 let pageList = ref([])
 let seachSelectData = reactive({ data: {} })
 let loading = ref(true)
-let loadingText=ref(' 加载中... ')
+let loadingText=ref(' 下拉加载更多 ')
 provide('count', dataCount)
 
 //保存搜索设置
@@ -63,6 +63,7 @@ let setSeachSelectData = (data) => {
 
 //获取搜索数据
 let getDataList = (data) => {
+    loadingText.value=' 加载中..... '
     if(!loading.value)return
     loading.value = false
     let postData = {
@@ -77,7 +78,7 @@ let getDataList = (data) => {
             if(res.data.data.length<20){
                 loadingText.value=' 到底了 '
             }else{
-                loadingText.value=' 加载中... '
+                loadingText.value=' 下拉加载更多 '
             }
             if (pages.value === 1) {
                 pageList.value = []

src/views/housingView/needHousing.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="box-min-1200-src">
         <pageTopBar></pageTopBar>
         <seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
         <div class="dis-f jus-x al-item">
@@ -49,7 +49,7 @@ let dataCount = ref(0)
 let pageList = ref([])
 let seachSelectData = reactive({ data: {} })
 let loading = ref(true)
-let loadingText=ref(' 加载中... ')
+let loadingText=ref(' 下拉加载更多 ')
 provide('count', dataCount)
 
 //保存搜索设置
@@ -64,6 +64,7 @@ let setSeachSelectData = (data) => {
 
 //获取搜索数据
 let getDataList = (data) => {
+    loadingText.value=' 加载中..... '
     if(!loading.value)return
     loading.value = false
     let postData = {
@@ -78,7 +79,7 @@ let getDataList = (data) => {
             if(res.data.data.length<20){
                 loadingText.value=' 到底了 '
             }else{
-                loadingText.value=' 加载中... '
+                loadingText.value=' 下拉加载更多 '
             }
             if (pages.value === 1) {
                 pageList.value = []

src/views/housingView/person.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="box-min-1200-src">
         <pageTopBar></pageTopBar>
         <seachModule :getDataList="setSeachSelectData"></seachModule>
         <div class="dis-f jus-x al-item">
@@ -53,7 +53,7 @@ let dataCount = ref(0)
 let pageList = ref([])
 let seachSelectData = reactive({ data: {} })
 let loading = ref(true)
-let loadingText = ref(' 加载中... ')
+let loadingText = ref(' 下拉加载更多 ')
 provide('count', dataCount)
 
 //保存搜索设置
@@ -69,6 +69,7 @@ let setSeachSelectData = (data) => {
 
 //获取搜索数据
 let getDataList = (data) => {
+    loadingText.value=' 加载中..... '
     if (!loading.value) return
     loading.value = false
     let postData = {
@@ -82,7 +83,7 @@ let getDataList = (data) => {
             if (res.data.data.length < 20) {
                 loadingText.value = ' 到底了 '
             } else {
-                loadingText.value = ' 加载中... '
+                loadingText.value = ' 下拉加载更多 '
             }
             if (pages.value === 1) {
                 pageList.value = []

src/views/seachIndex.vue

@@ -54,7 +54,7 @@ let pageList = ref([])
 // let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })//双列瀑布数据
 let seachSelectData = reactive({ data: {} })//搜索数据
 let loading = ref(true)//开关
-let loadingText = ref(` 加载中..... `)
+let loadingText = ref(` 下拉加载更多 `)
 let listApartment = ref([])//公寓数据
 let masonryInstance = null//瀑布实例
 let listMasonryInstance = null
@@ -86,6 +86,7 @@ let setInitial = () => {
 
 //获取搜索数据
 let getDataList = (data) => {
+    loadingText.value=' 加载中..... '
     if (!loading.value) return
     let postData = {
         page: pages.value,
@@ -108,7 +109,7 @@ let getDataList = (data) => {
                 loadingText.value = ` 到底了 `
                 loading.value = false
             } else {
-                loadingText.value = ' 加载中... '
+                loadingText.value = ' 下拉加载更多 '
                 loading.value = true
             }
             if (seachSelectData.data.tabType !== 'apartment') {
@@ -123,7 +124,7 @@ let getDataList = (data) => {
                 nextTick(() => {
                     // if (dataList.data[0]) pageList['1'].push(dataList.data[0])
                     // if (dataList.data[1]) pageList['2'].push(dataList.data[1])
-                    console.log('listMasonryInstance',listMasonryInstance)
+                    // console.log('listMasonryInstance',listMasonryInstance)
                     listMasonryInstance.reloadItems();
                     listMasonryInstance.layout();
                 })
@@ -133,7 +134,6 @@ let getDataList = (data) => {
                 dataCount.value = res.data.count
                 if (pages.value === 1) listApartment.value = []
                 listApartment.value = listApartment.value.concat(data.data)
-                console.log(seachSelectData.data)
                 nextTick(() => {
                     masonryInstance.reloadItems();
                     masonryInstance.layout();
@@ -154,33 +154,6 @@ let getDataList = (data) => {
     })
 }
 
-//添加数据
-let addListData = () => {
-    let num = null
-    // 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) {
-            loading.value = true
-        } else {
-            loading.value = false
-        }
-        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(() => {
@@ -211,9 +184,7 @@ onMounted(() => {
         inputModuleInfo.value.searchInit(routeQuery.data.keyword)//调用搜索组件的搜索功能
         route.currentRoute.value.query.keyword = ''
     } else {
-        console.log(seachSelectData.data)
         inputModuleInfo.value.checkPageType()
-        // getDataList(seachSelectData.data)
     }
     window.addEventListener('scroll', downLoadMore, true);
 })