yfadmin_web/src/views/user/Detail.vue

<style lang="scss">
    .detail{
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        
        ul{
            width: 32%;
            background: #fff;
            padding: 15px;
            box-shadow:0px 4px 12px 0px rgba(0,0,0,0.12);
            li{
                list-style: none;
                color: #666;
                margin: 10px 0;
                font-size: 14px;
                border-bottom: 1px solid #d9d9d9;
                padding: 15px 0;
                &:last-child{
                    border:none;
                }
                span{
                    float: right;
                    color: #222;
                }
            }
            .status{
                span{
                    position: relative;
                    top: -10px;
                }
            }
            .title{
                font-weight: 600;
                span{
                    color:#fff;
                }
            }
        }
        div{
            width: 67%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            ul{
                width: 49%;
                height: 300px;
                margin-bottom: 15px;
                overflow: hidden;
                img{
                    max-height: 200px;
                }
            }
        }
    }
</style>
<template>
    <section class="edit">
        <p>实名认证列表  >  认证详情 </p>
        <div class="detail">   
           <ul>
               <li class="title">认证信息 <el-tag size="mini" effect="dark">证</el-tag></li>   
               <li>
                   姓名  <span>{{form.name}}</span>
               </li>
               <li>
                   性别  <span>{{form.sex}}</span>
               </li>
               <li>
                   身份证号  <span>{{form.idno}}</span>
               </li>
               <li>
                   手机号  <span>{{form.phone}}</span>
               </li>
               <li>
                   学历  <span>{{form.education}}</span>
               </li>
               <li>
                   单位名称  <span>{{form.company}}</span>
               </li>
               <li class="status">
                   状态  <el-tag   type="success">已通过</el-tag>
               </li>
           </ul>
           <div>
                <ul>
                    <li class="title">身份证正面照</li>
                    <img width="100%" :src="form.idnoimg_face" alt="">
                </ul>
                <ul>
                    <li class="title">身份证反面照</li>
                    <img width="100%" :src="form.idnoimg_back" alt="">
                </ul>
                <ul>
                    <li class="title">半身照</li>
                    <img width="100%" :src="form.halfbody_img" alt="">
                </ul>
                <ul>
                    <li class="title">学历照</li>
                    <img width="100%" :src="form.education_img" alt="">
                </ul>
           </div>
        </div>
    </section>
</template>
<script>
export default {

  data(){
    return{
      form:{},
      radios:1,
      id:'',
      edu:["小学", "初中", "高中", "大专", "本科","硕士","博士"]
    }
  },
  methods:{
      getData(){
          this.$api.getUser({id:this.id}).then(res=>{
              this.form=JSON.parse(res.data.data.userinfo);
          })
      },
    
  },
  created(){
      if(this.$route.query.id){
            this.id=this.$route.query.id
            this.getData()
        }
  }
}
</script>