personal.jsx 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484
  1. import React from 'react';
  2. import { Input, Button, Form, Upload, Icon, Spin, message, Row, Col, DatePicker, Select, Radio } from 'antd';
  3. import './certify.less';
  4. import { addressInit, getBase64, beforeUpload, beforeUploadFile } from '../tools.js';
  5. import ajax from 'jquery/src/ajax/xhr.js'
  6. import $ from 'jquery/src/ajax';
  7. import moment from 'moment';
  8. import card1 from '../../../image/idcard1.jpg';
  9. import card2 from '../../../image/idcard2.jpg';
  10. class Avatar extends React.Component {
  11. constructor(props) {
  12. super(props);
  13. this.state = {
  14. imageUrl: ''
  15. }
  16. }
  17. handleChange(info) {
  18. if (info.file.status === 'done') {
  19. // Get this url from response in real world.
  20. getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl }));
  21. this.props.urlData(info.file.response.data);
  22. }
  23. }
  24. render() {
  25. const imageUrl = this.state.imageUrl;
  26. return (
  27. <Upload
  28. className="avatar-uploader"
  29. name={this.props.name}
  30. showUploadList={false}
  31. action={globalConfig.context + "/api/user/identity/upload"}
  32. data={{ 'sign': this.props.name }}
  33. beforeUpload={beforeUpload}
  34. onChange={this.handleChange.bind(this)}
  35. >
  36. {
  37. imageUrl ?
  38. <img src={imageUrl} role="presentation" id={this.props.name} /> :
  39. <Icon type="plus" className="avatar-uploader-trigger" />
  40. }
  41. </Upload>
  42. );
  43. }
  44. };
  45. class UploadFile extends React.Component {
  46. constructor(props) {
  47. super(props);
  48. }
  49. handleChange(info) {
  50. if (info.file.status === 'done') {
  51. this.props.urlData(info.file.response.data);
  52. }
  53. }
  54. render() {
  55. return (
  56. <Upload
  57. name={this.props.name}
  58. action={globalConfig.context + "/api/user/identity/upload"}
  59. data={{ 'sign': this.props.name }}
  60. beforeUpload={beforeUploadFile}
  61. onChange={this.handleChange.bind(this)}
  62. >
  63. <Button><Icon type="upload" />上传</Button>
  64. </Upload>
  65. );
  66. }
  67. };
  68. const Content = Form.create()(React.createClass({
  69. getData() {
  70. this.setState({
  71. loading: true
  72. });
  73. $.ajax({
  74. method: "get",
  75. dataType: "json",
  76. url: globalConfig.context + "/api/user/orgProcess",
  77. success: function (data) {
  78. if (data.data) {
  79. addressInit('cmbProvince', 'cmbCity', 'cmbArea',
  80. data.data.licenceProvince, data.data.licenceCity, data.data.licenceArea);
  81. this.setState({
  82. contacts: data.data.contacts,
  83. contactMobile: data.data.contactMobile,
  84. aftUsername: data.data.aftUsername,
  85. unitName: data.data.unitName,
  86. registeredCapital: data.data.registeredCapital,
  87. licenceNumber: data.data.licenceNumber,
  88. orgCode: data.data.orgCode,
  89. legalPerson: data.data.legalPerson,
  90. legalPersonIdCard: data.data.legalPersonIdCard,
  91. licenceScanningUrl: data.data.licenceScanningUrl,
  92. orgCodeUrl: data.data.orgCodeUrl,
  93. lastYearTaxReportUrl: data.data.lastYearTaxReportUrl,
  94. listed: data.data.listed,
  95. listedDate: data.data.listedDateFormattedDate,
  96. listedType: data.data.listedType,
  97. stockCode: data.data.stockCode,
  98. auditStatus:data.data.auditStatus
  99. });
  100. };
  101. }.bind(this),
  102. }).done(function (data) {
  103. if (data.error.length) {
  104. message.warning(data.error[0].message);
  105. }
  106. }.bind(this)).always(function () {
  107. this.setState({
  108. loading: false
  109. });
  110. }.bind(this));
  111. },
  112. getInitialState() {
  113. return {
  114. loading: false,
  115. vsCodeSrc: globalConfig.context + '/open/getVCode'
  116. };
  117. },
  118. handleSubmit(e) {
  119. e.preventDefault();
  120. this.props.form.validateFields((err, values) => {
  121. //地址值
  122. let cmbP = document.getElementById('cmbProvince').value;
  123. let cmbC = document.getElementById('cmbCity').value;
  124. let cmbA = document.getElementById('cmbArea').value;
  125. if (!cmbP || !cmbC || !cmbA) {
  126. message.warning("请选择所在地!");
  127. return;
  128. };
  129. if (!this.state.licenceScanningUrl) {
  130. message.warning("请上传营业执照副本!");
  131. return;
  132. };
  133. if (!this.state.orgCodeUrl) {
  134. message.warning("请上传组织机构代码证!");
  135. return;
  136. };
  137. if (!this.state.lastYearTaxReportUrl) {
  138. message.warning("请上传上年度纳税报表!");
  139. return;
  140. };
  141. if (!err) {
  142. this.setState({
  143. loading: true
  144. });
  145. if ( values.listed == 1 ) {
  146. if ( !values.listedDate || !values.listedType || !values.stockCode ) {
  147. message.warning("请输入上市资料!");
  148. return;
  149. };
  150. };
  151. $.ajax({
  152. method: "POST",
  153. dataType: "json",
  154. crossDomain: false,
  155. url: globalConfig.context + "/api/user/orgNextPro",
  156. data: {
  157. contacts: values.contacts,
  158. contactMobile: values.contactMobile,
  159. aftUsername: values.aft,
  160. unitName: values.unitName,
  161. registeredCapital: values.registeredCapital,
  162. licenceNumber: values.licenceNumber,
  163. licenceProvince: cmbP,
  164. licenceCity: cmbC,
  165. licenceArea: cmbA,
  166. licenceScanningUrl: this.state.licenceScanningUrl,
  167. orgCode: values.orgCode,
  168. orgCodeUrl: this.state.orgCodeUrl,
  169. lastYearTaxReportUrl: this.state.lastYearTaxReportUrl,
  170. legalPerson: values.legalPerson,
  171. legalPersonIdCard: values.legalPersonIdCard,
  172. verificationCode: values.captcha,
  173. listed: values.listed,
  174. listedDateFormattedDate: values.listedDate.format("YYYY-MM-DD"),
  175. listedType: values.listedType,
  176. stockCode: values.stockCode,
  177. auditStatus:this.state.auditStatus,
  178. process: 1
  179. }
  180. }).done(function (data) {
  181. if (!data.error.length) {
  182. message.success('保存成功!');
  183. this.props.changeStep(2);
  184. } else {
  185. message.warning(data.error[0].message);
  186. this.reloadVCode();
  187. this.setState({
  188. loading: false
  189. });
  190. }
  191. }.bind(this));
  192. }
  193. });
  194. },
  195. checkIdcardnum(rule, value, callback) {
  196. if (!/(^\d{15}$)|(^\d{17}(\d|X)$)/.test(value)) {
  197. callback('请输入正确的身份证号!');
  198. } else {
  199. callback();
  200. }
  201. },
  202. checkPhone(rule, value, callback) {
  203. const form = this.props.form;
  204. const _me = this;
  205. if (!(/^1[34578]\d{9}$/.test(value))) {
  206. callback('请输入正确的手机号码!');
  207. _me.setState({
  208. getCodeButton: true
  209. });
  210. } else {
  211. callback();
  212. _me.setState({
  213. getCodeButton: false
  214. });
  215. }
  216. },
  217. checkNumber(rule, value, callback) {
  218. if (!/(^\d{15}$)/.test(value)) {
  219. callback('请输入正确的营业执照注册号!');
  220. } else {
  221. callback();
  222. }
  223. },
  224. getLicenceScanningUrl(e) {
  225. this.state.licenceScanningUrl = e;
  226. },
  227. getOrgCodeUrl(e) {
  228. this.state.orgCodeUrl = e;
  229. },
  230. getLastYearTaxReportUrl(e) {
  231. this.state.lastYearTaxReportUrl = e;
  232. },
  233. componentDidMount() {
  234. addressInit('cmbProvince', 'cmbCity', 'cmbArea');
  235. this.getData();
  236. },
  237. reloadVCode() {
  238. this.setState({
  239. vsCodeSrc: globalConfig.context + '/open/getVCode?t=' + Math.random()
  240. });
  241. },
  242. render() {
  243. const FormItem = Form.Item;
  244. const { getFieldDecorator } = this.props.form;
  245. const formItemLayout = {
  246. labelCol: { span: 6 },
  247. wrapperCol: { span: 12 },
  248. };
  249. const _me = this;
  250. return (
  251. <Spin spinning={this.state.loading} className="certify-spin">
  252. <Form horizontal onSubmit={this.handleSubmit} className="certify-form">
  253. <FormItem
  254. {...formItemLayout}
  255. label="用户名"
  256. extra={<span><Icon type="exclamation-circle" /> 建议字母、数字和符号两种以上组合,6-20个字符</span>}
  257. >
  258. {getFieldDecorator('aftUsername', {
  259. initialValue: this.state.aftUsername || null,
  260. rules: [{ required: true, message: '请输入用户名!' }]
  261. })(
  262. <Input />
  263. )}
  264. </FormItem>
  265. <FormItem
  266. {...formItemLayout}
  267. label="企业名称"
  268. >
  269. {getFieldDecorator('unitName', {
  270. initialValue: this.state.unitName || null,
  271. rules: [{ required: true, message: '请输入企业名称!' }]
  272. })(
  273. <Input placeholder="请输入企业名称" />
  274. )}
  275. </FormItem>
  276. <FormItem
  277. {...formItemLayout}
  278. label="注册资金"
  279. > {getFieldDecorator('registeredCapital', {
  280. initialValue: this.state.registeredCapital || null
  281. })(
  282. <Input />
  283. )}
  284. <span className="fromItem-postfix">万元</span>
  285. </FormItem>
  286. <FormItem
  287. {...formItemLayout}
  288. label="是否上市"
  289. > {getFieldDecorator('listed', {
  290. initialValue: this.state.listed || "0"
  291. })(
  292. <Radio.Group>
  293. <Radio value="0">否</Radio>
  294. <Radio value="1">是</Radio>
  295. </Radio.Group>
  296. )}
  297. </FormItem>
  298. <FormItem style={{ display: this.props.form.getFieldValue('listed') == 0 ? 'none' : 'block' }}
  299. {...formItemLayout}
  300. label="上市时间"
  301. >
  302. {getFieldDecorator('listedDate', {
  303. initialValue: this.state.listedDate ? moment(this.state.listedDate) : null
  304. })(
  305. <DatePicker />
  306. )}
  307. </FormItem>
  308. <FormItem style={{ display: this.props.form.getFieldValue('listed') == 0 ? 'none' : 'block' }}
  309. {...formItemLayout}
  310. label="上市类型"
  311. > {getFieldDecorator('listedType', {
  312. initialValue: this.state.listedType
  313. })(
  314. <Select placeholder="请选择上市类型">
  315. <Select.Option value='0'>股票型上市公司</Select.Option>
  316. <Select.Option value='1'>债券型上市公司</Select.Option>
  317. </Select>
  318. )}
  319. </FormItem>
  320. <FormItem style={{ display: this.props.form.getFieldValue('listed') == 0 ? 'none' : 'block' }}
  321. {...formItemLayout}
  322. label="股票代码"
  323. > {getFieldDecorator('stockCode', {
  324. initialValue: this.state.stockCode
  325. })(
  326. <Input />
  327. )}
  328. </FormItem>
  329. <FormItem
  330. {...formItemLayout}
  331. label="联系人"
  332. >
  333. {getFieldDecorator('contacts', {
  334. initialValue: this.state.contacts || null,
  335. rules: [{ required: true, message: '请输入联系人姓名!' }]
  336. })(
  337. <Input />
  338. )}
  339. </FormItem>
  340. <FormItem
  341. {...formItemLayout}
  342. label="联系方式"
  343. extra={<span><Icon type="exclamation-circle" /> 请填写联系人手机号码,我们会将重要进度以短信形式通知您</span>}
  344. >
  345. {getFieldDecorator('contactMobile', {
  346. initialValue: this.state.contactMobile || null,
  347. rules: [{ validator: this.checkPhone }]
  348. })(
  349. <Input placeholder="建议使用常用手机" />
  350. )}
  351. </FormItem>
  352. <FormItem
  353. {...formItemLayout}
  354. label="法人姓名"
  355. >
  356. {getFieldDecorator('legalPerson', {
  357. initialValue: this.state.legalPerson || null,
  358. rules: [{ required: true, message: '请输入联系人姓名!' }]
  359. })(
  360. <Input />
  361. )}
  362. </FormItem>
  363. <FormItem
  364. {...formItemLayout}
  365. label="身份证号"
  366. >
  367. {getFieldDecorator('legalPersonIdCard', {
  368. rules: [{
  369. validator: this.checkIdcardnum,
  370. }],
  371. initialValue: this.state.legalPersonIdCard || null
  372. })(
  373. <Input placeholder="请输入真实有效的身份证号码" />
  374. )}
  375. </FormItem>
  376. <FormItem
  377. {...formItemLayout}
  378. label="营业执照注册号"
  379. >
  380. {getFieldDecorator('licenceNumber', {
  381. initialValue: this.state.licenceNumber || null,
  382. rules: [{
  383. validator: this.checkNumber,
  384. }],
  385. })(
  386. <Input />
  387. )}
  388. </FormItem>
  389. <FormItem
  390. labelCol={{ span: 6 }}
  391. wrapperCol={{ span: 18 }}
  392. label="营业执照所在地"
  393. >
  394. {getFieldDecorator('address')(
  395. <div>
  396. <select id="cmbProvince" name="cmbProvince"></select>
  397. <select id="cmbCity" name="cmbCity"></select>
  398. <select id="cmbArea" name="cmbArea"></select>
  399. </div>
  400. )}
  401. </FormItem>
  402. <FormItem
  403. labelCol={{ span: 6 }}
  404. wrapperCol={{ span: 18 }}
  405. label="营业执照副本扫描件"
  406. >
  407. {getFieldDecorator('licenceScanningUrl')(
  408. <Avatar name="licenceScanningUrl" urlData={this.getLicenceScanningUrl} />
  409. )}
  410. </FormItem>
  411. <FormItem wrapperCol={{ span: 21, offset: 6 }}>
  412. <p>1.企业营业执照副本复印件加盖企业公章后,扫描或拍照上传,图片大小不超过2M以内,仅支持jpg格式。</p>
  413. <p>2.若已办理三证合一,请输入统一社会信用代码并上传营业执照副本复印件(加盖企业公章)。</p>
  414. </FormItem>
  415. <FormItem
  416. {...formItemLayout}
  417. label="组织机构代码证号码"
  418. extra={<span><Icon type="exclamation-circle" /> 如机构已五证合一,社会统一注册号的第九位至倒数第二位,即为您单位的组织机构代码证号码。</span>}
  419. >
  420. {getFieldDecorator('orgCode', {
  421. initialValue: this.state.orgCode || null,
  422. rules: [{ required: true, message: '请输入组织机构代码证号码!' }]
  423. })(
  424. <Input />
  425. )}
  426. </FormItem>
  427. <FormItem
  428. labelCol={{ span: 6 }}
  429. wrapperCol={{ span: 18 }}
  430. label="组织机构代码证扫描件"
  431. >
  432. {getFieldDecorator('orgCodeUrl')(
  433. <Avatar name="orgCodeUrl" urlData={this.getOrgCodeUrl} />
  434. )}
  435. </FormItem>
  436. <FormItem wrapperCol={{ span: 21, offset: 6 }}>
  437. <p>1.组织机构代码证副本复印件加盖企业公章后,扫描或拍照上传,图片大小不超过2M以内,仅支持jpg格式。</p>
  438. <p>2.若已办理三证合一,请输入统一社会信用代码并上传营业执照副本复印件(加盖企业公章)。</p>
  439. </FormItem>
  440. <FormItem
  441. labelCol={{ span: 6 }}
  442. wrapperCol={{ span: 18 }}
  443. label="上年度纳税报表"
  444. >
  445. {getFieldDecorator('lastYearTaxReportUrl')(
  446. <UploadFile name="lastYearTaxReportUrl" urlData={this.getLastYearTaxReportUrl} />
  447. )}
  448. </FormItem>
  449. <FormItem
  450. {...formItemLayout}
  451. label="验证码"
  452. extra={<span style={{ 'color': '#ea0862' }}><Icon type="exclamation-circle" /> 看不清?点击图片更换验证码</span>}
  453. >
  454. <Row gutter={8}>
  455. <Col span={16}>
  456. {getFieldDecorator('captcha', {
  457. rules: [{ required: true, message: '请输入图片中的验证码' }],
  458. })(
  459. <Input />
  460. )}
  461. </Col>
  462. <Col span={8}>
  463. <div className="getVcode">
  464. <img id="VCode" src={this.state.vsCodeSrc} alt="" onClick={this.reloadVCode} />
  465. </div>
  466. </Col>
  467. </Row>
  468. </FormItem>
  469. <FormItem wrapperCol={{ span: 12, offset: 6 }}>
  470. <Button className="set-submit" type="primary" htmlType="submit">下一步</Button>
  471. <Button className="exit" type="ghost">退出实名认证</Button>
  472. </FormItem>
  473. </Form >
  474. </Spin >
  475. );
  476. },
  477. }));
  478. export default Content;