elink-star
/
epmet-asd-pc
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

房型详情

master-xiaowang
是小王呀\24601 2 months ago
parent
0412d3c320
commit
71b0ff793a
7 changed files with 202 additions and 113 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      auto-imports.d.ts
  2. 19
      components.d.ts
  3. BIN
      src/assets/images/03ec6a8d46ed1a7ca22a2576a8caa85.png
  4. BIN
      src/assets/images/27eb0ec0bb8d304601fef085afa52e9.png
  5. 125
      src/components/AppHeader.vue
  6. 137
      src/views/showings/houseDetail.vue
  7. 25
      src/views/showings/index.vue

9
auto-imports.d.ts
View File

@ -0,0 +1,9 @@
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
export {}
declare global {
}

19
components.d.ts
View File

@ -0,0 +1,19 @@
/* eslint-disable */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
BottomNavigation: typeof import('./src/components/BottomNavigation.vue')['default']
Faqs: typeof import('./src/components/Faqs.vue')['default']
FooterBg: typeof import('./src/components/FooterBg.vue')['default']
IconGroup: typeof import('./src/components/IconGroup.vue')['default']
NavigationBar: typeof import('./src/components/NavigationBar.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
SidedLayout: typeof import('./src/components/SidedLayout.vue')['default']
}
}

BIN
src/assets/images/03ec6a8d46ed1a7ca22a2576a8caa85.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
src/assets/images/27eb0ec0bb8d304601fef085afa52e9.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 398 KiB

125
src/components/AppHeader.vue
View File

