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

<template>
  <div class="right-modifyPsw" v-loading="loading">
    <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 v-if="active===0" class="uploader-wrapper">
      <el-form ref="enterpriseForm1" :model="enterpriseForm1" :rules="rules1" label-width="100px"
               style="width: 600px;margin-top: 10px">
        <el-form-item label="企业logo:" prop="agencyPhoto">
          <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="enterpriseForm1.agencyPhoto" :src="enterpriseForm1.agencyPhoto" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="企业名称:" prop="evaluationAgencyName">
          <el-input :disabled="!canEdit" v-model="enterpriseForm1.evaluationAgencyName"
                    placeholder="身份证前后不能有空格"></el-input>
        </el-form-item>
        <el-form-item label="营业执照:" prop="businessLicensePhoto" style="width: 850px">
          <el-row class="agency-form-item">
            <el-col :span="10">
              <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 v-if="enterpriseForm1.businessLicensePhoto" :src="enterpriseForm1.businessLicensePhoto"
                       class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon card-uploader-icon"></i>
                </el-upload>
                <div><span style="color: red">*</span>营业执照：（仅支持三证合一）</div>
              </div>
            </el-col>
            <el-col :span="14">
              <div class="authentication-detail">
                <div class="authentication-detail-title">证件要求</div>
                <ul class="authentication-detail-list" style="padding-left:0 ">
                  <li>必须为清晰、完整的彩色原件扫描件或数码照</li>
                  <li>仅支持.jpg .bmp .png .gif的图片格式，图片大小不超过4M</li>
                  <li>必须在有效期内且年检章齐全（当年成立的公司可无年检章）</li>
                  <li>必须为中国大陆工商局颁发</li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>

    <div class="legal-person-wrapper" v-if="active===1">
      <el-form ref="enterpriseForm" :model="enterpriseForm" :rules="rules" label-width="130px" style="width: 600px">
