首页跳转个人房源

2023-07-19 19:24:09 +08:00
parent 54e699f776
commit e625743205
9 changed files with 99 additions and 42 deletions
--- a/src/components/indexSeachInfo/indexSeachInfo.vue
+++ b/src/components/indexSeachInfo/indexSeachInfo.vue
@@ -8,7 +8,7 @@
            <div class="info-box-bg">
                <div class="box"
                    :class="[{ 'pad-15': seachType === '3' }]">
-                    <div @click="setSelectType(i + 1,item.data)" v-for="(item, i) in btn.data" :key="i" :class="[
+                    <div @click="setSelectType(i+1,item.data,item)" v-for="(item, i) in btn.data" :key="i" :class="[
                        { 'btn': seachType === '1' },
                        { 'mg-l-17': seachType === '1' && i % 5 !== 0 },
                        { 'seach-long-btn btn': seachType === '2' },
@@ -49,6 +49,9 @@ const props = defineProps({
        default: function () {
            return []
        }
+    },
+    checkBtn:{
+        type:Function
    }
 })

@@ -64,7 +67,7 @@ watchEffect(()=>{
 let selectType = ref('')
 let selectData = reactive({data:[]})
 //点击选项
-let setSelectType = (num,data) => {
+let setSelectType = (num,data,item) => {
    if (seachType == 3) {
        if (num === selectType.value) {
            selectType.value = ''
@@ -72,6 +75,10 @@ let setSelectType = (num,data) => {
            selectType.value = num
            selectData.data=data
        }
+    }else if(seachType == 2){
+        props.checkBtn(item.id,'types')
+    }else if(seachType == 1){
+        props.checkBtn(item.id,'school')
    }
 }
 //取消按钮
@@ -81,7 +88,8 @@ let closeSeach = () => {

 //确认按钮
 let selectSeach = (data) => {
-    console.log(data)
+    props.checkBtn(data,'location')
+    // console.log(data)
 }

 </script>
--- a/src/components/seachModule/seachModule.vue
+++ b/src/components/seachModule/seachModule.vue
@@ -64,12 +64,12 @@
                        </div>
                    </div>
                    <div class="seach-info-box dis-f" v-if="routePath === '/'">
-                        <seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length">
+                        <seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length" :checkBtn="checkBtn">
                        </seachInfo>
-                        <seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length"></seachInfo>
-                        <seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data"
+                        <seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length" :checkBtn="checkBtn"></seachInfo>
+                        <seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data" :checkBtn="checkBtn"
                            v-if="seachArea.data.length"></seachInfo>
-                        <seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data"
+                        <seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data" :checkBtn="checkBtn"
                            v-if="allHireType.data.length"></seachInfo>
                    </div>
                    <!--  -->
@@ -197,6 +197,12 @@ let setHotSeach=(item)=>{
    getDataList(seachAllType)
 }

+//点击选项
+let checkBtn=(data,type)=>{
+    console.log(data,type)
+    getDataList(type,data)
+}
+

 defineExpose({
    historyShow
--- a/src/components/seachPage/input.vue
+++ b/src/components/seachPage/input.vue
@@ -148,7 +148,7 @@
 <script setup>
 import { reactive, ref, shallowReactive, defineProps, watchEffect } from 'vue'
 import selectTabBox from "../selectTabBox/selectTabBox.vue";
-import apartmentSelect from '../apartment/seachModule.vue'
+import apartmentSelect from '../apartment/seach.vue'
 import store from '../../store/index';
 import api from '@/utils/api';

--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -2,7 +2,7 @@
  <div class="home">
    <pageTopBar :bannerList="bannerList.data"></pageTopBar>
    <!-- 搜索模块 -->
-    <seachModule></seachModule>
+    <seachModule :getDataList="personHouseingInfo"></seachModule>
    <!-- 房源展示 -->
    <div class="dis-f jus-x al-item" style="margin-top:25px;">
      <div class="body-maxWidth dis-f al-item">
@@ -106,10 +106,11 @@
      <div class="body-maxWidth dis-f al-item">
        <div class="waterfall-box s-w-100">
          <div>
-            <div v-show="waterfallList['1'].length===0">
-              <skeletonBox v-show="waterfallList['1'].length===0" v-for="item in noWaterfallList['1']" :key="item"></skeletonBox>
+            <div v-show="waterfallList['1'].length === 0">
+              <skeletonBox v-show="waterfallList['1'].length === 0" v-for="item in noWaterfallList['1']" :key="item">
+              </skeletonBox>
            </div>
-            <div ref="waterfall1" v-show="waterfallList['1'].length>0">
+            <div ref="waterfall1" v-show="waterfallList['1'].length > 0">
              <div class="waterfall-first-box dis-f">
                <div class="info-box dis-f jus-x al-item first" @click="indexWaterfallBoxCheck(indexData.data.tabs[0])">
                  <div>
@@ -149,27 +150,30 @@
            </div>
          </div>
          <div>
-            <div v-show="waterfallList['2'].length===0">
-              <skeletonBox v-show="waterfallList['2'].length===0" v-for="item in noWaterfallList['2']" :key="item"></skeletonBox>
+            <div v-show="waterfallList['2'].length === 0">
+              <skeletonBox v-show="waterfallList['2'].length === 0" v-for="item in noWaterfallList['2']" :key="item">
+              </skeletonBox>
            </div>
-            <div ref="waterfall2" v-show="waterfallList['2'].length>0">
+            <div ref="waterfall2" v-show="waterfallList['2'].length > 0">
              <indexWaterfallBox v-for="(item, i) in waterfallList['2']" :data="item" :key="i"></indexWaterfallBox>
            </div>
            <!-- <img src="../assets/homeImage/liveImg.svg" class="live-img" alt=""> -->
          </div>
          <div>
-            <div v-show="waterfallList['3'].length===0">
-              <skeletonBox v-show="waterfallList['3'].length===0" v-for="item in noWaterfallList['3']" :key="item"></skeletonBox>
+            <div v-show="waterfallList['3'].length === 0">
+              <skeletonBox v-show="waterfallList['3'].length === 0" v-for="item in noWaterfallList['3']" :key="item">
+              </skeletonBox>
            </div>
-            <div ref="waterfall3" v-show="waterfallList['3'].length>0">
+            <div ref="waterfall3" v-show="waterfallList['3'].length > 0">
              <indexWaterfallBox v-for="(item, i) in waterfallList['3']" :data="item" :key="i"></indexWaterfallBox>
            </div>
          </div>
          <div>
-            <div v-show="waterfallList['4'].length===0">
-              <skeletonBox v-show="waterfallList['4'].length===0" v-for="item in noWaterfallList['4']" :key="item"></skeletonBox>
+            <div v-show="waterfallList['4'].length === 0">
+              <skeletonBox v-show="waterfallList['4'].length === 0" v-for="item in noWaterfallList['4']" :key="item">
+              </skeletonBox>
            </div>
-            <div ref="waterfall4" v-show="waterfallList['4'].length>0">
+            <div ref="waterfall4" v-show="waterfallList['4'].length > 0">
              <indexWaterfallBox v-for="(item, i) in waterfallList['4']" :data="item" :key="i"></indexWaterfallBox>
            </div>
          </div>
@@ -177,7 +181,7 @@
      </div>
    </div>
    <div class="dis-f jus-x bottom-tps">
-      - {{loadText}} -
+      - {{ loadText }} -
    </div>
    <footerTool></footerTool>
    <indexRegularBox></indexRegularBox>
@@ -249,7 +253,7 @@ let pagevalue = ref(0)
 //瀑布流数据
 let pages = ref(1)
 let waterfallList = reactive({ 1: [], 2: [], 3: [], 4: [] })
-let noWaterfallList=reactive({1:3,2:3,3:3,4:3})
+let noWaterfallList = reactive({ 1: 3, 2: 3, 3: 3, 4: 3 })

 //判断最小值
 let getMinHeight = (data) => {
@@ -286,7 +290,7 @@ let addListData = (data) => {
 }
 //开关
 let loadMore = ref(true)
-let loadText=ref('加载中.....')
+let loadText = ref('加载中.....')
 //瀑布流数据
 let getRecommendList = () => {
  api.recommendList({
@@ -305,7 +309,7 @@ let getRecommendList = () => {
        loadMore.value = true
      } else {
        loadMore.value = false
-        loadText.value='到底了'
+        loadText.value = '到底了'
      }
    }
  })
@@ -327,7 +331,7 @@ let listDataTypeChange = (item) => {

 //监听滚动条
 const onPageSrcoll = (e) => {
-  if (!loadMore.value||waterfallList['4'].length===0) return
+  if (!loadMore.value || waterfallList['4'].length === 0) return
  let body = document.documentElement ? document.documentElement : document.body ?
    document.body :
    document.querySelector('.element');
@@ -351,6 +355,16 @@ let indexWaterfallBoxCheck = (res) => {
  })
 }

+//跳转个人房源
+let personHouseingInfo = (type, data) => {
+  router.push({
+    path: '/personHousing',
+    query: {
+      [type]: data
+    },
+  })
+}
+
 onMounted(() => {
  document.documentElement.scrollTop = 0
  currentInstance = getCurrentInstance()
@@ -413,7 +427,7 @@ img {
  font-size: 14px;
  color: #555555;
  text-align: center;
-  padding:30px 0;
+  padding: 30px 0;
 }

 .information-box {
@@ -688,5 +702,4 @@ img {
  font-size: 16px;
  color: #7F7F7F;
  text-align: left;
-}
-</style>
+}</style>
--- a/src/views/detail.vue
+++ b/src/views/detail.vue
@@ -8,4 +8,6 @@ const route = useRoute()
 const uniqid = route.query.uniqid
 </script>

-<style lang="less" scoped></style>
+<style lang="less" scoped>
+
+</style>
--- a/src/views/housingView/intermediary.vue
+++ b/src/views/housingView/intermediary.vue
@@ -62,6 +62,8 @@ let setInitial = () => {

 //获取搜索数据
 let getDataList = (data) => {
+    if(!loading.value)return
+    loading.value = false
    let postData = {
        page: pages.value,
        intermediary:1,
@@ -94,7 +96,10 @@ let getDataList = (data) => {
 //添加数据
 let addListData = () => {
    let num = null
-    if (pageList.tab >= 18) return
+    if (pageList.tab >= 18){
+        loading.value = true
+        return
+    } 
    pageList.tab++
    if (pageList.height1 > pageList.height2) {
        num = 2
@@ -113,7 +118,7 @@ let watchImgLoad = (id, listId, height) => {
 //加载更多
 let downLoadMore = () => {
    tool.loadMore(() => {
-        if (!loading.value) return
+        if (!loading.value||dataList.data.length===0) return
        pages.value++
        getDataList(seachSelectData.data)
    })
--- a/src/views/housingView/needHousing.vue
+++ b/src/views/housingView/needHousing.vue
@@ -68,6 +68,8 @@ let setInitial = () => {

 //获取搜索数据
 let getDataList = (data) => {
+    if(!loading.value)return
+    loading.value = false
    let postData = {
        page: pages.value,
        intermediary:0,
@@ -100,7 +102,10 @@ let getDataList = (data) => {
 //添加数据
 let addListData = () => {
    let num = null
-    if (pageList.tab >= 18) return
+    if (pageList.tab >= 18){
+        loading.value = true
+        return
+    } 
    pageList.tab++
    if (pageList.height1 > pageList.height2) {
        num = 2
@@ -119,7 +124,7 @@ let watchImgLoad = (id, listId, height) => {
 //加载更多
 let downLoadMore = () => {
    tool.loadMore(() => {
-        if (!loading.value) return
+        if (!loading.value||dataList.data.length===0) return
        pages.value++
        getDataList(seachSelectData.data)
    })
--- a/src/views/housingView/person.vue
+++ b/src/views/housingView/person.vue
@@ -32,6 +32,11 @@ 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'
+import { useRouter } from 'vue-router'
+
+//路由
+const router = useRouter()
+

 //获取数据
 let pages = ref(1)
@@ -39,7 +44,7 @@ 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)
+let loading = ref(true)
 provide('count', dataCount)

 //保存搜索设置
@@ -63,6 +68,8 @@ let setInitial = () => {

 //获取搜索数据
 let getDataList = (data) => {
+    if(!loading.value)return
+    loading.value = false
    let postData = {
        page: pages.value,
        intermediary:0,
@@ -70,7 +77,6 @@ let getDataList = (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
@@ -95,7 +101,10 @@ let getDataList = (data) => {
 //添加数据
 let addListData = () => {
    let num = null
-    if (pageList.tab >= 18) return
+    if (pageList.tab >= 18){
+        loading.value = true
+        return
+    } 
    pageList.tab++
    if (pageList.height1 > pageList.height2) {
        num = 2
@@ -114,7 +123,8 @@ let watchImgLoad = (id, listId, height) => {
 //加载更多
 let downLoadMore = () => {
    tool.loadMore(() => {
-        if (!loading.value) return
+
+        if (!loading.value||dataList.data.length==0) return
        pages.value++
        getDataList(seachSelectData.data)
    })
@@ -122,7 +132,12 @@ let downLoadMore = () => {

 //listImg
 onMounted(() => {
-    getDataList()
+    console.log(router.params)
+    console.log(router.currentRoute.value.query)
+    if(Object.keys(router.currentRoute.value.query).length>0){
+        seachSelectData.data={...router.currentRoute.value.query}
+    }
+    getDataList(seachSelectData.data)
    window.addEventListener('scroll', downLoadMore, true);
 })

--- a/src/views/seachIndex.vue
+++ b/src/views/seachIndex.vue
@@ -127,7 +127,10 @@ let getDataList = (data) => {
 //添加数据
 let addListData = () => {
    let num = null
-    if (pageList.tab >= 18) return
+    if (pageList.tab >= 18){
+        loading.value = true
+        return
+    } 
    pageList.tab++
    if (pageList.height1 > pageList.height2) {
        num = 2
@@ -146,7 +149,7 @@ let watchImgLoad = (id, listId, height) => {
 //加载更多
 let downLoadMore = () => {
    tool.loadMore(() => {
-        if (!loading.value) return
+        if (!loading.value||dataList.data.length==0) return
        pages.value++
        getDataList(seachSelectData.data)
    })