crowd-test-service-frontend/src/pages/UserCenter/EnterpriseAuth.vue

<template>
  <div class="right-modifyPsw">
    <div class="right-modifyPsw-title">
      <span style="font-size: 18px;font-weight: bold">企业认证</span>
      <el-tag :type="authStatus.style" v-if="authType===1">{{authStatus.text}}</el-tag>
      <el-tag type="danger" v-if="authType===0">未认证</el-tag>
<!--      <el-button type="primary" class="pull-right" size="small" v-if="canEdit" @click="canEdit = true">编辑</el-button>-->
    </div>
    <el-steps :active="active" process-status="finish" style="width: 400px;margin: 0 auto;margin-bottom: 20px;">
      <el-step title="上传企业信息"></el-step>
      <el-step title="上传法人信息"></el-step>
<!--      <el-step title="确认信息"></el-step>-->
<!--      <el-step title="认证结果"></el-step>-->
    </el-steps>
    <el-alert
      v-if="failureReason&&failureReason!==''"
      :title="failureReason"
      type="error">
    </el-alert>
    <div class="upload-wrapper" v-if="active===0" style="margin-top: 10px">
      <el-row class="agency-form-item">
        <el-col :span="3">企业logo：</el-col>
        <el-col :span="12">
          <el-upload
            class="avatar-uploader"
            style="border: lightgrey 1px solid"
            action="https://jsonplaceholder.typicode.com/posts/"
            :before-upload="beforeFileUpload"
            :http-request="uploadFile"
            :data="{type:3}"
            :disabled="!canEdit"
          >
            <img v-if="enterpriseForm.agencyPhoto" :src="enterpriseForm.agencyPhoto" class="avatar">
          </el-upload>
        </el-col>
      </el-row>

     <el-row class="agency-form-item">
       <el-col :span="3">企业名称：</el-col>
       <el-col :span="12">
         <el-input :disabled="!canEdit" v-model="enterpriseForm.evaluationAgencyName" placeholder="企业名称"></el-input>
       </el-col>
      </el-row>

      <el-row class="agency-form-item">
        <div>营业执照：</div>
        <el-col :span="8">
          <div class="uploader-businessLicensePhoto">
            <el-upload
              class="avatar-uploader idcard-uploader"
              style="border: lightgrey 1px solid"
              action="https://jsonplaceholder.typicode.com/posts/"
              :before-upload="beforeFileUpload"
              :http-request="uploadFile"
              :data="{type:2}"
              :disabled="!canEdit"
            >
              <img  :src="enterpriseForm.businessLicensePhoto" class="avatar">
            </el-upload>
            <div><span style="color: red">*</span>营业执照：（仅支持三证合一）</div>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="authentication-detail">
            <div class="authentication-detail-title">证件要求</div>
            <ul class="authentication-detail-list">
              <li>必须为清晰、完整的彩色原件扫描件或数码照</li>
              <li>仅支持.jpg .bmp .png .gif的图片格式，图片大小不超过4M</li>
              <li>必须在有效期内且年检章齐全（当年成立的公司可无年检章）</li>
              <li>必须为中国大陆工商局颁发</li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="legal-person-wrapper" v-if="active===1">
      <el-form ref="enterpriseForm" :model="enterpriseForm" label-width="120px" style="width: 70%">
        <el-form-item label="法人姓名">
          <el-input :disabled="!canEdit" v-model="enterpriseForm.legalPersonName" placeholder="请输入您的姓名，需与身份证保持一致"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码">
          <el-input :disabled="!canEdit" v-model="enterpriseForm.idCardNum" placeholder="身份证前后不能有空格"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="enterpriseForm.gender" :disabled="!canEdit">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证到期时间">
          <el-date-picker
            v-model="enterpriseForm.idCardDeadTime"
            style="width: 100%"
            align="right"
            type="date"
            placeholder="请按身份证背面“有效期限”如实填写"
            :disabled="!canEdit"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="家庭或单位地址">
          <el-input :disabled="!canEdit" v-model="enterpriseForm.address"></el-input>
        </el-form-item>
        <el-form-item label="认证权限">
          <el-checkbox-group v-model="enterpriseForm.roleList" :disabled="!canEdit">
            <el-checkbox :label="0">发任务</el-checkbox>
            <el-checkbox :label="1">接任务</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div class="upload-wrapper">
        <el-row style="width: 100%">
          <el-col :span="9" style="padding-left: 30px">
            <div style="height:50%">
              <el-upload
                class="avatar-uploader idcard-uploader"
                style="border: lightgrey 1px solid"
                action="https://jsonplaceholder.typicode.com/posts/"
                :before-upload="beforeFileUpload"
                :http-request="uploadFile"
                :data="{type:0}"
                :disabled="!canEdit"
              >
                <img v-if="enterpriseForm.idCardPositivePhoto" :src="enterpriseForm.idCardPositivePhoto" class="avatar">
              </el-upload>
              <div style="text-align: center">身份证正面照</div>
            </div>
            <div style="width: 280px;margin-top: 50px">
              <el-upload
                class="avatar-uploader idcard-uploader"
                style="border: lightgrey 1px solid"
                action="https://jsonplaceholder.typicode.com/posts/"
                :before-upload="beforeFileUpload"
                :http-request="uploadFile"
                :data="{type:1}"
                :disabled="!canEdit"
              >
                <img v-if="enterpriseForm.idCardBackPhoto" :src="enterpriseForm.idCardBackPhoto" class="avatar">
              </el-upload>

              <div style="text-align: center">身份证反面照</div>
            </div>
          </el-col>
          <el-col :span="15">
            <div class="authentication-detail">
              <div class="authentication-detail-title">示例</div>
              <el-row style="width: 100%">
                <div>
                  <div class="idcard-example1"></div>
                  <div class="idcard-example2"></div>
                </div>
                <div>
                  <ul class="authentication-detail-list">
                    <li>仅支持.jpg .bmp .png .gif的图片格式，图 片大小不超过3M</li>
                    <li>核实手持证件与原件方向一致，对焦身份证 进行拍照</li>
                    <li>您提供的照片众测服务平台将予以保护，不 会用于其他用途</li>
                  </ul>
                  <a class="authentication-detail-list-blue">实名认证帮助></a>
                </div>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="enterprise-brn-wrapper">
      <button class="enterprise-btn previousBtn" @click="active--" v-if="active>0">上一步</button>
      <button class="enterprise-btn nextBtn" @click="active++" v-if="active===0">下一步</button>
      <button class="enterprise-btn nextBtn" @click="submitEnterpriseAuth" v-if="active===1 && authStatus.text !=='认证通过'">提交审核</button>
    </div>
  </div>
