|
@@ -2,69 +2,284 @@
|
|
|
<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">编辑</el-button>
|
|
|
</div>
|
|
|
<el-steps :active="active" process-status="finish" style="margin-bottom: 20px">
|
|
|
<el-step title="上传企业信息"></el-step>
|
|
|
<el-step title="上传法人信息"></el-step>
|
|
|
- <el-step title="确认信息"></el-step>
|
|
|
- <el-step title="认证结果"></el-step>
|
|
|
+<!-- <el-step title="确认信息"></el-step>-->
|
|
|
+<!-- <el-step title="认证结果"></el-step>-->
|
|
|
</el-steps>
|
|
|
- <div class="upload-wrapper">
|
|
|
- <div>
|
|
|
- <el-upload
|
|
|
- class="avatar-uploader"
|
|
|
- action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
- :show-file-list="false"
|
|
|
- :on-success="handleAvatarSuccess"
|
|
|
- :before-upload="beforeAvatarUpload">
|
|
|
- <img v-if="imageUrl" :src="imageUrl" class="avatar">
|
|
|
- <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
- </el-upload>
|
|
|
- <div><span style="color: red">*</span>营业执照:(仅支持三证合一)</div>
|
|
|
- </div>
|
|
|
- <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 class="upload-wrapper" v-if="active===0">
|
|
|
+ <el-row class="agency-form-item">
|
|
|
+ <el-col :span="3">企业logo:</el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <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: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 v-if="enterpriseForm.businessLicensePhoto" :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-input :disabled="!canEdit" v-model="enterpriseForm.idCardDeadTime" placeholder="请按身份证背面“有效期限”如实填写"></el-input>
|
|
|
+ </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>
|
|
|
+ <el-upload
|
|
|
+ class="avatar-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">
|
|
|
+ <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">上一步</button>
|
|
|
- <button class="enterprise-btn nextBtn">下一步</button>
|
|
|
+ <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">提交审核</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,
|
|
|
- imageUrl: ''
|
|
|
+ user: {},
|
|
|
+ canEdit:false,
|
|
|
+ enterpriseForm: {
|
|
|
+ roleList: [],//0是发包 1是接包 如果两个都有那么权限都有。
|
|
|
+ legalPersonName: "", //法人姓名
|
|
|
+ businessLicensePhoto: require('../../assets/img/business-license.png'),//企业执照
|
|
|
+ idCardNum: "",//身份证号码
|
|
|
+ address: "",//地址
|
|
|
+ gender: "",
|
|
|
+ idCardPositivePhoto: idcardPositive,//身份证正面照
|
|
|
+ idCardBackPhoto: idcardBack,//身份证反面照片
|
|
|
+ idCardDeadTime: "",//身份证过期时间
|
|
|
+ evaluationAgencyName:"", //企业名称
|
|
|
+ agencyPhoto:"", //企业logo
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
- methods:{
|
|
|
- handleAvatarSuccess(res, file) {
|
|
|
- this.imageUrl = URL.createObjectURL(file.raw);
|
|
|
+ methods: {
|
|
|
+ submitEnterpriseAuth() {
|
|
|
+ Http.post(`/api/user/${this.user.id}/agency`, this.enterpriseForm).then(res => {
|
|
|
+ if (res) {
|
|
|
+ notify('success', '认证成功');
|
|
|
+ this.$router.push('/personal/authentication')
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
- beforeAvatarUpload(file) {
|
|
|
- const isJPG = file.type === 'image/jpeg';
|
|
|
- const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
-
|
|
|
- if (!isJPG) {
|
|
|
- this.$message.error('上传头像图片只能是 JPG 格式!');
|
|
|
+ //获取当前认证状态
|
|
|
+ getAuthStatus() {
|
|
|
+ Http.get(`/api/user/${this.user.id}`).then(res => {
|
|
|
+ if (res.agencyVO) {
|
|
|
+ this.authType = 1 //个人已参与认证
|
|
|
+ this.authStatus = res.agencyVO.authStatus
|
|
|
+ //成功和审核中状态不可编辑,认证失败状态可编辑
|
|
|
+ this.authStatus.style === 'info' ? this.canEdit = true : null
|
|
|
+ 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;
|
|
|
}
|
|
|
- if (!isLt2M) {
|
|
|
- this.$message.error('上传头像图片大小不能超过 2MB!');
|
|
|
+ let fileName = file.name
|
|
|
+ let index = fileName.lastIndexOf('.');
|
|
|
+ // 文件不能没有后缀
|
|
|
+ if (index <= 0) {
|
|
|
+ notify('error', '只能上传png/jpg/jpeg格式的文件')
|
|
|
+ return false;
|
|
|
}
|
|
|
- return isJPG && isLt2M;
|
|
|
- }
|
|
|
+ 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()
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -83,25 +298,45 @@
|
|
|
}
|
|
|
|
|
|
.upload-wrapper {
|
|
|
- display: flex;
|
|
|
padding: 0 30px;
|
|
|
|
|
|
+ .agency-form-item {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
.authentication-detail {
|
|
|
- padding:0 30px;
|
|
|
- border-left: 1px solid rgba(220,220,220,1);
|
|
|
+ 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);
|
|
|
+ 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{
|
|
|
+
|
|
|
+ li:before {
|
|
|
content: "\2022";
|
|
|
color: #148AE0;
|
|
|
font-size: 22px;
|
|
@@ -114,16 +349,18 @@
|
|
|
margin-top: 40px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
- .enterprise-btn{
|
|
|
- border: 1px solid rgba(0,118,203,1);
|
|
|
+
|
|
|
+ .enterprise-btn {
|
|
|
+ border: 1px solid rgba(0, 118, 203, 1);
|
|
|
width: 150px;
|
|
|
background-color: white;
|
|
|
- color:rgba(0,118,203,1) ;
|
|
|
+ color: rgba(0, 118, 203, 1);
|
|
|
padding: 10px;
|
|
|
margin: 0 30px;
|
|
|
}
|
|
|
+
|
|
|
.nextBtn {
|
|
|
- background-color:rgba(0,118,203,1);
|
|
|
+ background-color: rgba(0, 118, 203, 1);
|
|
|
color: white;
|
|
|
}
|
|
|
}
|