<!--        <el-form-item label="法人姓名" prop="legalPersonName">-->
<!--          <el-input :disabled="!canEdit" v-model="enterpriseForm.legalPersonName"-->
<!--                    placeholder="请输入您的姓名，需与身份证保持一致"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="身份证号码" prop="idCardNum">-->
<!--          <el-input :disabled="!canEdit" v-model="enterpriseForm.idCardNum" placeholder="身份证前后不能有空格"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="性别" prop="gender">-->
<!--          <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="法人姓名" prop="legalPersonName">
          <el-input :disabled="!canEdit" v-model="enterpriseForm.legalPersonName"
                    ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender" required>
          <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="身份证号码" prop="idCardNum">
          <el-input :disabled="!canEdit" v-model="enterpriseForm.idCardNum"></el-input>
        </el-form-item>
        <el-form-item label="身份证到期时间" prop="idCardDeadTime">
          <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="家庭或单位地址" prop="address">
          <el-input :disabled="!canEdit" v-model="enterpriseForm.address"></el-input>
        </el-form-item>
        <el-form-item label="认证权限" prop="roleList">
          <el-checkbox-group v-model="enterpriseForm.roleList" :disabled="!canEdit">
            <el-checkbox :label="1">发包</el-checkbox>
            <el-checkbox :label="0">接包</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div class="uploader-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">
                <i v-else class="el-icon-plus avatar-uploader-icon card-uploader-icon"></i>
              </el-upload>
              <div style="text-align: center">身份证正面照<span style="color:red">(必填)</span></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">
                <i v-else class="el-icon-plus avatar-uploader-icon card-uploader-icon"></i>

              </el-upload>

              <div style="text-align: center">身份证反面照<span style="color:red">(必填)</span></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 .png .jpeg，图 片大小不超过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-btn-wrapper">
      <button class="enterprise-btn previousBtn" style="cursor: pointer" @click="active--" v-if="active>0">上一步</button>
      <button class="enterprise-btn nextBtn" style="cursor: pointer" @click="nextStep" v-if="active===0">下一步</button>
      <button class="enterprise-btn nextBtn" style="cursor: pointer" @click="submitEnterpriseAuth"
              v-if="active===1 && authType === 0">提交审核
      </button>
      <button class="enterprise-btn nextBtn" style="cursor: pointer" @click="submitEnterpriseAuth"
              v-if="active===1 && (authStatus.text =='审核中' || 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 {
        loading: false,
        active: 0,
        user: {},
        canEdit: false,
        authType: -1,
        authStatus: {},
        enterpriseForm1: {
          evaluationAgencyName: "", //企业名称
          agencyPhoto: "", //企业logo
          businessLicensePhoto: "",//企业执照
        },
        enterpriseForm: {
          roleList: [],//0是发包 1是接包 如果两个都有那么权限都有。
          legalPersonName: "", //法人姓名
          idCardNum: "",//身份证号码
          address: "",//地址
          gender: "",
          idCardPositivePhoto: "",//身份证正面照
          idCardBackPhoto: "",//身份证反面照片
          idCardDeadTime: "",//身份证过期时间
        },
        failureReason: '',
        rules1: {
          agencyPhoto: [
            {required: true, message: '请上传企业logo', trigger: 'blur'},
          ],
          businessLicensePhoto: [
            {required: true, message: '请上传企业执照', trigger: 'blur'},
          ],
          evaluationAgencyName: [
            {required: true, message: '请输入企业名称', trigger: 'blur'},
          ],
        },
        rules: {
          legalPersonName: [
            {required: true, message: '请输入法人姓名', trigger: 'blur'},
          ],
          idCardNum: [
            {required: true, message: '请输入身份证号码', trigger: 'blur'},
          ],
          address: [
            {required: true, message: '请输入家庭或单位地址', trigger: 'blur'},
          ],
          gender: [
            {required: true, message: '请选择性别', trigger: 'blur'}
          ],
          roleList: [
            {type: 'array', required: true, message: '请至少选择一个认证权限', trigger: 'change'}
          ],
          idCardDeadTime: [
            {required: true, message: '请选择身份证过期时间', trigger: 'change'}
          ]
        }

      }
    },
    methods: {
      nextStep() {
        this.$refs['enterpriseForm1'].validate(valid => {
          if (!valid) {
            notify('error', '信息填写不规范');
            return false
          } else {
            this.active++;
          }
        })

      },
      submitEnterpriseAuth() {
        this.$refs['enterpriseForm'].validate(valid => {
          if (!valid) {
            notify('error', '信息填写不规范');
            return false
          }
        })
        if (!this.enterpriseForm.idCardPositivePhoto) {
          notify('error', '身份证正面照片上传不规范');
          return false;
        }
        if (!this.enterpriseForm.idCardBackPhoto) {
          notify('error', '身份证反面照片上传不规范');
          return false;
        }
        let firstSubmit = this.$route.query.type;
        let data = {...this.enterpriseForm, ...this.enterpriseForm1};
        this.showLoading();
        if (firstSubmit == 1) {
          Http.post(`/api/user/${this.user.id}/agency`, data).then(res => {
            if (res) {
              notify('success', '提交成功');
              this.$router.push('/personal/authentication')
            }
          }).catch(err => {
            this.hideLoading();
            notify('error', err.data)
          })
        } else {
          Http.put(`/api/user/${this.user.id}/agency`, data).then(res => {
            if (res) {
              notify('success', '修改成功');
              this.$router.push('/personal/authentication')
            }
          }).catch(err => {
            this.hideLoading();
            notify('error', err.data)
          })
        }
      },
      //获取当前认证状态
      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 !== 'success' ? 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.enterpriseForm1.businessLicensePhoto = detail.businessLicensePhoto
        this.enterpriseForm1.evaluationAgencyName = detail.evaluationAgencyName
        this.enterpriseForm1.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.enterpriseForm1.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.enterpriseForm1.agencyPhoto = res.data
          }
          notify('success', '上传成功')
          // this.$refs['agency'].validateField('photoUrl');
        }).catch(error => {
          notify('error', error.data)
        })
      },
      showLoading() {
        this.loading = true
      },
      hideLoading() {
        this.loading = false
      },
    },
    mounted() {
      this.setUserInfo();
      this.getAuthStatus();
    }
  }
</script>

<style scoped lang="less">
  .avatar-uploader {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-right: 20px;
    width: 170px;
    height: 170px;
  }

  .idcard-uploader {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-right: 20px;
    width: 270px;
    height: 170px;
  }

  .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: 170px;
    height: 170px;
    line-height: 170px;
    text-align: center;
  }

  .card-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 270px;
    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;
    }

    .uploader-wrapper {

      .agency-form-item {
        margin-bottom: 10px;
      }

      .authentication-detail {
        padding: 0 15px;
        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-left: 20px;
        }

        .authentication-detail-list {
          list-style-type: none;
          padding-left: 0 !important;
          line-height: 24px;

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

    }

    .enterprise-btn-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>