|
@@ -2,20 +2,28 @@
|
|
|
<view class="">
|
|
|
<uni-popup ref="siteDetailsPopupRef" type="bottom">
|
|
|
<view class="details-box">
|
|
|
- <scroll-view :style="{'height':scrollH +'px' }" scroll-y="true" :show-scrollbar="false">
|
|
|
+
|
|
|
+ <view class="details-content" :style="{'height':contentH +'px' }">
|
|
|
<template v-if="info">
|
|
|
- <view class="site-name">{{info.locationName}}</view>
|
|
|
- <view class="site-location">
|
|
|
- {{`${info.provinceName}${info.cityName}${info.areaName}${info.address}`}}
|
|
|
+ <view class="site-info">
|
|
|
+ <view class="site-name">{{info.locationName}}</view>
|
|
|
+ <view class="site-location">
|
|
|
+ {{`${info.provinceName}${info.cityName}${info.areaName}${info.address}`}}
|
|
|
+ </view>
|
|
|
+ <view class="site-distance">距离{{getDistance(info.distance)}}</view>
|
|
|
+ <view class="site-time">
|
|
|
+ <text class="time-lable">办公时间</text>
|
|
|
+ <text class="site-time-val">{{info.workTimeRemark}}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="site-distance">距离{{getDistance(info.distance)}}</view>
|
|
|
- <view class="site-time">
|
|
|
- <text class="time-lable">办公时间</text>
|
|
|
- <text class="site-time-val">{{info.workTimeRemark}}</text>
|
|
|
+ <view class="sever-box" :style="{'height':serveH +'px' }">
|
|
|
+ <siteServe :height="serveH" :mapLocationId="info.mapLocationId" />
|
|
|
</view>
|
|
|
</template>
|
|
|
-
|
|
|
- </scroll-view>
|
|
|
+ </view>
|
|
|
+ <!-- <scroll-view :style="{'height':scrollH +'px' }" scroll-y="true" :show-scrollbar="false">
|
|
|
+
|
|
|
+ </scroll-view> -->
|
|
|
<view class="details-btn">
|
|
|
<view class="site-btn" @click.stop="getPhoneCall(info.mapContactList)">
|
|
|
<svg t="1733972888261" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
|
@@ -50,28 +58,91 @@
|
|
|
import { openMap } from "@/utils/openApp.js"
|
|
|
import { distanceCalculate } from "@/utils/tool.js";
|
|
|
import telList from "./telList.vue"
|
|
|
+ import siteServe from "./siteServe.vue"
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- scrollH: 0,
|
|
|
+ contentH: 0,
|
|
|
+ serveH: 0,
|
|
|
info: null,
|
|
|
}
|
|
|
},
|
|
|
- components: { telList },
|
|
|
+ components: { telList, siteServe },
|
|
|
created() {
|
|
|
- const windowHeight = uni.getSystemInfoSync().windowHeight;
|
|
|
- this.scrollH = windowHeight * 0.7 - uni.upx2px(150)
|
|
|
+
|
|
|
},
|
|
|
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(".site-info")
|
|
|
+ .boundingClientRect((data) => {
|
|
|
+ const { height } = data || {};
|
|
|
+ const h = this.contentH - height;
|
|
|
+ this.serveH = h;
|
|
|
+ })
|
|
|
+ .exec();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
+
|
|
|
getDistance(num) {
|
|
|
return distanceCalculate(num)
|
|
|
},
|
|
@@ -82,12 +153,37 @@
|
|
|
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) {
|
|
|
this.info = res;
|
|
|
this.$refs.siteDetailsPopupRef.open()
|
|
|
+ this.calculateHeight()
|
|
|
+ },
|
|
|
+ calculateHeight() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -98,7 +194,7 @@
|
|
|
z-index: 1002;
|
|
|
|
|
|
.details-box {
|
|
|
- height: 70vh;
|
|
|
+ height: 80vh;
|
|
|
padding: 0 30rpx;
|
|
|
background-color: #fff;
|
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
@@ -148,8 +244,8 @@
|
|
|
|
|
|
.details-btn {
|
|
|
width: 100%;
|
|
|
- height: 150rpx;
|
|
|
- padding-top: 30rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
@@ -185,5 +281,12 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+
|
|
|
+ .sever-box {
|
|
|
+
|
|
|
+ width: 100%;
|
|
|
+ // background-color: hotpink;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|