817 lines
29 KiB
JavaScript
817 lines
29 KiB
JavaScript
import React, { Component } from "react";
|
||
import { message, Icon, Input, Form, Upload, Radio, Tooltip } from "antd";
|
||
import axios from 'axios'
|
||
import ModalWrapper from "../../courses/common/ModalWrapper"
|
||
import { getUploadActionUrl, ImageLayer2, ConditionToolTip } from 'educoder'
|
||
import '../account/common.css'
|
||
import AccountBasicEditItem from '../account/AccountBasicEditItem'
|
||
import ApplyForAddOrgModal from './ApplyForAddOrgModal'
|
||
import ApplyForAddChildOrgModal from './ApplyForAddChildOrgModal'
|
||
|
||
import authImg from '../../../images/account/auth.png'
|
||
import jobImg from '../../../images/account/job.png'
|
||
|
||
const RadioGroup = Radio.Group;
|
||
const Dragger = Upload.Dragger;
|
||
const MAX_NAME_LENGTH = 10
|
||
function getBase64(img, callback) {
|
||
const reader = new FileReader();
|
||
reader.addEventListener('load', () => callback(reader.result));
|
||
reader.readAsDataURL(img);
|
||
}
|
||
function beforeUpload(file) {
|
||
const isJPG = file.type === 'image/jpeg';
|
||
if (!isJPG) {
|
||
message.error('You can only upload JPG file!');
|
||
}
|
||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||
if (!isLt2M) {
|
||
message.error('Image must smaller than 2MB!');
|
||
}
|
||
return isJPG && isLt2M;
|
||
}
|
||
export function getHiddenName(name) {
|
||
if (!name) return ''
|
||
let len = parseInt(name.length) - 1;
|
||
let str = "";
|
||
for (var i = 0; i < len; i++) { str += "*"; }
|
||
const newName = name.substr(0, 1) + str;
|
||
return newName
|
||
}
|
||
class RealNameCertificationModal extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
identity: "teacher",
|
||
departmentsName: undefined,
|
||
fileID: undefined,
|
||
filterSchoolList: undefined,
|
||
filterDepartments: undefined,
|
||
school: undefined,
|
||
school_id: undefined,
|
||
department_id: undefined,
|
||
schoolList: undefined,
|
||
departments: undefined,
|
||
showRealName: true,
|
||
realName: undefined,
|
||
imageUrl2: undefined
|
||
}
|
||
}
|
||
|
||
// 弹框出现（visible==true）时给formitem赋值
|
||
setVisible = (visible) => {
|
||
this.refs.modalWrapper.setVisible(visible);
|
||
this.setState({
|
||
imageUrl2: undefined
|
||
})
|
||
if (visible && this.props.basicInfo) {
|
||
this.setValue(this.props.basicInfo);
|
||
this.getSchoolList(this.props.basicInfo);
|
||
}
|
||
}
|
||
|
||
|
||
setValue = (basicInfo) => {
|
||
;
|
||
if (basicInfo) {
|
||
this.props.form.setFieldsValue({
|
||
nickname: basicInfo.nickname,
|
||
name: !basicInfo.show_realname ? this.hideRealName(basicInfo.name) : basicInfo.name,
|
||
job: basicInfo.identity,
|
||
org: basicInfo.school_name
|
||
})
|
||
setTimeout(() => {
|
||
// 等显示后再set
|
||
this.props.form.setFieldsValue({
|
||
job: basicInfo.identity,
|
||
sex: String(basicInfo.gender),
|
||
student_No: basicInfo.student_id,
|
||
org2: basicInfo.department_name,
|
||
job1: basicInfo && basicInfo.identity == "teacher" ? basicInfo.technical_title : "教授",
|
||
job2: basicInfo && basicInfo.identity == "professional" ? basicInfo.technical_title : "企业管理者",
|
||
})
|
||
}, 100)
|
||
this.setState({
|
||
forDisable: true,
|
||
nameLength: basicInfo.nickname ? basicInfo.nickname.length : 0,
|
||
showRealName: basicInfo.show_realname,
|
||
realName: basicInfo.name,
|
||
identity: basicInfo.identity,
|
||
school_id: basicInfo.school_id,
|
||
department_id: basicInfo.department_id
|
||
})
|
||
}
|
||
}
|
||
|
||
getSchoolList = (basicInfo, selectedName) => {
|
||
let url = `/schools/for_option.json`;
|
||
axios.get(url).then((result) => {
|
||
if (result) {
|
||
this.setState({
|
||
schoolList: result.data.schools
|
||
})
|
||
if (selectedName) {
|
||
let school_id
|
||
result.data.schools.reverse().some(item => {
|
||
if (item.name == selectedName) {
|
||
school_id = item.id
|
||
return true;
|
||
}
|
||
})
|
||
this.props.form.setFieldsValue({
|
||
org: selectedName
|
||
})
|
||
this.setState({
|
||
school_id,
|
||
school: selectedName
|
||
}, () => {
|
||
this.filterList(selectedName)
|
||
})
|
||
} else if (basicInfo && basicInfo.school_name) {
|
||
this.setState({
|
||
school: basicInfo.school_name,
|
||
filterSchoolList: this.state.schoolList.filter(function (item) {
|
||
return item.name.indexOf(basicInfo.school_name) > -1;
|
||
})
|
||
})
|
||
this.getDepartments(basicInfo.school_name, false);
|
||
}
|
||
}
|
||
}).catch((error) => {
|
||
console.log(error);
|
||
})
|
||
}
|
||
|
||
|
||
|
||
getDepartments = (e, flag) => {
|
||
let arr = this.state.schoolList.filter(function (item) {
|
||
if (item.name === e) {
|
||
return item.name;
|
||
}
|
||
});
|
||
if (!arr[0]) {
|
||
if (!e) {
|
||
this.setState({
|
||
filterSchoolList: []
|
||
})
|
||
}
|
||
// 没找到学校，清空部门
|
||
this.setState({
|
||
departments: [],
|
||
filterDepartments: [],
|
||
departmentsName: '',
|
||
school_id: '',
|
||
department_id: '',
|
||
})
|
||
this.this_school_id = ''
|
||
this.props.form.setFieldsValue({
|
||
org2: ''
|
||
})
|
||
return;
|
||
}
|
||
this.props.form.setFieldsValue({
|
||
org: arr[0].name
|
||
})
|
||
this.filterList(e)
|
||
// 保存选择的学校id
|
||
this.this_school_id = arr[0].id
|
||
this.setState({
|
||
school_id: arr[0].id,
|
||
school: e,
|
||
})
|
||
this._getDepartments(arr[0].id, flag)
|
||
}
|
||
_getDepartments = (schoolId, flag, selectedName) => {
|
||
let url = `/schools/${schoolId || this.state.school_id}/departments/for_option.json`;
|
||
axios.get(url).then((result) => {
|
||
if (result) {
|
||
this.setState({
|
||
departments: result.data.departments,
|
||
filterDepartments: result.data.departments
|
||
})
|
||
if (selectedName) {
|
||
let department_id
|
||
result.data.departments.reverse().some(item => {
|
||
if (item.name == selectedName) {
|
||
department_id = item.id
|
||
return true;
|
||
}
|
||
})
|
||
this.props.form.setFieldsValue({
|
||
org2: selectedName
|
||
})
|
||
this.setState({
|
||
department_id,
|
||
// school: selectedName
|
||
})
|
||
} else if (result.data.departments && result.data.departments.length > 0 && flag == true) {
|
||
// 切换学校后，部门默认选择第一个
|
||
this.props.form.setFieldsValue({
|
||
org2: result.data.departments[0].name
|
||
})
|
||
this.setState({
|
||
department_id: result.data.departments[0].id
|
||
})
|
||
} else if (result.data.departments && result.data.departments.length == 0 && flag == true) {
|
||
this.props.form.setFieldsValue({
|
||
org2: ''
|
||
})
|
||
}
|
||
}
|
||
}).catch((error) => {
|
||
console.log(error);
|
||
})
|
||
}
|
||
|
||
filterList = (e) => {
|
||
const inputVal = e.trim()
|
||
let arr = [];
|
||
if (inputVal) {
|
||
arr = this.state.schoolList.filter(function (item) {
|
||
return item.name.indexOf(inputVal) > -1;
|
||
});
|
||
this.props.form.setFieldsValue({
|
||
org: inputVal
|
||
})
|
||
this.setState({
|
||
school: inputVal,
|
||
filterSchoolList: arr
|
||
})
|
||
} else {
|
||
this.setState({
|
||
school: '',
|
||
})
|
||
}
|
||
// else{
|
||
// let {school}=this.state;
|
||
// arr= this.state.schoolList.filter(function(item){
|
||
// return item.name.indexOf(school)>-1;
|
||
// });
|
||
// }
|
||
}
|
||
|
||
onSendOk = () => {
|
||
this.props.form.validateFieldsAndScroll((err, values) => {
|
||
console.log(values);
|
||
console.log(this.state.showRealName ? values.name : this.state.realName);
|
||
// return;
|
||
if (!err) {
|
||
let { imageUrl2, showRealName, realName } = this.state;
|
||
let { current_user, basicInfo } = this.props;
|
||
if (imageUrl2) {
|
||
let { certification } = this.props;
|
||
if (certification == 1) {
|
||
// 实名认证
|
||
let url = "";
|
||
if (basicInfo === undefined) {
|
||
url = `/users/accounts/${current_user && current_user.login}/authentication_apply.json`;
|
||
|
||
} else {
|
||
url = `/users/accounts/${basicInfo && basicInfo.id}/authentication_apply.json`;
|
||
}
|
||
|
||
axios.post((url), {
|
||
name: this.state.showRealName ? values.name : realName,
|
||
gender: parseInt(values.sex),
|
||
id_number: values.credentials,
|
||
show_realname: showRealName,
|
||
attachment_ids: [this.state.fileID]
|
||
}).then((result) => {
|
||
if (result) {
|
||
this.props.showNotification("申请已提交，请等待审核!");
|
||
try {
|
||
this.props.getBasicInfo();
|
||
} catch (e) {
|
||
}
|
||
try {
|
||
this.props.Getdata(this.props.userdata.id);
|
||
} catch (e) {
|
||
|
||
}
|
||
this.setVisible(false);
|
||
}
|
||
}).catch((error) => {
|
||
console.log(error);
|
||
})
|
||
} else {
|
||
// 职业认证
|
||
// console.log(values.job == "student" ? values.student_No : values.job == "teacher" ? values.job1 : values.job2);
|
||
let url = "";
|
||
if (basicInfo === undefined) {
|
||
url = `/users/accounts/${current_user && current_user.login}/professional_auth_apply.json`;
|
||
} else {
|
||
url = `/users/accounts/${basicInfo && basicInfo.id}/professional_auth_apply.json`;
|
||
|
||
}
|
||
axios.post((url), {
|
||
school_id: this.state.school_id,
|
||
department_id: this.state.department_id,
|
||
identity: this.state.identity,
|
||
extra: values.job == "student" ? values.student_No : values.job == "teacher" ? values.job1 : values.job2,
|
||
attachment_ids: [this.state.fileID]
|
||
}).then((result) => {
|
||
if (result) {
|
||
this.props.showNotification("申请已提交，请等待审核!");
|
||
try {
|
||
this.props.getBasicInfo();
|
||
} catch (e) {
|
||
|
||
}
|
||
try {
|
||
this.props.Getdata(this.props.userdata.id);
|
||
} catch (e) {
|
||
|
||
}
|
||
this.setVisible(false);
|
||
|
||
}
|
||
}).catch((error) => {
|
||
console.log(error);
|
||
})
|
||
}
|
||
} else {
|
||
this.props.showNotification("请先上传照片！");
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
onOk = () => {
|
||
const { course_lists, checkBoxValues } = this.state
|
||
this.onSendOk()
|
||
}
|
||
|
||
handleChange2 = (info) => {
|
||
if (info.file.status === 'uploading') {
|
||
this.setState({ loading: true });
|
||
return;
|
||
}
|
||
if (info.file.status === 'done') {
|
||
// Get this url from response in real world.
|
||
console.log(info.file.response);
|
||
getBase64(info.file.originFileObj, imageUrl2 => this.setState({
|
||
imageUrl2,
|
||
loading: false,
|
||
fileID: info.file.response && info.file.response.id
|
||
}));
|
||
}
|
||
}
|
||
// 切换职称
|
||
changeJob = (e) => {
|
||
this.setState({
|
||
identity: e
|
||
})
|
||
let { basicInfo } = this.props;
|
||
if (basicInfo) {
|
||
this.props.form.setFieldsValue({
|
||
job1: basicInfo && basicInfo.identity == "teacher" ? basicInfo.technical_title : "教授",
|
||
job2: basicInfo && basicInfo.identity == "professional" ? basicInfo.technical_title : "企业管理者",
|
||
})
|
||
}
|
||
}
|
||
// 选择学校(获取对应学校的学院、部门)
|
||
changeList = (e) => {
|
||
this.getDepartments(e.trim(), true);
|
||
}
|
||
|
||
showApplyForAddOrgModal = () => {
|
||
this.applyForAddOrgForm.setVisible(true)
|
||
}
|
||
showApplyForAddChildOrgModal = () => {
|
||
let { school, schoolList } = this.state;
|
||
let arr = schoolList.filter(function (item) {
|
||
return item.name == school;
|
||
});
|
||
if (arr.length > 0) {
|
||
this.applyForAddChildOrgForm.setVisible(true)
|
||
} else {
|
||
this.props.showNotification("请先选择正确的单位或者学校！");
|
||
}
|
||
}
|
||
addOrgSuccess = (name) => {
|
||
// const schoolList = this.state.schoolList.slice(0)
|
||
// schoolList.push({ id: schoolList.length + 2000, name: name})
|
||
// this.setState({ schoolList })
|
||
|
||
this.getSchoolList(this.props.basicInfo, name);
|
||
this.props.form.setFieldsValue({
|
||
org: name
|
||
})
|
||
}
|
||
|
||
addChildOrgSuccess = (deptName) => {
|
||
|
||
this._getDepartments(this.state.school_id, false, deptName);
|
||
|
||
}
|
||
|
||
// 隐藏或显示真实姓名
|
||
showOrHide = (flag) => {
|
||
const name = this.props.form.getFieldsValue().name || this.props.basicInfo.name
|
||
this.setState({
|
||
showRealName: flag == true ? false : true
|
||
})
|
||
if (flag == true) { // 隐藏真实姓名
|
||
this.hideRealName(name);
|
||
} else { // 显示
|
||
this.props.form.setFieldsValue({
|
||
name: this.state.realName
|
||
})
|
||
}
|
||
}
|
||
// 将名字隐藏起来
|
||
hideRealName = (name) => {
|
||
this.setState({ realName: name })
|
||
const newName = getHiddenName(name)
|
||
|
||
this.props.form.setFieldsValue({
|
||
name: newName
|
||
})
|
||
return newName
|
||
}
|
||
// 选择部门、学院
|
||
changeDepartment = (e) => {
|
||
let arr = this.state.departments && this.state.departments.filter ? this.state.departments.filter(function (item) {
|
||
return item.name == e;
|
||
}) : [];
|
||
if (!arr[0]) {
|
||
this.setState({
|
||
department_id: '',
|
||
departmentsName: e,
|
||
filterDepartments: [],
|
||
})
|
||
this.this_department_id = ''
|
||
return;
|
||
}
|
||
this.this_department_id = arr[0].id
|
||
this.setState({
|
||
departmentsName: e,
|
||
department_id: arr[0].id,
|
||
})
|
||
}
|
||
// 姓名
|
||
handleSubmitNames(rule, value, callback) {
|
||
if (value) {
|
||
let iconRule1 = /[`~!@#$%^&()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&（）——\-+={}|《》？：“”【】、；‘’，。、]/im;
|
||
// 判断是否含有emoji表情
|
||
let iconRule2 = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
|
||
// 如果为true，字符串含有emoji表情 ，false不含
|
||
const iconRule2s = iconRule2.test(value);
|
||
// 如果为true，字符串含有特殊符号 ，false不
|
||
const iconRule1s = iconRule1.test(value);
|
||
|
||
if (iconRule2s === true || iconRule1s === true) {
|
||
callback('2-10位中英文、数字');
|
||
}
|
||
else if (value.length < 2) {
|
||
callback('2-10位中英文、数字');
|
||
} else if (value.length >= 11) {
|
||
callback('2-10位中英文、数字');
|
||
}
|
||
}
|
||
callback();
|
||
}
|
||
|
||
render() {
|
||
const { course_lists, checkBoxValues, searchValue, loading, imageUrl, imageUrl2,
|
||
identity,
|
||
departmentsName,
|
||
filterSchoolList,
|
||
filterDepartments,
|
||
school,
|
||
department_id,
|
||
departments,
|
||
school_id,
|
||
|
||
showRealName
|
||
} = this.state
|
||
const { moduleName } = this.props
|
||
const { getFieldDecorator } = this.props.form;
|
||
let { certification } = this.props;
|
||
// /api/users/accounts/${this.props.current_user.login}/auth_attachment.json
|
||
|
||
// 已职业认证的账户不能修改职业，学校/单位，院系/部门（true为disable）
|
||
// const professionalFlag = basicInfo && basicInfo.professional_certification == "certified" ;
|
||
|
||
let { basicInfo } = this.props
|
||
let common = {
|
||
changeJob: this.changeJob,
|
||
filterList: this.filterList,
|
||
changeList: this.changeList,
|
||
changeDepartment: this.changeDepartment,
|
||
showApplyForAddOrgModal: this.showApplyForAddOrgModal,
|
||
showApplyForAddChildOrgModal: this.showApplyForAddChildOrgModal
|
||
}
|
||
const uploadProps2 = {
|
||
// name: 'image',
|
||
data: { type: certification == 1 ? "real_name" : "professional" },
|
||
multiple: true,
|
||
showUploadList: false,
|
||
// https://newweb.educoder.net
|
||
action: this.props.current_user ? `${getUploadActionUrl()}` : '',
|
||
className: 'idPic-uploader',
|
||
onChange: this.handleChange2,
|
||
beforeUpload: (file) => {
|
||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||
if (!isJpgOrPng) {
|
||
this.props.showNotification('请上传正确文件格式');
|
||
}
|
||
return isJpgOrPng;
|
||
},
|
||
};
|
||
|
||
// form合并了
|
||
const propsWithoutForm = Object.assign({}, this.props)
|
||
delete propsWithoutForm.form
|
||
return (
|
||
<div>
|
||
<ApplyForAddOrgModal ref="applyForAddOrgModal" wrappedComponentRef={(form) => this.applyForAddOrgForm = form} schoolName={school}
|
||
{...propsWithoutForm} addOrgSuccess={this.addOrgSuccess}
|
||
></ApplyForAddOrgModal>
|
||
<ApplyForAddChildOrgModal ref="applyForAddChildOrgModal" schoolName={school} schoolId={school_id} departmentName={departmentsName}
|
||
{...propsWithoutForm}
|
||
wrappedComponentRef={(form) => this.applyForAddChildOrgForm = form}
|
||
addChildOrgSuccess={this.addChildOrgSuccess}
|
||
></ApplyForAddChildOrgModal>
|
||
<ModalWrapper
|
||
ref="modalWrapper"
|
||
title={
|
||
certification && certification == 1 ?
|
||
<span><i className="iconfont icon-shenfenrenzheng font-18 color-blue mr5" style={{ fontWeight: "normal" }}></i>实名认证</span> :
|
||
<span><i className="iconfont icon-zhiyerenzheng font-18 color-blue mr5" style={{ fontWeight: "normal" }}></i>职业认证</span>
|
||
}
|
||
{...this.props}
|
||
{...this.state}
|
||
onOk={this.onOk}
|
||
okText="保存"
|
||
className="applyForModal certificationModal courseNormalForm autoModal"
|
||
width="660px"
|
||
bottomRender={
|
||
certification && certification == 1 ?
|
||
<div className="bottomRender">
|
||
<p>认证须知：</p>
|
||
<p>
|
||
1.你需要准备有效的身份证正面（人像面）的证件照照片，请确保证件照片清晰可见，严禁PS；
|
||
</p><p>
|
||
2.我们将在你提交认证信息后的24小时（不包含节假日）内完成审核，审核结果将会以系统消息的形式发送给你；
|
||
</p><p>
|
||
3.实名认证审核完成后，无法删除，请谨慎填写；
|
||
</p><p>
|
||
4.实名认证审核完成后，系统将自动发放500个金币作为奖励；
|
||
</p><p>
|
||
5.我们会确保你所提供的信息均处于严格的保密状态，不会泄露；
|
||
</p><p>
|
||
6.如存在恶意乱填写姓名，证件号，及上传与实名认证证件无关图片者，一经发现将冻结EduCoder账号。
|
||
</p><p>
|
||
7.提交实名认证后系统会自动将状态改为已认证，你将可以体验平台需要实名认证的功能；如果在认证后的使用过程中未通过审核，你将不能继续体验需要认证的功能。
|
||
</p>
|
||
</div> :
|
||
<div className="bottomRender">
|
||
<p>认证须知：</p>
|
||
<p>
|
||
1.根据职业上传相应的证件照：教师（教师证），专业人士（员工证）、学生（学生证），请确保证件照内容完整并且清晰可见，严禁PS；
|
||
</p><p>
|
||
2.我们将在你提交职业证信息后的24小时（不包含节假日）内完成审核，审核结果将会以系统消息的形式发送给你；
|
||
</p><p>
|
||
3.职业认证审核完成后，无法删除，请谨慎填写；职业变更请选择重新认证；
|
||
</p><p>
|
||
4.职业认证审核完成后，系统将自动发放500个金币作为奖励；
|
||
</p><p>
|
||
5.我们会确保你所提供的信息均处于严格的保密状态，不会泄露；
|
||
</p><p>
|
||
6.如存在恶意乱填写姓名，学号，及上传与职业证件无关图片者，一经发现将冻结EduCoder账号。
|
||
</p>
|
||
<p>
|
||
7.非老师身份提交职业认证后系统会自动将状态改为已认证，你将可以体验平台需要职业认证的功能；如果在认证后的使用过程中未通过审核，你将不能继续体验需要认证的功能。
|
||
</p>
|
||
</div>
|
||
}
|
||
>
|
||
<style>{`
|
||
.applyForModal .ant-form-item{
|
||
margin-bottom:18px;
|
||
}
|
||
.applyForModal .ant-form-item-label {
|
||
width: 100px;
|
||
padding-right: 10px;
|
||
}
|
||
.applyForModal .ant-form-item-label label {
|
||
color: #979797
|
||
}
|
||
.applyForModal .ant-upload.ant-upload-drag .ant-upload {
|
||
padding: 0px;
|
||
}
|
||
|
||
.certificationModal .ant-modal-body{
|
||
padding:20px;
|
||
}
|
||
// .certificationModal .formItemInline .ant-form-item-control-wrapper {
|
||
// width: 448px;
|
||
// }
|
||
span.idPic-uploader {
|
||
margin-right:20px;
|
||
height:110px;
|
||
}
|
||
.idPic-uploader > .ant-upload {
|
||
width: 160px;
|
||
height: 110px;
|
||
}
|
||
.idPic-uploader .ant-upload.ant-upload-drag p.ant-upload-drag-icon {
|
||
margin-bottom: 0px;
|
||
}
|
||
.idPic-uploader .ant-upload.ant-upload-drag p.ant-upload-drag-icon i{
|
||
font-size:42px!important;
|
||
color:#4B667F
|
||
}
|
||
.idPic-uploader .ant-upload.ant-upload-drag p.ant-upload-text a{
|
||
font-size: 12px;
|
||
color:#4B667F;
|
||
border-bottom:1px solid #4B667F
|
||
}
|
||
.idPic-uploader .ant-upload.ant-upload-drag {
|
||
padding: 0px;
|
||
border:1px solid rgba(218,218,218,1)!important;
|
||
}
|
||
.idPic-uploader img {
|
||
width:100%
|
||
}
|
||
.first_uploader {
|
||
margin-left: 42px;
|
||
}
|
||
.certificationModal .marginauto{
|
||
margin-top:20px!important;
|
||
}
|
||
.bottomRender {
|
||
padding: 19px;
|
||
background: rgb(245,245,245);
|
||
margin-top: 20px;
|
||
color: #656565;
|
||
}
|
||
|
||
span.idPic-uploader.demoImg {
|
||
width:160px;
|
||
background:rgba(240,240,240,1);
|
||
border:1px solid rgba(218,218,218,1);
|
||
border-radius:4px;
|
||
padding:0px 5px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: -webkit-flex;
|
||
}
|
||
.formItemInline.ant-form-item {
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
}
|
||
.formItemInline {
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
position: relative;
|
||
}
|
||
.formItemInline .ant-form-explain{
|
||
position:absolute;
|
||
bottom:-20px;
|
||
left:0px;
|
||
width:100%;
|
||
}
|
||
.yslgraduainputedit{
|
||
width:295px;
|
||
}
|
||
`}</style>
|
||
|
||
<Form onSubmit={this.handleSubmit}>
|
||
{certification && certification == 1 ?
|
||
<div>
|
||
<Form.Item
|
||
label="姓名"
|
||
className="formItemInline"
|
||
>
|
||
<React.Fragment>{getFieldDecorator('name', {
|
||
rules: [{
|
||
// initialValue: this.state.cityDefaultValue,
|
||
required: true,
|
||
message: `请输入真实姓名，最大限制${MAX_NAME_LENGTH}个字符`,
|
||
|
||
},
|
||
{ validator: this.handleSubmitNames },
|
||
],
|
||
})(
|
||
<Input placeholder={`请输入真实姓名，最大限制${MAX_NAME_LENGTH}个字符`} className="yslgraduainputedit" disabled={!showRealName && this.state.forDisable == true} addonAfter={
|
||
<i className={showRealName ? "iconfont icon-xianshi font-18 color-blue" : "iconfont icon-yincang font-18 color-blue"}
|
||
onClick={() => this.showOrHide(showRealName)}></i>
|
||
}></Input>
|
||
)}
|
||
<span>{showRealName ? '（显示：平台将显示您的真实姓名）' : '（隐藏：平台将显示你的昵称）'}</span>
|
||
</React.Fragment>
|
||
{/* // <div className="df" style={{}}>
|
||
// <Tooltip title="已完成实名认证，不能修改">
|
||
// <span className="mr8" >{showRealName ? this.props.basicInfo.name : getHiddenName(this.props.basicInfo.name)}</span>
|
||
// </Tooltip>
|
||
// <i className={showRealName?"iconfont icon-xianshi font-18 color-blue":"iconfont icon-yincang font-18 color-blue"}
|
||
// onClick={()=>this.showOrHide(showRealName)}></i>
|
||
// <span>{ showRealName ? '（显示：平台将显示您的真实姓名）' : '（隐藏：平台将显示你的昵称）' }</span>
|
||
// </div> */}
|
||
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label="性别"
|
||
className="formItemInline resetSexStyle"
|
||
>
|
||
{getFieldDecorator('sex', {
|
||
rules: [{
|
||
required: true,
|
||
message: '请选择性别',
|
||
}],
|
||
})(
|
||
<RadioGroup>
|
||
<Radio value="0">男</Radio>
|
||
<Radio value="1">女</Radio>
|
||
</RadioGroup>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item
|
||
label="证件号："
|
||
className="formItemInline"
|
||
>
|
||
{getFieldDecorator('credentials', {
|
||
rules: [{
|
||
// initialValue: this.state.cityDefaultValue,
|
||
required: true,
|
||
message: '请输入证件号',
|
||
}],
|
||
})(
|
||
<Input placeholder="请输入证件号" ></Input>
|
||
)}
|
||
</Form.Item>
|
||
</div>
|
||
:
|
||
<AccountBasicEditItem
|
||
identity={identity}
|
||
getFieldDecorator={getFieldDecorator}
|
||
professionalFlag={false}
|
||
basicInfo={basicInfo}
|
||
{...this.props}
|
||
{...this.state}
|
||
{...common}
|
||
form={this.props.form}
|
||
filterSchoolList={filterSchoolList}
|
||
filterDepartments={filterDepartments}
|
||
departmentsName={departmentsName}
|
||
school={school}
|
||
department_id={department_id}
|
||
departments={departments}
|
||
></AccountBasicEditItem>
|
||
}
|
||
<div className="mt15" style={{ marginLeft: '18px' }}>
|
||
<div className="df">
|
||
<span style={{ color: '#999999' }}>{certification && certification == 1 ? "身份证上传:" : "职业证上传:"}</span>
|
||
<div className="df ml10" style={{ justifyContent: 'center' }} >
|
||
<span className="idPic-uploader demoImg">
|
||
<img src={`${certification == 1 ? authImg : jobImg}`} alt="avatar" style={{ maxHeight: '110px' }} />
|
||
</span>
|
||
<Dragger {...uploadProps2}
|
||
accept=".png,.jpg,.bmp,.jpeg"
|
||
>
|
||
{imageUrl2 ?
|
||
// <a href={imageUrl2} target="_blank" title="点击重新上传图片"></a>
|
||
<img src={imageUrl2} alt="avatar" style={{ maxHeight: '110px' }} />
|
||
:
|
||
<React.Fragment>
|
||
<p className="ant-upload-drag-icon">
|
||
<i className="iconfont icon-cuban2shangchuanyunduan" style={{ color: "#4B667F", font: "42px" }}></i>
|
||
</p>
|
||
<p className="ant-upload-text mt20"><a>点击或拖拽上传图片</a></p>
|
||
{/* <p className="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p> */}
|
||
</React.Fragment>
|
||
}
|
||
</Dragger>
|
||
</div>
|
||
</div>
|
||
<div className="df mt10 color-grey-9">
|
||
<span className="fl edu-txt-center" style={{ width: "200px", marginLeft: "65px" }}>
|
||
<p>示例图片</p>
|
||
<p className="font-12" style={{ color: '#FF6800' }}>（png/jpg/bmp格式，不超过2MB）</p>
|
||
</span>
|
||
<span className="fl edu-txt-center" style={{ width: "160px" }}>
|
||
<ImageLayer2 parentSel={'#imageLayerBtn'} parentSel={'#imageLayerBtn'}
|
||
></ImageLayer2>
|
||
<a id="imageLayerBtn" src={imageUrl || imageUrl2} className="color-orange" style={{ borderBottom: "1px solid #ff6800" }}>查看大图</a>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</Form>
|
||
|
||
|
||
</ModalWrapper>
|
||
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
const WrappedRealNameCertificationModal = Form.create({ name: 'RealNameCertificationModal' })(RealNameCertificationModal);
|
||
|
||
export default WrappedRealNameCertificationModal;
|
||
|
||
|