首页骨架 css样式

src/components/seachModule/seachModule.vue

@@ -73,7 +73,8 @@
                             v-if="allHireType.data.length"></seachInfo>
                     </div>
                     <!--  -->
-                    <div v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing'||routePath === '/needHousing'">
+                    <div
+                        v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing' || routePath === '/needHousing'">
                         <selectTabBox></selectTabBox>
                     </div>
                 </div>
@@ -83,11 +84,12 @@
 </template>
   
 <script setup>
-import { ref, watchEffect, reactive, watch } from 'vue';
+import { ref, watchEffect, reactive, beforeMount } from 'vue';
 import seachInfo from '../indexSeachInfo/indexSeachInfo.vue';
 import selectTabBox from "../selectTabBox/selectTabBox.vue";
 import { useRoute } from 'vue-router';
 import store from '../../store/index';
+import api from "../../utils/api";
 
 
 //搜索框
@@ -103,6 +105,25 @@ let seachArea = {};//区域找房
 let historyArr = reactive({ data: [] })//历史查找记录
 let hotArr = reactive({ data: [] })
 
+//获取区域下列数据
+let getLocationData = () => {
+    console.log(seachArea.data)
+    api.getLocationData().then(res => {
+        console.log(res)
+        if (res.code === 200) {
+            for (let item in res.data) {
+                if (!seachArea.data[item.substring(0, 1) - 1].data) seachArea.data[item.substring(0, 1) - 1].data = []
+                if (item.length > 1) {
+                    seachArea.data[item.substring(0, 1) - 1].data.push({
+                        title: res.data[item],
+                        id: item
+                    })
+                }
+            }
+        }
+    })
+}
+
 //监听路由
 const route = useRoute()
 let routePath = ref('')
@@ -113,6 +134,7 @@ watchEffect(() => {
     hireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[0].data : []
     allHireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[1].data : []
     seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
+    if (seachArea.data.length > 0&&!seachArea.data[0].data) getLocationData()
     hotArr.data = store.state.indexData.hotSearcheWords
 })
 
@@ -125,6 +147,7 @@ let seachList = () => {
     localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
 }
 
+
 defineExpose({
     historyShow,
     seachValue