personal.jsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555
  1. /*
  2. @author:李霆
  3. @update:2018/05/29
  4. @descript:复制粘贴,拿起来就是干!!
  5. */
  6. import React from 'react';
  7. import {
  8. Radio,
  9. Icon,
  10. Button,
  11. Cascader,
  12. Input,
  13. Select,
  14. Spin,
  15. message,
  16. DatePicker,
  17. Modal,
  18. Upload,
  19. Form,
  20. Row,
  21. Col,
  22. } from 'antd';
  23. import $ from 'jquery/src/ajax';
  24. import moment from 'moment';
  25. import './unit.less';
  26. import { areaSelect } from '@/NewDicProvinceList';
  27. import {
  28. socialAttribute,
  29. industry,
  30. } from '@/dataDic.js';
  31. import {
  32. splitUrl,
  33. } from '@/tools.js';
  34. const FormItem = Form.Item;
  35. const monthFormat = 'YYYY/MM';
  36. //图片组件
  37. const PicturesWall = React.createClass({
  38. getInitialState() {
  39. return {
  40. previewVisible: false,
  41. previewImage: '',
  42. fileList: []
  43. };
  44. },
  45. handleCancel() {
  46. this.setState({
  47. previewVisible: false
  48. });
  49. },
  50. handlePreview(file) {
  51. this.setState({
  52. previewImage: file.url || file.thumbUrl,
  53. previewVisible: true
  54. });
  55. },
  56. handleChange(info) {
  57. let fileList = info.fileList;
  58. this.setState({
  59. fileList
  60. });
  61. this.props.fileList(fileList);
  62. },
  63. componentWillReceiveProps(nextProps) {
  64. this.state.fileList = nextProps.pictureUrl;
  65. },
  66. render() {
  67. const { previewVisible, previewImage, fileList } = this.state;
  68. const uploadButton = (
  69. <div>
  70. <Icon type="plus" />
  71. <div className="ant-upload-text">点击上传</div>
  72. </div>
  73. );
  74. return (
  75. <div style={{ display: 'inline-block' }}>
  76. <Upload
  77. action={globalConfig.context + '/api/user/uploadPicture'}
  78. data={{ sign: 'user_picture' }}
  79. listType="picture-card"
  80. fileList={fileList}
  81. onPreview={this.handlePreview}
  82. onChange={this.handleChange}
  83. >
  84. {fileList.length >= 1 ? null : uploadButton}
  85. </Upload>
  86. <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
  87. <img alt="example" style={{ width: '100%' }} src={previewImage} />
  88. </Modal>
  89. </div>
  90. );
  91. }
  92. });
  93. const Personal = React.createClass({
  94. getInitialState() {
  95. return {
  96. loading: false,
  97. orgCodeUrl: [],
  98. companyLogoUrl: [],
  99. headPortraitUrl: [],
  100. positiveIdUrl: [],
  101. oppositeIdUrl: []
  102. };
  103. },
  104. loadInformation(record) {
  105. this.setState({
  106. loading: true
  107. });
  108. $.ajax({
  109. method: 'get',
  110. dataType: 'json',
  111. crossDomain: false,
  112. url: globalConfig.context + '/api/user/getUserDetail',
  113. success: function(data) {
  114. let thisData = data.data;
  115. if (!thisData) {
  116. if (data.error && data.error.length) {
  117. message.warning(data.error[0].message);
  118. }
  119. thisData = {};
  120. }
  121. let ProvinceCityArr = [];
  122. let ProvinceS = thisData.province; //getprovince
  123. let citys = thisData.city;
  124. let Areas = thisData.area;
  125. ProvinceCityArr.push(ProvinceS, citys, Areas);
  126. let month = thisData.dateOfBirthYear
  127. ? thisData.dateOfBirthYear + '/' + thisData.dateOfBirthMonth
  128. : undefined;
  129. this.setState({
  130. InformationId: thisData.id,
  131. InformationUid: thisData.uid,
  132. identifyName: thisData.identifyName,
  133. headPortraitUrl: thisData.headPortraitUrl
  134. ? splitUrl(thisData.headPortraitUrl, ',', globalConfig.avatarHost + '/upload')
  135. : [],
  136. positiveIdUrl: thisData.positiveIdUrl
  137. ? splitUrl(thisData.positiveIdUrl, ',', globalConfig.avatarHost + '/upload')
  138. : [],
  139. oppositeIdUrl: thisData.oppositeIdUrl
  140. ? splitUrl(thisData.oppositeIdUrl, ',', globalConfig.avatarHost + '/upload')
  141. : [],
  142. dataInformation: thisData,
  143. idNumber: thisData.idNumber,
  144. mobile:thisData.mobile,
  145. ProvinceCity: ProvinceCityArr[0] != null ? ProvinceCityArr : undefined,
  146. industry: thisData.industry ? String(thisData.industry) : undefined,
  147. societyTag: thisData.societyTag || undefined,
  148. sex: thisData.sex,
  149. yearMonth: month,
  150. postalAddress: thisData.postalAddress,
  151. fixedTel: thisData.fixedTel,
  152. email: thisData.email,
  153. qq: thisData.qq,
  154. mobile:thisData.mobile,
  155. introduction: thisData.introduction,
  156. type:thisData.type,
  157. authentication:thisData.authentication
  158. });
  159. }.bind(this)
  160. }).always(
  161. function() {
  162. this.setState({
  163. loading: false
  164. });
  165. }.bind(this)
  166. );
  167. },
  168. //图片
  169. getOrgCodeUrl(e) {
  170. this.setState({
  171. orgCodeUrl: e
  172. });
  173. },
  174. getCompanyLogoUrl(e) {
  175. this.setState({
  176. companyLogoUrl: e
  177. });
  178. },
  179. //基本信息提交
  180. newSubmit(e) {
  181. if(!this.state.identifyName){
  182. message.warning("请填写姓名!")
  183. return;
  184. }
  185. if (!this.state.industry) {
  186. message.warning('请选择行业!');
  187. return false;
  188. }
  189. if (!this.state.societyTag) {
  190. message.warning('请选择社会性质!');
  191. return false;
  192. }
  193. if (!this.state.ProvinceCity||!this.state.ProvinceCity.length) {
  194. message.warning('请选择地区!');
  195. return false;
  196. }
  197. if(!this.state.mobile){
  198. message.warning("请填写手机号码!")
  199. return;
  200. }
  201. this.state.data = [];
  202. this.setState({
  203. selectedRowKeys: []
  204. });
  205. let theorgCodeUrl = [];
  206. if (this.state.headPortraitUrl.length) {
  207. let picArr = [];
  208. this.state.headPortraitUrl.map(function(item) {
  209. if (item.response && item.response.data && item.response.data.length) {
  210. picArr.push(item.response.data);
  211. }
  212. });
  213. theorgCodeUrl = picArr.join(',');
  214. }
  215. let thecompanyLogoUrl = [];
  216. if (this.state.positiveIdUrl.length) {
  217. let picArr = [];
  218. this.state.positiveIdUrl.map(function(item) {
  219. if (item.response && item.response.data && item.response.data.length) {
  220. picArr.push(item.response.data);
  221. }
  222. });
  223. thecompanyLogoUrl = picArr.join(',');
  224. }
  225. let thecompanyLogoUrls = [];
  226. if (this.state.oppositeIdUrl.length) {
  227. let picArr = [];
  228. this.state.oppositeIdUrl.map(function(item) {
  229. if (item.response && item.response.data && item.response.data.length) {
  230. picArr.push(item.response.data);
  231. }
  232. });
  233. thecompanyLogoUrls = picArr.join(',');
  234. }
  235. let years = [];
  236. let yearMonth = this.state.yearMonth != undefined ? new Date(this.state.yearMonth).toLocaleDateString() : '';
  237. years = yearMonth.split('/');
  238. this.setState({
  239. loading: true
  240. });
  241. $.ajax({
  242. method: 'post',
  243. dataType: 'json',
  244. url: globalConfig.context + '/api/user/updateUserDetail',
  245. data: {
  246. id: this.state.InformationId,
  247. uid: this.state.InformationUid,
  248. societyTag: this.state.societyTag,
  249. identifyName: this.state.identifyName,
  250. industry: this.state.industry,
  251. dateOfBirthYear: years[0], //出生年
  252. dateOfBirthMonth: years[1], //出生月
  253. province: this.state.ProvinceCity[0], //省-
  254. city: this.state.ProvinceCity[1], //市
  255. area: this.state.ProvinceCity[2], //区
  256. sex: this.state.sex,
  257. mobile:this.state.mobile,
  258. fixedTel: this.state.fixedTel,
  259. qq: this.state.qq,
  260. idNumber: this.state.idNumber,
  261. email: this.state.email,
  262. postalAddress: this.state.postalAddress,
  263. introduction: this.state.introduction,
  264. positiveIdUrl: thecompanyLogoUrl.length != 0 ? thecompanyLogoUrl : '',
  265. oppositeIdUrl: thecompanyLogoUrls.length != 0 ? thecompanyLogoUrls : '',
  266. headPortraitUrl: theorgCodeUrl.length != 0 ? theorgCodeUrl : '',
  267. authentication:this.state.authentication,
  268. type:this.state.type
  269. }
  270. }).done(
  271. function(data) {
  272. this.setState({
  273. loading: false
  274. });
  275. if (!data.error.length) {
  276. if(this.state.type!='0'){
  277. message.success('个人认证成功,1s后回到首页.')
  278. setTimeout(()=>{
  279. window.location.href = globalConfig.context + "/user/account/index.html";
  280. },1000)
  281. }else{
  282. message.success('保存成功!');
  283. this.loadInformation();
  284. }
  285. } else {
  286. message.warning(data.error[0].message);
  287. }
  288. }.bind(this)
  289. );
  290. },
  291. subFun(){
  292. if(this.state.type=='0'||this.state.type=='1'){
  293. this.newSubmit()
  294. }else{
  295. this.setState({
  296. visible:true
  297. })
  298. }
  299. },
  300. handleOk(){
  301. this.newSubmit();
  302. this.setState({
  303. visible:false
  304. })
  305. },
  306. handleCancel(){
  307. this.setState({
  308. visible:false
  309. })
  310. },
  311. getHeadPortraitUrl(e) {
  312. this.setState({ headPortraitUrl: e });
  313. },
  314. getPositiveIdUrl(e) {
  315. this.setState({ positiveIdUrl: e });
  316. },
  317. getOppositeIdUrl(e) {
  318. this.setState({ oppositeIdUrl: e });
  319. },
  320. componentWillMount() {
  321. this.loadInformation();
  322. },
  323. componentWillReceiveProps(nextProps) {},
  324. render() {
  325. const { RangePicker, MonthPicker } = DatePicker;
  326. const formItemLayout = {
  327. labelCol: {
  328. span: 6
  329. },
  330. wrapperCol: {
  331. span: 14
  332. }
  333. };
  334. return (
  335. <div className="unit-wrap">
  336. <Form layout="horizontal" onSubmit={this.newSubmit} id="demand-form" style={{width:'80%'}}>
  337. <Spin spinning={this.state.loading}>
  338. <Row style={{ marginBottom: 20 }}>
  339. <Col offset={2} span={4}>
  340. <h4 style={{fontSize:20}}>个人资料</h4>
  341. </Col>
  342. </Row>
  343. <div className="clearfix">
  344. <FormItem className="half-item" {...formItemLayout} label={<span><span className="color-red"> * </span>姓名</span>}>
  345. <Input
  346. placeholder="输入姓名"
  347. value={this.state.identifyName}
  348. onChange={(e) => {
  349. this.setState({ identifyName: e.target.value });
  350. }}
  351. />
  352. </FormItem>
  353. <FormItem className="half-item" {...formItemLayout} label="性别">
  354. <Radio.Group
  355. value={this.state.sex}
  356. onChange={(e) => {
  357. this.setState({ sex: e.target.value });
  358. }}
  359. >
  360. <Radio value={'男'}>男</Radio>
  361. <Radio value={'女'}>女</Radio>
  362. </Radio.Group>
  363. </FormItem>
  364. <FormItem className="half-item" {...formItemLayout} label={<span><span className="color-red"> * </span>行业</span>}>
  365. <Select
  366. placeholder="选择行业"
  367. value={this.state.industry}
  368. onChange={(e) => {
  369. this.setState({ industry: e });
  370. }}
  371. >
  372. {industry.map(function(item) {
  373. return <Select.Option key={item.value}>{item.key}</Select.Option>;
  374. })}
  375. </Select>
  376. </FormItem>
  377. <FormItem className="half-item" {...formItemLayout} label={<span><span className="color-red"> * </span>社会属性</span>}>
  378. <Select
  379. placeholder="客户社会属性"
  380. value={this.state.societyTag}
  381. onChange={(e) => {
  382. this.setState({ societyTag: e });
  383. }}
  384. >
  385. {socialAttribute.map(function(item) {
  386. return <Select.Option key={item.value}>{item.key}</Select.Option>;
  387. })}
  388. </Select>
  389. </FormItem>
  390. <FormItem className="half-item" {...formItemLayout} label="出生日期">
  391. {!this.state.yearMonth ? (
  392. <MonthPicker
  393. placeholder="选择出生年月"
  394. value={this.state.yearMonth}
  395. onChange={(time) => {
  396. this.setState({ yearMonth: time });
  397. }}
  398. />
  399. ) : (
  400. <MonthPicker
  401. value={moment(this.state.yearMonth, monthFormat)}
  402. format={monthFormat}
  403. onChange={(time) => {
  404. this.setState({ yearMonth: time });
  405. }}
  406. />
  407. )}
  408. </FormItem>
  409. <FormItem className="half-item" {...formItemLayout} label="身份证号码">
  410. <Input
  411. placeholder="身份证号码"
  412. value={this.state.idNumber}
  413. onChange={(e) => {
  414. this.setState({ idNumber: e.target.value });
  415. }}
  416. />
  417. </FormItem>
  418. </div>
  419. <div className="clearfix">
  420. <FormItem className="half-item" {...formItemLayout} label={<span><span className="color-red"> * </span>省-市-区</span>}>
  421. <Cascader
  422. options={areaSelect()}
  423. value={this.state.ProvinceCity}
  424. placeholder="选择城市"
  425. onChange={(e, pre) => {
  426. this.setState({ ProvinceCity: e });
  427. }}
  428. />
  429. </FormItem>
  430. <FormItem className="half-item" {...formItemLayout} label="通信地址">
  431. <Input
  432. placeholder="客户通信地址"
  433. value={this.state.postalAddress}
  434. onChange={(e, pre) => {
  435. this.setState({ postalAddress: e.target.value });
  436. }}
  437. />
  438. </FormItem>
  439. <FormItem className="half-item" {...formItemLayout} label={<span><span className="color-red"> * </span>手机号码</span>}>
  440. <Input
  441. placeholder="手机号码"
  442. value={this.state.mobile}
  443. onChange={(e) => {
  444. this.setState({ mobile: e.target.value });
  445. }}
  446. />
  447. </FormItem>
  448. <FormItem className="half-item" {...formItemLayout} label="固定电话">
  449. <Input
  450. placeholder="客户固定电话"
  451. value={this.state.fixedTel}
  452. onChange={(e) => {
  453. this.setState({ fixedTel: e.target.value });
  454. }}
  455. />
  456. </FormItem>
  457. <FormItem className="half-item" {...formItemLayout} label="QQ">
  458. <Input
  459. placeholder="QQ"
  460. value={this.state.qq}
  461. onChange={(e) => {
  462. this.setState({ qq: e.target.value });
  463. }}
  464. />
  465. </FormItem>
  466. <FormItem className="half-item" {...formItemLayout} label="电子邮箱">
  467. <Input
  468. placeholder="客户电子邮箱"
  469. value={this.state.email}
  470. onChange={(e) => {
  471. this.setState({ email: e.target.value });
  472. }}
  473. />
  474. </FormItem>
  475. </div>
  476. <div className="clearfix">
  477. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="专家简介">
  478. <Input
  479. type="textarea"
  480. rows={4}
  481. value={this.state.introduction}
  482. onChange={(e, pre) => {
  483. this.setState({ introduction: e.target.value });
  484. }}
  485. />
  486. </FormItem>
  487. </div>
  488. <div className="clearfix pictures">
  489. <FormItem
  490. className="picWidth"
  491. labelCol={{ span: 10 }}
  492. wrapperCol={{ span: 10 }}
  493. label="身份证正面"
  494. >
  495. <PicturesWall
  496. fileList={this.getPositiveIdUrl}
  497. pictureUrl={this.state.positiveIdUrl}
  498. />
  499. <p>建议:图片要清晰。</p>
  500. </FormItem>
  501. <FormItem
  502. className="picWidth"
  503. labelCol={{ span: 10 }}
  504. wrapperCol={{ span: 10 }}
  505. label="身份证反面"
  506. >
  507. <PicturesWall
  508. fileList={this.getOppositeIdUrl}
  509. pictureUrl={this.state.oppositeIdUrl}
  510. />
  511. <p>建议:图片要清晰。</p>
  512. </FormItem>
  513. <FormItem
  514. className="picWidth"
  515. labelCol={{ span: 10 }}
  516. wrapperCol={{ span: 10 }}
  517. label="客户照片"
  518. >
  519. <PicturesWall
  520. fileList={this.getHeadPortraitUrl}
  521. pictureUrl={this.state.headPortraitUrl}
  522. />
  523. <p>建议:图片要清晰。</p>
  524. </FormItem>
  525. </div>
  526. <Row style={{ marginBottom: 20 }}>
  527. <Col offset={3} span={4}>
  528. <Button size="large" className="set-submit" type="primary" onClick={this.subFun}>
  529. 保存
  530. </Button>
  531. </Col>
  532. </Row>
  533. </Spin>
  534. </Form>
  535. <Modal
  536. visible={this.state.visible}
  537. onOk={this.handleOk}
  538. onCancel={this.handleCancel}
  539. >
  540. <p>是否申请个人用户认证?</p>
  541. </Modal>
  542. </div>
  543. );
  544. }
  545. });
  546. export default Personal;