bug

src/apps/AppMailList/AppMailList.vue

@@ -1,20 +1,31 @@
 <template>
   <div class="AppMailList">
     <AiTopFixed>
-      <div class="header-top">
+      <!-- <div class="header-top">
         <div>区域选择</div>
         <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName">
           <span class="label" v-if="areaName">{{ areaName }}</span>
           <span v-else>请选择</span>
           <u-icon name="arrow-right" color="#666" size="24" style="margin-left:4px;" />
         </AiAreaPicker>
+      </div> -->
+      <div class="currentLeft-top">
+        <div class="left">
+          <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName">
+            <span class="label" v-if="areaName">{{ areaName }}</span>
+            <span v-else>请选择</span>
+            <u-icon name="arrow-down" color="#666" size="24" style="margin-left:4px;" />
+          </AiAreaPicker>
+        </div>
+
+        <u-search v-model="keyword" :clearabled="true" placeholder="请输入标题" :show-action="false" bg-color="#F5F5F5" search-icon-color="#ccc" color="#666" height="58" @search="getList" @clear="handerClear"></u-search>
       </div>
     </AiTopFixed>
     <div class="list-content">
       <u-index-list :scrollTop="scrollTop" :index-list="indexList">
         <div v-for="(letter, index) in indexList" :key="index">
           <u-index-anchor :index="letter"/>
-          <div class="item" v-for="(item, index) in list.filter(e=>e.nameInitials==letter)">
+          <div class="item" v-for="(item, index) in list.filter(e=>e.nameInitials==letter)" :key="index">
             <div class="title">{{item.label}}</div>
             <div class="phone-list">
               <div class="item-info">
@@ -53,7 +64,8 @@ export default {
       list: [],
       indexList: [],
       areaId: '',
-      areaName: ''
+      areaName: '',
+      keyword: ''
     }
   },
   computed: { ...mapState(['user']) },
@@ -77,13 +89,18 @@ export default {
     callPhone(phone) {
       uni.makePhoneCall({phoneNumber: phone})
     },
+    handerClear() {
+      this.keyword = ''
+      this.getList()
+    },
     getList() {
       this.$http.post(`/app/appconvenientaddressbook/list`, null, {
         params: {
           areaId: this.areaId,
           isPublic: 1,
           resource: "portal",
-          size: 999
+          size: 999,
+          name: this.keyword
         }
       }).then(res => {
         if (res.code == 0) {
@@ -138,7 +155,7 @@ export default {
         width: 680px;
         padding: 32px 48px;
         box-sizing: border-box;
-        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.02);
+        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
         p{
           font-size: 32px;
           font-family: PingFangSC-Medium, PingFang SC;
@@ -148,7 +165,6 @@ export default {
           word-break: break-all;
           margin-bottom: 8px;
           width: 100%;
-          word-break: break-all;
         }
         .phone{
           font-size: 26px;
@@ -172,7 +188,7 @@ export default {
     height: 112px;
     line-height: 112px;
     background: #3975C6;
-    box-shadow: 0px 1px 0px 0px #EEEEEE;
+    box-shadow: 0 1px 0 0 #EEEEEE;
     position: fixed;
     bottom: 0;
     left: 0;
@@ -192,6 +208,24 @@ export default {
     position: absolute;
     top: 60px;
     right: 64px;
-  } 
+  }
+  .currentLeft-top {
+    display: flex;
+    align-items: center;
+
+    .left {
+      width: 40%;
+      display: flex;
+      align-items: center;
+
+      img {
+        width: 48px;
+        height: 48px;
+      }
+    }
+  }
+  ::v-deep  .u-search{
+    margin-bottom: 0!important;
+  }
 }
-</style>
+</style>