H5/pages/map/model/siteDetails.vue

<template>
	<view class="">
		<uni-popup ref="siteDetailsPopupRef" type="bottom">
			<view class="details-box">
				<siteListModel :info="info" ref="siteListModelRef" @refresh='calculateHeight()'/>
				<siteServeH6 :height="serveH" :mapLocationId="info ? info.mapLocationId : undefined " />
			</view>
		</uni-popup>


		<telList ref="telListRef" />
	</view>
</template>

<script>
	// import { EventBus } from "@/utils/vueBus.js"
	import { openMap } from "@/utils/openApp.js"
	import { distanceCalculate } from "@/utils/tool.js";
	import telList from "./telList.vue"
	import siteListModel from "./siteList.vue";
	// import siteServe from "./siteServe.vue"
	import siteServeH6 from "./siteServeH6.vue"
	import map from "./../map.js"
	export default {
		mixins: [map],
		data() {
			return {
				contentH: 0,
				serveH: 0,
				info: undefined,
			}
		},
		components: {
			telList,
			siteListModel,
			siteServeH6
			// siteServe,
		},
		created() {

		},
		mounted() {



			// EventBus.$on('TianDiTuSite', (res) => {
			// 	const { longitude, latitude } = res;
			// 	this.openDetails(res);
			// });
			// const aaa = {
			// 	"deleteFlag": "NOT_DELETE",
			// 	"createTime": "2024-12-11 16:56:18",
			// 	"createUser": "1543837863788879871",
			// 	"updateTime": "2024-12-18 09:08:07",
			// 	"updateUser": "1543837863788879871",
			// 	"mapLocationId": "1866768964909047810",
			// 	"locationName": "武汉市民之家 出入境办证大厅",
			// 	"mapTypeId": "1867023355423547393",
			// 	"mapTypeName": "市公安政务服务中心",
			// 	"mapTypeIcon": "https://sly-ga-zwserver.obs.cn-north-4.myhuaweicloud.com/2024/12/16/1868630815665283073.png",
			// 	"provinceCode": "420000",
			// 	"provinceName": "湖北省",
			// 	"cityCode": "420100",
			// 	"cityName": "武汉市",
			// 	"areaCode": "420102",
			// 	"areaName": "江岸区",
			// 	"address": "江岸区金桥大道117号",
			// 	"workTimeRemark": "周一至周五：上午9:00-12:00；下午13:30-17:00 周六：上午9:00-12:00；下午13:00-16:00",
			// 	"outerPhone": "12367",
			// 	"mapStatus": "ENABLE",
			// 	"orderIndex": 1,
			// 	"longitude": "114.28986",
			// 	"latitude": "30.66223",
			// 	"centerPoint": false,
			// 	"distance": 0,
			// 	"centerDistance": 50.825090552695464,
			// 	"mapContactList": [{
			// 		"deleteFlag": "NOT_DELETE",
			// 		"createTime": "2024-12-18 09:08:07",
			// 		"createUser": "1543837863788879871",
			// 		"updateTime": null,
			// 		"updateUser": null,
			// 		"mapContactsId": "1869187854787371009",
			// 		"phone": "12367",
			// 		"remark": null,
			// 		"mapLocationId": "1866768964909047810"
			// 	}]
			// }
			// this.openDetails(aaa)
		},
		beforeDestroy() {
			// EventBus.$off('someEvent'); // 确保在组件销毁前移除事件监听
		},
		watch: {
			contentH: {
				handler(newH) {
					if (newH) {
						const query = uni.createSelectorQuery().in(this);
						query
							.select(".details-box")
							.boundingClientRect((data) => {
								const { height } = data || {};
								console.log('heightheightheight = ' , height , this.contentH )
								const h =height - this.contentH - uni.upx2px(50);
								this.serveH = h;
							})
							.exec();
					}
				},

			}
		},
		methods: {

			getDistance(num) {
				return distanceCalculate(num)
			},
			getPhoneCall(tel) {
				this.$refs.telListRef.open({ tel })
			},
			openLocation(info) {
				const { areaCode, cityCode, provinceCode, provinceName, cityName, areaName, address } = info
				const name = `${provinceName}${cityName}${areaName}${address}`;
				const code = areaCode || cityCode || provinceCode
				openMap({ name, code: code, type: "baidu" })
			},
			openDetails(res) {
				console.log('openDetails = ', res)
				this.info = res;
				this.serveH = 0;
				this.contentH = 0;
				this.$refs.siteDetailsPopupRef.open()
				this.calculateHeight()
			},
			calculateHeight() {
				this.$nextTick(() => {
					if(this.$refs.siteListModelRef){
						this.$refs.siteListModelRef.getHeight().then(res => {
							this.contentH = res;
						})
					}else{
						setTimeout(() => {
							this.calculateHeight()
						},10)
					}
					console.log('this.$refs.siteListModelRef = ' , this.$refs.siteListModelRef)
					
					// try {
					// 	const query = uni.createSelectorQuery().in(this);
					// 	query
					// 		.select(".details-box")
					// 		.boundingClientRect((data) => {
					// 			if (data) {
					// 				this.contentH = data.height - uni.upx2px(150);
					// 			}
					// 		})
					// 		.exec();
					// } catch (error) {
					// 	//TODO handle the exception
					// 	const windowHeight = uni.getSystemInfoSync().windowHeight;
					// 	this.contentH = windowHeight * 0.8 - uni.upx2px(150);
					// }

					// if (!this.contentH) {
					// 	setTimeout(() => {
					// 		this.calculateHeight()
					// 	}, 100)
					// }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-popup {
		z-index: 1002;

		.details-box {
			height: 80vh;
			padding: 50rpx 0 0;
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;

			.site-name {
				font-size: 36rpx;
				padding-top: 30rpx;
				padding-bottom: 15rpx;
			}

			.site-location,
			.site-distance {
				padding-top: 10rpx;
				// color: #8e8c8c;
				font-size: 28rpx;
			}

			.site-distance {
				color: #7D7D7D;
			}

			.site-time {
				margin-top: 15rpx;
				background-color: #fff;
				border-top: 1rpx solid #F0F0F0;
				padding: 15rpx 0;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;

				text {
					flex-shrink: 0;
				}

				.time-lable {
					color: #7D7D7D;
				}

				.site-time-val {
					width: 1rpx;
					flex: 1;
					padding-left: 30rpx;
					// text-align: right;
				}
			}


			.details-btn {
				width: 100%;
				height: 120rpx;
				padding-top: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.site-btn {
					width: 260rpx;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					border-radius: 10rpx;
					background-color: #3291F8;

					&+.site-btn {
						margin-left: 50rpx;
					}

					.icon {
						width: 50rpx;
						height: 50rpx;

						path {
							fill: #fff;
						}
					}

					.site-text {
						font-size: 30rpx;
						padding-left: 20rpx;
					}
				}
			}
		}



		.sever-box {

			width: 100%;
			// background-color: hotpink;
		}
	}
</style>