BUG 25666

src/apps/AppBuilding/components/searchMap.vue

@@ -68,6 +68,41 @@
       </div>
       <div class="popup-btn" @click="toDetail(detailInfo.build.communityId)">查看楼栋模型</div>
     </u-popup>
+    <u-popup v-model="buildPopup" mode="bottom" border-radius="14">
+      <div class="popup">
+        <div class="bg"/>
+        <div class="title">{{ building.createAddress || '' }}</div>
+        <div class="info-flex">
+          <span class="label">所属社区</span>
+          <span class="value">{{ building.areaName }}</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">所属小区</span>
+          <span class="value">{{ building.communityName }}</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">房屋类型</span>
+          <span class="value">{{ $dict.getLabel('communityBuildingType', building.buildingType) }}</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">所属网格</span>
+          <span class="value" v-text="building.girdName||''"/>
+        </div>
+        <div class="info-flex">
+          <span class="label">网格管理员</span>
+          <span class="value" v-text="building.girdMemberNames||''"/>
+        </div>
+        <div class="info-flex">
+          <span class="label">楼栋长</span>
+          <span
+              class="value">{{ building.managerName || '' }}&nbsp;&nbsp;{{building.managerPhone || '' }}
+            <img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(detailInfo.build.managerPhone)"
+                 class="phone-icon" v-if="detailInfo.build.managerPhone">
+          </span>
+        </div>
+      </div>
+      <div class="popup-btn" @click="toDetail(building.communityId)">查看楼栋模型</div>
+    </u-popup>
   </div>
 </template>
 
@@ -93,7 +128,9 @@ export default {
         build: {}
       },
       showPop: false,
-      retryMapCount: 0
+      retryMapCount: 0,
+      building: {},
+      buildPopup: false
     }
   },
   computed: {...mapState(['user'])},
@@ -145,7 +182,8 @@ export default {
           enableDefaultStyle: false, // 关闭默认样式
           geometries: points?.map(e => ({
             position: new TMap.LatLng(e.lat, e.lng),
-            content: `${e.createAddress} | ${e.houseNum}户`
+            content: `${e.createAddress} | ${e.houseNum}户`,
+            properties: {...e}
           })) || [],
           zoomOnClick: true
         })
@@ -170,27 +208,24 @@ export default {
               })
             } else {
               //点标记样式
-              // 以下代码为基于DOMOverlay实现聚合点气泡
+              // 创建气泡DOM元素
-              function ClusterBubble(options) {
+              class ClusterBubble extends TMap.DOMOverlay {
-                TMap.DOMOverlay.call(this, options);
+                constructor(options) {
+                  super(options);
                 }
 
-              ClusterBubble.prototype = new TMap.DOMOverlay();
+                onInit(options) {
-              ClusterBubble.prototype.onInit = function (options) {
                   this.content = options.content;
                   this.position = options.position;
                 };
-              // 销毁时需要删除监听器
+
-              ClusterBubble.prototype.onDestroy = function () {
+                onDestroy() {
                   this.dom.removeEventListener('click', this.onClick);
                   this.removeAllListeners();
-              };
+                }
-              ClusterBubble.prototype.onClick = function () {
+
-                this.emit('click');
+                createDOM() {
-              };
+                  let dom = document.createElement('div');
-              // 创建气泡DOM元素
-              ClusterBubble.prototype.createDOM = function () {
-                var dom = document.createElement('div');
                   dom.classList.add('marker');
                   dom.innerText = this.content;
 
@@ -198,9 +233,11 @@ export default {
                   this.onClick = this.onClick.bind(this);
                   // pc端注册click事件，移动端注册touchend事件
                   dom.addEventListener('click', this.onClick);
+                  dom.addEventListener('touchend', this.onClick);
                   return dom;
                 };
-              ClusterBubble.prototype.updateDOM = function () {
+
+                updateDOM() {
                   if (!this.map) {
                     return;
                   }
@@ -213,10 +250,18 @@ export default {
                   this.dom.style.transform = `translate(${left}, ${top})`;
                   this.emit('dom_updated');
                 };
+
+                onClick() {
+                  this.emit('click');
+                }
+              }
+
               let {content} = item.geometries?.[0] || {},
                   overlay = new ClusterBubble({map, position: item.center, content})
               overlay.on('click', () => {
-                map.fitBounds(item.bounds);
+                this.buildPopup = true
+                this.building = item.geometries?.[0]?.properties || {}
+                console.log(this.building)
               })
               markers.push(overlay)
             }
@@ -288,7 +333,7 @@ export default {
     },
     getBuildingInfo(item) {
       this.$http.post(`/app/appcommunityhouseinfo/queryDetailByIdWithBuilding?buildId=${item.buildingId}&houseId=${item.id}`).then(res => {
-        if (res.code == 0) {
+        if (res?.data) {
           this.show = false
           this.showPop = true
           this.detailInfo = res.data