personal.jsx 18 KB

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