首页

src/views/HomeView.vue

@@ -109,7 +109,7 @@
           <div>
             <div ref="waterfall1">
               <div class="waterfall-first-box dis-f">
-                <div class="info-box dis-f jus-x al-item first">
+                <div class="info-box dis-f jus-x al-item first" @click="indexWaterfallBoxCheck(indexData.data.tabs[0])">
                   <div>
                     <div class="img-box dis-f jus-x al-item">
                       <img src="../assets/homeImage/person.png" class="img" alt="">
@@ -117,7 +117,7 @@
                     <div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[0].name }}</div>
                   </div>
                 </div>
-                <div class="info-box dis-f jus-x al-item second">
+                <div class="info-box dis-f jus-x al-item second" @click="indexWaterfallBoxCheck(indexData.data.tabs[1])">
                   <div>
                     <div class="img-box dis-f jus-x al-item">
                       <img src="../assets/homeImage/intermediary.png" class="img" alt="">
@@ -125,7 +125,7 @@
                     <div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[1].name }}</div>
                   </div>
                 </div>
-                <div class="info-box dis-f jus-x al-item third">
+                <div class="info-box dis-f jus-x al-item third" @click="indexWaterfallBoxCheck(indexData.data.tabs[2])">
                   <div>
                     <div class="img-box dis-f jus-x al-item">
                       <img src="../assets/homeImage/brand.png" class="img" alt="">
@@ -133,7 +133,7 @@
                     <div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[2].name }}</div>
                   </div>
                 </div>
-                <div class="info-box dis-f jus-x al-item">
+                <div class="info-box dis-f jus-x al-item" @click="indexWaterfallBoxCheck(indexData.data.tabs[3])">
                   <div>
                     <div class="img-box dis-f jus-x al-item">
                       <img src="../assets/homeImage/seek.png" class="img" alt="">
@@ -178,7 +178,8 @@ import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
 import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue";
 import seachModule from "../components/seachModule/seachModule.vue";
 import indexRegularBox from '../components/indexRegularBox/indexRegularBox.vue';
-import headerNavigation from '../components/public/head.vue'
+import headerNavigation from '../components/public/head.vue';
+import { useRouter } from 'vue-router'
 import store from '../store/index';
 import api from "../utils/api";
 
@@ -201,7 +202,19 @@ let seachTypeData = reactive({ data: [] })
 watchEffect(() => {
   seachTypeData.data = store.state.seachTypeData
   indexData.data = store.state.indexData
-  ListSelectBtn.data = store.state.recommendedTab
+  ListSelectBtn.data = store.state.ListSelectBtn
+  indexData.data.tabs.map(res => {
+    if (res.name === "个人房源") {
+      res.path = '/personHousing'
+    } else if (res.name === "中介房源") {
+      res.path = '/intermediaryHousing'
+    } else if (res.name === "求房源") {
+      res.path = '/needHousing'
+    } else if (res.name === "品牌公寓") {
+      res.path = ''
+    }
+
+  })
 })
 
 //公寓数据
@@ -265,24 +278,26 @@ let getRecommendList = () => {
 //标签切换
 let listDataTypeChange = (item) => {
   ListSelectBtn.selectType = item.type
+  loadMore.value = false
   waterfallList[1] = []
   waterfallList[2] = []
   waterfallList[3] = []
   waterfallList[4] = []
-  pages.value=1
+  pages.value = 1
   getRecommendList()
 }
 
 
 //监听滚动条
 const onPageSrcoll = (e) => {
+  if (!loadMore.value) return
   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 - 500) {
+  if (scrollTop + clientHeight === offsetHeight) {
     if (loadMore.value) {
       loadMore.value = false
       pages.value += 1
@@ -291,14 +306,21 @@ const onPageSrcoll = (e) => {
   }
 }
 
+//瀑布流模块
+const router = useRouter()
+let indexWaterfallBoxCheck = (res) => {
+  router.push({
+    path: res.path
+  })
+}
+
 onMounted(() => {
+  document.documentElement.scrollTop = 0
   currentInstance = getCurrentInstance()
   setTimeout(() => {
     getRecommendList()
-  }, 1000)
-  nextTick(() => {
     window.addEventListener('scroll', onPageSrcoll, true);
-  })
+  }, 1000)
 })
 
 onBeforeUnmount(() => {

src/views/housingView/needHousing.vue

@@ -0,0 +1,62 @@
+<template>
+    <div>
+        <pageTopBar></pageTopBar>
+        <seachModule></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>
+                    <div></div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+  
+<script setup>
+import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
+import seachModule from "../../components/seachModule/seachModule.vue";
+import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
+</script>
+<style scoped>
+img {
+    object-fit: contain;
+}
+
+.dis-f {
+    display: flex;
+}
+
+.jus-x {
+    justify-content: center;
+}
+
+.al-item {
+    align-items: center;
+}
+
+.pos-r {
+    position: relative;
+}
+
+.body-maxWidth {
+    width: 1200px;
+    min-width: 1200px;
+}
+
+.s-w-100 {
+    width: 100%;
+}
+
+.jus-bet {
+    justify-content: space-between;
+}
+
+.mg-t-35 {
+    margin-top: 35px;
+}
+</style>
+  

src/views/housingView/person.vue

@@ -12,7 +12,7 @@
                 </div>
             </div>
         </div>
-
+        <listBtmPrompt></listBtmPrompt>
     </div>
 </template>
   
@@ -20,6 +20,7 @@
 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";
 </script>
 <style scoped>
 img {