PC租房全局化-还没

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 {