选房页面

src/components/AMap.vue

@@ -20,6 +20,11 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  //   地图中心点
+  mapCenter: {
+    type: Array,
+    default: () => [],
+  },
 });
 
 const mapContainer = ref(null);
@@ -36,7 +41,7 @@ const clearMarkers = () => {
 };
 
 // 添加点位
-const emit = defineEmits(['marker-click']) // 添加事件发射器
+const emit = defineEmits(["marker-click"]); // 添加事件发射器
 
 const addMarkers = () => {
   clearMarkers();
@@ -69,7 +74,7 @@ const addMarkers = () => {
           margin-left: 4px;
           box-sizing: border-box;
           font-weight: bold;
-        ">${marker.total || ''}间</span>
+        ">${marker.total || ""}间</span>
       </div>
     `;
 
@@ -78,16 +83,16 @@ const addMarkers = () => {
       content: content,
       offset: new AMap.Pixel(-15, -15),
     });
-    
+
     // 添加点击事件
-    amarker.on('click', () => {
+    amarker.on("click", () => {
-      emit('marker-click', { 
+      emit("marker-click", {
-        marker, 
+        marker,
         index,
-        position: [marker.longitude, marker.latitude] 
+        position: [marker.longitude, marker.latitude],
-      })
+      });
       map.setCenter([marker.longitude, marker.latitude]);
-      map.setZoom(12);
+      map.setZoom(15);
     });
     markers.push(amarker);
     map.add(amarker);
@@ -123,6 +128,10 @@ onMounted(async () => {
       },
       { deep: true }
     );
+    watch(()=>props.mapCenter,(newVal,oldVal)=>{
+        map.setCenter(newVal)
+    },
+    {deep:true})
   } catch (error) {
     console.error("地图加载失败:", error);
   }

src/router/index.ts

@@ -34,6 +34,11 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('@/view/showings/index.vue'),
         meta: { title: 'showings' },
       },
+      {
+        path: 'HouseDetail',
+        component: () => import('@/view/showings/houseDetail.vue'),
+        meta: { title: 'showings' },
+      },
       {
         path: 'contact',
         component: () => import('@/view/contact/index.vue'),

src/style.css

@@ -29,3 +29,20 @@
 .arco-theme-color-text-1 {
   background-color: #f2f7ff;
 }
+/* 全局滚动条样式 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}

src/view/showings/components/Agency.vue

@@ -7,7 +7,7 @@
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item
-            @click="handleCity(item.deptId, item.deptName)"
+            @click="handleCity(item.deptId, true)"
             v-for="(item, index) in cityList"
             :label="item.deptName"
             :value="item.deptId"
@@ -29,7 +29,7 @@
             :label="item.deptName"
             :value="item.deptId"
             :key="index"
-            @click="handleApartment(item.deptId, item.deptName)"
+            @click="handleApartment(item.deptId, true)"
             >{{ item.deptName }}</el-dropdown-item
           >
         </el-dropdown-menu>
@@ -47,7 +47,7 @@
             :label="item.typeName"
             :value="item.id"
             :key="index"
-            @click="handleHouseType(item.id, item.typeName)"
+            @click="handleHouseType(item.id, true)"
             >{{ item.typeName }}</el-dropdown-item
           >
         </el-dropdown-menu>
@@ -56,14 +56,14 @@
   </div>
 </template>
 <script setup>
-import { ref, reactive, onMounted, onUnmounted } from "vue";
+import { ref, reactive, onMounted, onUnmounted ,watch} from "vue";
 import { getAgencyList, getHouseTypeList } from "@/api/index";
 const emit = defineEmits(["changeAngecy"]);
 const props = defineProps({
-  deptName: {
+    selfMarkers: {
     // 部门名称
-    type: String, // 类型为字符串
+    type: Object, 
-    default: "",
+    default:()=>{},
   },
 });
 const list = ref([]); // 定义列表数据
@@ -103,28 +103,35 @@ const getDropdownList = async (type) => {
     console.error("获取数据失败:", err); // 处理错误
   }
 };
-const handleCity = (id, name) => {
+const handleCity = async (id, refresh) => {
   deptId.value = id;
-  cityName.value = name;
+  cityName.value = cityList.value.find((item) => item.deptId === id)?.deptName;
   apartmentList.value = []; // 清空 apartmentList
   roomTypeList.value = []; // 清空 roomTypeList
   apartmentName.value = "请选择"; // 清空 apartmentName
   houseTypeName.value = "请选择"; // 清空 apartmentName
-  emit("changeAngecy", { id, type: "city" });
+  if(refresh){
-  getDropdownList("apartment");
+    emit("changeAngecy", { id, type: "city" });
+  }
+ await getDropdownList("apartment");
 };
-const handleApartment = (id, name) => {
+const handleApartment = async (id, refresh) => {
   roomTypeList.value = []; // 清空 roomTypeList
-  apartmentName.value = name;
+  const item = apartmentList.value.find((item) => item.deptId === id)
+  apartmentName.value = item.deptName;
   deptId.value = id;
   houseTypeName.value = "请选择"; // 清空 apartmentName
-  emit("changeAngecy", { id, type: "apartment" });
+  if(refresh){
-  getHouseType(id);
+    emit("changeAngecy", { id, type: "apartment",item });
+  }
+  await getHouseType(id);
 };
-const handleHouseType = (id, name) => {
+const handleHouseType = (id, refresh) => {
-  houseTypeName.value = name;
+  houseTypeName.value = roomTypeList.value.find((item) => item.id === id)?.typeName;;
   deptId.value = id;
-  emit("changeAngecy", { id, type: "houseType" });
+  if(refresh){
+    emit("changeAngecy", { id, type: "houseType" });
+  }
 };
 const getHouseType = async (id) => {
   try {
@@ -137,5 +144,13 @@ const getHouseType = async (id) => {
 onMounted(() => {
   // 组件挂载时获取数据
   getQIngDaoId(); // 调用获取数据函数
+  watch(
+      ()  => props.selfMarkers,
+     async (newVal,oldVal)  =>  {
+       await handleCity(newVal.deptId);
+       await handleApartment(newVal.apartmentId)
+      },
+      { deep: true }
+    );
 });
 </script>

src/view/showings/components/HouseList.vue

@@ -3,7 +3,7 @@
     <div>选择房型</div>
     <el-divider />
     <div class="flex flex-col">
-      <div class="flex gap-5" v-for="(item, index) in list" :key="index">
+      <div class="flex gap-5" v-for="(item, index) in list" :key="index" @click="toHouseDetail(item)">
         <img :src="item.coverImg" alt="" class="w-[140px] h-[100px]" />
         <div class="flex-1 flex flex-col">
           <div class="font-bold">{{ item.name }}</div>
@@ -27,6 +27,8 @@
 <script setup>
 import { ref, reactive, onMounted, onUnmounted, watch } from "vue";
 import { getHouseTypeMap, getDict } from "@/api/index";
+import { useRouter } from 'vue-router'
+const router = useRouter()
 const props = defineProps({
   selfObj: {
     type: Object,
@@ -51,14 +53,21 @@ const getDictList = async () => {
   } catch (error) {}
 };
 const getList = async () => {
-  const res = await getHouseTypeMap(joinIn);
+  try {
-  list.value = res.rows;
+    const res = await getHouseTypeMap(joinIn);
+    list.value = res.rows;
+  } catch (err) {
+    list.value = []
+  }
 };
 
 getDictList();
 watch(
   () => props.selfObj,
   (newVal, oldVal) => {
+    joinIn.regionCode='';
+    joinIn.apartmentId = '';
+    joinIn.houseTypeId = ''
     if (newVal.type === "city") {
       joinIn.regionCode = newVal.id;
     } else if (newVal.type === "apartment") {
@@ -66,7 +75,6 @@ watch(
     } else if (newVal.type === "houseType") {
       joinIn.houseTypeId = newVal.id;
     }
-
     getList();
   },
   { deep: true }
@@ -79,6 +87,10 @@ const getLabel = (tag) => {
     : Object.values(dict.value);
   return dictArray.find((item) => item.dictValue === tag)?.dictLabel || tag;
 };
+const toHouseDetail = (e)=>{
+    console.log(e);
+    router.push({path:'/layout/houseDetail',query:{deptId:e.apartmentId,id:e.houseTypeId}})
+}
 </script>
 <style scoped>
 .bule{

src/view/showings/houseDetail.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    class="w-full min-h-screen pt-16 pb-7 bg-gradient-to-b from-[#1974ff] to-[#f8faff] to-50%"
+  >
+    <div
+      class="w-[1310px] mx-auto mt-60px bg-white pb-9 px-6 pt-6 rounded relative"
+    >
+    <div class="title">
+        房型详情
+    </div>
+    <div class="flex">
+
+    </div>
+    <!-- 返回 -->
+      <div class="text-white flex items-center mb-2 absolute -top-14 absolute">
+        <span class="cursor-pointer text-xl">看房选房</span
+        ><span class="text-2xl">>房型详情</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+import { getHouseDetail,getDict,getDeptInfo } from "@/api/index";
+const route = useRoute();
+const router = useRouter();
+const deptId = route.query.deptId;
+const houseId = route.query.id;
+const houseDetail = ref({}); // 存储房屋详情数据
+const dictList = ref([]); // 存储字典数据
+const deptInfo = ref({}); // 存储部门信息数据
+
+</script>

src/view/showings/index.vue

@@ -1,28 +1,45 @@
 <template>
-  <div class="bg-syGreyBg overflow-hidden">
+  <div class="bg-syGreyBg overflow-hidden h-full w-full">
     <div class="bg-white absolute top-20 left-24 z-20 py-4 px-6 rounded-md">
-      <Agency :deptName="deptName" @changeAngecy="changeAngecy" />
+      <Agency :selfMarkers="selfMarkers" @changeAngecy="changeAngecy" />
     </div>
-    <Amap :markers="markers" @marker-click="handleMarkerClick" />
+    <Amap
-    <div class="bg-white absolute bottom-32 right-24 z-20 py-4 px-6 rounded-md">
+      :markers="markers"
+      @marker-click="handleMarkerClick"
+      :mapCenter="mapCenter"
+    />
+    <div 
+      class="bg-white absolute bottom-24 right-0 z-20 py-4 px-6 rounded-md transition-all duration-300 ease-in-out"
+      :class="{'translate-x-full': !isPanelOpen, 'right-24': isPanelOpen}"
+    >
+      <button 
+        class="absolute left-0 top-1/2 -translate-x-full -translate-y-1/2 bg-white p-2 rounded-xl shadow-md"
+        @click="isPanelOpen = !isPanelOpen"
+      >
+        {{ isPanelOpen ? '>' : '<' }}
+      </button>
       <HouseList :selfObj="selfObj" />
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, reactive, onMounted, onUnmounted } from "vue";
+import { ref } from "vue";
 import Amap from "@/components/AMap.vue";
 import Agency from "./components/Agency.vue";
 import HouseList from "./components/HouseList.vue";
 import { getMapPoint } from "@/api/index";
-const deptName = ref("");
 let selfObj = ref({});
+const selfMarkers = ref({}); // 定义一个响应式变量来存储当前选中的markers
 // 定义标记点数据
 const markers = ref([]);
-const deptId = ref("");
+const mapCenter = ref([]); // 定义一个响应式变量来存储当前选中的markers
+const isPanelOpen = ref(true); 
 const handleMarkerClick = (event) => {
-  console.log("点击了标记点:", event);
+  selfMarkers.value = {
-  selfObj.value = { type: "apartment", id: event.marker.id };
+    apartmentId: event.marker.apartmentId,
+    deptId: event.marker.parentId,
+  };
+  selfObj.value = { type: 'apartment', id: event.marker.apartmentId };
   // 先将所有点位恢复默认颜色
   markers.value = markers.value.map((marker) => ({
     ...marker,
@@ -38,29 +55,44 @@ const getMarkers = async (event) => {
     let pamrs = {
       pageSize: 200,
       pageNum: 1,
-      regionCode: '', // 区域
+      regionCode: "", // 区域
       apartmentId: "", // 公寓
       houseTypeId: "", // 户型
     };
-
     if (event) {
       if (event.type === "city") {
         pamrs.regionCode = event.id;
       } else if (event.type === "apartment") {
         pamrs.apartmentId = event.id;
       } else if (event.type === "houseType") {
-        pamrs.houseTypeId = event.id;
+        return;
       }
     }
     const res = await getMapPoint(pamrs);
-    markers.value = res.rows;
+    const processedRows = res.rows.map((item) => {
-    console.log(markers, "seeeee");
+      const newItem = { ...item }; // 创建新对象避免修改原数据
+      if (event?.item) {
+        if (
+          item.dept === event.item.dept &&
+          item.parentId === event.item.parentId
+        ) {
+          newItem.color = "#ff9f00"; // 高亮当前点位
+        } else {
+          newItem.color = "#ff9f00"; // 默认颜色
+        }
+      }
+      return newItem;
+    });
+    markers.value = processedRows;
   } catch (error) {
     console.log(error);
   }
 };
 const changeAngecy = (event) => {
   selfObj.value = { type: event.type, id: event.id };
+  if (event.item) {
+    mapCenter.value = [event.item.longtitude, event.item.latitude];
+  }
   getMarkers(event);
 };
 getMarkers();