20 changed files with 3876 additions and 1863 deletions
File diff suppressed because it is too large
@ -0,0 +1,47 @@ |
|||
import request from '@/utils/http.ts' |
|||
/** |
|||
* 获取组织树 |
|||
* @param params deptName |
|||
* |
|||
* @returns |
|||
*/ |
|||
export const getAgencyList = (params: object) => { |
|||
return request.get('/system/dept/listForH5', params) |
|||
} |
|||
/** |
|||
* 获取房型 |
|||
* @param params apartmentId |
|||
* |
|||
* @returns |
|||
*/ |
|||
export const getHouseTypeList = (params: object) => { |
|||
return request.get('/asdh5/chooseRoom/getHouseTypeListForH5', params) |
|||
} |
|||
/** |
|||
* 地图右侧列表 |
|||
* @param params apartmentId |
|||
* |
|||
* @returns |
|||
*/ |
|||
export const getHouseTypeMap = (params: object) => { |
|||
return request.get('/mz/choose/list-house-type-with-count', params) |
|||
} |
|||
/** |
|||
* 地图点位 |
|||
* @param params apartmentId |
|||
* |
|||
* @returns |
|||
*/ |
|||
export const getMapPoint = (params: object) => { |
|||
return request.get('/mz/choose/list-house-with-count', params) |
|||
} |
|||
/** |
|||
* 地图点位 |
|||
* @param params apartmentId |
|||
* |
|||
* @returns |
|||
*/ |
|||
export const getDict = (params: object) => { |
|||
return request.get('/system/dict/data/getDict', params) |
|||
} |
|||
|
|||
@ -0,0 +1,138 @@ |
|||
<template> |
|||
<div class="map-container" ref="mapContainer"></div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, onMounted, watch } from "vue"; // 添加watch |
|||
import AMapLoader from "@amap/amap-jsapi-loader"; |
|||
|
|||
const props = defineProps({ |
|||
center: { |
|||
type: Array, |
|||
default: () => [120.287882, 36.178786], |
|||
}, |
|||
zoom: { |
|||
type: Number, |
|||
default: 10.5, |
|||
}, |
|||
//地图点位 |
|||
markers: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
}); |
|||
|
|||
const mapContainer = ref(null); |
|||
let map = null; |
|||
|
|||
let markers = []; // 存储当前地图上的marker实例 |
|||
|
|||
// 清除所有点位 |
|||
const clearMarkers = () => { |
|||
if (map) { |
|||
map.remove(markers); |
|||
markers = []; |
|||
} |
|||
}; |
|||
|
|||
// 添加点位 |
|||
const emit = defineEmits(['marker-click']) // 添加事件发射器 |
|||
|
|||
const addMarkers = () => { |
|||
clearMarkers(); |
|||
props.markers.forEach((marker, index) => { |
|||
const content = ` |
|||
<div style=" |
|||
background: ${marker.color || "#3388FF"}; |
|||
color: white; |
|||
display: inline-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 12px; |
|||
box-shadow: 0 2px 4px rgba(0,0,0,0.3); |
|||
padding: 8px; |
|||
border-radius: 15px; |
|||
white-space: nowrap; |
|||
"> |
|||
${marker.name || ""} |
|||
<span style=" |
|||
background: #ffffff; |
|||
color: ${marker.color || "#3388FF"}; |
|||
border-radius: 10px; |
|||
min-width: 20px; |
|||
height: 20px; |
|||
display: inline-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 10px; |
|||
padding: 0 4px; |
|||
margin-left: 4px; |
|||
box-sizing: border-box; |
|||
font-weight: bold; |
|||
">${marker.total || ''}间</span> |
|||
</div> |
|||
`; |
|||
|
|||
const amarker = new AMap.Marker({ |
|||
position: [marker.longitude, marker.latitude], |
|||
content: content, |
|||
offset: new AMap.Pixel(-15, -15), |
|||
}); |
|||
|
|||
// 添加点击事件 |
|||
amarker.on('click', () => { |
|||
emit('marker-click', { |
|||
marker, |
|||
index, |
|||
position: [marker.longitude, marker.latitude] |
|||
}) |
|||
map.setCenter([marker.longitude, marker.latitude]); |
|||
map.setZoom(12); |
|||
}); |
|||
markers.push(amarker); |
|||
map.add(amarker); |
|||
}); |
|||
}; |
|||
|
|||
onMounted(async () => { |
|||
try { |
|||
const AMap = await AMapLoader.load({ |
|||
key: import.meta.env.VITE_AMAP_KEY, |
|||
version: "2.0", |
|||
plugins: ["AMap.ToolBar", "AMap.Scale", "AMap.Marker"], // 添加Marker插件 |
|||
}); |
|||
|
|||
map = new AMap.Map(mapContainer.value, { |
|||
viewMode: "2D", |
|||
zoom: props.zoom, |
|||
center: props.center, |
|||
}); |
|||
|
|||
// 添加控件 |
|||
map.addControl(new AMap.ToolBar()); |
|||
map.addControl(new AMap.Scale()); |
|||
|
|||
// 初始添加点位 |
|||
addMarkers(); |
|||
|
|||
// 监听markers变化 |
|||
watch( |
|||
() => props.markers, |
|||
() => { |
|||
addMarkers(); |
|||
}, |
|||
{ deep: true } |
|||
); |
|||
} catch (error) { |
|||
console.error("地图加载失败:", error); |
|||
} |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.map-container { |
|||
width: 100%; |
|||
height: 100vh; |
|||
min-height: 400px; |
|||
} |
|||
</style> |
|||
@ -1,36 +0,0 @@ |
|||
<template> |
|||
<div class="bg-syGreyBg overflow-hidden"> |
|||
<div class="md:w-[1200px] m-auto md:mt-[66px] w-[390px] mt-2"> |
|||
<div class="w-[350px] m-auto md:w-[1200px]"> |
|||
<div |
|||
class="md:w-[86px] mt-8 md:h-[50px] w-[75px] h-[38px] rounded-3xl border border-gray-200 flex justify-center items-center"> |
|||
<span class="text-secondary md:text-[18px] text-[14px] font-normal">FAQs</span> |
|||
</div> |
|||
<div |
|||
class="mt-4 md:w-[629px] md:h-[54px] md:text-5xl font-medium md:whitespace-nowrap w-[350px] h-[80px] text-3xl"> |
|||
Frequently Asked Questions |
|||
</div> |
|||
<div class="mt-4 w-full md:text-lg font-normal text-base"> |
|||
We understand that you may have some questions about insurance. We have compiled a list of frequently asked |
|||
questions to help you get the information you need. If you have any other questions, please do not hesitate to |
|||
contact us. |
|||
</div> |
|||
</div> |
|||
<Faqs :type="2" /> |
|||
</div> |
|||
<!-- footer背景 --> |
|||
<FooterBg /> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { useUserStore } from '@/stores/user' |
|||
import { getCardList } from '@/api/test' |
|||
const store = useUserStore() |
|||
const getInfo = async () => { |
|||
const res = await getCardList() |
|||
console.log(res, store) |
|||
} |
|||
getInfo() |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,141 @@ |
|||
<template> |
|||
<div class="flex items-center gap-5"> |
|||
<el-dropdown trigger="click"> |
|||
<span class="el-dropdown-link"> |
|||
{{ cityName }}<el-icon class="el-icon--right"><arrow-down /></el-icon> |
|||
</span> |
|||
<template #dropdown> |
|||
<el-dropdown-menu> |
|||
<el-dropdown-item |
|||
@click="handleCity(item.deptId, item.deptName)" |
|||
v-for="(item, index) in cityList" |
|||
:label="item.deptName" |
|||
:value="item.deptId" |
|||
:key="index" |
|||
>{{ item.deptName }}</el-dropdown-item |
|||
> |
|||
</el-dropdown-menu> |
|||
</template> |
|||
</el-dropdown> |
|||
<el-dropdown trigger="click"> |
|||
<span class="el-dropdown-link"> |
|||
{{ apartmentName |
|||
}}<el-icon class="el-icon--right"><arrow-down /></el-icon> |
|||
</span> |
|||
<template #dropdown> |
|||
<el-dropdown-menu> |
|||
<el-dropdown-item |
|||
v-for="(item, index) in apartmentList" |
|||
:label="item.deptName" |
|||
:value="item.deptId" |
|||
:key="index" |
|||
@click="handleApartment(item.deptId, item.deptName)" |
|||
>{{ item.deptName }}</el-dropdown-item |
|||
> |
|||
</el-dropdown-menu> |
|||
</template> |
|||
</el-dropdown> |
|||
<el-dropdown trigger="click"> |
|||
<span class="el-dropdown-link"> |
|||
{{ houseTypeName |
|||
}}<el-icon class="el-icon--right"><arrow-down /></el-icon> |
|||
</span> |
|||
<template #dropdown> |
|||
<el-dropdown-menu> |
|||
<el-dropdown-item |
|||
v-for="(item, index) in roomTypeList" |
|||
:label="item.typeName" |
|||
:value="item.id" |
|||
:key="index" |
|||
@click="handleHouseType(item.id, item.typeName)" |
|||
>{{ item.typeName }}</el-dropdown-item |
|||
> |
|||
</el-dropdown-menu> |
|||
</template> |
|||
</el-dropdown> |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
import { ref, reactive, onMounted, onUnmounted } from "vue"; |
|||
import { getAgencyList, getHouseTypeList } from "@/api/index"; |
|||
const emit = defineEmits(["changeAngecy"]); |
|||
const props = defineProps({ |
|||
deptName: { |
|||
// 部门名称 |
|||
type: String, // 类型为字符串 |
|||
default: "", |
|||
}, |
|||
}); |
|||
const list = ref([]); // 定义列表数据 |
|||
const joinIn = reactive({ |
|||
// 定义查询参数 |
|||
deptName: props.deptName || "青岛市", |
|||
}); |
|||
const deptId = ref(""); |
|||
const cityList = ref([]); // 定义列表数据 |
|||
const apartmentList = ref([]); // 定义列表数据 |
|||
const roomTypeList = ref([]); // 定义列表数据 |
|||
const cityName = ref("请选择"); // 定义列表数据 |
|||
const apartmentName = ref("请选择"); // 定义列表数据 |
|||
const houseTypeName = ref("请选择"); // 定义列表数据 |
|||
const getQIngDaoId = async () => { |
|||
// 获取列表数据 |
|||
try { |
|||
const res = await getAgencyList(joinIn); // 调用接口获取数据 |
|||
list.value = res.data; // 赋值给列表数据 |
|||
deptId.value = list.value[0].deptId; |
|||
getDropdownList("city"); |
|||
} catch (err) { |
|||
console.error("获取数据失败:", err); // 处理错误 |
|||
} |
|||
}; |
|||
const getDropdownList = async (type) => { |
|||
// 获取列表数据 |
|||
try { |
|||
const res = await getAgencyList({ parentId: deptId.value }); // 调用接口获取数据 |
|||
if (type === "city") { |
|||
cityList.value = res.data; // 赋值给列表数据 |
|||
console.log(cityList.value); |
|||
} else if (type === "apartment") { |
|||
apartmentList.value = res.data; // 赋值给列表数据 |
|||
} |
|||
} catch (err) { |
|||
console.error("获取数据失败:", err); // 处理错误 |
|||
} |
|||
}; |
|||
const handleCity = (id, name) => { |
|||
deptId.value = id; |
|||
cityName.value = name; |
|||
apartmentList.value = []; // 清空 apartmentList |
|||
roomTypeList.value = []; // 清空 roomTypeList |
|||
apartmentName.value = "请选择"; // 清空 apartmentName |
|||
houseTypeName.value = "请选择"; // 清空 apartmentName |
|||
emit("changeAngecy", { id, type: "city" }); |
|||
getDropdownList("apartment"); |
|||
}; |
|||
const handleApartment = (id, name) => { |
|||
roomTypeList.value = []; // 清空 roomTypeList |
|||
apartmentName.value = name; |
|||
deptId.value = id; |
|||
houseTypeName.value = "请选择"; // 清空 apartmentName |
|||
emit("changeAngecy", { id, type: "apartment" }); |
|||
getHouseType(id); |
|||
}; |
|||
const handleHouseType = (id, name) => { |
|||
houseTypeName.value = name; |
|||
deptId.value = id; |
|||
emit("changeAngecy", { id, type: "houseType" }); |
|||
}; |
|||
const getHouseType = async (id) => { |
|||
try { |
|||
const res = await getHouseTypeList({ apartmentId: id }); // 调用接口获取数据 |
|||
roomTypeList.value = res.data; // 赋值给列表数据 |
|||
} catch (err) { |
|||
console.error("获取数据失败:", err); // 处理错误 |
|||
} |
|||
}; |
|||
onMounted(() => { |
|||
// 组件挂载时获取数据 |
|||
getQIngDaoId(); // 调用获取数据函数 |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,100 @@ |
|||
<template> |
|||
<div class="w-[420px] h-[344px] overflow-y-auto"> |
|||
<div>选择房型</div> |
|||
<el-divider /> |
|||
<div class="flex flex-col"> |
|||
<div class="flex gap-5" v-for="(item, index) in list" :key="index"> |
|||
<img :src="item.coverImg" alt="" class="w-[140px] h-[100px]" /> |
|||
<div class="flex-1 flex flex-col"> |
|||
<div class="font-bold">{{ item.name }}</div> |
|||
<div>共{{ item.total }}间</div> |
|||
<div class="text-gray-400">{{ item.address }}</div> |
|||
<div> |
|||
<div |
|||
v-for="tag in item.labels" |
|||
:key="tag" |
|||
class="mr-1 mb-1 inline-flex items-center px-2 py-1 rounded text-xs font-medium" |
|||
:class="tag === '1' ? 'bule' : tag === '2' ? 'green' : 'yellow'" |
|||
> |
|||
{{ getLabel(tag) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
import { ref, reactive, onMounted, onUnmounted, watch } from "vue"; |
|||
import { getHouseTypeMap, getDict } from "@/api/index"; |
|||
const props = defineProps({ |
|||
selfObj: { |
|||
type: Object, |
|||
default: () => { |
|||
return {}; |
|||
}, |
|||
}, |
|||
}); // 定义props对象，用于接收外部传入的参数 |
|||
const list = ref([]); |
|||
const dict = ref({}); |
|||
const joinIn = reactive({ |
|||
pageNum: 1, |
|||
pageSize: 200, |
|||
regionCode: "", // 区域 |
|||
apartmentId: "", // 公寓 |
|||
houseTypeId: "", // 户型 |
|||
}); |
|||
const getDictList = async () => { |
|||
const res = await getDict({ dictType: "apartment_label" }); |
|||
try { |
|||
dict.value = res.rows[0]; |
|||
} catch (error) {} |
|||
}; |
|||
const getList = async () => { |
|||
const res = await getHouseTypeMap(joinIn); |
|||
list.value = res.rows; |
|||
}; |
|||
|
|||
getDictList(); |
|||
watch( |
|||
() => props.selfObj, |
|||
(newVal, oldVal) => { |
|||
if (newVal.type === "city") { |
|||
joinIn.regionCode = newVal.id; |
|||
} else if (newVal.type === "apartment") { |
|||
joinIn.apartmentId = newVal.id; |
|||
} else if (newVal.type === "houseType") { |
|||
joinIn.houseTypeId = newVal.id; |
|||
} |
|||
|
|||
getList(); |
|||
}, |
|||
{ deep: true } |
|||
); |
|||
getList(); |
|||
const getLabel = (tag) => { |
|||
// 如果dict.value是对象，需要先转换为数组 |
|||
const dictArray = Array.isArray(dict.value) |
|||
? dict.value |
|||
: Object.values(dict.value); |
|||
return dictArray.find((item) => item.dictValue === tag)?.dictLabel || tag; |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.bule{ |
|||
color: #99bbfe; |
|||
border:1px solid #99bbfe; |
|||
padding: 0 5px; |
|||
|
|||
} |
|||
.green{ |
|||
color: #3bcccd; |
|||
border:1px solid #3bcccd; |
|||
padding: 0 5px; |
|||
} |
|||
.yellow{ |
|||
color: #efca3f; |
|||
border:1px solid #efca3f; |
|||
padding: 0 5px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,69 @@ |
|||
<template> |
|||
<div class="bg-syGreyBg overflow-hidden"> |
|||
<div class="bg-white absolute top-20 left-24 z-20 py-4 px-6 rounded-md"> |
|||
<Agency :deptName="deptName" @changeAngecy="changeAngecy" /> |
|||
</div> |
|||
<Amap :markers="markers" @marker-click="handleMarkerClick" /> |
|||
<div class="bg-white absolute bottom-32 right-24 z-20 py-4 px-6 rounded-md"> |
|||
<HouseList :selfObj="selfObj" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref, reactive, onMounted, onUnmounted } 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 markers = ref([]); |
|||
const deptId = ref(""); |
|||
const handleMarkerClick = (event) => { |
|||
console.log("点击了标记点:", event); |
|||
selfObj.value = { type: "apartment", id: event.marker.id }; |
|||
// 先将所有点位恢复默认颜色 |
|||
markers.value = markers.value.map((marker) => ({ |
|||
...marker, |
|||
color: "#3388FF", // 默认颜色 |
|||
})); |
|||
|
|||
// 然后设置当前点击的点位为高亮颜色 |
|||
markers.value[event.index].color = "#ff9f00"; |
|||
}; |
|||
|
|||
const getMarkers = async (event) => { |
|||
try { |
|||
let pamrs = { |
|||
pageSize: 200, |
|||
pageNum: 1, |
|||
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; |
|||
} |
|||
} |
|||
const res = await getMapPoint(pamrs); |
|||
markers.value = res.rows; |
|||
console.log(markers, "seeeee"); |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}; |
|||
const changeAngecy = (event) => { |
|||
selfObj.value = { type: event.type, id: event.id }; |
|||
getMarkers(event); |
|||
}; |
|||
getMarkers(); |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue