boss/components/drawer/education_check.vue

<template>
  <div v-loading="loading" class="info" id="workexp" >
    <div style="border-bottom: 1px solid #ebeef5;">
      <div style="display: flex;justify-content: space-between;justify-items: center;align-items: center">
        <div class="show">
          <h4>
            <a :href="`${info.user.env}/rooter/user/${info.user.uid}`" target="_blank"><span style="color: #2b2f3a;margin: 0px">{{info.user.nickname}}</span>（{{info.user.uid}}）</a>
          </h4>
        </div>
        <div>
          <span v-if="info.info.status==1" style="color: #409eff">待审核</span>
          <span v-if="info.info.status==2" style="color: #67c23a">已通过</span>
          <span v-if="info.info.status==3" style="color: red">已拒绝</span>
        </div>
      </div>
    </div>
    <div style="border-bottom: 1px solid #ebeef5;">
      <div style="display: flex;justify-content: space-between;justify-items: center;align-items: center">
        <div class="show">
          <h4>
            <span>{{`${info.user_education.start_time} - ${info.user_education.end_time || '至今'} ${info.user_education.university} ${info.user_education.major}`}}</span>
          </h4>
          <p class="desc">{{info.user_education.description}}</p>
        </div>
      </div>
    </div>
    <div style="border-bottom: 1px solid #ebeef5;">
      <div class="title">在线验证报告</div>
      <p class="desc">验证码：{{info.info.yzm}}</p>
      <p class="desc">学历链接：<a :href="info.info.link" target="_blank">{{info.info.link}}</a></p>
      <p class="desc">备注：{{info.info.memo}}</p>
    </div>
    <div style="border-bottom: 1px solid #ebeef5;">
      <div class="title"></div>
      <div>
        <el-radio-group v-model="form.type">
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="2">拒绝</el-radio>
        </el-radio-group>
      </div>
      <div v-if="form.type==2" class="title">拒绝理由</div>
      <div v-if="form.type==2">
        <el-input v-model="form.memo" placeholder="请输入拒绝理由"></el-input>
      </div>
      <div class="title"></div>
      <div>
        <el-button type="primary" @click="submit()" size="small">确认</el-button>
      </div>
      <div class="title"></div>
    </div>
    <div v-if="info.check.uid">
      <div  class="title">审核记录：</div>
      <p  class="desc">审核人： <a :href="`${info.check.env}/rooter/user/${info.check.uid}`" target="_blank"><span style="color: #2b2f3a;margin: 0px">{{info.check.nickname}}</span>（{{info.check.uid}}）</a></p>
      <p class="desc">审核时间：{{info.info.checktime}}</p>
      <p class="desc">审核内容：{{info.info.content}}</p>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      img1:{
        url: 'https://filescdn.proginn.com/works/60c994ae9f2d41aec531bd179fc3e9164cbde018.png',
        srcList: [
          "https://filescdn.proginn.com/works/60c994ae9f2d41aec531bd179fc3e9164cbde018.png",
        ]
      },
      form:{
        memo:"",
        type:1,
      },
      info:{
        user:{},
        check:{},
        info:{},
        user_education:{},
      },
      loading:true,
    };
  },
  components: {

  },
  props: {
    back: {
      type: Object
    }
  },
  async mounted() {
    this.get_info();
  },
  methods: {
    async submit()
    {
      this.loading=true;
      let data=this.form;
      data.pro_id=this.back.drawer.id;
      data.id=this.back.drawer.id;
      let res=await this.$post("/uapi/pub/info/user/user_education_rz/check",data);
      if(res.status==1)
      {
        this.$message.success("审核成功");
        this.get_info();
        this.back.getList(false);
        this.back.get_status();
      }
      this.loading=false;
    },
    async get_info()
    {
      this.loading=true;
      let res=await this.$post("/uapi/pub/info/user/user_education_rz/info",{id:this.back.drawer.id});
      if(res.status==1)
      {
        this.info=res.data;
      }
      this.loading=false;
    }
  }
};
</script>

<style lang="scss" scoped>
.info {
  header .el-icon-plus {
    font-size: 18px;
  }
  .title{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .label{
      width: 150px;
    }
    .desc{
      color: rgba(102, 102, 102, 1);;
    }
  }
  .desc{
    text-overflow: ellipsis;
    line-height:25px;
    margin-bottom: 15px;
  }
  .show {
    word-break: break-all;
    .desc{
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 15px;
    }
    &:last-of-type {
      border: 0;
    }
    h4 {
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 44px;
      font-size: 14px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: #308eff;
      line-height: 44px;
      span {
        margin-right: 20px;
      }
      button {
        position: absolute;
        right: 0;
      }
    }
    p {
      margin-top: 8px;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 24px;
    }
  }
  .empty {
    margin: 112px auto 104px;
    font-size: 27px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: rgba(205, 205, 205, 1);
    line-height: 38px;
  }
}

@media screen and (min-width: 960px) {

}
</style>