关联家庭

src/apps/AppGridManagement/AddFamily.vue

@@ -1,30 +1,228 @@
 <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>
+    </div>
+    <div class="userList">
+      <ul v-for="(item,index) in list" :key="index">
+        <li class="main">
+          <div class="user">
+            <div>
+              <img src="./components/img/xz.png" alt="" class="checkbox" v-if="!item.checked" @click="userClick(index)">
+              <img src="./components/img/xzh.png" alt="" class="checkbox" v-else @click="userClick(index)">
+            </div>
+            <div class="userInfo">
+              <div>
+               <img src="./components/img/user-img.png" alt="" class="userImg" >
+              </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}}</div>
+                <div class="address">{{item.householdAddress}}</div>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="btn">
+      <div class="handleCheck" @click="confirm">确定选择</div>
+    </div>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 export default {
   data() {
     return {
-      
+      list: [],
+      current: 1,
+      value: '',
+      checked: true,
+      userList: {},
+      userId: ''
     }
   },
+  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) => {
+        if (res.code == 0) {
+          res.data.records.map((item) => {
+            item.checked = false
+            item.girdMemberId = this.userId
+            item.residentId = item.id
+          })
+          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
+        }
+      })
+    },
+    getListInit(){
+      this.list = []
+      this.current = 1
+      this.getList()
+    },
+    userClick(index) {
+      this.list[index].checked = !this.list[index].checked
+    },
+    confirm() {
+      var checkUserList = []
+      this.list.map((item) => {
+        if(item.checked) {
+          var info = {
+            girdMemberId: this.userId,
+            residentId: item.id,
+            name: item.name
+          }
+          checkUserList.push(info)
+        }
+      })
+      if(!checkUserList.length) {
+        this.$u.toast('请选择家庭')
+      }
+      this.$http.post(`/app/appgirdmemberresident/add`, {residentList:checkUserList}).then((res) => {
+        if (res.code == 0) {
+          this.$u.toast('提交成功')
+          uni.$emit('updateList')
+          setTimeout(() => {
+            uni.navigateBack()
+          }, 600)
+        }
+      }).catch((err) => {
+         this.$u.toast(err)
+      })
+    }
+  },
+  onLoad(option) {
+    this.userId = option.id
+    console.log(this.userId)
   },
   onShow() {
     document.title = '新增责任家庭'
+    this.getList()
+  },
+  onReachBottom() {
+    this.current = this.current + 1
+    this.getList()
   },
-  linkTo(url) {
-    uni.navigateTo({url})
-  }
 }
 </script>
 
 <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;
+      }
+    }
+    ;
+  }
+  .userList {
+    width: 100%;
+    background-color: #FFFFFF ;
+     ul {
+       padding-left: 0px;
+      li {
+        list-style-type: none;
+        height: 176px;
+      .user {
+        display: flex;
+        justify-content: flex-start;
+        padding-top: 24px;
+        padding-left: 32px;
+        height: 85%;
+        .checkbox{
+          margin-top: 20px;
+          margin-right: 32px;
+          width: 48px;
+          height: 48px;
+        }
+        .userInfo {
+          display: flex;
+          justify-content: flex-start;
+          border-bottom: 1px solid #E4E5E6;
+          padding-right: 48px;
+          width: calc(100% - 100px);
+          .userImg {
+          padding-right: 32px;
+          width: 80px;
+          height: 80px;
+          }
+          .info {
+          width: calc(100% - 120px);
+          .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 {
+           font-size: 26px;
+           color: #999999;
+         }
+        }
+        }
         
+      }
+      }
+    }
+  }
+  .btn {
+    position: fixed;
+    bottom: 0px;
+    right: 0px;
+    width: 100%;
+    height: 120px;
+    background-color: #F3F6F9;
+    .handleCheck {
+      position: fixed;
+      bottom: 18px;
+      right: 34px;
+      width: 192px;
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      background-color: #1365DD;
+      color: #FFFFFF; 
+    }
+  }
 }
 </style>
