12 changed files with 293 additions and 101 deletions
@ -1,6 +1,6 @@ |
|||||
#环境标识 |
#环境标识 |
||||
VITE_ENV="开发环境" |
VITE_ENV="开发环境" |
||||
#基础服务 |
#基础服务 |
||||
VITE_API_URL="http://192.168.1.144:8080/mz-api" |
VITE_API_URL="http://219.146.91.110:30801/mz-api" |
||||
VITE_AMAP_KEY = 8b6b7a05f40d067af88f6f211412984e |
VITE_AMAP_KEY = 8b6b7a05f40d067af88f6f211412984e |
||||
VITE_AMAP_SECURITY_KEY = 7439b95b4bb1850da7e5a1d65f1b8fc3 |
VITE_AMAP_SECURITY_KEY = 7439b95b4bb1850da7e5a1d65f1b8fc3 |
||||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 3.0 KiB |
@ -0,0 +1,83 @@ |
|||||
|
<!-- |
||||
|
面包屑导航组件 |
||||
|
|
||||
|
使用方法： |
||||
|
<Crumbs |
||||
|
:breadcrumbs="[ |
||||
|
{ title: '首页', path: '/' }, |
||||
|
{ title: '政策资讯', path: '/policy' }, |
||||
|
{ title: '详情', path: '' } |
||||
|
]" |
||||
|
/> |
||||
|
|
||||
|
参数说明： |
||||
|
- breadcrumbs: 面包屑数组 |
||||
|
- title: 显示的文字 |
||||
|
- path: 点击跳转的路径（最后一个为空字符串表示不可点击） |
||||
|
- query: 查询参数 |
||||
|
- width: 宽度 |
||||
|
特性： |
||||
|
- 自动处理分隔符 |
||||
|
- 最后一个项目不可点击 |
||||
|
- 支持路由跳转 |
||||
|
- 响应式设计 |
||||
|
--> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="`flex items-center text-base text-white w-[${width}px] mx-auto mt-10`"> |
||||
|
<template v-for="(item, index) in breadcrumbs" :key="index"> |
||||
|
<!-- 面包屑项 --> |
||||
|
<div class="flex items-center"> |
||||
|
<!-- 分隔符 --> |
||||
|
<span v-if="index > 0" class="mx-3 text-white opacity-70">></span> |
||||
|
|
||||
|
<!-- 面包屑链接 --> |
||||
|
<span |
||||
|
v-if="index < breadcrumbs.length - 1" |
||||
|
class="cursor-pointer hover:text-blue-200 transition-colors duration-200" |
||||
|
@click="handleClick(item.path, item.query)" |
||||
|
> |
||||
|
{{ item.title }} |
||||
|
</span> |
||||
|
|
||||
|
<!-- 最后一个面包屑项（不可点击） --> |
||||
|
<span v-else class="text-white font-medium"> |
||||
|
{{ item.title }} |
||||
|
</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { useRouter } from 'vue-router' |
||||
|
|
||||
|
// 定义面包屑项接口 |
||||
|
interface BreadcrumbItem { |
||||
|
title: string |
||||
|
path: string |
||||
|
} |
||||
|
|
||||
|
// 定义组件属性 |
||||
|
interface Props { |
||||
|
breadcrumbs: BreadcrumbItem[] |
||||
|
width: number |
||||
|
} |
||||
|
|
||||
|
// 接收属性 |
||||
|
const props = defineProps<Props>() |
||||
|
|
||||
|
// 使用路由 |
||||
|
const router = useRouter() |
||||
|
|
||||
|
// 处理点击事件 |
||||
|
const handleClick = (path: string, query: any) => { |
||||
|
if (path) { |
||||
|
router.push({ path: path, query: query }) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 可以添加自定义样式 */ |
||||
|
</style> |
||||
@ -0,0 +1,42 @@ |
|||||
|
<template> |
||||
|
<div class="w-full min-h-screen pt-16 pb-7 bg-gradient-to-b from-[#1974ff] to-[#f8faff] to-50%"> |
||||
|
<Crumbs :breadcrumbs="[ |
||||
|
{ title: '看房', path: '/Showings' }, |
||||
|
{ title: '公寓详情', path: '/apartmentDetail', query: { deptId: apartmentId } }, |
||||
|
{ title: '公寓房型', path: '' }, |
||||
|
]" :width="1678" /> |
||||
|
<div class="w-[1678px] mx-auto mt-10 bg-white pb-9 px-6 pt-6 rounded relative "> |
||||
|
<div class=" text-2xl font-bold mb-5">请选择房型</div> |
||||
|
<div class="flex flex-wrap gap-4"> |
||||
|
<div class="w-[499px] h-[131px] bg-white rounded-md flex" @click="handleHouseDetail(item.id)" v-for="(item, index) in houseList" :key="index"> |
||||
|
<img :src="item.coverImg" class="w-[176px] h-[120px] rounded-md mr-5" alt=""> |
||||
|
<div class="flex flex-col justify-between py-2"> |
||||
|
<div class="text-xl font-bold">{{ item.typeName }}</div> |
||||
|
<div class="flex justify-between"><span>{{ item.fullName }}</span><span>共{{ item.total }}</span></div> |
||||
|
<div class="text-sm text-gray-500">{{ item.labelStr }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup> |
||||
|
import { getlayoutOfAHouseOrAnApartment } from '@/api'; |
||||
|
import { useRoute, useRouter } from 'vue-router'; |
||||
|
import { ref, onMounted } from 'vue'; |
||||
|
import Crumbs from '@/components/Crumbs.vue'; |
||||
|
const route = useRoute(); |
||||
|
const router = useRouter(); |
||||
|
const apartmentId = ref(route.query.apartmentId); |
||||
|
const houseList = ref([]); |
||||
|
const getHouseList = async () => { |
||||
|
const res = await getlayoutOfAHouseOrAnApartment({ apartmentId: apartmentId.value }); |
||||
|
houseList.value = res.data; |
||||
|
} |
||||
|
onMounted(() => { |
||||
|
getHouseList(); |
||||
|
}) |
||||
|
const handleHouseDetail = (id) => { |
||||
|
router.push({ path: '/houseDetail', query: { deptId: apartmentId.value, id: id } }) |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue