node-swallowjs
Version:
epp portal
231 lines (228 loc) • 10.4 kB
JSX
var AuthContact = React.createClass({
mixins: [FormMixin],
shouldUpdate: false,
getInitialState() {
return {
registrantType: 'none',
idType: '1',
idCode: '',
idImg: '',
userRegion: '1',
orgIdType: '1',
orgIdCode: '',
orgIdImg: '',
posting: 'none'
}
},
handleId(id){
if(!id) return id;
var y = (id.slice(6,8)|0) >= 35? '19':'20';
var ret = id.slice(0,6) + y +id.slice(6);
return ret;
},
getParam() {
let ret = {
registrantType: {'none':1,'block':2}[this.state.registrantType],
idType: this.state.idType,
idCode: (this.state.registrantType === 'none' && this.state.idType === '1')? this.handleId(this.state.id) : this.state.idCode,
idImg: this.state.idImg,
userRegion: this.state.userRegion
};
if(this.state.registrantType==='block'){
ret.orgType = this.state.orgType,
ret.orgIdType = this.state.orgIdType,
ret.orgIdCode = this.state.orgIdCode,
ret.orgIdImg = this.state.orgIdImg
}
return ret;
},
handleSubmit(e) {
this.state.posting = 'block';
this.forceUpdate();
api.uploadRegistrant(this.state.id, this.getParam(), function(code, data) {
switch(code) {
case '1000':
this.props.onFinish();
break;
case '2501':
logout();
break;
default:
this.state.value = data;
this.forceUpdate();
}
}.bind(this));
},
render() {
return (
<div>
<div style={{display: (this.state.status || this.state.description)? 'block':'none'}} className="status-content">
<p style={{display: this.state.status? 'block':'none'}}><label>状态：</label>{this.state.status}</p>
<p style={{display: this.state.description? 'block':'none'}}><label>原因：</label>{this.state.description}</p>
</div>
<table className="formtable" border="0">
<tbody>
<tr align="center">
<td colSpan="2">{this.props.children}</td>
</tr>
<tr>
<td colSpan="2" height="16"></td>
</tr>
<tr>
<td>认证方式：</td>
<td>
<label><input {...this.linkState({
name: 'registrantType',
type: 'radio',
value: 'none'
})}/>个人认证</label>
<label><input {...this.linkState({
name: 'registrantType',
type: 'radio',
value: 'block'
})}/>企业认证</label>
</td>
</tr>
<tr>
<td>注册人姓名：</td>
<td>{this.state.name}</td>
</tr>
<tr>
<td>证件类型：</td>
<td>
<label><input {...this.linkState({
name: 'idType',
type: 'radio',
value: '1'
})}/>身份证</label>
<label><input {...this.linkState({
name: 'idType',
type: 'radio',
value: '3'
})}/>护照</label>
<label><input {...this.linkState({
name: 'idType',
type: 'radio',
value: '6'
})}/>港澳居民来往内地通行证</label>
<label><input {...this.linkState({
name: 'idType',
type: 'radio',
value: '12'
})}/>台湾居民来往大陆通行证</label>
<label><input {...this.linkState({
name: 'idType',
type: 'radio',
value: '13'
})}/>外国人永久居留身份证</label>
<label><input {...this.linkState({
name: 'idType',
type: 'radio',
value: '28'
})}/>港澳居民居住证</label>
<label><input {...this.linkState({
name: 'idType',
type: 'radio',
value: '29'
})}/>台湾居民居住证</label>
</td>
</tr>
<tr>
<td>证件号码：</td>
<td>
<label style={{display: (this.state.registrantType === 'none' && this.state.idType === '1')? 'block':'none'}}>{this.handleId(this.state.id)}</label>
<input style={{display: (this.state.registrantType === 'block' || this.state.idType != '1')? 'block':'none'}} {...this.linkState({
type: 'text',
name: 'idCode',
size: '32',
maxLength: '18'
})}/>
</td>
</tr>
<tr style={{display: this.state.registrantType}}>
<td>企业名称：</td>
<td>{this.state.org}</td>
</tr>
<tr style={{display: this.state.registrantType}}>
<td>企业类型：</td>
<td>
<label><input {...this.linkState({
name: 'orgType',
type: 'radio',
value: '1'
})}/>个体</label>
<label><input {...this.linkState({
name: 'orgType',
type: 'radio',
value: '2'
})}/>工商</label>
</td>
</tr>
<tr style={{display: this.state.registrantType}}>
<td>组织证明证件类型：</td>
<td>
<SelectOrgIdType className="sel" {...this.linkState({name: 'orgIdType'})} /> 请选择合适的证件类型
</td>
</tr>
<tr style={{display: this.state.registrantType}}>
<td>组织证明证件号码：</td>
<td>
<input {...this.linkState({
type: 'text',
name: 'orgIdCode',
size: '32',
maxLength: '32'
})}/>
</td>
</tr>
<tr>
<td>用户类型：</td>
<td>
<label><input {...this.linkState({
name: 'userRegion',
type: 'radio',
checked: 'checked',
value: '1'
})}/>国内用户</label>
<label><input {...this.linkState({
name: 'userRegion',
type: 'radio',
value: '2'
})}/>国外用户</label>
</td>
</tr>
<tr>
<td>联系人证件图片：</td>
<td>
<input {...this.linkState({
name: "idImg",
type: "file",
accept: "image/png,image/jpeg,image/bmp"
})}/><em className="red block"></em>
<label className="block">要求原始图片大小介于5k-5m之间，格式为jpg、bmp或png</label>
</td>
</tr>
<tr style={{display: this.state.registrantType}}>
<td>组织证件图片：</td>
<td>
<input {...this.linkState({
name: "orgIdImg",
type: "file",
accept: "image/png,image/jpeg,image/bmp"
})}/><em className="red block"></em>
<label className="block">要求原始图片大小介于5k-5m之间，格式为jpg、bmp或png</label>
</td>
</tr>
<tr>
<td colSpan="2" height="16"></td>
</tr>
<tr align="center">
<td colSpan="2"><input type="button" value="提交" onClick={this.handleSubmit} /></td>
</tr>
</tbody>
</table>
<OpResult content={this.state.value} />
</div>
);
}
});