区域选择和搜索框

src/apps/AppGridManagement/AddFamily.vue

@@ -1,9 +1,15 @@
 <template>
   <div class="AddFamily">
     <div class="search">
-      <div class="searchBox">
+      <div class="left">
-        <u-search v-model="value" placeholder:clearabled="true" placeholder="搜索" :show-action="false" bg-color="#F5F5F5" search-icon-color="#999" color="#999" height="58" @search="getListInit" @clear="value='',getListInit"></u-search>
+        <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" style="color: #666">
+          <u-icon name="map-fill" color="#3192F4" size="20px" style="vertical-align: text-bottom"></u-icon>
+          <span style="margin-left: 4px" v-if="areaName">{{ areaName }}</span>
+          <span v-else>请选择</span>
+          <u-icon name="arrow-down" color="#666" size="28" style="margin-left: 4px" />
+        </AiAreaPicker>
       </div>
+      <u-search v-model="value" placeholder:clearabled="true" placeholder="搜索" :show-action="false" bg-color="#F5F5F5" search-icon-color="#999" color="#999" height="58" @search="getListInit" @clear="value='',getListInit"></u-search>
     </div>
     <div class="userList">
       <ul v-for="(item,index) in list" :key="index">
@@ -22,7 +28,7 @@
                   <span class="user-name">{{item.name}}</span>
                   <span class="user-tel">{{item.phone}}</span>
                  </div>
-                <div class="idCard">{{item.idNumber && item.idNumber.replace(/(.{6}).*(.{4})/,"$1********$2")}}</div>
+                <div class="idCard">{{item.idNumber && item.idNumber.replace(/^(\d{6})\d{8}(.{4}$)/g, `$1${Array(9).join('*')}$2`)}}</div>
                 <div class="address">{{item.currentAreaName || '' + item.currentAddress}}</div>
               </div>
             </div>
@@ -46,13 +52,15 @@ export default {
       value: '',
       checked: true,
       userList: {},
-      userId: ''
+      userId: '',
+      areaId: '',
+      areaName:''
     }
   },
   computed: { ...mapState(['user']) },
   methods: {
     getList(){
-      this.$http.post(`/app/appresident/list?residentType=0&areaId=${this.user.areaId}&householdName=1&current=${this.current}&con=${this.value}`).then((res) => {
+      this.$http.post(`/app/appresident/list?residentType=0&areaId=${this.areaId}&householdName=1&current=${this.current}&con=${this.value}`).then((res) => {
         if (res.code == 0) {
           res.data.records.map((item) => {
             item.checked = false
@@ -84,7 +92,7 @@ export default {
         }
       })
       if(!checkUserList.length) {
-        this.$u.toast('请选择家庭')
+        return this.$u.toast('请选择家庭')
       }
       this.$http.post(`/app/appgirdmemberresident/add`, {residentList:checkUserList}).then((res) => {
         if (res.code == 0) {
@@ -97,10 +105,16 @@ export default {
       }).catch((err) => {
          this.$u.toast(err)
       })
-    }
+    },
+    areaSelect(e) {
+      this.areaId =e
+      this.getListInit()
+    },
   },
   onLoad(option) {
     this.userId = option.id
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
     console.log(this.userId)
   },
   onShow() {
@@ -118,26 +132,16 @@ export default {
 .AddFamily {
   background-color: #FFFFFF;
     .search{
-    padding: 20px 32px;
-    height: 64px;
-    .searchBox {
-      display: flex;
-      justify-content: flex-start;
     width: 100%;
-      height: 64px;
+    height: 112px;
-      border-radius: 32px;
+    padding: 32px;
-      background-color: #F5F5F5;
+    box-sizing: border-box;
-      .searchIcon {
+    background: #FFF;
-        width: 32px;
+    display: flex;
-        height: 32px;
+    margin-bottom: 8px;
-        padding: 16px 6px 16px 32px;
+    .left{
+      width: calc(100% - 402px);
     }
-      .input {
-        width: 540px;
-        padding: 14px 6px 14px 6px;
-      }
-    }
-    ;
   }
   .userList {
     width: 100%;