From 983e0b98b96e7d7d96e894bfb23a65c8b028d698 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Fri, 6 May 2022 19:16:32 +0800
Subject: [PATCH] BUG 29485

---
 src/saas/AppGridManagement/AddFamily.vue | 152 +++++++++++++----------
 1 file changed, 85 insertions(+), 67 deletions(-)

diff --git a/src/saas/AppGridManagement/AddFamily.vue b/src/saas/AppGridManagement/AddFamily.vue
index 74c20cf7..e886a7a0 100644
--- a/src/saas/AppGridManagement/AddFamily.vue
+++ b/src/saas/AppGridManagement/AddFamily.vue
@@ -9,7 +9,8 @@
           <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>
+      <u-search v-model="value" placeholder:clearabled="true" placeholder="请输入姓名/身份证/手机号" :show-action="false" bg-color="#F5F5F5" search-icon-color="#999"
+                color="#999" height="58" @change="getListInit"/>
     </div>
     <div class="userList" v-if="list.length">
       <ul v-for="(item,index) in list" :key="index">
@@ -26,11 +27,11 @@
               </div>
               <div class="info">
                 <div class="name">
-                  <span class="user-name">{{item.name}}</span>
-                  <span class="user-tel">{{item.phone}}</span>
-                 </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>
+                  <span class="user-name">{{ item.name }}</span>
+                  <span class="user-tel">{{ item.phone }}</span>
+                </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>
           </div>
@@ -46,7 +47,8 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import {mapState} from 'vuex'
+
 export default {
   data() {
     return {
@@ -57,13 +59,13 @@ export default {
       userList: {},
       userId: '',
       areaId: '',
-      areaName:'',
+      areaName: '',
       girdId: ''
     }
   },
-  computed: { ...mapState(['user']) },
+  computed: {...mapState(['user'])},
   methods: {
-    getList(){
+    getList() {
       this.$http.post(`/app/appresident/list?householdName=1&current=${this.current}&con=${this.value}`).then((res) => {
         if (res.code == 0) {
           res.data.records.map((item) => {
@@ -75,7 +77,7 @@ export default {
         }
       })
     },
-    getListInit(){
+    getListInit() {
       this.list = []
       this.current = 1
       this.getList()
@@ -86,7 +88,7 @@ export default {
     confirm() {
       var checkUserList = []
       this.list.map((item) => {
-        if(item.checked) {
+        if (item.checked) {
           var info = {
             girdMemberId: this.userId,
             residentId: item.id,
@@ -96,10 +98,10 @@ export default {
           checkUserList.push(info)
         }
       })
-      if(!checkUserList.length) {
+      if (!checkUserList.length) {
         return this.$u.toast('请选择户主')
       }
-      this.$http.post(`/app/appgirdmemberresident/add`, {residentList:checkUserList}).then((res) => {
+      this.$http.post(`/app/appgirdmemberresident/add`, {residentList: checkUserList}).then((res) => {
         if (res.code == 0) {
           this.$u.toast('提交成功')
           uni.$emit('updateList')
@@ -108,11 +110,11 @@ export default {
           }, 600)
         }
       }).catch((err) => {
-         this.$u.toast(err)
+        this.$u.toast(err)
       })
     },
     areaSelect(e) {
-      this.areaId =e
+      this.areaId = e
       this.getListInit()
     },
   },
@@ -135,7 +137,7 @@ export default {
 
 <style lang="scss" scoped>
 .AddFamily {
-    .search{
+  .search {
     width: 100%;
     height: 112px;
     padding: 32px;
@@ -143,74 +145,89 @@ export default {
     background: #FFF;
     display: flex;
     margin-bottom: 8px;
-    .left{
+
+    .left {
       width: calc(100% - 450px);
     }
   }
+
   .userList {
     width: 100%;
-    background-color: #FFFFFF ;
-     ul {
-       padding-left: 0px;
+    background-color: #FFFFFF;
+
+    ul {
+      padding-left: 0px;
+
       li {
         list-style-type: none;
-      .user {
-        display: flex;
-        justify-content: flex-start;
-        padding-top: 24px;
-        padding-left: 32px;
-        height: 100%;
-        .checkbox{
-          margin-top: 20px;
-          margin-right: 32px;
-          width: 48px;
-          height: 48px;
-        }
-        .userInfo {
+
+        .user {
           display: flex;
           justify-content: flex-start;
-          border-bottom: 1px solid #E4E5E6;
-          padding-right: 48px;
-          width: calc(100% - 100px);
-          .userImg {
+          padding-top: 24px;
+          padding-left: 32px;
+          height: 100%;
+
+          .checkbox {
+            margin-top: 20px;
             margin-right: 32px;
-            width: 80px;
-            height: 80px;
-            border-radius: 50%;
+            width: 48px;
+            height: 48px;
           }
-          .info {
-          width: calc(100% - 120px);
-          padding-bottom: 32px;
-          .name {
+
+          .userInfo {
             display: flex;
-            justify-content: space-between;
-            font-size: 32px;
-            margin-bottom: 8px;
-            .user-name {
-              font-weight: 800;
+            justify-content: flex-start;
+            border-bottom: 1px solid #E4E5E6;
+            padding-right: 48px;
+            width: calc(100% - 100px);
+
+            .userImg {
+              margin-right: 32px;
+              width: 80px;
+              height: 80px;
+              border-radius: 50%;
             }
-            .user-tel {
-              font-size: 26px;
-              color: #999999 ;
+
+            .info {
+              width: calc(100% - 120px);
+              padding-bottom: 32px;
+
+              .name {
+                display: flex;
+                justify-content: space-between;
+                font-size: 32px;
+                margin-bottom: 8px;
+
+                .user-name {
+                  font-weight: 800;
+                }
+
+                .user-tel {
+                  font-size: 26px;
+                  color: #999999;
+                }
+              }
+
+              .idCard {
+                margin-bottom: 16px;
+                font-size: 26px;
+                color: #999999;
+              }
+
+              .address {
+                max-width: 100%;
+                word-break: break-all;
+                font-size: 26px;
+                color: #999999;
+              }
             }
-         }
-         .idCard {
-           margin-bottom: 16px;
-           font-size: 26px;
-           color: #999999;
-         }
-         .address {
-           max-width: 100%;
-           word-break:break-all;
-           font-size: 26px;
-           color: #999999;
-         }
+          }
         }
-        }
-      }
       }
     }
   }
+
   .btn {
     position: fixed;
     bottom: 0px;
@@ -218,6 +235,7 @@ export default {
     width: 100%;
     height: 120px;
     background-color: #F3F6F9;
+
     .handleCheck {
       position: fixed;
       bottom: 18px;