|
|
@@ -1,46 +1,52 @@
|
|
|
<template>
|
|
|
- <div class="right-modifyPsw">
|
|
|
+ <div class="right-modifyPsw" id="individualAuth">
|
|
|
<div class="right-modifyPsw-title">
|
|
|
<span style="font-size: 18px;font-weight: bold">个人认证</span>
|
|
|
</div>
|
|
|
- <div class="individual-steps-wrapper">
|
|
|
- <el-steps :active="active" process-status="finish" style="margin-bottom: 20px;width: 300px">
|
|
|
- <el-step title="填写认证信息"></el-step>
|
|
|
- <el-step title="认证结果"></el-step>
|
|
|
- </el-steps>
|
|
|
- </div>
|
|
|
- <el-form ref="form" :model="form" label-width="120px" style="width: 70%">
|
|
|
- <el-form-item label="真实姓名">
|
|
|
- <el-input v-model="individualForm.username" placeholder="请输入您的姓名，需与身份证保持一致"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="身份证号码">
|
|
|
- <el-input v-model="individualForm.idnumber" placeholder="身份证前后不能有空格"></el-input>
|
|
|
- </el-form-item>
|
|
|
+<!-- <div class="individual-steps-wrapper">-->
|
|
|
+<!-- <el-steps :active="active" process-status="finish" style="margin-bottom: 20px;width: 300px">-->
|
|
|
+<!-- <el-step title="填写认证信息"></el-step>-->
|
|
|
+<!-- <el-step title="认证结果"></el-step>-->
|
|
|
+<!-- </el-steps>-->
|
|
|
+<!-- </div>-->
|
|
|
+ <el-form ref="individualForm" :model="individualForm" label-width="120px" style="width: 70%">
|
|
|
+ <el-form-item label="真实姓名">
|
|
|
+ <el-input v-model="individualForm.realName" placeholder="请输入您的姓名，需与身份证保持一致"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="身份证号码">
|
|
|
+ <el-input v-model="individualForm.IDCard" placeholder="身份证前后不能有空格"></el-input>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="性别">
|
|
|
- <el-radio-group v-model="individualForm.gender">
|
|
|
+ <el-radio-group v-model="individualForm.sex">
|
|
|
<el-radio label="男"></el-radio>
|
|
|
<el-radio label="女"></el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="身份证到期时间">
|
|
|
- <el-input v-model="individualForm.idDate" placeholder="请按身份证背面“有效期限”如实填写"></el-input>
|
|
|
+ <el-input v-model="individualForm.IDCardDeadTime" placeholder="请按身份证背面“有效期限”如实填写"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="家庭或单位地址">
|
|
|
<el-input v-model="individualForm.address"></el-input>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="认证权限">
|
|
|
+ <el-checkbox-group v-model="individualForm.roleList">
|
|
|
+ <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>
|
|
|
+ <div style="width: 280px">
|
|
|
<el-upload
|
|
|
- class="avatar-uploader"
|
|
|
+ class="avatar-uploader idcard-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>
|
|
|
+ :before-upload="beforeFileUpload"
|
|
|
+ :http-request="uploadFile"
|
|
|
+ :data="{type:0}"
|
|
|
+ >
|
|
|
+ <img v-if="individualForm.IDCardPositivePhoto" :src="individualForm.IDCardPositivePhoto" class="avatar">
|
|
|
</el-upload>
|
|
|
<div style="text-align: center">手持身份证正面照</div>
|
|
|
</div>
|
|
|
@@ -71,14 +77,15 @@
|
|
|
<el-col :span="9" style="padding-left: 30px">
|
|
|
<div>
|
|
|
<el-upload
|
|
|
- class="avatar-uploader"
|
|
|
+ class="avatar-uploader idcard-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>
|
|
|
+ :before-upload="beforeFileUpload"
|
|
|
+ :http-request="uploadFile"
|
|
|
+ :data="{type:1}"
|
|
|
+ >
|
|
|
+ <img v-if="individualForm.IDCardBackPhoto" :src="individualForm.IDCardBackPhoto" class="avatar">
|
|
|
</el-upload>
|
|
|
+
|
|
|
<div style="text-align: center">身份证反面照</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -103,39 +110,95 @@
|
|
|
|
|
|
</div>
|
|
|
<div class="enterprise-brn-wrapper">
|
|
|
- <button class="enterprise-btn previousBtn">上一步</button>
|
|
|
- <button class="enterprise-btn nextBtn">提交审核</button>
|
|
|
+<!-- <button class="enterprise-btn previousBtn">上一步</button>-->
|
|
|
+ <button class="enterprise-btn nextBtn" @click="submitIndividualAuth">提交审核</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'
|
|
|
+
|
|
|
export default {
|
|
|
name: "IndividualAuth",
|
|
|
data() {
|
|
|
return {
|
|
|
active: 0,
|
|
|
- imageUrl: '',
|
|
|
- individualForm:{}
|
|
|
+ user: {},
|
|
|
+ individualForm: {
|
|
|
+ roleList: [0],//0是发包 1是接包 如果两个都有那么权限都有。
|
|
|
+ realName: "徐璇",
|
|
|
+ sex: "男",
|
|
|
+ IDCard: "32032219941023007X",
|
|
|
+ IDCardPositivePhoto: "00001.jpg",
|
|
|
+ IDCardBackPhoto: "00002.jpg",
|
|
|
+ IDCardDeadTime: "2020-07-20",
|
|
|
+ address: "北京沛县"
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
- methods:{
|
|
|
- handleAvatarSuccess(res, file) {
|
|
|
- this.imageUrl = URL.createObjectURL(file.raw);
|
|
|
+ methods: {
|
|
|
+ submitIndividualAuth(){
|
|
|
+ Http.post(`/api/user/${this.user.id}/personalAuth`,this.individualForm).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 格式!');
|
|
|
+ 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 === 0){
|
|
|
+ this.individualForm.IDCardPositivePhoto = res.data
|
|
|
+ }else{
|
|
|
+ this.individualForm.IDCardBackPhoto = res.data
|
|
|
+ }
|
|
|
+
|
|
|
+ notify('success', '上传成功')
|
|
|
+ // this.$refs['agency'].validateField('photoUrl');
|
|
|
+ }).catch(error => {
|
|
|
+ notify('error', error.data)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.setUserInfo()
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -157,46 +220,65 @@
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
+
|
|
|
.upload-wrapper {
|
|
|
/*display: flex;*/
|
|
|
/*padding: 0 30px;*/
|
|
|
|
|
|
+ .idcard-uploader {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-upload .el-upload--text {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.authentication-detail {
|
|
|
- padding-left:20px;
|
|
|
- border-left: 1px solid rgba(220,220,220,1);
|
|
|
+ padding-left: 20px;
|
|
|
+ border-left: 1px solid rgba(220, 220, 220, 1);
|
|
|
+
|
|
|
.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;
|
|
|
}
|
|
|
+
|
|
|
.idcard-example1 {
|
|
|
height: 140px;
|
|
|
background-image: url("../../assets/img/idcard-example1.png");
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
+
|
|
|
.idcard-example2 {
|
|
|
height: 140px;
|
|
|
background-image: url("../../assets/img/idcard-example2.png");
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.authentication-detail-list {
|
|
|
list-style-type: none;
|
|
|
padding-left: 0;
|
|
|
- font-size:12px;
|
|
|
- font-family:Source Han Sans CN;
|
|
|
- font-weight:400;
|
|
|
- color:rgba(153,153,153,1);
|
|
|
- li:before{
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
+
|
|
|
+ li:before {
|
|
|
content: "\2022";
|
|
|
- color: rgba(153,153,153,1);
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
font-size: 16px;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
- .authentication-detail-list-blue{
|
|
|
+
|
|
|
+ .authentication-detail-list-blue {
|
|
|
color: #148AE0;
|
|
|
}
|
|
|
|
|
|
@@ -207,19 +289,35 @@
|
|
|
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;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</style>
|
|
|
+<style lang="less">
|
|
|
+ #individualAuth {
|
|
|
+ .avatar-uploader .idcard-uploader {
|
|
|
+ width: 100%;
|
|
|
+ .avatar {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .el-upload .el-upload--text {
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
wangJJ
