重写筛选组件

src/components/seachModule/seachModule.vue

@@ -153,7 +153,6 @@ onMounted(() => {
     // seachAllType = {...seachAllType, ...pitchValue}
 })
 
-
 //获取区域下列数据
 let getLocationData = data => {
     for (let item in data) {
@@ -212,13 +211,15 @@ let setLocation = (type, data, isupdate = true) => {
 
 //设置搜索数据  type: 类型  data: 数据  second: 二级数据
 let setSeachConditions = (type, data, second = null) => {
-    console.log("赋值前的数据：",seachAllType);
+    console.log("赋值前的数据：", seachAllType)
     if (type === "rent") {
         seachAllType["rent_min"] = data.min
         seachAllType["rent_max"] = data.max
-    } else if (type !== "") {  // 这里是正常的数据 直接赋值
+    } else if (type !== "") {
+        // 这里是正常的数据 直接赋值
         seachAllType[type] = data
-    } else if (type === "") { // 电梯 阳台 认证 那些是传数组的
+    } else if (type === "") {
+        // 电梯 阳台 认证 那些是传数组的
         data.indexOf("isintermediary") !== -1 ? (seachAllType["isintermediary"] = 1) : (seachAllType["isintermediary"] = 0)
         data.indexOf("isverified") !== -1 ? (seachAllType["isverified"] = 1) : (seachAllType["isverified"] = 0)
         data.indexOf("iselevator") !== -1 ? (seachAllType["iselevator"] = 1) : (seachAllType["iselevator"] = 0)
@@ -231,8 +232,8 @@ let setSeachConditions = (type, data, second = null) => {
     if (second) {
         seachAllType[second.type] = second.id
     }
-    console.log(type, data, second);
-    console.log("保存前的处理数据：", seachAllType);
+    console.log(type, data, second)
+    console.log("保存前的处理数据：", seachAllType)
 
     getDataList(seachAllType)
 }

src/main.js

@@ -1,51 +1,49 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
+import { createApp } from "vue"
+import App from "./App.vue"
+import router from "./router"
+import store from "./store"
 // import ElementPlus from 'element-plus'
 // import { ElButton, ElInput } from 'element-plus'
 
 import {
-  ElButton,
-  ElInput,
-  ElSelect,
-  ElOption,
-  ElLoading,
-  ElCheckbox,
-  ElCheckboxGroup,
-  ElCarousel,
-  ElCarouselItem,
-  ElBadge,
-  ElDropdown,
-  ElPopover,
-  ElDatePicker,
-  ElMessage,
-  ElSkeleton,
-  ElSkeletonItem,
-  ElBreadcrumb,
-  ElAffix,
-  ElConfigProvider,
-  ElProgress,
-  ElScrollbar
-  // 其他需要的组件
-} from 'element-plus'
+    ElButton,
+    ElInput,
+    ElSelect,
+    ElOption,
+    ElLoading,
+    ElCheckbox,
+    ElCheckboxGroup,
+    ElCarousel,
+    ElCarouselItem,
+    ElBadge,
+    ElDropdown,
+    ElPopover,
+    ElDatePicker,
+    ElMessage,
+    ElSkeleton,
+    ElSkeletonItem,
+    ElBreadcrumb,
+    ElAffix,
+    ElConfigProvider,
+    ElProgress,
+    ElScrollbar,
+    // 其他需要的组件
+} from "element-plus"
 
-import 'element-plus/theme-chalk/index.css'
-import 'element-plus/dist/index.css'
-import 'element-plus/theme-chalk/index.css'
-import locale from 'element-plus/lib/locale/lang/zh-cn';
+import "element-plus/theme-chalk/index.css"
+import "element-plus/dist/index.css"
+import "element-plus/theme-chalk/index.css"
+import locale from "element-plus/lib/locale/lang/zh-cn"
 
-import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
-
-import lazyPlugin from 'vue3-lazyload'
+import zhCn from "element-plus/dist/locale/zh-cn.mjs"
 
+import lazyPlugin from "vue3-lazyload"
 
 // import zhCn from 'element-plus/lib/locale/lang/zh-cn'
-import api from "./utils/api";
+import api from "./utils/api"
 
 //引入封装Axios请求
-import Axios from '@/utils/axios';
-
+import Axios from "@/utils/axios"
 
 const app = createApp(App)
 
@@ -62,7 +60,7 @@ app.use(ElBadge)
 app.use(ElDropdown)
 app.use(ElPopover)
 app.use(ElDatePicker, {
-  locale: zhCn
+    locale: zhCn,
 })
 app.use(ElSkeleton)
 app.use(ElSkeletonItem)
@@ -78,16 +76,46 @@ app.use(lazyPlugin)
 
 app.use(store).use(router).use(Axios)
 
-api.index().then(res => {
-  store.state.seachTypeData = res.data.combination
-  store.state.indexData = res.data
-  store.state.ListSelectBtn = res.data.recommendedTab
-  store.state.user = res.data.user
-  store.state.nav = res.data.nav
-  store.state.wechat = res.data.wechat
-  store.state.apartment = res.data.config.apartment
-  store.state.schoolList = res.data.schoolList
-  store.state.advData = res.data.adv
-}).finally(() => {
-  app.mount('#app')
-})
+api.index()
+    .then(res => {
+        store.state.seachTypeData = res.data.combination
+        store.state.indexData = res.data
+        store.state.ListSelectBtn = res.data.recommendedTab
+        store.state.user = res.data.user
+        store.state.nav = res.data.nav
+        store.state.wechat = res.data.wechat
+        store.state.apartment = res.data.config.apartment
+        store.state.schoolList = res.data.schoolList
+        store.state.advData = res.data.adv
+        store.state.typeKey = res.data.config.type
+
+        // 将 location 转换为对象 好用于级联选择器
+        const location = res.data.config.location || {}
+        const type = res.data.config.type || {}
+
+        store.state.locationObj = optimalValue(location)
+        store.state.typeObj = optimalValue(type)
+    })
+    .finally(() => {
+        app.mount("#app")
+    })
+
+// 优化值
+const optimalValue = data => {
+    let obj = {}
+    for (const key in data) {
+        const [parentKey, childKey] = key.split(".")
+
+        if (!childKey) {
+            obj[parentKey] = {
+                name: data[key],
+                children: {},
+            }
+        } else {
+            if (!obj[parentKey].children) obj[parentKey].children = {}
+            obj[parentKey].children[key] = data[key]
+        }
+    }
+
+    return obj || {}
+}

src/store/index.js

@@ -27,6 +27,7 @@ export default createStore({
     apartmentPitchValue: {}, // 公寓筛选的值 全局化
     needPitchValue: {}, // 求房源筛选的值 全局化
     personPitchValue: {}, // 个人筛选的值 全局化
+    locationObj: {}, // 地区数据
   },
   getters: {
 

src/views/housingView/needHousing.vue

@@ -23,7 +23,7 @@
 <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 seachModule from "../../components/seachModule/seachModule1.vue"
 import biserialItem from "../../components/biserialListItem/biserialListItem.vue"
 import listBtmPrompt from "../../components/public/have-questions.vue"
 import noList from "../../components/public/empty-duck.vue"

src/views/housingView/person.vue

@@ -36,6 +36,7 @@ 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"
 
 //路由
 const router = useRouter()