yfadmin_web/src/views/apply/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;
                }
                .el-icon-refresh-right{
                    float: right;
                    font-size: 18px;
                    color:#409EFF;
                    cursor: pointer;
                }
            }
            .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" v-if='form.id'>   
           <ul>
               <li class="title">报名信息 <el-tag size="mini" effect="dark">报</el-tag></li>
               <li>
                   管理员备注  <span>{{form.admin_remark}}</span>
               </li>
               <li>
                   学员备注  <span>{{form.remark}}</span>
               </li>
               <li class="status">
                   报名状态  
                    <el-tag v-if='form.order_status == -2' type="info">审核未通过</el-tag>
                    <el-tag v-if='form.order_status == -1' >待提交资料</el-tag>
                    <el-tag v-if='form.order_status == 0' type="warning">待审核</el-tag>
                    <el-tag v-if='form.order_status == 1' >已审核立即支付</el-tag>
                    <el-tag v-if='form.order_status == 2' type="warning">学习中</el-tag>
                    <el-tag v-if='form.order_status == 3' type="success">已培训</el-tag>
                    <el-tag v-if='form.order_status == 4' type="success">已完成</el-tag>
               </li>
               <li>
                   报名时间  <span>{{form.signup_time}}</span>
               </li>
               <li>
                   考试时间  <span>{{form.exam_time}}</span>
               </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.train_type}}</span>
               </li>
               <li>
                   作业类别  <span>{{form.subject_items[0]}}</span>
               </li>
               <li>
                   准操项目  <span>{{form.subject_items[1]}}</span>
               </li>
               <li>
                   培训类型  <span>{{form.subject_items[2]}}</span>
               </li>
               <li>
                   发票类型  <span v-if='form.bill_type == 1'>不需要发票</span>
                   <span v-if='form.bill_type == 2'>个人发票</span>
                   <span v-if='form.bill_type == 3'>企业发票</span>
               </li>
               <li v-if='form.bill_type == 3'>
                   税号  <span>{{form.bill_no}}</span>
               </li>
               <li>
                   发票抬头  <span>{{form.bill_name}}</span>
               </li>
               <li>
                   公司名称  <span>{{form.company}}</span>
               </li>
           </ul>
           <div>
                <ul style="height:390px">
                    <li class="title">证件信息 <el-tag size="mini" type="warning" effect="dark">证</el-tag></li>
                    <li>
                        领证时间  <span>{{form.get_card_time}}</span>
                    </li>
                    <li>
                        复审时间  <span>{{form.review_card_time}}</span>
                    </li>
                    <li>
                        换证时间  <span>{{form.change_card_time}}</span>
                    </li>
                    <li>
                        领证方式  <span>{{form.receive_card}}</span>
                    </li>
                    <li v-if='form.receive_card=="邮寄"'>
                        邮寄地址  <span>{{form.area}}{{form.address}}</span>
                    </li>
                </ul>
                <ul style="height:390px">
                    <li class="title">订单详情 <el-tag size="mini" type="success" effect="dark">订</el-tag></li>
                    <li>
                        订单编号  <span>{{form.out_trade_no}}</span>
                    </li>
                    <li>
                        下单时间  <span>{{form.ctime}}</span>
                    </li>
                    <li class="status">
                        支付状态 
                        <el-tag v-if='form.pay_status' type="success">已支付</el-tag>
                        <el-tag v-else type="danger">未支付</el-tag>
                    </li>
                    <li>
                        订单总额  <span>{{form.price}}</span>
                    </li>
                    <li>
                        培训金额  <span>{{form.price}}</span>
                    </li>
                </ul>
                <ul>
                    <li class="title">身份证正面照  <i @click="rotate(form.idnoimg_face,'idnoimg_face')" class="el-icon-refresh-right"></i></li>
                    <img width="100%" :src="form.idnoimg_face" alt="">
                </ul>
                <ul>
                    <li class="title">身份证反面照 <i @click="rotate(form.idnoimg_back,'idnoimg_back')" class="el-icon-refresh-right"></i></li>
                    <img width="100%" :src="form.idnoimg_back" alt="">
                </ul>
                <ul>
                    <li class="title">半身照 <i @click="rotate(form.halfbody_img,'halfbody_img')" class="el-icon-refresh-right"></i></li>
                    <img width="100%" :src="form.halfbody_img" alt="">
                </ul>
                <ul>
                    <li class="title">学历照 <i @click="rotate(form.education_img,'education_img')" class="el-icon-refresh-right"></i></li>
                    <img width="100%" :src="form.education_img" alt="">
                </ul>
                <ul v-if='form.has_healthimg'>
                    <li class="title">体检表照片 <i @click="rotate(form.health_img,'health_img')" class="el-icon-refresh-right"></i></li>
                    <img width="100%" :src="form.health_img" alt="">
                </ul>
                <ul v-if='form.train_type == "换证"||form.train_type=="复审"'>
                    <li class="title">原证件照 <i @click="rotate(form.oldcard_img,'oldcard_img')" class="el-icon-refresh-right"></i></li>
                    <img width="100%" :src="form.oldcard_img" alt="">
                </ul>
           </div>
        </div>
    </section>
</template>
<script>
export default {

  data(){
    return{
      idnoimg_face:"",
      form:{},
      radios:1,
      id:'',
      edu:["小学", "初中", "高中", "大专", "本科","硕士","博士"]
    }
  },
  methods:{
      getData(){
          this.$api.getSign({id:this.id}).then(res=>{
              this.form=res.data.data
              this.idnoimg_face = res.data.data.idnoimg_face
              this.form.subject_items=this.form.subject_item.split('|')
              this.form.has_healthimg = this.form.subject_item.split('|')[0].indexOf("特种设备")!=-1
          })
      },
      rotate(url,key){
          this.$api.rotateImg({url:url.split("?")[0],id:this.form.id}).then(res=>{
              if(res.data.code==0){
                    let form=this.form;
                    this.$set(this.form,key,res.data.data.url+"?v="+Date.parse(new Date()));
                    this.form=form;
                    this.idnoimg_face = res.data.data.url+"?v="+Date.parse(new Date());
                    this.$message({message: '旋转成功！',type: 'success'});
              }else{
                  this.$message.error(res.data.message);
              }
              
          })
      }
  },
  created(){
      if(this.$route.query.id){
            this.id=this.$route.query.id
            this.getData()
        }
  }
}
</script>