房间类型（未完）

src/view/showings/houseDetail.vue

@@ -1,33 +1,220 @@
 <template>
-  <div
+  <div class="w-full min-h-screen pt-16 pb-7 bg-gradient-to-b from-[#1974ff] to-[#f8faff] to-50%">
-    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="w-[1310px] mx-auto mt-60px bg-white pb-9 px-6 pt-6 rounded relative"
-    >
       <div class="title ">
-        房型详情
+        <h3 class="font-bold text-2xl">房型详情</h3>
+      </div>
+      <div class="flex w-full pt-2 justify-between divide-x divide-white-100 divide-dashed">
+        <div class="w-1/2 pr-4">
+          <div>
+            <img src="@/assets/images/ar.png">
+          </div>
+          <div class="pt-3">
+            <div class="text-xl font-bold ">{{ houseDetail.apartmentName }} I {{ houseDetail.typeName }}</div>
+          </div>
+          <div class="pt-3 text-base flex">
+            <div class=" ">房型：</div>
+            <div class=" font-bold text-red-700 ">
+              {{ houseDetail.roomCount }}室{{ houseDetail.livingRoomCount }}厅{{ houseDetail.bathroomCount }}卫</div>
+            <div class="  pl-7">面积:</div>
+            <div class="font-bold text-red-700 ">125m³</div>
+          </div>
+          <div class="pt-3">
+            <div class="text-xl font-bold ">房屋设施</div>
+          </div>
+          <div class="flex pt-3">
+            <div v-for="(item, index) in houseDetail.facilityIcon" :key="index">
+              <img class="w-5 h-5 pl-7" style="width: 50px; height: 20px;" :src="item" />
+            </div>
+          </div>
+          <div class="flex pt-3">
+            <div v-for="(item, index) in houseDetail.facilityNames" :key="index">
+              <div class=" pl-6">{{ item }}</div>
             </div>
-    <div class="flex">
 
           </div>
+        </div>
+        <div class=" w-1/2 pl-32">
+          <div class="text-xl font-bold">房间详情</div>
+          <div class="flex pt-3" v-for="(item, index) in houseDetail.roomTypes" :key="index">
+            <img class="w-36 h-38" :src="item.coverImg">
+            <div class="flex-col pl-4">
+              <div class="text-base font-semibold">{{ item.roomTypeName }}
+              </div>
+              <div>
+                <div class="flex ">
+                  <div>{{ item.area }}㎡</div>
+                  <div>{{ item.roomTypeName }}</div>
+                  <div>{{ item.roomTypeName }}</div>
+                </div>
+              </div>
+              <div>南卧
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex w-full pt-14 justify-between divide-x divide-white-100 divide-dashed">
+        <div class="w-1/2 pr-4">
+          <div>
+            <div class="text-xl font-bold ">小区及周边</div>
+          </div>
+          <div class="pt-3 text-base flex">
+            <div class="flex justify-between " v-for="(item, index) in residentialDetail.images" :key="index">
+              <img class="w-36 h-32  ml-3 rounded-lg" :src="item.url">
+            </div>
+          </div>
+          <div class="pt-3">
+            <div class="indent-8">{{ residentialDetail.introduce }}</div>
+          </div>
+          <div class="flex gap-2">
+            <div class="flex pt-3 gap-2" v-for="(item, index) in residentialDetail.labels" :key="index">
+              <el-tag :type="item.tagType">{{ item.dictLabel }}</el-tag>
+            </div>
+          </div>
+          <div class="map-container" ref="mapContainer"></div>
+          <!-- <div class=" w-1/2 pl-32">房型详情 </div> -->
+        </div>
         <!-- 返回 -->
         <div class="text-white flex items-center mb-2 absolute -top-14 absolute">
-        <span class="cursor-pointer text-xl">看房选房</span
+          <span class="cursor-pointer text-xl">看房选房</span><span class="text-2xl">>房型详情</span>
-        ><span class="text-2xl">>房型详情</span>
+        </div>
       </div>
     </div>
   </div>
 </template>
 <script setup>
 import { ref } from "vue";
