From e7535c2dc0a40e4de8b81d0de87d5b1731441ed3 Mon Sep 17 00:00:00 2001
From: shijingjing <1789544664@qq.com>
Date: Fri, 14 Jan 2022 16:40:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E9=80=89=E6=8B=A9=E5=92=8C?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apps/AppGridManagement/AddFamily.vue | 58 +++++++++++++-----------
 1 file changed, 31 insertions(+), 27 deletions(-)

diff --git a/src/apps/AppGridManagement/AddFamily.vue b/src/apps/AppGridManagement/AddFamily.vue
index 62a8c460..50a3b4a6 100644
--- a/src/apps/AppGridManagement/AddFamily.vue
+++ b/src/apps/AppGridManagement/AddFamily.vue
@@ -1,9 +1,15 @@
 <template>
   <div class="AddFamily">
     <div class="search">
-      <div class="searchBox">
-        <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 class="left">
+        <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() {
@@ -117,27 +131,17 @@ export default {
 <style lang="scss" scoped>
 .AddFamily {
   background-color: #FFFFFF;
-  .search{
-    padding: 20px 32px;
-    height: 64px;
-    .searchBox {
-      display: flex;
-      justify-content: flex-start;
-      width: 100%;
-      height: 64px;
-      border-radius: 32px;
-      background-color: #F5F5F5;
-      .searchIcon {
-        width: 32px;
-        height: 32px;
-        padding: 16px 6px 16px 32px;
-      }
-      .input {
-        width: 540px;
-        padding: 14px 6px 14px 6px;
-      }
+    .search{
+    width: 100%;
+    height: 112px;
+    padding: 32px;
+    box-sizing: border-box;
+    background: #FFF;
+    display: flex;
+    margin-bottom: 8px;
+    .left{
+      width: calc(100% - 402px);
     }
-    ;
   }
   .userList {
     width: 100%;