PC租房全局化-还没

2024-03-19 19:20:26 +08:00
parent be52dede90
commit 7e5d459302
8 changed files with 212 additions and 154 deletions
--- a/src/views/housingView/apartment.vue
+++ b/src/views/housingView/apartment.vue
@@ -2,7 +2,7 @@
    <pageTopBar :bannerList="bannerList.data.apartment"></pageTopBar>
    <!-- 筛选 -->
    <div class="screen-box wid1200">
-        <seach-module @handleTransfer="handleTransfer" :count="listCount"></seach-module>
+        <seach-module @handleTransfer="handleTransfer" :count="listCount" :initPitchValue="pitchValue"></seach-module>
    </div>

    <div class="list wid1200 flexflex" ref="gridContainer">
@@ -25,33 +25,31 @@
    <circle-btn></circle-btn>
    <back-to-top></back-to-top>
 </template>
-  
-<script setup>
-import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
-import seachModule from "@/components/apartment/seachModule.vue";
-import apartmentItem from '@/components/public/apartment-item.vue';
-import haveQuestions from '@/components/public/have-questions.vue'
-import pageFooter from '@/components/footer/footer.vue'
-import emptyDuck from '@/components/public/empty-duck.vue'
-import circleBtn from '@/components/public/circle-btn.vue'
-import { ref, onMounted, onUnmounted, watch, getCurrentInstance, nextTick,reactive } from 'vue';
-import { ElLoading } from 'element-plus'
-import Masonry from 'masonry-layout';
-import { useRoute, useRouter } from 'vue-router';
-import backToTop from '@/components/public/backToTop.vue'

+<script setup>
+import pageTopBar from "../../components/pageTopBar/pageTopBar.vue"
+import seachModule from "@/components/apartment/seachModule.vue"
+import apartmentItem from "@/components/public/apartment-item.vue"
+import haveQuestions from "@/components/public/have-questions.vue"
+import pageFooter from "@/components/footer/footer.vue"
+import emptyDuck from "@/components/public/empty-duck.vue"
+import circleBtn from "@/components/public/circle-btn.vue"
+import { ref, onMounted, onUnmounted, watch, getCurrentInstance, nextTick, reactive } from "vue"
+import { ElLoading } from "element-plus"
+import Masonry from "masonry-layout"
+import { useRoute, useRouter } from "vue-router"
+import backToTop from "@/components/public/backToTop.vue"
+import store from "../../store/index"

 const { proxy } = getCurrentInstance()

 const route = useRoute()

-
 const props = defineProps({
    item: Object,
-});
-
-const gridContainer = ref(null);
+})

+const gridContainer = ref(null)

 let list = ref([])
 let listCount = ref(0) // 列表数量
@@ -59,21 +57,24 @@ let listCount = ref(0) // 列表数量
 let masonryInstance = null

 onMounted(() => {
+    // 初始化瀑布流
    masonryInstance = new Masonry(gridContainer.value, {
-        itemSelector: '.item',
-        gutter: 20
-    });
+        itemSelector: ".item",
+        gutter: 20,
+    })

-    if (route.query['companyid']) pitchValue['companyid'] = route.query['companyid']
-    banner()
-    getData()
+    pitchValue.value = store.state.apartmentPitchValue
+    if (route.query["companyid"]) pitchValue.value["companyid"] = route.query["companyid"]

-    window.addEventListener('scroll', handleScroll);
-});
+    banner()  // 获取轮播图数据
+    getData()  // 获取列表数据
+
+    window.addEventListener("scroll", handleScroll)
+})

 onUnmounted(() => {
-    window.removeEventListener('scroll', handleScroll);
-});
+    window.removeEventListener("scroll", handleScroll)
+})

 let loading = null // 加载
 let requestLoading = false // 接口加载中
