目录名称修正

src/saas/AppBuilding/AppBuilding.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="AppBuilding">
+    <search-map v-if="show"/>
+  </div>
+</template>
+
+<script>
+
+import SearchMap from "./components/searchMap";
+
+export default {
+  name: 'AppBuilding',
+  components: {SearchMap},
+  appName: '以房找人',
+  data() {
+    return {
+      show: true
+    }
+  },
+  onShow() {
+    this.show = false
+    this.$nextTick(() => {
+      this.show = true
+    })
+    document.title = "以房找人"
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body {
+  height: 100%;
+}
+
+.AppBuilding {
+  height: 100%;
+}
+</style>

src/saas/AppBuilding/add.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="add">
+    <div class="title">
+      <span class="tips"/>房屋信息
+    </div>
+    <div class="pad-l32">
+      <div class="item">
+        <span class="label">房屋面积</span>
+        <div class="value">
+          <u-input type="digit" placeholder="请输入" v-model="houseInfo.houseArea" input-align="right"
+                   placeholder-style="color:#999;font-size:16px;" height="48" :maxlength="7"/>
+        </div>
+      </div>
+      <div class="item">
+        <span class="label">居住现状</span>
+        <div class="value" @click="selectClick('houselivingStatus', 'livingStatus')">
+          <span
+              :class="houseInfo.livingStatus === '' ? 'color-999' : ''">{{
+              $dict.getLabel('houselivingStatus', houseInfo.livingStatus) || '请选择'
+            }}</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"/>
+        </div>
+      </div>
+      <div class="item">
+        <span class="label">房屋用途</span>
+        <div class="value" @click="selectClick('houseUseStatus', 'houseUse')">
+          <span
+              :class="houseInfo.houseUse === '' ? 'color-999' : ''">{{
+              $dict.getLabel('houseUseStatus', houseInfo.houseUse) || '请选择'
+            }}</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"/>
+        </div>
+      </div>
+      <div class="item" v-if="houseInfo.livingStatus == 1">
+        <span class="label">承租情况</span>
+        <div class="value" @click="selectClick('houseLeaseSituation', 'leaseSituation')">
+          <span
+              :class="houseInfo.leaseSituation === '' ? 'color-999' : ''">{{
+              $dict.getLabel('houseLeaseSituation', houseInfo.leaseSituation) || '请选择'
+            }}</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"/>
+        </div>
+      </div>
+      <div class="item" v-if="houseInfo.livingStatus == 1">
+        <span class="label">起租日期</span>
+        <div class="value" @click="dateShow=true">
+          <span :class="houseInfo.startDate === '' ? 'color-999' : ''">{{ $dateFormat(houseInfo.startDate,'YYYY-MM-DD') || '请选择' }}</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"/>
+        </div>
+      </div>
+      <div class="item" v-if="houseInfo.livingStatus == 1">
+        <span class="label">租房备案证明</span>
+        <div class="value" @click="selectClick('isFilingCertificateStatus', 'isFilingCertificate')">
+          <span
+              :class="houseInfo.isFilingCertificate === '' ? 'color-999' : ''">{{
+              $dict.getLabel('isFilingCertificateStatus', houseInfo.isFilingCertificate) || '请选择'
+            }}</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"/>
+        </div>
+      </div>
+    </div>
+    <div class="line-bg"/>
+    <div class="title">
+      <span class="tips"/>房主信息
+      <AiPagePicker class="select" :selected.sync="houseInfo.owner">选择人员</AiPagePicker>
+    </div>
+    <div class="pad-l32">
+      <div class="item" v-for="(item, index) in houseInfo.owner" :key="index">
+        <span class="label">{{ item.name }}</span>
+        <div class="value" @click="tableRelationSelect('owner', index)">
+          <span
+              :class=" item.relation === '' ? 'color-999' : ''">{{
+              $dict.getLabel('householdRelation', item.relation) || '与户主关系'
+            }}</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"/>
+        </div>
+      </div>
+    </div>
+    <div class="line-bg"/>
+    <div class="title">
+      <span class="tips"/>承租人信息
+      <AiPagePicker class="select" :selected.sync="houseInfo.renter">选择人员</AiPagePicker>
+    </div>
+    <div class="pad-l32">
+      <div class="item" v-for="(item, index) in houseInfo.renter" :key="index">
+        <span class="label">{{ item.name }}</span>
+        <div class="value" @click="tableRelationSelect('renter', index)">
+          <span
+              :class=" item.relation === '' ? 'color-999' : ''">{{
+              $dict.getLabel('householdRelation', item.relation) || '与户主关系'
+            }}</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"/>
+        </div>
+      </div>
+    </div>
+    <div class="line-bg"/>
+    <div class="title">
+      <span class="tips"/>实际居住人员
+      <AiPagePicker class="select" :selected.sync="houseInfo.live">选择人员</AiPagePicker>
+    </div>
+    <div class="pad-l32">
+      <div class="item" v-for="(item, index) in houseInfo.live" :key="index">
+        <span class="label">{{ item.name }}</span>
+        <div class="value" @click="tableRelationSelect('live', index)">
+          <span
+              :class=" item.relation === '' ? 'color-999' : ''">{{
+              $dict.getLabel('householdRelation', item.relation) || '与户主关系'
+            }}</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"/>
+        </div>
+      </div>
+    </div>
+    <div class="footer" @click="submit">
+      <div class="btn">保存</div>
+    </div>
+
+    <u-picker mode="time" v-model="dateShow" :params="deteParams" start-year="2010" @confirm="dateConfirm">请选择
+    </u-picker>
+    <u-select v-model="showSelect" :list="selectList" label-name="dictName" value-name="dictValue"
+              @confirm="confirmSelect"/>
+    <u-select v-model="showRelation" :list="$dict.getDict('householdRelation')" label-name="dictName"
+              value-name="dictValue" @confirm="confirmRelation"/>
+  </div>
+</template>
+
+<script>
+import {mapActions, mapState} from 'vuex'
+
+export default {
+
+  data() {
+    return {
+      houseInfo: {},
+      showSelect: false,
+      selectList: [],
+      formName: '',
+      dateShow: false,
+      deteParams: {year: true, month: true, day: true, hour: false, minute: false, second: false},
+      showRelation: false,
+      tableName: '',
+      tableIndex: '',
+      lockSelector: false
+    }
+  },
+  computed: {...mapState(['user'])},
+  created() {
+    this.$dict.load('householdRelation', 'houselivingStatus', 'houseLeaseSituation', 'houseUseStatus',
+        'isFilingCertificateStatus', 'communityBuildingType', 'yesOrNo', 'BulidResidentType').then(() => {
+      this.getDetail()
+    })
+  },
+  onShow() {
+    document.title = '房屋信息'
+  },
+
+  methods: {
+    ...mapActions(['selectEnterpriseContact']),
+    tableRelationSelect(name, index) {
+      this.tableName = name
+      this.tableIndex = index
+      this.showRelation = true
+    },
+    confirmRelation(e) {
+      this.houseInfo[this.tableName][this.tableIndex].relation = e[0].value
+    },
+    getDetail() {
+      let {id} = this.$route.query
+      id && this.$http.post(`app/appcommunityhouseinfo/queryDetailById?id=${id}`).then(res => {
+        if (res?.data) {
+          this.houseInfo = res.data
+        }
+      })
+    },
+    submit() {
+      this.$http.post(`app/appcommunityhouseinfo/update`, this.houseInfo).then(res => {
+        if (res?.code == 0) {
+          this.$u.toast('提交成功')
+          setTimeout(() => {
+            uni.navigateBack({})
+          }, 600)
+        }
+      })
+    },
+    selectClick(dictName, formName) {
+      this.selectList = this.$dict.getDict(dictName)
+      this.formName = formName
+      this.showSelect = true
+    },
+    confirmSelect(e) {
+      this.houseInfo[this.formName] = e[0].value
+    },
+    dateConfirm(e) {
+      this.houseInfo.startDate = `${e.year}-${e.month}-${e.day} 00:00:00`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add {
+  padding-bottom: 112px;
+
+  .title {
+    width: 100%;
+    height: 96px;
+    line-height: 96px;
+    background: #FFF;
+    font-size: 32px;
+    font-weight: 500;
+    color: #262B36;
+    padding-right: 32px;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    .tips {
+      display: inline-block;
+      width: 8px;
+      height: 32px;
+      background: #4E75FE;
+      box-shadow: 0 8px 24px 2px #C9D8FA;
+      border-radius: 4px;
+      vertical-align: middle;
+      margin-right: 22px;
+    }
+
+    .select {
+      float: right;
+      font-size: 30px;
+      color: #1365DD;
+    }
+  }
+
+  .item {
+    width: 100%;
+    padding: 34px 32px 34px 0;
+    background: #FFFFFF;
+    border-bottom: 1px solid #D8DDE6;
+    display: flex;
+    justify-content: space-between;
+    font-size: 32px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #333;
+    line-height: 44px;
+    box-sizing: border-box;
+
+    .color-999 {
+      color: #999;
+    }
+
+    .value {
+      .u-icon {
+        margin-left: 16px;
+      }
+    }
+  }
+
+  .footer {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
+
+  .btn {
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    text-align: center;
+    background: #1365DD;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFF;
+  }
+
+  .line-bg {
+    width: 100%;
+    height: 16px;
+    background: #F5F5F5;
+  }
+
+  .pad-l32 {
+    padding-left: 32px;
+    background-color: #fff;
+  }
+}
+</style>

src/saas/AppBuilding/components/searchMap.vue

@@ -0,0 +1,597 @@
+<template>
+  <div class="searchMap">
+    <div class="grid-input">
+      <img src="./img/back-icon.png" alt="" class="back-icon" v-if="name && show" @click="show=false">
+      <img src="./img/search-icon.png" alt="" class="search-icon" v-else>
+      <input type="text" class="input" placeholder="请输入姓名、房屋信息" v-model="name" maxlength="10" confirm-type="search"
+             @confirm="search"/>
+      <div class="clear-btn">
+        <img src="./img/del-icon.png" alt="" class="del-icon" v-if="name" @click="clear">
+      </div>
+      <span class="search-btn" @click="search">搜索</span>
+    </div>
+    <div class="search-list" v-if="show">
+      <div class="title border">
+        <img src="./img/search-icon.png" alt="" class="search-icon">{{ name }}
+      </div>
+      <div class="item border" v-for="(item, index) in buildList" :key="index" @click="getBuildingInfo(item)">
+        <img src="./img/user-icon.png" alt="" class="search-icon user-icon">
+        <div class="item-content">
+          <h3>{{ item.residentName }}</h3>
+          <p>{{ item.areaName || '' }}{{ item.createAddress }}</p>
+        </div>
+      </div>
+    </div>
+    <div class="build-btn" @click="toList()">
+      <img src="./img/build-icon.png" alt=""> 楼栋<br/>列表
+    </div>
+    <div class="map-content">
+      <AiTMap :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"/>
+    </div>
+    <u-popup v-model="showPop" mode="bottom" border-radius="14">
+      <div class="popup">
+        <div class="bg"></div>
+        <div class="title">{{ detailInfo.house.createAddress || '' }}</div>
+        <p class="address">{{ detailInfo.community.address || '' }}</p>
+        <div class="info-flex">
+          <span class="label">所属社区</span>
+          <span class="value">{{ detailInfo.build.areaName }}</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">所属小区</span>
+          <span class="value">{{ detailInfo.build.communityName }}</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">房屋类型</span>
+          <span class="value">{{ $dict.getLabel('communityBuildingType', detailInfo.house.buildingType) }}</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">所属网格</span>
+          <span class="value">{{ detailInfo.gird.girdName || '' }}</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">网格管理员</span>
+          <span class="value">{{ detailInfo.gird.girdMemberNames || '' }}</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">楼栋长</span>
+          <span
+              class="value">{{ detailInfo.build.managerName || '' }}&nbsp;&nbsp;{{
+              detailInfo.build.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(detailInfo.build.id)">查看楼栋模型</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.id)">查看楼栋模型</div>
+    </u-popup>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  name:"searchMap",
+  data() {
+    return {
+      ops: {},
+      lib: null,
+      map: null,
+      markerArr: [],
+      show: false,
+      value: '',
+      ClusterBubble: null,
+      name: '',
+      buildList: [],
+      detailInfo: {
+        house: {},
+        build: {},
+        community: {},
+        gird: {}
+      },
+      showPop: false,
+      retryMapCount: 0,
+      building: {},
+      buildPopup: false
+    }
+  },
+  computed: {...mapState(['user', 'config'])},
+  mounted() {
+    this.getCommunityList().then(points => {
+      this.getMarkerCluster(points)
+    })
+  },
+  onShow() {
+    document.title = "以房找人"
+  },
+  created() {
+    this.$dict.load("communityBuildingType")
+  },
+  methods: {
+    getCommunityList() {
+      return this.$http.post('/app/appcommunitybuildinginfo/listByBuilding', null, {
+        params: {
+          current: 1,
+          size: 1000000,
+          areaId: this.user.areaId
+        }
+      }).then(res => {
+        if (res?.data) {
+          this.buildList = res.data
+          return res.data.map(item => {
+            return {
+              ...item,
+              lnglat: [item.lng, item.lat],
+              buildingNumber: item.name || item.buildingNumber,
+              communityName: item.name || item.communityName,
+            }
+          })
+        }
+      })
+    },
+    getMarkerCluster(points, count = 0) {
+      let {lib: TMap, map} = this
+      if (map) {
+        map.setCenter(this.config.latlng)
+        let MarkerCluster = new TMap.MarkerCluster({
+          map, gridSize: 60,
+          enableDefaultStyle: false, // 关闭默认样式
+          geometries: points?.map(e => ({
+            position: new TMap.LatLng(e.lat, e.lng),
+            content: `${e.createAddress} | ${e.houseNum}户`,
+            properties: {...e}
+          })) || [],
+          zoomOnClick: true
+        })
+        let geometries = [], marker, markers = []
+        MarkerCluster.on('cluster_changed', () => {
+          if (markers.length) {
+            markers.forEach(function (item) {
+              item.destroy();
+            })
+            markers = [];
+          }
+          geometries = []
+          let clusters = MarkerCluster.getClusters()
+          clusters.forEach((item) => {
+            if (item.geometries?.length > 1) {
+              //聚合样式
+              geometries.push({
+                styleId: 'cluster',
+                position: item.center,
+                properties: {...item},
+                content: item.geometries.length?.toString() || "0"
+              })
+            } else {
+              //点标记样式
+              // 创建气泡DOM元素
+              class ClusterBubble extends TMap.DOMOverlay {
+                constructor(options) {
+                  super(options);
+                }
+
+                onInit(options) {
+                  this.content = options.content;
+                  this.position = options.position;
+                };
+
+                onDestroy() {
+                  this.dom.removeEventListener('click', this.onClick);
+                  this.removeAllListeners();
+                }
+
+                createDOM() {
+                  let dom = document.createElement('div');
+                  dom.classList.add('marker');
+                  dom.innerText = this.content;
+
+                  // 监听点击事件，实现zoomOnClick
+                  this.onClick = this.onClick.bind(this);
+                  // pc端注册click事件，移动端注册touchend事件
+                  dom.addEventListener('click', this.onClick);
+                  dom.addEventListener('touchend', this.onClick);
+                  return dom;
+                };
+
+                updateDOM() {
+                  if (!this.map) {
+                    return;
+                  }
+                  // 经纬度坐标转容器像素坐标
+                  let pixel = this.map.projectToContainer(this.position);
+
+                  // 使文本框中心点对齐经纬度坐标点
+                  let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
+                  let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
+                  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', () => {
+                this.buildPopup = true
+                this.building = item.geometries?.[0]?.properties || {}
+              })
+              markers.push(overlay)
+            }
+          });
+          if (marker) {
+            marker.setGeometries(geometries)
+          } else {
+            marker = new TMap.MultiMarker({
+              map, enableCollision: true, geometries,
+              styles: {
+                cluster: new TMap.MarkerStyle({
+                  width: 48,
+                  height: 48,
+                  anchor: {x: 24, y: 24},
+                  src: this.$cdn + "/map/cluster.png",
+                  color: '#fff',
+                  // direction: 'center',
+                  size: 18
+                })
+              },
+            })
+            marker.on('click', (e) => {
+              let {bounds} = e.geometry.properties
+              map.fitBounds(bounds)
+            })
+          }
+        })
+        return Promise.resolve()
+      } else {
+        if (count < 5) {
+          setTimeout(() => {
+            return this.getMarkerCluster(points, ++count)
+          }, 1000)
+        } else Promise.reject("加载失败")
+      }
+    },
+    clear() {
+      this.name = ''
+    },
+    search() {
+      this.buildList = []
+      this.$http.post('/app/appcommunityhouseinfo/queryHouseByName', null, {
+        params: {
+          current: 1,
+          size: 20,
+          areaId: this.user.areaId,
+          name: this.name
+        }
+      }).then(res => {
+        if (res.code == 0 && res.data.length) {
+          this.show = true
+          this.buildList = res.data
+          const points = res.data.map(item => {
+            return {
+              lnglat: [item.lng, item.lat],
+              id: item.id,
+              corpId: item.corpId,
+              areaName: item.areaName,
+              buildingNumber: item.name || item.buildingNumber,
+              communityName: item.name || item.communityName,
+            }
+          })
+          this.getMarkerCluster(points)
+        } else {
+          this.show = false
+          this.$u.toast('未搜索到结果，请换个关键字重试！')
+        }
+      })
+    },
+    getBuildingInfo(item) {
+      this.$http.post(`/app/appcommunityhouseinfo/queryDetailByIdWithBuilding?buildId=${item.buildingId}&houseId=${item.id}`).then(res => {
+        if (res?.data) {
+          this.show = false
+          this.showPop = true
+          this.detailInfo = res.data
+        }
+      })
+    },
+    toList() {
+      uni.navigateTo({url: './list'})
+    },
+    callPhone(phone) {
+      uni.makePhoneCall({phoneNumber: phone})
+    },
+    toDetail(id) {
+      uni.navigateTo({url: `./detail?id=${id}`})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.searchMap {
+  height: 100vh;
+
+  .grid-input {
+    width: calc(100% - 64px);
+    height: 88px;
+    background: #FFF;
+    box-shadow: 0 4px 8px 0 rgba(192, 185, 185, 0.5);
+    border-radius: 16px;
+    position: fixed;
+    top: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 99999;
+    padding: 16px 20px;
+    box-sizing: border-box;
+
+    .search-icon {
+      width: 48px;
+      height: 48px;
+      margin-right: 16px;
+    }
+
+    .input {
+      display: inline-block;
+      padding: 8px 0;
+      height: 32px;
+      line-height: 32px;
+      width: calc(100% - 220px);
+      font-size: 28px;
+      font-family: MicrosoftYaHei;
+      color: #666;
+    }
+
+    .back-icon {
+      width: 16px;
+      height: 32px;
+      margin-right: 24px;
+      vertical-align: super;
+    }
+
+    .clear-btn {
+      display: inline-block;
+      width: 32px;
+      height: 32px;
+      margin-right: 30px;
+    }
+
+    .del-icon {
+      width: 32px;
+      height: 32px;
+      vertical-align: super;
+    }
+
+    .search-btn {
+      display: inline-block;
+      width: 80px;
+      height: 32px;
+      line-height: 32px;
+      text-align: right;
+      font-size: 28px;
+      font-family: MicrosoftYaHei;
+      color: #1365DD;
+      border-left: 1px solid #DEDFE0;
+      vertical-align: top;
+      margin-top: 12px;
+    }
+  }
+
+  .search-list {
+    position: fixed;
+    width: 100%;
+    height: calc(100% - 130px);
+    overflow-y: scroll;
+    top: 128px;
+    left: 0;
+    box-sizing: border-box;
+    z-index: 99999;
+
+    .search-icon {
+      width: 36px;
+      height: 36px;
+      margin-right: 16px;
+      vertical-align: sub;
+    }
+
+    .title {
+      height: 82px;
+      line-height: 82px;
+      font-size: 26px;
+      font-family: MicrosoftYaHeiSemibold;
+      color: #1365DD;
+      padding-left: 44px;
+      background-color: #fff;
+    }
+
+    .item {
+      padding: 22px 44px 24px 44px;
+      background-color: #fff;
+    }
+
+    .item-content {
+      display: inline-block;
+      width: 610px;
+      color: #333;
+
+      h3 {
+        font-size: 28px;
+        font-family: MicrosoftYaHeiSemibold;
+        line-height: 32px;
+        margin-bottom: 8px;
+      }
+
+      p {
+        width: 100%;
+        font-size: 24px;
+        font-family: MicrosoftYaHei;
+        line-height: 32px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .user-icon {
+      vertical-align: top;
+    }
+
+    .border {
+      border-bottom: 1px solid #DEDFE1;
+    }
+  }
+
+  .build-btn {
+    width: 80px;
+    height: 160px;
+    background: #FFF;
+    box-shadow: 0 4px 8px 0 rgba(138, 138, 138, 0.5);
+    border-radius: 8px;
+    position: fixed;
+    bottom: 136px;
+    right: 24px;
+    z-index: 99999;
+    padding: 16px 16px 0;
+    box-sizing: border-box;
+    font-size: 24px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #666;
+    line-height: 30px;
+
+    img {
+      width: 48px;
+      height: 48px;
+      margin-bottom: 8px;
+    }
+  }
+
+  .map-content {
+    width: 100%;
+    height: 100%;
+  }
+
+  .popup {
+    padding: 0 32px 16px;
+
+    .bg {
+      width: 64px;
+      height: 10px;
+      background: #CCC;
+      border-radius: 6px;
+      margin: 32px 0 32px 344px;
+    }
+
+    .title {
+      font-size: 36px;
+      font-family: PingFang-SC-Heavy, PingFang-SC;
+      font-weight: 800;
+      color: #333;
+      line-height: 50px;
+      margin-bottom: 24px;
+    }
+
+    .info-flex {
+      padding: 26px 0 30px 0;
+      width: 100%;
+      border-bottom: 1px solid #D8DDE6;
+      line-height: 40px;
+      font-size: 28px;
+
+      .label {
+        display: inline-block;
+        width: 160px;
+        font-weight: 800;
+        color: #333;
+      }
+
+      .value {
+        color: #666;
+        font-size: 26px;
+
+        .phone-icon {
+          width: 40px;
+          height: 40px;
+          vertical-align: sub;
+          margin-left: 16px;
+        }
+      }
+    }
+  }
+
+  .popup-btn {
+    width: 100%;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    height: 112px;
+    line-height: 112px;
+    text-align: center;
+    background: #1365DD;
+    color: #FFF;
+  }
+
+  ::v-deep.marker {
+    color: #fff;
+    background: #5088FF;
+    padding: 0 32px;
+    width: fit-content;
+    height: 56px;
+    border-radius: 52px;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+
+    &:before {
+      content: " ";
+      display: block;
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: 0;
+      height: 0;
+      transform: translate(-50%, 100%);
+      border: 12px solid transparent;
+      border-top-color: #5088FF;
+    }
+  }
+}
+</style>

src/saas/AppBuilding/detail.vue

@@ -0,0 +1,535 @@
+<template>
+  <div class="detail">
+    <AiTopFixed>
+      <div class="select-flex" @click="showSelect=true">
+        <span class="name" v-text="cellName"/>
+        <span class="btn">单元切换</span>
+      </div>
+      <div class="line-bg"></div>
+      <div class="num-content">
+        <div class="num-item">
+          <div class="content">
+            <h2>{{ numInfo['实有户数'] || 0 }}</h2>
+            <p>实有户数</p>
+          </div>
+        </div>
+        <div class="num-item">
+          <div class="content">
+            <h2>{{ numInfo['实有人口'] || 0 }}</h2>
+            <p>实有人口</p>
+          </div>
+        </div>
+        <div class="num-item">
+          <div class="content">
+            <h2>{{ numInfo['流动人口'] || 0 }}</h2>
+            <p>流动人口</p>
+          </div>
+        </div>
+      </div>
+      <div class="line-bg"></div>
+    </AiTopFixed>
+    <div class="list-content">
+      <div class="left">
+        <div class="item-content" v-for="(item, index) in list" :key="index" @click="getHouseDetail(item.id)">
+          <div class="item">
+            <h2>{{ item.houseCode }}</h2>
+            <p v-text="`${item.livingNumber}人`.replace(/0人/,'无人')"/>
+          </div>
+        </div>
+        <AiEmpty v-if="!list.length" style="padding-bottom:80px;"/>
+      </div>
+    </div>
+    <u-select v-model="showSelect" :list="selectList" label-name="cellName" value-name="eachUnitNumber"
+              @confirm="confirmSelect"/>
+    <u-popup v-model="show" mode="bottom" border-radius="14" height="1000">
+      <div class="popup">
+        <div class="bg"></div>
+        <div class="title">{{ houseInfo.createAddress }}</div>
+        <div class="row-info">
+          <div class="row-item left">
+            <h3>{{ `${houseInfo.houseArea || 0}㎡`.replace(/0㎡/, "未统计") }} </h3>
+            <p>房屋面积</p>
+          </div>
+          <div class="row-item center">
+            <span class="right-line"></span>
+            <span class="left-line"></span>
+            <h3>{{ $dict.getLabel('houseUseStatus', houseInfo.houseUse) || "无" }} </h3>
+            <p>房屋用途</p>
+          </div>
+          <div class="row-item right">
+            <h3>{{ $dict.getLabel('houselivingStatus', houseInfo.livingStatus) || "未使用" }}</h3>
+            <p>居住现状</p>
+          </div>
+        </div>
+        <div class="row-info" v-if="!!houseInfo.leaseSituation">
+          <div class="row-item left">
+            <h3>{{ $dict.getLabel('houseLeaseSituation', houseInfo.leaseSituation) || "无" }}</h3>
+            <p>承租情况</p>
+          </div>
+          <div class="row-item center">
+            <span class="right-line"></span>
+            <span class="left-line"></span>
+            <h3>{{ $dateFormat(houseInfo.startDate,'YYYY-MM-DD') }}</h3>
+            <p>起租日期</p>
+          </div>
+          <div class="row-item right">
+            <h3>{{ houseInfo.isFilingCertificate == 1 ? '有' : '无' }}</h3>
+            <p>租房备案证明</p>
+          </div>
+        </div>
+      </div>
+      <div v-if="houseInfo.owner.length || houseInfo.renter.length">
+        <div class="line-bg"></div>
+        <div class="popup" v-if="houseInfo.owner.length">
+          <div class="title pad-t32">房主信息</div>
+          <div class="info-flex" v-for="(item, index) in houseInfo.owner" :key="index">
+            <div class="item">
+              <span class="label">房主：</span>
+              <span class="value">{{ item.name }}</span>
+            </div>
+            <div class="item">
+              <span class="label">联系方式：</span>{{ item.phone }}
+            </div>
+          </div>
+        </div>
+        <div class="popup" v-if="houseInfo.renter.length">
+          <div class="title pad-t32">承租人信息</div>
+          <div class="info-flex" v-for="(item, index) in houseInfo.renter" :key="index">
+            <div class="item">
+              <span class="label">房主：</span>
+              <span class="value">{{ item.name }}</span>
+            </div>
+            <div class="item">
+              <span class="label">联系方式：</span>{{ item.phone }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="houseInfo.live.length">
+        <div class="line-bg"></div>
+        <div class="popup">
+          <div class="title pad-t32">实际居住人员</div>
+          <div v-for="(item, index) in houseInfo.live" :key="index">
+            <div class="info-flex">
+              <div class="item">
+                <span class="label">居住人：</span>
+                <span class="value">{{ item.name }}</span>
+              </div>
+              <div class="item">
+                <span class="label">联系方式：</span>{{ item.phone }}
+              </div>
+            </div>
+            <div class="info-flex mar-t48">
+              <div class="item">
+                <span class="label">与户主关系：</span>{{ $dict.getLabel('householdRelation', item.relation) }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="pad-b112"></div>
+      <div class="pop-btn" @click="toAdd(houseInfo.id)">编辑修改</div>
+    </u-popup>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  props: ['params'],
+  data() {
+    return {
+      show: false,
+      communityId: '',
+      list: [],
+      houseInfo: {
+        owner: [],
+        renter: [],
+        live: []
+      },
+      numInfo: {},
+      showSelect: false,
+      selectList: [],
+      selectCellIndex: 0,
+      houseId: '',
+      detail: {},
+      eachUnitNumber: 1
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+    cellName() {
+      return this.selectList.find(e => e.eachUnitNumber == this.eachUnitNumber)?.cellName || ""
+    }
+  },
+  onShow() {
+    document.title = "以房找人"
+    this.$dict.load('householdRelation', 'houselivingStatus', 'houseLeaseSituation', 'houseUseStatus',
+        'isFilingCertificateStatus', 'communityBuildingType', 'yesOrNo', 'BulidResidentType')
+    this.getBuilding()
+  },
+  methods: {
+    getSelectList(communityId) {
+      //通过小区ID获取楼栋列表,用来切换楼栋
+      this.$http.post(`/app/appcommunitybuildinginfo/listByUnitNumber`, null, {
+        params: {communityId, size: 999}
+      }).then(res => {
+        if (res?.data) {
+          this.selectList = []
+          let {unitNumber, buildingNumber} = this.detail,
+              {communityName} = res.data.records?.[0]
+          for (let i = 1; i <= unitNumber; i++) {
+            this.selectList.push({
+              eachUnitNumber: i,
+              cellName: `${communityName + buildingNumber}栋${i}单元`
+            })
+          }
+          this.eachUnitNumber = this.selectList[0].eachUnitNumber
+          this.getStatistics()
+          this.getList()
+        }
+      })
+    },
+    getBuilding() {
+      //获取楼栋信息
+      let {id} = this.$route.query
+      this.$http.post(`/app/appcommunitybuildinginfo/queryDetailById`, null, {
+        params: {id}
+      }).then(res => {
+        if (res?.data) {
+          this.detail = res.data
+          this.getSelectList(res.data.communityId)
+        }
+      })
+    },
+    getStatistics() {
+      //获取楼栋统计信息
+      let {id} = this.detail
+      this.$http.post(`app/appcommunitybuildinginfo/statistics`, null, {
+        params: {id, unitNum: this.eachUnitNumber}
+      }).then(res => {
+        if (res?.data) {
+          this.numInfo = res.data.unit
+        }
+      })
+    },
+    getList() {
+      //获取房间列表
+      let {id: buildingId} = this.detail
+      this.$http.post(`app/appcommunityhouseinfo/list`, null, {
+        params: {size: 10000, buildingId, unitNumber: this.eachUnitNumber}
+      }).then(res => {
+        if (res?.data) {
+          this.list = res.data.records
+        }
+      })
+    },
+    getHouseDetail(id) {
+      this.houseId = id
+      this.$http.post(`app/appcommunityhouseinfo/queryDetailById?id=${id}`).then(res => {
+        if (res?.data) {
+          this.houseInfo = res.data
+          this.show = true
+        }
+      })
+    },
+    confirmSelect(e) {
+      this.eachUnitNumber = e[0].value
+      this.getStatistics()
+      this.getList()
+    },
+    toAdd(id) {
+      uni.navigateTo({url: `./add?id=${id}`})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.detail {
+  .select-flex {
+    padding: 20px 40px 40px;
+    box-sizing: border-box;
+    line-height: 50px;
+    display: flex;
+    justify-content: space-between;
+    background-color: #fff;
+
+    .name {
+      width: 560px;
+      word-break: break-all;
+      font-size: 36px;
+      font-weight: 800;
+      color: #333;
+    }
+
+    .btn {
+      white-space: nowrap;
+      color: #1365DD;
+      font-size: 30px;
+    }
+  }
+
+  .num-content {
+    width: 100%;
+    background-color: #fff;
+    box-sizing: border-box;
+    display: flex;
+
+    .num-item {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 142px;
+      padding-top: 20px;
+      box-sizing: border-box;
+
+      .content {
+        width: 120px;
+        text-align: center;
+      }
+
+      h2 {
+        font-size: 36px;
+        font-weight: bold;
+        color: #333;
+        line-height: 42px;
+      }
+
+      p {
+        font-size: 26px;
+        color: #666;
+        line-height: 36px;
+      }
+    }
+  }
+
+  .line-bg {
+    width: 100%;
+    height: 8px;
+    background: #F1F6F9;
+  }
+
+  .list-content {
+    background-color: #fff;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 48px 2px 0 32px;
+    box-sizing: border-box;
+
+    .left {
+      // width: calc(100% - 120px);
+      width: 100%;
+      overflow: hidden;
+
+      .item-content {
+        width: 33%;
+        padding-right: 32px;
+        box-sizing: border-box;
+        float: left;
+      }
+
+      .item {
+        width: 100%;
+        height: 158px;
+        background: #FAFBFF;
+        border-radius: 1px;
+        border: 1px solid #E7E7E7;
+        box-sizing: border-box;
+        text-align: center;
+        font-weight: bold;
+        margin: 0 32px 32px 0;
+
+        h2 {
+          font-size: 38px;
+          color: #5088FF;
+          line-height: 44px;
+          margin: 14px 0 26px 0;
+        }
+
+        p {
+          font-size: 32px;
+          color: #333;
+          line-height: 44px;
+        }
+      }
+
+      .item:nth-of-type(2n) {
+        margin-right: 0;
+      }
+    }
+
+    .right {
+      .item {
+        width: 120px;
+        height: 60px;
+        line-height: 60px;
+        padding: 0 8px;
+        background: #FAFBFF;
+        border-radius: 4px;
+        border: 1px solid #E7E7E7;
+        box-sizing: border-box;
+        font-size: 30px;
+        font-family: DINAlternate-Bold, DINAlternate;
+        color: #787878;
+        letter-spacing: -1px;
+        margin-bottom: 24px;
+      }
+
+      .active {
+        background: #5088FF;
+        border-radius: 2px;
+        border: 1px solid #E7E7E7;
+        color: #fff;
+      }
+    }
+  }
+
+  .popup {
+    padding-left: 32px;
+
+    .bg {
+      width: 64px;
+      height: 10px;
+      background: #CCC;
+      border-radius: 6px;
+      margin: 32px 0 32px 344px;
+    }
+
+    .title {
+      font-size: 36px;
+      font-family: PingFang-SC-Heavy, PingFang-SC;
+      font-weight: 800;
+      color: #333;
+      line-height: 50px;
+      margin-bottom: 40px;
+    }
+
+    .row-info {
+      padding-bottom: 48px;
+
+      .row-item {
+        display: inline-block;
+        width: 33%;
+
+        h3 {
+          font-size: 32px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #4E75FE;
+          line-height: 64px;
+        }
+
+        p {
+          font-size: 28px;
+          color: #666;
+          line-height: 42px;
+        }
+      }
+
+      .left {
+        width: calc(28% - 70px);
+        text-align: center;
+        margin-right: 70px;
+        box-sizing: border-box;
+      }
+
+      .center {
+        width: 36%;
+        text-align: center;
+        box-sizing: border-box;
+        position: relative;
+
+        .left-line {
+          position: absolute;
+          top: 20px;
+          left: 0;
+          height: 64px;
+          border-left: 1px solid #E5E5E5;
+        }
+
+        .right-line {
+          position: absolute;
+          top: 20px;
+          right: 0;
+          height: 64px;
+          border-left: 1px solid #E5E5E5;
+        }
+      }
+
+      .right {
+        width: calc(33% - 40px);
+        text-align: center;
+        margin-left: 40px;
+        box-sizing: border-box;
+      }
+    }
+
+    .info-flex {
+      display: flex;
+      margin-bottom: 24px;
+      padding-right: 70px;
+      box-sizing: border-box;
+
+      .item {
+        flex: 1;
+        font-size: 28px;
+        color: #333;
+        line-height: 30px;
+
+        .label {
+          color: #999;
+          vertical-align: top;
+        }
+
+        .value {
+          display: inline-block;
+          width: calc(100% - 120px);
+          word-break: break-all;
+        }
+      }
+    }
+  }
+
+  .line-bg {
+    width: 100%;
+    height: 30px;
+    background: #F5F6FA;
+  }
+
+  .pad-t32 {
+    padding-top: 32px;
+  }
+
+  .mar-t48 {
+    margin-top: 48px;
+  }
+
+  .pop-btn {
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    text-align: center;
+    font-size: 32px;
+    font-weight: 500;
+    color: #FFF;
+    background: #1365DD;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
+
+  .pad-b112 {
+    padding-bottom: 112px;
+  }
+}
+
+::v-deep .content {
+  padding: 0 !important;
+}
+</style>

src/saas/AppBuilding/list.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="list">
+    <AiTopFixed>
+      <u-search placeholder="小区名称" :show-action="false" v-model="title" @search="current=1,getList()"/>
+    </AiTopFixed>
+    <div class="list-content">
+      <div class="item" v-for="(item, index) in list" :key="index">
+        <div class="item-content" @click="toDetail(item.id)">
+          <p class="title line-two">{{ item.communityName }}</p>
+          <p class="address">{{ item.cellName }}</p>
+          <span class="status" :class="'color'+item.locationStatus"
+                v-text="$dict.getLabel('BuildLocationStatus', item.locationStatus)"/>
+        </div>
+        <div class="item-btn" v-if="item.locationStatus != 1" @click="toMap(item.id, item.areaId)">
+          <span>去定位</span>
+        </div>
+        <div class="item-btn" v-if="item.locationStatus == 1" @click="toMap(item.id, item.areaId)">
+          <span>重新定位</span>
+        </div>
+      </div>
+      <AiEmpty v-if="!list.length"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+
+  data() {
+    return {
+      title: '',
+      current: 1,
+      list: [],
+      isMore: false
+    }
+  },
+  computed: {...mapState(['user'])},
+  mounted() {
+    this.$dict.load('BuildLocationStatus').then(() => {
+      this.getList()
+    })
+    uni.$on('updateList', () => {
+      this.current = 1
+      this.getList()
+    })
+  },
+  onShow() {
+    document.title = "楼栋列表"
+  },
+
+  methods: {
+    getList() {
+      this.$http.post(`/app/appcommunitybuildinginfo/list`, null, {
+        params: {
+          current: this.current,
+          size: 10,
+          areaId: this.user.areaId,
+          communityName: this.title
+        }
+      }).then(res => {
+        if (res?.data) {
+          if (res.data.records.length < 10) {
+            this.isMore = true
+          }
+
+          res.data.records.forEach(e => {
+            e.cellName = `${e.communityName + e.buildingNumber}栋`
+          })
+          if (this.current > 1 && this.current > res.data.pages) {
+            return
+          }
+          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
+          this.pages = res.data.pages
+        }
+      })
+    },
+    toDetail(id) {
+      uni.navigateTo({url: `./detail?id=${id}`})
+    },
+    toMap(id, areaId) {
+      uni.navigateTo({url: `./map?id=${id}&areaId=${areaId}`})
+    }
+
+  },
+  onReachBottom() {
+    if (this.isMore) return
+
+    this.current++
+
+    this.$nextTick(() => {
+      this.getList()
+    })
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.list {
+  padding-bottom: 20px;
+  .list-content {
+    padding: 32px 32px 0;
+    background-color: #F5F5F5;
+
+    .item {
+      width: 100%;
+      background: #FFF;
+      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
+      border-radius: 8px;
+      box-sizing: border-box;
+      position: relative;
+      overflow: hidden;
+      margin-bottom: 32px;
+
+      .item-content {
+        padding: 32px 32px 42px 32px;
+      }
+
+      .title {
+        width: calc(100% - 60px);
+        word-break: break-all;
+        font-size: 32px;
+        color: #333;
+        line-height: 44px;
+      }
+
+      .address {
+        width: 100%;
+        word-break: break-all;
+        font-size: 28px;
+        color: #999;
+        line-height: 40px;
+      }
+
+      .status {
+        width: 160px;
+        height: 40px;
+        line-height: 36px;
+        font-size: 26px;
+        font-weight: 500;
+        position: absolute;
+        right: -38px;
+        top: 24px;
+        -webkit-transform: rotate(90deg);
+        transform: rotate(45deg);
+        text-align: center;
+      }
+
+      .color0 {
+        background: #FFECEF;
+        color: #f46;
+      }
+
+      .color1 {
+        background: #EEF5FF;
+        color: #5A98F2;
+      }
+
+      .item-btn {
+        width: 100%;
+        padding: 20px 32px 20px 0;
+        border-top: 1px solid #eee;
+        text-align: right;
+        box-sizing: border-box;
+
+        span {
+          display: inline-block;
+          width: 160px;
+          height: 56px;
+          line-height: 56px;
+          text-align: center;
+          border-radius: 28px;
+          border: 1px solid #1365DD;
+          font-size: 28px;
+          color: #1365DD;
+        }
+      }
+    }
+
+    .line-two {
+      text-overflow: -o-ellipsis-lastline;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+  }
+}
+</style>

src/saas/AppBuilding/map.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="map">
+    <div class="build-btn">
+      <img src="./components/img/model-icon.png" alt="" @click="toDetail"> 楼栋<br/>模型
+    </div>
+    <div class="build-btn locate">
+      <img src="https://cdn.cunwuyun.cn/dvcp/h5/Location2.png" alt="" @click="getLocale"/>
+      当前<br>位置
+    </div>
+    <div class="map-content">
+      <AiTMap v-if="user.areaId" :areaId="user.areaId" :map.sync="map" :lib.sync="lib" :ops="ops"
+              :libraries="['service', 'tools']"/>
+    </div>
+    <div class="footer">
+      <div class="btn" @click="confirm">确认定位</div>
+    </div>
+    <!-- <u-popup v-model="show" mode="bottom" border-radius="14">
+      <div class="popup">
+        <div class="bg"></div>
+        <div class="title">恒大城西社区居委会</div>
+        <p class="address">山东省济南市历城区王舍人街道恒大商业广场蓝天新城</p>
+        <div class="info-flex">
+          <span class="label">所属社区</span>
+          <span class="value">后西一街袁集村</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">所属小区</span>
+          <span class="value">蓝天新城世纪花园</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">房屋类型</span>
+          <span class="value">单元(公寓)楼</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">所属网格</span>
+          <span class="value">蓝天新城基础网格一</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">网格管理员</span>
+          <span class="value">林珊珊</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">楼栋长</span>
+          <span class="value">林珊珊&nbsp;&nbsp;13782951281
+            <img :src="$cdn + 'common/phone.png'" alt="" @click="call(item)" class="phone-icon">
+          </span>
+        </div>
+      </div>
+      <div class="popup-btn">查看楼栋模型</div>
+    </u-popup> -->
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  data() {
+    return {
+      ops: {},
+      lib: null,
+      map: null,
+      markerLayer: '',
+      isFlag: false,
+      latLng: {lat: '', lng: ''},
+      retryTimes: 0
+    }
+  },
+  computed: {...mapState(['user',])},
+  mounted() {
+    this.initMap()
+  },
+  onShow() {
+    document.title = "以房找人"
+  },
+  methods: {
+    initMap() {  //初始化地图
+      this.$nextTick(() => {
+        let {map, retryTimes} = this
+        if (map) {
+          map.setZoom(15)
+          map.on("click", (evt) => {
+            this.handleMapClick(evt)
+          });
+        } else {
+          if (retryTimes < 5)
+            setTimeout(() => {
+              this.retryTimes++
+              this.initMap()
+            }, 1000)
+        }
+      })
+    },
+    getLocale() {
+      wx.getLocation({
+        type: 'gcj02',
+        success: res => {
+          let {latitude: lat, longitude: lng} = res
+          this.handleMapClick({latlng: {lat, lng}})
+        }
+      })
+    },
+    handleMapClick(evt) {
+      let {lib: TMap, map} = this
+      if (this.markerLayer) {
+        this.markerLayer.setMap(null);
+      }
+      this.markerLayer = new TMap.MultiMarker({id: 'marker-layer', map});
+      this.markerLayer.add({
+        position: evt.latLng
+      });
+      this.latLng = evt.latlng
+    },
+    confirm() {
+      if (!this.latLng.lat) {
+        return this.$u.toast(`未获取到定位信息，无法定位`)
+      }
+      let {id} = this.$route.query
+      this.$http.post(`/app/appcommunitybuildinginfo/updateLocation`, null, {
+        params: {id, ...this.latLng}
+      }).then(res => {
+        if (res?.code == 0) {
+          this.$u.toast('提交成功')
+          uni.$emit('updateList')
+          setTimeout(() => {
+            uni.navigateBack({})
+          }, 600)
+        }
+      })
+    },
+    toDetail() {
+      uni.navigateTo({url: `./detail?id=${this.$route.query.id}`})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body {
+  height: 100%;
+}
+
+.map {
+  height: 100vh;
+
+  .build-btn {
+    width: 80px;
+    height: 160px;
+    background: #FFF;
+    box-shadow: 0 4px 8px 0 rgba(138, 138, 138, 0.5);
+    border-radius: 8px;
+    position: fixed;
+    bottom: 136px;
+    right: 24px;
+    z-index: 99999;
+    padding: 16px 16px 0;
+    box-sizing: border-box;
+    font-size: 24px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #666;
+    line-height: 30px;
+
+    &.locate {
+      transform: translateY(calc(-100% - 20px));
+    }
+
+    img {
+      width: 48px;
+      height: 48px;
+      margin-bottom: 8px;
+    }
+  }
+
+  .map-content {
+    width: 100%;
+    height: 100%;
+  }
+
+  .footer {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 99999;
+    display: flex;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    height: 112px;
+    line-height: 112px;
+    text-align: center;
+
+    .click {
+      flex: 1;
+      color: #333;
+      background-color: #fff;
+    }
+
+    .btn {
+      flex: 2;
+      background: #1365DD;
+      color: #FFF;
+    }
+  }
+}
+</style>