特殊人群

src/saas/AppResidentDocument/DetailPeople.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="DetailPeople">
+    <!-- 头像 姓名 -->
     <div class="top">
       <div class="photos">
         <img :src="data.resident.photo" alt="" v-if="data.resident && data.resident.photo" />
         <img src="./components/img/44.png" alt="" v-else />
       </div>
-
       <div class="right">
         <div class="rightTop">
           <span class="names">{{ data.resident && data.resident.name }}</span>
@@ -18,9 +18,16 @@
         <div class="rightBottom" v-if="data.resident && data.resident.phone">{{ data.resident.phone }}</div>
       </div>
     </div>
-
     <div class="line"></div>
-
+    <!-- tab栏 -->
+    <div class="tab-list">
+      <div v-for="(item, index) in data.resident.tsrqInfos" :key="index" :class="tabIndex == index ? 'tab-item active' : 'tab-item' " @click="tabIndex=index">
+        <img :src="tabIndex == index ? item.activeIcon : item.icon" alt="">
+        <p>{{item.name}}</p>
+      </div>
+    </div>
+    <!-- 基础信息 -->
+    <div v-if="tabIndex == 0">
       <div class="middle">
         <div class="hint">个人基本信息</div>
 
@@ -105,6 +112,22 @@
         </div>
       </div>
     </div>
+    <!-- 残疾人员 -->
+    <div v-if="tabIndex == 1">
+      <div v-if="data.resident.tsrqInfos"></div>
+      <AiEmpty v-else />
+    </div>
+    <!-- 精神病人 -->
+    <div v-if="tabIndex == 2">
+      <div v-if="data.resident.tsrqInfos"></div>
+      <AiEmpty v-else />
+    </div>
+    <!-- 吸毒人员 -->
+    <div v-if="tabIndex == 3">
+      <div v-if="data.resident.tsrqInfos"></div>
+      <AiEmpty v-else />
+    </div>
+  </div>
 </template>
 
 <script>
@@ -116,6 +139,29 @@ export default {
     return {
       id: '',
       data: [],
+      tabList: [
+        {
+          icon: require('./components/img/icon1n@2x.png'),
+          activeIcon:  require('./components/img/icon1h@2x.png'),
+          name: '基本信息',
+        },
+        {
+          icon: require('./components/img/tsrq@2x.png'),
+          activeIcon:  require('./components/img/tsrq备份@2x.png'),
+          name: '残疾人员',
+        },
+        {
+          icon: require('./components/img/tsrq@2x.png'),
+          activeIcon:  require('./components/img/tsrq备份@2x.png'),
+          name: '精神病人',
+        },
+        {
+          icon: require('./components/img/tsrq@2x.png'),
+          activeIcon:  require('./components/img/tsrq备份@2x.png'),
+          name: '吸毒人员',
+        },
+        ],
+      tabIndex: 0,
     }
   },
   computed: {},
@@ -134,9 +180,6 @@ export default {
       this.$http.post(`/app/appresident/detail?id=${this.id}`).then((res) => {
         if (res.code == 0) {
           this.data = res.data
-          // this.$nextTick(() => {
-          //   this.currentAreaName = res.data.resident.currentAreaName
-          // })
         }
       })
     },
@@ -151,6 +194,38 @@ export default {
 .DetailPeople {
   height: 100%;
   background: #fff;
+  .tab-list{
+    height: 100%;
+    padding: 32px 0;
+    .tab-item{
+      display: inline-block;
+      width: 148px;
+      height: 136px;
+      background-color: #F8F9FB;
+      border-radius: 8px;
+      text-align: center;
+      margin-left: 32px;
+      img{
+        width: 40px;
+        height: 40px;
+        margin-top: 30px;
+      }
+      p{
+        font-size: 22px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #C5C9CD;
+        line-height: 32px;
+        margin-top: 8px;
+      }
+    }
+    .active{
+      background-color: #357CE3;
+      p{
+        color: #fff;
+      }
+    }
+  }
   .top {
     display: flex;
     padding: 48px 32px 32px 32px;
@@ -197,6 +272,7 @@ export default {
 
     .hint {
       padding: 32px 0;
+      font-weight: 600;
     }
 
     .contents {