-import { getHouseDetail,getDict,getDeptInfo } from "@/api/index";
+import { getHouseDetail, getDict, getDeptInfo, getHouseTypeList } from "@/api/index";
+import { useRouter, useRoute } from 'vue-router';
+import { onMounted } from 'vue';
+import AMapLoader from "@amap/amap-jsapi-loader";
 const route = useRoute();
 const router = useRouter();
 const deptId = route.query.deptId;
 const houseId = route.query.id;
 const houseDetail = ref({}); // 存储房屋详情数据
+const residentialDetail = ref({}); // 存储小区详情数据
 const dictList = ref([]); // 存储字典数据
 const deptInfo = ref({}); // 存储部门信息数据
+const getDictTab = ref([])
+const getRoomList = ref([])
+let map = null;
+
+const mapContainer = ref(null);
+const getHouseType = async () => {
+  try {
+    console.log(houseId, "sfdjksdlk;");
+    const parms = {
+      id: houseId
+    }
+
+    const res = await getHouseDetail(parms);
+    console.log(res, "sfdjksdlk;");
+    houseDetail.value = res.data
+    console.log(houseDetail.value, "houseDetail111;");
+    // 这里可以处理res，比如赋值给响应式变量
+  } catch (error) {
+    console.error("获取房屋详情失败", error);
+  }
+};
+const getRoom = async () => {
+  try {
+    console.log(houseId, "sfdjksdlk;");
+    const parms = {
+      apartmentId: deptId
+    }
+    const res = await getHouseTypeList(parms);
+    getRoomList.value = res.data
+  } catch (error) {
+    console.error("获取房屋详情失败", error);
+  }
+};
+const getdeptDetails = async () => {
+  try {
+    const tagColors = ['primary', 'success', 'info', 'warning', 'danger'];
+    const parms = {
+      deptId: deptId
+    }
+    const res = await getDeptInfo(parms);
+    console.log(res, getDictTab.value, "sfdjk111sdlk;");
+    residentialDetail.value = res.data;
+
+    residentialDetail.value.labels = res.data.labels.map((item, index) => {
+      const match = Object.values(getDictTab.value[0]).find(
+        item2 => item === item2.dictValue
+      );
+      return {
+        label: item,
+        dictLabel: match ? match.dictLabel : '',
+        tagType: tagColors[index]
+      };
+    });
+
+    console.log(residentialDetail.value, "edwfw");
+
+  } catch (error) {
+    console.error("获取房屋详情失败", error);
+  }
+};
+const getDictList = async () => {
+  const res = await getDict({ dictType: "apartment_label" });
+  getDictTab.value = Object.values(res.rows)
+  getHouseType();
+  getdeptDetails();
+  getRoom();
+  try {
+    dict.value = res.rows[0];
+
+  } catch (error) { }
+};
+const initMap = async () => {
+  try {
+    const AMap = await AMapLoader.load({
+      key: import.meta.env.VITE_AMAP_KEY,
+      version: "2.0",
+      plugins: ['AMap.Geolocation']
+    });
+
+    map = new AMap.Map(mapContainer.value, {
+      viewMode: '2D',
+      zoom: 13,
+      center: [116.397428, 39.90923],
+    });
+    const geolocation = new AMap.Geolocation({
+      enableHighAccuracy: true,
+      timeout: 10000,
+      buttonPosition: 'RB',
+      buttonOffset: new AMap.Pixel(10, 20),
+      zoomToAccuracy: true,
+    });
+    map.addControl(geolocation);
+    geolocation.getCurrentPosition();
+    geolocation.on('complete', (result) => {
+      console.log('定位成功', result.position);
+      map.setCenter(result.position);
+    });
+
+    geolocation.on('error', (error) => {
+      console.error('定位失败', error);
+    });
+
+  } catch (err) {
+    console.error('地图加载失败', err);
+  }
+
+
+}
+onMounted(() => {
+  getDictList();
+  initMap()
+});
 
 </script>
+<style scoped>
+.map-container {
+  width: 100%;
+
+  height: 300px;
+}
+</style>