山东移动居民档案

src/project/shandong10086/AppPeopleList/DetailPeople.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="DetailPeople">
+
     <div class="top">
       <div class="photos">
         <img :src="data.resident.photo" alt="" v-if="data.resident && data.resident.photo" />
@@ -21,6 +22,15 @@
 
     <div class="line"></div>
 
+    <div class="tab-list">
+      <div v-for="(item, index) in tabList" :key="index" :class="tabIndex == index ? 'tab-item active' : 'tab-item' " @click="tabIndex=index">
+        <img :src="tabIndex == index ? item.activeIcon : item.icon" alt="" v-if="tabIndex==0">
+        <img :src="tabIndex == index ? './components/img/tsrq@2x.png' : './components/img/tsrq备份@2x.png'" alt="" v-else>
+        <p v-if="tabIndex==0">{{item.name}}</p>
+        <p v-else>{{item.applicationName}}</p>
+      </div>
+    </div>
+
     <div class="middle">
       <div class="hint">个人基本信息</div>
 
@@ -133,6 +143,8 @@ export default {
       id: '',
       data: [],
       type: 0, //0查看详情  1审核详情
+      tabList:[],
+      tabIndex: 0,
     }
   },
   computed: {},
@@ -155,9 +167,21 @@ export default {
       this.$http.post(`/app/appresident/detail?id=${this.id}`).then((res) => {
         if (res.code == 0) {
           this.data = res.data
-          // this.$nextTick(() => {
+          if (res.data.resident.tsrqInfos) {
-          //   this.currentAreaName = res.data.resident.currentAreaName
+          this.tabList = res.data.resident.tsrqInfos
-          // })
+          let info = {
+            icon: require('./components/img/icon1n@2x.png'),
+            activeIcon:  require('./components/img/icon1h@2x.png'),
+            name: '基本信息',
+          }
+          this.tabList.unshift(info)
+          } else {
+            this.tabList =[{
+              icon: require('./components/img/icon1n@2x.png'),
+              activeIcon:  require('./components/img/icon1h@2x.png'),
+              name: '基本信息',
+            }]
+          }
         }
       })
     },
@@ -237,6 +261,38 @@ export default {
     }
   }
 
+  .tab-list{
+  padding-top: 32px;
+  .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;
+    }
+  }
+}
+
   .line {
     height: 8px;
     background: #f5f5f5;
@@ -247,6 +303,7 @@ export default {
     padding: 0 32px;
 
     .hint {
+      font-weight: 600;
       padding: 32px 0;
     }