房屋地图

src/project/saas/AppBuilding/components/gridMap.vue

@@ -108,7 +108,7 @@ export default {
 
     search () {
       this.$loading()
-      this.$http.post(`/app/appgirdinfo/list?size=1000&girdName=${this.girdName}`).then((res) => {
+      this.$http.post(`/app/appgirdinfo/list?size=100&girdName=${this.girdName}`).then((res) => {
         if (res.code === 0) {
           if (res.data.records.length) {
             this.girdList = res.data.records

src/project/saas/AppBuilding/components/searchMap.vue

@@ -11,18 +11,6 @@
         </div>
       </div>
     </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>
@@ -112,6 +100,24 @@
       </div>
       <div class="popup-btn" @click="toDetail(building.id)">查看楼栋模型</div>
     </u-popup>
+    <u-popup v-model="show" mode="bottom" border-radius="14" height="70%">
+      <div class="grid-wrapper">
+        <div class="title">请选择居民</div>
+        <scroll-view scroll-y="true" class="grid-info">
+          <div
+            class="grid-item"
+            v-for="(item, index) in buildList"
+            @click="getBuildingInfo(item)"
+            :key="index">
+            <image src="./img/user-icon.png" />
+            <div class="right">
+              <h3>{{ item.residentName }}</h3>
+              <p>{{ item.areaName || '' }}{{ item.createAddress }}</p>
+            </div>
+          </div>
+        </scroll-view>
+      </div>
+    </u-popup>
   </div>
 </template>
 
@@ -141,6 +147,7 @@ export default {
       showPop: false,
       retryMapCount: 0,
       building: {},
+      isShowGrid: false,
       buildPopup: false
     }
   },
@@ -310,6 +317,7 @@ export default {
     },
     search() {
       this.buildList = []
+      this.$loading()
       this.$http.post('/app/appcommunityhouseinfo/queryHouseByName', null, {
         params: {
           current: 1,
@@ -374,6 +382,72 @@ export default {
     box-sizing: border-box;
   }
 
+  .grid-wrapper {
+    height: 100%;
+    overflow: hidden;
+
+    .title {
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      color: #333;
+      font-size: 32px;
+      font-weight: 800;
+    }
+
+    scroll-view {
+      height: calc(100% - 80px);
+    }
+
+    .grid-item {
+      display: flex;
+      align-items: center;
+      padding: 20px 24px;
+      color: #333;
+      font-size: 28px;
+      font-weight: 500;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      border-bottom: 1px solid #eee;
+
+      image {
+        width: 50px;
+        height: 50px;
+        margin-right: 16px;
+      }
+
+      .right {
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        h2 {
+          margin-bottom: 12px;
+          color: #333;
+          font-size: 30px;
+          font-weight: 600;
+        }
+
+        p {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          color: #666;
+        }
+      }
+
+      &:last-child {
+        border: none;
+      }
+
+      &:active {
+        background: #eee;
+      }
+    }
+  }
+
   .top {
     display: flex;
     position: fixed;