+
+
+
+

src/apps/AppGridManagement/FamilyList.vue

@@ -1,6 +1,27 @@
 <template>
   <div class="FamilyList">
-
+    <div class="title">户主列表</div>
+    <div class="main">
+      <ul v-for="item in list" :key="item.id">
+        <li>
+          <div class="user">
+            <div>
+              <img src="./components/img/user-img.png" alt="" class="userImg">
+              <!-- <img src="./components/img/user-img.png" alt="" class="userImg"> -->
+            </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}}</div>
+              <div class="address">{{item.householdAddress}}</div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="footer" @click="toAddFamily()" v-if="checkType == 2">新增责任家庭</div>
   </div>
 </template>
 
@@ -8,23 +29,123 @@
 export default {
   data() {
     return {
-      
+      list:[],
+      current:1,
+      checkType: '',
+      userId: '',
     }
   },
   methods: {
-   
+    getList(){
+       this.$http.post(`/app/appgirdmemberresident/listByGirdMember?current=${this.current}&girdMemberId=${this.userId}`).then((res) => {
+        if (res.code == 0) {
+         this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
+        }
+      })
+    },
+    toAddFamily(){
+      uni.navigateTo({url: `./AddFamily?id=${this.userId}`})
+    },
+    isGirdUser() {
+      this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
+        if (res.code == 0) {
+          if (res.data.checkType) {
+            this.checkType = res.data.checkType
+          }
+        }
+      })
+    },
+  },
+  onLoad(option) {
+    this.userId = option.id
+    console.log(this.userId)
   },
   onShow() {
     document.title = '责任家庭'
+    this.getList()
+    uni.$on('updateList', () => {
+      this.current = 1
+      this.getList()
+    })
+    this.isGirdUser()
+  },
+  onReachBottom() {
+    this.current = this.current + 1
+    this.getList()
   },
-  linkTo(url) {
-    uni.navigateTo({url})
-  }
 }
 </script>
 
 <style lang="scss" scoped>
 .FamilyList {
-  
+  background-color: #FFFFFF;
+  .title {
+    padding: 24px 32px;
+    background-color: #F3F6F9;
+    font-size: 34px;
+    font-weight: 800;
+  }
+  .main {
+    background-color: #FFFFFF ;
+    ul {
+      padding: 0px 32px;
+      background-color: #fff;
+      li {
+      list-style-type: none;
+      .user {
+        display: flex;
+        justify-content: flex-start;
+        padding-top: 24px;
+          .userImg {
+          padding-right: 32px;
+          width: 80px;
+          height: 80px;
+        }
+        .info {
+          border-bottom: 1px solid #E4E5E6;
+          width: 606px;
+          div {
+            margin: 2px 0;
+          }
+          .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 {
+           margin-bottom: 18px;
+           font-size: 26px;
+           color: #999999;
+         }
+        }
+      }
+      }
+    }
+  }
+  .footer{
+    position: fixed;
+    left: 0px;
+    bottom: 0px;
+    width: 100%;
+    height: 112px;
+    background-color: #1365DD;
+    line-height: 112px;
+    text-align: center;
+    font-size: 36px;
+    color: #FFFFFF;
+  }
 }
 </style>

src/apps/AppGridManagement/Organization.vue

@@ -24,7 +24,7 @@
       <div class="right">
         <div class="name">{{item.name}} 
           <span class="gird">{{item.checkType == 2 ? '网格长' : '网格员'}}</span>
-          <span class="family-btn" @click="linkTo(`./FamilyList?girdId=${item.id}`)">责任家庭 ></span>
+          <span class="family-btn" @click="linkTo(`./FamilyList?id=${item.id}`)">责任家庭 ></span>
         </div>
         <p>{{item.girdName}} </p>
       </div>