</template>

<script>
  import Apis from '@/js/api'
  import Http from '@/js/http'
  import {notify} from '@/constants/index'
  import {storageGet} from '@/js/index'
  import idcardPositive from '../../assets/img/idcard-positive.png'
  import idcardBack from '../../assets/img/idcard-back.png'
  export default {
    name: "EnterpriseAuth",
    data() {
      return {
        active: 0,
        user: {},
        canEdit:false,
        authType:-1,
        authStatus:{},
        enterpriseForm: {
          roleList: [],//0是发包 1是接包 如果两个都有那么权限都有。
          legalPersonName: "", //法人姓名
          businessLicensePhoto: require('../../assets/img/business-license.png'),//企业执照
          idCardNum: "",//身份证号码
          address: "",//地址
          gender: "",
          idCardPositivePhoto: idcardPositive,//身份证正面照
          idCardBackPhoto: idcardBack,//身份证反面照片
          idCardDeadTime: "",//身份证过期时间
          evaluationAgencyName:"", //企业名称
          agencyPhoto:"", //企业logo
        },
        failureReason:''

      }
    },
    methods: {
      submitEnterpriseAuth() {
        let firstSubmit = this.$route.query.type;
        if(firstSubmit==1){
          Http.post(`/api/user/${this.user.id}/agency`, this.enterpriseForm).then(res => {
            if (res) {
              notify('success', '提交成功');
              this.$router.push('/personal/authentication')
            }
          })
        }else{
          Http.put(`/api/user/${this.user.id}/agency`, this.enterpriseForm).then(res => {
            if (res) {
              notify('success', '修改成功');
              this.$router.push('/personal/authentication')
            }
          })
        }
      },
      //获取当前认证状态
      getAuthStatus() {
        Http.get(`/api/user/${this.user.id}`).then(res => {
          if (res.agencyVO) {
            this.authType = 1  //企业已参与认证
            this.authStatus = res.agencyVO.authStatus ? res.agencyVO.authStatus : {}
            //成功和审核中状态不可编辑，认证失败状态可编辑
            this.authStatus.style === 'info' ? this.canEdit = true : null
            this.failureReason = res.agencyVO.explain
            this.setFormInfo(res.agencyVO);
          } else {
            this.authType = 0  //未参与企业认证
            this.canEdit = true
          }
        })
      },
      setFormInfo(detail) {
        //回显认证信息
        this.enterpriseForm.roleList = detail.roleList,
          this.enterpriseForm.legalPersonName = detail.legalPersonName,
          this.enterpriseForm.gender = detail.gender,
          this.enterpriseForm.idCardNum = detail.idCardNum,
          this.enterpriseForm.address = detail.address,
          this.enterpriseForm.idCardPositivePhoto = detail.idCardPositivePhoto,
          this.enterpriseForm.idCardBackPhoto = detail.idCardBackPhoto,
          this.enterpriseForm.idCardDeadTime = detail.idCardDeadTime
          this.enterpriseForm.businessLicensePhoto = detail.businessLicensePhoto
          this.enterpriseForm.evaluationAgencyName = detail.evaluationAgencyName
          this.enterpriseForm.agencyPhoto = detail.agencyPhoto
      },
      setUserInfo() {
        this.user = storageGet('user') && storageGet('user').userVO;
      },
      //文件上传前的响应函数
      beforeFileUpload(file) {
        // 文件大小不能超过10M
        if (file.size > 10 * 1000 * 1000) {
          notify('error', '单个文件大小不能超过5M')
          return false;
        }
        let fileName = file.name
        let index = fileName.lastIndexOf('.');
        // 文件不能没有后缀
        if (index <= 0) {
          notify('error', '只能上传png/jpg/jpeg格式的文件')
          return false;
        }
        let fileSuffix = fileName.substr(index)
        // 文件后缀必须是.png或者.jpg
        if (fileSuffix !== '.jpg' && fileSuffix !== '.png' && fileSuffix !== '.jpeg') {
          notify('error', '只能上传png/jpg/jpeg格式的文件')
          return false;
        }
      },
      //上传文件，此处为上传图片
      uploadFile(param) {
        const formData = new FormData()
        let config = {
          //添加请求头
          headers: {'Content-Type': 'multipart/form-data'},
        }
        formData.append('file', param.file)
        //console.log(JSON.parse(this.user).userVO)
        Http.upload(Apis.FILE.UPLOAD_IMAGE.replace('{userId}', this.user.id), formData, config).then((res) => {
          if(param.data.type==2){
            this.enterpriseForm.businessLicensePhoto = res.data;
          }else if(param.data.type == 1){
            this.enterpriseForm.idCardBackPhoto = res.data
          }else if(param.data.type == 0){
            this.enterpriseForm.idCardPositivePhoto = res.data
          }else if(param.data.type == 3){
            this.enterpriseForm.agencyPhoto = res.data
          }
          notify('success', '上传成功')
          // this.$refs['agency'].validateField('photoUrl');
        }).catch(error => {
          notify('error', error.data)
        })
      },
    },
    mounted() {
      this.setUserInfo();
      this.getAuthStatus();
      console.log(this.$route.params.type)
    }
  }