@ -1,59 +1,51 @@
<template>
<nav style="background-color: #1b77ff;" class="shadow-lg fixed w-full top-0 z-50">
<div class="container">
<div class="flex justify-between items-center py-4">
<div class="">
<div class=" pl-36 flex items-center py-4">
<!-- Logo -->
<!-- Desktop Navigation -->
<div class="hidden md:flex items-center space-x-8">
<router-link
v-for="item in navigationConfig"
:key="item.key"
:to="item.path"
<div class="text-white text-3xl font-semibold">青岛市免租金住宿保障平台</div>
<div class="hidden md:flex items-center space-x-8 pl-20">
<router-link v-for="item in navigationConfig" :key="item.key" :to="item.path"
class=" text-white font-medium transition-colors duration-200"
:class="{ 'text-yellow-400': $route.path === item.path }"
>
:class="{ 'text-yellow-400': $route.path === item.path }">
{{ item.name }}
</router-link>
<!-- Language Switcher -->
<div class="relative">
<button
@click="toggleLanguageMenu"
class="flex items-center space-x-1 text-gray-600 font-medium transition-colors duration-200"
>
<!-- <div class="relative">
<button @click="toggleLanguageMenu"
class="flex items-center space-x-1 text-gray-600 font-medium transition-colors duration-200">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129">
</path>
</svg>
</button>
<div v-show="showLanguageMenu" class="absolute right-0 mt-2 w-32 bg-white rounded-md shadow-lg py-1 z-10">
<button
@click="changeLanguage('zh')"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
:class="{ 'bg-blue-50 text-blue-600': currentLanguage === 'zh' }"
>
</button>
<button
@click="changeLanguage('en')"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
:class="{ 'bg-blue-50 text-blue-600': currentLanguage === 'en' }"
>
</button>
</button>
<div v-show="showLanguageMenu" class="absolute right-0 mt-2 w-32 bg-white rounded-md shadow-lg py-1 z-10">
<button @click="changeLanguage('zh')"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
:class="{ 'bg-blue-50 text-blue-600': currentLanguage === 'zh' }">
</button>
<button @click="changeLanguage('en')"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
:class="{ 'bg-blue-50 text-blue-600': currentLanguage === 'en' }">
</button>
</div>
</div>
</div> -->
</div>
<!-- Mobile menu button -->
<button
@click="toggleMobileMenu"
class="md:hidden flex items-center px-3 py-2 border rounded text-gray-600 border-gray-200 hover:text-blue-600 hover:border-blue-600"
>
<button @click="toggleMobileMenu"
class="md:hidden flex items-center px-3 py-2 border rounded text-gray-600 border-gray-200 hover:text-blue-600 hover:border-blue-600">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20">
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
</div>
@ -61,33 +53,24 @@
<!-- Mobile Navigation -->
<div v-show="showMobileMenu" class="md:hidden bg-white border-t border-gray-200">
<div class="px-2 pt-2 pb-3 space-y-1">
<router-link
v-for="item in navigationConfig"
:key="item.key"
:to="item.path"
@click="closeMobileMenu"
<router-link v-for="item in navigationConfig" :key="item.key" :to="item.path" @click="closeMobileMenu"
class="block px-3 py-2 text-gray-600 hover:text-blue-600 font-medium transition-colors duration-200"
:class="{ 'text-blue-600 bg-blue-50': $route.path === item.path }"
>
:class="{ 'text-blue-600 bg-blue-50': $route.path === item.path }">
{{ item.name }}
</router-link>
<!-- Mobile Language Switcher -->
<div class="border-t border-gray-200 pt-2 mt-2">
<div class="px-3 py-2 text-sm text-gray-500"></div>
<button
@click="changeLanguage('zh')"
<button @click="changeLanguage('zh')"
class="block w-full text-left px-3 py-2 text-gray-600 hover:text-blue-600 font-medium transition-colors duration-200"
:class="{ 'text-blue-600 bg-blue-50': currentLanguage === 'zh' }"
>
:class="{ 'text-blue-600 bg-blue-50': currentLanguage === 'zh' }">
</button>
<button
@click="changeLanguage('en')"
<button @click="changeLanguage('en')"
class="block w-full text-left px-3 py-2 text-gray-600 hover:text-blue-600 font-medium transition-colors duration-200"
:class="{ 'text-blue-600 bg-blue-50': currentLanguage === 'en' }"
>
:class="{ 'text-blue-600 bg-blue-50': currentLanguage === 'en' }">
</button>
</div>
</div>
@ -108,24 +91,24 @@ const showLanguageMenu = ref(false)
const navigationConfig = [
{
name:'首页',
path:'/',
key:'home'
name: '首页',
path: '/',
key: 'home'
},
{
name:'政策资讯',
path:'/policy',
key:'policy'
name: '政策资讯',
path: '/policy',
key: 'policy'
},
{
name:'看房选房',
path:'/Showings',
key:'Showings'
name: '看房选房',
path: '/Showings',
key: 'Showings'
},
{
name:'续期申请',
path:'/',
key:''
name: '续期申请',
path: '/',
key: ''
}
]
const currentLanguage = computed(() => locale.value)
@ -153,4 +136,4 @@ onMounted(() => {
<style scoped>
/* 自定义样式 */
</style>
</style>

137
src/views/showings/houseDetail.vue
View File

@ -3,11 +3,44 @@
<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 class="w-1/2 pr-10">
<div class=" w-full relative ">
<div v-if="activeTab === 'video'" class="w-full h-72">
<video :src="houseDetail.vrUrl" controls class="w-full h-full object-cover rounded-md" />
</div>
<el-carousel v-if="activeTab === 'img'" height="300px">
<el-carousel-item v-for="(img, idx) in houseDetail.images" :key="idx">
<img :src="img.url" class="w-full h-72 object-cover rounded-md" />
</el-carousel-item>
</el-carousel>
<div v-if="activeTab === 'vr'" class="relative">
<img class="w-full h-72 object-cover rounded-md" :src="houseDetail.vrUrl" alt="VR封面图" />
<a :href="vrLink" target="_blank">
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30 cursor-pointer">
</div>
</a>
</div>
<div class="mt-4 flex justify-center border rounded-full overflow-hidden w-fit absolute bottom-10 left-52">
<button class="px-4 py-1 text-sm font-medium"
:class="activeTab === 'vr' ? 'bg-blue-500 text-white' : 'bg-white text-gray-800'"
@click="activeTab = 'vr'">
VR
</button>
<button class="px-4 py-1 text-sm font-medium"
:class="activeTab === 'img' ? 'bg-blue-500 text-white' : 'bg-white text-gray-800'"
@click="activeTab = 'img'">
图片
</button>
<button class="px-4 py-1 text-sm font-medium"
:class="activeTab === 'video' ? 'bg-blue-500 text-white' : 'bg-white text-gray-800'"
@click="activeTab = 'video'">
视频
</button>
</div>
</div>
<div class="pt-3">
<div class="text-xl font-bold ">{{ houseDetail.apartmentName }} I {{ houseDetail.typeName }}</div>
@ -23,39 +56,43 @@
<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 class="" v-for="(item, index) in houseDetail.facilityIcon" :key="index">
<div class="w-20">
<img class="w-33 h-5 pl-6" style="width: 50px; height: 20px;" :src="item" />
</div>
</div>
</div>
<div class="flex pt-3">
<div v-for="(item, index) in houseDetail.facilityNames" :key="index">
<div class=" pl-6">{{ item }}</div>
<div class=" pl-5 w-20 h-7">{{ item }}</div>
</div>
</div>
</div>
<div class=" w-1/2 pl-32">
<div class=" w-1/2 pl-10">
<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 class="flex items-start gap-4 py-4 border-gray-200 border-dashed"
:class="{ 'border-b': index !== houseDetail.roomTypes.length - 1 }"
v-for="(item, index) in houseDetail.roomTypes" :key="index">
<!-- 封面图 -->
<img class="w-45 h-36 object-cover rounded-md" :src="item.coverImg" alt="封面" />
<!-- 文字信息 -->
<div class="flex flex-col justify-between">
<div class="text-lg font-bold">{{ item.roomTypeName }}</div>
<div class="flex flex-wrap items-center text-sm text-gray-600 mt-2 space-x-3">
<div>{{ item.area }}㎡</div>
<div>{{ item.roomTypeName }}</div>
<div>{{ item.hasWindow ? '有窗' : '无窗' }}</div>
</div>
<div class="text-xs text-gray-900 mt-2 leading-snug">{{ item.description }}</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 class="w-1/2 pr-10">
<div>
<div class="text-xl font-bold ">小区及周边</div>
</div>
@ -67,7 +104,7 @@
<div class="pt-3">
<div class="indent-8">{{ residentialDetail.introduce }}</div>
</div>
<div class="flex gap-2">
<div class="flex gap-2 mb-3">
<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>
@ -75,12 +112,52 @@
<div class="map-container" ref="mapContainer"></div>
<!-- <div class=" w-1/2 pl-32">房型详情 </div> -->
</div>
<div class=" w-1/2 pl-10">
<div class="text-xl font-bold">入住评价</div>
<div style="width: 100%; height: 100%;">
<template>
<el-empty image="@/assets/images/03ec6a8d46ed1a7ca22a2576a8caa85.png" />
</template>
<img src="@/assets/images/03ec6a8d46ed1a7ca22a2576a8caa85.png">
</div>
<!-- <div class="max-h-[600px] overflow-y-auto pr-2">
<div class="items-start gap-4 py-4 border-gray-200 border-dashed"
:class="{ 'border-b': index !== houseDetail.roomTypes.length - 1 }"
v-for="(item, index) in houseDetail.roomTypes" :key="index">
<div class="flex justify-between w-full">
<div class="flex">
<img class="w-16 h-16 object-cover rounded-full" :src="item.coverImg" alt="封面" />
<div class="flex flex-col pl-3">
<div class="flex flex-wrap items-center text-sm text-gray-600 mt-2 space-x-3">
<div>{{ item.roomTypeName }}</div>
</div>
<div class="text-xs text-gray-500 mt-2 leading-snug">{{ houseDetail.createTime }}</div>
</div>
</div>
<el-rate disabled v-model="starRating" colors="['#13c2c2']" size="large" />
</div>
<div class="flex gap-x-0.5">
<div v-for="(item, index) in houseDetail.facilityIcon" :key="index" class="flex">
<img class="w-28" src="../../assets/images/ewm1.png">
</div>
</div>
</div>
</div> -->
</div>
<!-- 返回 -->
<div class="text-white flex items-center mb-2 absolute -top-14 absolute">
<!-- <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>
</div>
<!-- <div class="flex justify-center align-center">
<el-button @click="handerReturn">取消</el-button>
<el-button type="primary">选择房型</el-button>
</div> -->
</div>
</template>
<script setup>
@ -91,7 +168,14 @@ import { onMounted } from 'vue';
import AMapLoader from "@amap/amap-jsapi-loader";
const route = useRoute();
const router = useRouter();
const activeTab = ref('vr')
const deptId = route.query.deptId;
const imgList = ref([
'https://example.com/img1.jpg',
'https://example.com/img2.jpg',
'https://example.com/img3.jpg',
])
const houseId = route.query.id;
const houseDetail = ref({}); // 存储房屋详情数据
const residentialDetail = ref({}); // 存储小区详情数据
@ -100,8 +184,11 @@ const deptInfo = ref({}); // 存储部门信息数据
const getDictTab = ref([])
const getRoomList = ref([])
let map = null;
const starRating = ref(3.7)
const mapContainer = ref(null);
const handerReturn = async () => {
router.go(-1) // 返回上一页
}
const getHouseType = async () => {
try {
console.log(houseId, "sfdjksdlk;");

25
src/views/showings/index.vue
View File

@ -3,22 +3,13 @@
<div class="bg-white absolute top-20 left-24 z-20 py-4 px-6 rounded-md">
<Agency :selfMarkers="selfMarkers" @changeAngecy="changeAngecy" />
</div>
<CenterMap
: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" />
<CenterMap :markers="markers" @marker-click="handleMarkerClick" :mapCenter="mapCenter" />
<div class="bg-white absolute bottom-24 right-0 rounded-md transition-all duration-300 ease-in-out"
:class="{ 'translate-x-full': !isPanelOpen, 'right-24 z-20 py-4 px-6': 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 v-show="isPanelOpen" :selfObj="selfObj" />
</div>
</div>
</template>
@ -33,7 +24,7 @@ const selfMarkers = ref({}); // 定义一个响应式变量来存储当前选中
// 定义标记点数据
const markers = ref([]);
const mapCenter = ref([]); // 定义一个响应式变量来存储当前选中的markers
const isPanelOpen = ref(true);
const isPanelOpen = ref(true);
const handleMarkerClick = (event) => {
selfMarkers.value = {
apartmentId: event.marker.apartmentId,

Write Preview
Loading…
Cancel
Save