|
|
import React, { Component } from "react";
|
|
|
import { message, Icon, Input, Form, Upload} from "antd";
|
|
|
import axios from 'axios'
|
|
|
import ModalWrapper from "../../courses/common/ModalWrapper"
|
|
|
import { City, getUploadActionUrl,getImageUrl } from 'educoder'
|
|
|
import '../account/common.css'
|
|
|
|
|
|
import authImg from '../../../images/account/auth.png'
|
|
|
import jobImg from '../../../images/account/job.png'
|
|
|
|
|
|
const { TextArea } = Input;
|
|
|
const Dragger = Upload.Dragger;
|
|
|
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;
|
|
|
}
|
|
|
class RealNameCertificationModal extends Component{
|
|
|
constructor(props){
|
|
|
super(props);
|
|
|
this.state={
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
|
}
|
|
|
setVisible = (visible) => {
|
|
|
this.refs.modalWrapper.setVisible(visible)
|
|
|
}
|
|
|
|
|
|
onSendOk = () => {
|
|
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
|
|
console.log(values);
|
|
|
if(!err){
|
|
|
let{imageUrl2}=this.state;
|
|
|
if(imageUrl2){
|
|
|
|
|
|
}else{
|
|
|
this.props.showNotification("请先上传照片！");
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
onOk = () => {
|
|
|
const { course_lists, checkBoxValues } = this.state
|
|
|
this.onSendOk()
|
|
|
}
|
|
|
|
|
|
handleChange = (info) => {
|
|
|
if (info.file.status === 'uploading') {
|
|
|
this.setState({ loading: true });
|
|
|
return;
|
|
|
}
|
|
|
if (info.file.status === 'done') {
|
|
|
// Get this url from response in real world.
|
|
|
getBase64(info.file.originFileObj, imageUrl => this.setState({
|
|
|
imageUrl,
|
|
|
loading: false,
|
|
|
}));
|
|
|
}
|
|
|
}
|
|
|
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.
|
|
|
getBase64(info.file.originFileObj, imageUrl2 => this.setState({
|
|
|
imageUrl2,
|
|
|
loading: false,
|
|
|
}));
|
|
|
}
|
|
|
}
|
|
|
|
|
|
render(){
|
|
|
const { course_lists, checkBoxValues, searchValue, loading, imageUrl, imageUrl2 } = this.state
|
|
|
const { moduleName } = this.props
|
|
|
const { getFieldDecorator } = this.props.form;
|
|
|
const uploadProps = {
|
|
|
name: 'file',
|
|
|
multiple: true,
|
|
|
showUploadList: false,
|
|
|
action: getUploadActionUrl(),
|
|
|
className: 'idPic-uploader first_uploader',
|
|
|
onChange: this.handleChange,
|
|
|
};
|
|
|
|
|
|
const uploadProps2 = {
|
|
|
name: 'file',
|
|
|
multiple: true,
|
|
|
showUploadList: false,
|
|
|
action: getUploadActionUrl(),
|
|
|
className: 'idPic-uploader',
|
|
|
onChange: this.handleChange2,
|
|
|
};
|
|
|
let {certification}=this.props;
|
|
|
return(
|
|
|
<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 }
|
|
|
onOk={this.onOk}
|
|
|
okText="保存"
|
|
|
className="applyForModal certificationModal"
|
|
|
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>
|
|
|
</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>
|
|
|
</div>
|
|
|
}
|
|
|
>
|
|
|
<style>{`
|
|
|
.applyForModal .ant-form-item{
|
|
|
margin-bottom:15px;
|
|
|
}
|
|
|
.applyForModal .ant-form-item-label {
|
|
|
width: 100px;
|
|
|
padding-right: 10px;
|
|
|
}
|
|
|
.applyForModal .ant-form-item-label label {
|
|
|
color: #979797
|
|
|
}
|
|
|
.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-explain{
|
|
|
position:absolute;
|
|
|
bottom:-20px;
|
|
|
left:0px;
|
|
|
width:100%;
|
|
|
}
|
|
|
`}</style>
|
|
|
<Form onSubmit={this.handleSubmit}>
|
|
|
{
|
|
|
certification && certification ==1 &&
|
|
|
<Form.Item
|
|
|
label="证件号："
|
|
|
className="formItemInline"
|
|
|
>
|
|
|
{getFieldDecorator('credentials', {
|
|
|
rules: [{
|
|
|
// initialValue: this.state.cityDefaultValue,
|
|
|
required: true,
|
|
|
message: '请输入证件号',
|
|
|
}],
|
|
|
})(
|
|
|
<Input placeholder="请输入证件号" ></Input>
|
|
|
)}
|
|
|
</Form.Item>
|
|
|
}
|
|
|
<div style={{ marginLeft: '18px' }}>
|
|
|
<div>
|
|
|
<span style={{color: '#999999'}}>{ certification && certification == 1 ? "身份证（人像面）上传":"职业证照片上传" }</span>
|
|
|
<span style={{color: '#FF6800'}}>（png/jpg/bmp格式，不超过2MB）</span>
|
|
|
</div>
|
|
|
|
|
|
<div className="df mt20" style={{ justifyContent: 'center' }} >
|
|
|
<span className="idPic-uploader demoImg">
|
|
|
<img src={`${certification == 1 ? authImg : jobImg}`} alt="avatar" style={{ maxHeight: '110px'}}/>
|
|
|
</span>
|
|
|
<Dragger {...uploadProps2}>
|
|
|
{imageUrl2 ?
|
|
|
<a href={imageUrl2} target="_blank">
|
|
|
<img src={imageUrl2} alt="avatar" style={{ maxHeight: '110px'}}/>
|
|
|
</a> :
|
|
|
<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 className="df mt10 color-grey-9" style={{ justifyContent: 'center' }} >
|
|
|
<span className="fl mr20 edu-txt-center" style={{width:"160px"}}>示例图片</span>
|
|
|
<span className="fl edu-txt-center mr20" style={{width:"160px"}}>
|
|
|
<a href="javascript:void(0)" className="color-orange" style={{borderBottom:"1px solid #ff6800"}}>查看大图</a>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</Form>
|
|
|
|
|
|
|
|
|
</ModalWrapper>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
const WrappedRealNameCertificationModal = Form.create({ name: 'RealNameCertificationModal' })(RealNameCertificationModal);
|
|
|
|
|
|
export default WrappedRealNameCertificationModal;
|
|
|
|
|
|
|
