2

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

@@ -1,14 +1,23 @@
 <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 class="top">
+      <AiPagePicker class="left" type="custom" @select="handleSelectGird"
+                    :ops="{url:'./SelectGird',label: 'girdName'}">
+        <div class="gird-content">
+          <image src="./img/gird--select-icon.png" class="avatras"/>
+          <div class="label">{{ form.girdName || '网格选择' }}</div>
+          <u-icon name="arrow-right" color="#cccccc" size="26" style="margin-left:4px;"></u-icon>
+        </div>
+      </AiPagePicker>
+      <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-w.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>
       </div>
-      <span class="search-btn" @click="search">搜索</span>
     </div>
     <div class="search-list" v-if="show">
       <div class="title border">
@@ -127,6 +136,7 @@ export default {
       markerArr: [],
       show: false,
       value: '',
+      form: {girdName: '', id: ''},
       ClusterBubble: null,
       name: '',
       buildList: [],
@@ -155,6 +165,10 @@ export default {
     this.$dict.load("communityBuildingType")
   },
   methods: {
+    handleSelectGird(v) {
+      this.form = v || {}
+      // this.getGridList(v?.id, true)
+    },
     getCommunityList() {
       return this.$http.post('/app/appcommunitybuildinginfo/listByBuilding', null, {
         params: {
@@ -365,34 +379,68 @@ export default {
 .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;
+  * {
+    box-sizing: border-box;
+  }
+
+  .top {
+    display: flex;
     position: fixed;
-    top: 24px;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 99999;
-    padding: 16px 20px;
+    align-items: center;
+    justify-content: space-between;
+    top: 0;
+    left: 0;
+    z-index: 1111;
+    width: 100%;
+    height: 112px;
+    padding: 0 32px;
+    background: #FFF;
     box-sizing: border-box;
 
+    .gird-content {
+      display: flex;
+      align-items: center;
+
+      image {
+        width: 32px;
+        height: 34px;
+        margin-right: 16px;
+      }
+
+      .label {
+        max-width: 120px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: #666666;
+        font-size: 28px;
+      }
+    }
+
+    .left {
+      flex: 1;
+    }
+  }
+
+  .grid-input {
+    display: flex;
+    align-items: center;
+    width: 460px;
+    height: 64px;
+    background: #F5F5F5;
+    border-radius: 32px;
+    padding: 0 36px;
     .search-icon {
-      width: 48px;
-      height: 48px;
+      width: 32px;
+      height: 32px;
       margin-right: 16px;
     }
 
     .input {
-      display: inline-block;
-      padding: 8px 0;
-      height: 32px;
-      line-height: 32px;
-      width: calc(100% - 220px);
+      flex: 1;
+      height: 64px;
+      width: 100%;
       font-size: 28px;
-      font-family: MicrosoftYaHei;
       color: #666;
     }
 
@@ -404,30 +452,13 @@ export default {
     }
 
     .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;
     }
   }
 
@@ -588,9 +619,8 @@ export default {
   ::v-deep.marker {
     color: #fff;
     background: #5088FF;
-    padding: 0 32px;
     width: fit-content;
-    height: 56px;
+    padding: 10px 32px;
     border-radius: 52px;
     transform: translate(-50%, -50%);
     display: flex;