关联家庭

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>