@@ -82,58 +83,60 @@ const getData = () => {
    if (page == 0 || requestLoading) return
    loading = ElLoading.service({
        lock: true,
-        text: 'Loading',
-        background: 'rgba(0, 0, 0, 0.7)',
+        text: "Loading",
+        background: "rgba(0, 0, 0, 0.7)",
    })
    requestLoading = true

-    proxy.$get("/tenement/pc/api/apartment", {
-        limit: 10,
-        page,
-        ...pitchValue
-    }).then(res => {
-        if (res.code != 200) return
-        let data = res.data
-        list.value = list.value.concat(data.data || [])
-        page = data.page * data.limit >= data.count ? 0 : page + 1
+    proxy
+        .$get("/tenement/pc/api/apartment", {
+            limit: 10,
+            page,
+            ...pitchValue.value,
+        })
+        .then(res => {
+            if (res.code != 200) return
+            let data = res.data
+            list.value = list.value.concat(data.data || [])
+            page = data.page * data.limit >= data.count ? 0 : page + 1

-        listCount = data.count
-        nextTick(() => {
-            masonryInstance.reloadItems();
-            masonryInstance.layout();
+            listCount = data.count
+            nextTick(() => {
+                masonryInstance.reloadItems()
+                masonryInstance.layout()
+                loading.close()
+                requestLoading = false
+            })
+        })
+        .catch(err => {
            loading.close()
            requestLoading = false
        })
-
-    }).catch(err => {
-        loading.close()
-        requestLoading = false
-    })
-
 }

 const handleScroll = () => {
-    const scrollHeight = document.documentElement.scrollHeight;
-    const clientHeight = document.documentElement.clientHeight;
-    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+    const scrollHeight = document.documentElement.scrollHeight
+    const clientHeight = document.documentElement.clientHeight
+    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    if (scrollTop + clientHeight >= scrollHeight - 350) getData()
-};
+}

-let pitchValue = {
+let pitchValue = ref({
    companyid: 0,
    roomtype: 0,
-    rent_min: null,  // 租金
-    rent_max: null,  // 租金
+    rent_min: null, // 租金
+    rent_max: null, // 租金
    school: 0,
    roomlistings: 0,
    keyword: "",
-}
+})

 // 筛选组件的参数的中转
-const handleTransfer = (data) => {
+const handleTransfer = data => {
    for (const key in data.value) {
-        if (data.value[key] != pitchValue[key]) {
-            pitchValue = { ...data.value }
+        if (data.value[key] != pitchValue.value[key]) {
+            pitchValue.value = { ...data.value }
+            store.state.apartmentPitchValue = pitchValue.value
            page = 1
            list.value = []
            getData()
@@ -146,12 +149,9 @@ const handleTransfer = (data) => {
 let bannerList = reactive({ data: [] })
 let banner = () => {
    proxy.$get("/tenement/pc/api/banner").then(res => {
-    if (res.code === 200) {
-      bannerList.data = res.data
-    }
-  })
+        if (res.code === 200) bannerList.data = res.data
+    })
 }
-
 </script>
 <style lang="less" scoped>
 .screen-box {
--- a/src/views/housingView/needHousing.vue
+++ b/src/views/housingView/needHousing.vue
@@ -3,7 +3,7 @@
        <pageTopBar></pageTopBar>
        <seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
        <div class="dis-f jus-x al-item">
-            <div class="body-maxWidth mg-t-35" >
+            <div class="body-maxWidth mg-t-35">
                <div v-show="dataList.data && dataList.data.length > 0" ref="list">
                    <biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
                </div>
@@ -18,25 +18,24 @@
    </div>

    <back-to-top></back-to-top>
-
 </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 circleBtn from '@/components/public/circle-btn.vue'
-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'
-import backToTop from '@/components/public/backToTop.vue'
-import Masonry from 'masonry-layout';

+<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 circleBtn from "@/components/public/circle-btn.vue"
+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"
+import backToTop from "@/components/public/backToTop.vue"
+import Masonry from "masonry-layout"
+import store from "../../store/index"

 //瀑布实例
 let listMasonryInstance = null
@@ -47,37 +46,41 @@ let dataCount = ref(0)
 let pageList = ref([])
 let seachSelectData = reactive({ data: {} })
 let loading = ref(true)
-let loadingText=ref(' 下拉加载更多 ')
-provide('count', dataCount)
+let loadingText = ref(" 下拉加载更多 ")
+provide("count", dataCount)

 //保存搜索设置
-let setSeachSelectData = (data) => {
+let setSeachSelectData = data => {
+    console.log("保存数据的：", data);
+    store.state.needPitchValue = data
    pages.value = 1
    seachSelectData.data = {
-        ...data
+        // ...needPitchValue,
+        ...data,
    }
    loading.value = true
    getDataList(seachSelectData.data)
 }

 //获取搜索数据
-let getDataList = (data) => {
-    loadingText.value=' 加载中..... '
-    if(!loading.value)return
+let getDataList = data => {
+    loadingText.value = " 加载中..... "
+    if (!loading.value) return
    loading.value = false
    let postData = {
        page: pages.value,
        intermediary: 6,
-        limit:20,
-        ...data
+        limit: 20,
+        ...data,
    }
+
    api.getLists(postData).then(res => {
        if (res.code === 200) {
            dataList.data = res.data.data
-            if(res.data.data.length<20){
-                loadingText.value=' 到底了 '
-            }else{
-                loadingText.value=' 下拉加载更多 '
+            if (res.data.data.length < 20) {
+                loadingText.value = " 到底了 "
+            } else {
+                loadingText.value = " 下拉加载更多 "
            }
            if (pages.value === 1) {
                pageList.value = []
@@ -87,8 +90,8 @@ let getDataList = (data) => {
            dataList.count = res.data.count
            dataCount.value = res.data.count
            nextTick(() => {
-                listMasonryInstance.reloadItems();
-                listMasonryInstance.layout();
+                listMasonryInstance.reloadItems()
+                listMasonryInstance.layout()
                if (dataList.data.length >= 20) loading.value = true
            })
        } else {
@@ -109,22 +112,26 @@ let downLoadMore = () => {
    })
 }

-let list = ref('')
+let list = ref("")

 //listImg
+
+const needPitchValue = store.state.needPitchValue
+
+provide("pitchValue", needPitchValue)
+
 onMounted(() => {
    listMasonryInstance = new Masonry(list.value, {
-        itemSelector: '.item',
-        gutter: 20
-    });
-    getDataList()
-    window.addEventListener('scroll', downLoadMore, true);
+        itemSelector: ".item",
+        gutter: 20,
+    })
+    getDataList({...needPitchValue})
+    window.addEventListener("scroll", downLoadMore, true)
 })

 onBeforeUnmount(() => {
-    window.removeEventListener('scroll', downLoadMore, true);
+    window.removeEventListener("scroll", downLoadMore, true)
 })
-
 </script>
 <style scoped lang="less">
 img {
@@ -175,4 +182,3 @@ img {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
 }
 </style>
-  
--- a/src/views/housingView/person.vue
+++ b/src/views/housingView/person.vue
@@ -55,6 +55,7 @@ provide('count', dataCount)

 //保存搜索设置
 let setSeachSelectData = (data) => {
+    store.state.personPitchValue = data
    pages.value = 1
    seachSelectData.data = {
        ...data