</script>

<style scoped lang="less">
  .avatar-uploader{
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-right: 30px;
    width: 170px;
    height: 170px;
  }
  .idcard-uploader {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-right: 30px;
    width: 270px;
    height: 150px;
  }
  .idcard-uploader .el-upload{
    width: 270px;
    height: 170px;
  }
  .avatar-uploader .el-upload{
    width: 170px;
    height: 170px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100%;
    height:170px;
    line-height: 170px;
    text-align: center;
  }
  .avatar {
    width: 100%;
    height: 170px;
    display: block;
  }
  .right-modifyPsw {
    padding: 20px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);

    .right-modifyPsw-title {
      padding: 10px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
    }

    .upload-wrapper {
      padding: 0 30px;

      .agency-form-item {
        margin-bottom: 10px;
      }
      .authentication-detail {
        padding: 0 30px;
        border-left: 1px solid rgba(220, 220, 220, 1);

        .idcard-example1{
          width: 270px;
          height: 160px;
          background-image: url("../../assets/img/idcard-back.png");
          background-size: 100% 100%;
          margin-bottom: 20px;
        }
        .idcard-example2{
          width: 270px;
          height: 160px;
          background-image: url("../../assets/img/idcard-positive.png");
          background-size: 100% 100%;
          margin-bottom: 20px;
        }

        .authentication-detail-title {
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 600;
          border-bottom: 1px dashed rgba(220, 220, 220, 1);
          margin-bottom: 10px;
          padding-bottom: 5px;
        }
      }

      .authentication-detail-list {
        list-style-type: none;
        padding-left: 0;

        li:before {
          content: "\2022";
          color: #148AE0;
          font-size: 22px;
          margin-right: 10px;
        }
      }
    }

    .enterprise-brn-wrapper {
      margin-top: 40px;
      display: flex;
      justify-content: center;

      .enterprise-btn {
        border: 1px solid rgba(0, 118, 203, 1);
        width: 150px;
        background-color: white;
        color: rgba(0, 118, 203, 1);
        padding: 10px;
        margin: 0 30px;
      }

      .nextBtn {
        background-color: rgba(0, 118, 203, 1);
        color: white;
      }
    }

  }
</style>