userDesc.jsx 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378
  1. import React from 'react';
  2. import { Icon, Modal, message, Spin, Input, Select, DatePicker, Button, Radio, Form } from 'antd';
  3. import moment from 'moment';
  4. import './userList.less';
  5. import ajax from 'jquery/src/ajax/xhr.js';
  6. import $ from 'jquery/src/ajax';
  7. import { addressInit } from '../../tools.js';
  8. import { auditStatusList, certifyStepList } from '../../dataDic.js';
  9. const UserForm = Form.create()(React.createClass({
  10. getInitialState() {
  11. return {
  12. visible: false,
  13. loading: false
  14. };
  15. },
  16. loadData(uid) {
  17. this.state.data = [];
  18. this.setState({
  19. loading: true
  20. });
  21. $.ajax({
  22. method: "post",
  23. dataType: "json",
  24. crossDomain: false,
  25. url: globalConfig.context + "/api/admin/userDetail",
  26. data: {
  27. uid: uid
  28. },
  29. success: function (data) {
  30. let thisData = data.data;
  31. if (!thisData) {
  32. if (data.error && data.error.length) {
  33. message.warning(data.error[0].message);
  34. };
  35. thisData = {};
  36. };
  37. let d = new Date()
  38. if (thisData && thisData.dateOfBirthMonth && thisData.dateOfBirthYear) {
  39. d.setMonth(thisData.dateOfBirthMonth - 1);
  40. d.setYear(parseInt(thisData.dateOfBirthYear));
  41. };
  42. addressInit('cmbProvince', 'cmbCity', 'cmbArea',
  43. thisData.province, thisData.city, thisData.area);
  44. this.setState({
  45. username: thisData.username,
  46. sex: thisData.sex,
  47. id: thisData.id,
  48. birth: d,
  49. idNumber: thisData.idNumber,
  50. positiveIdUrl: thisData.positiveIdUrl,
  51. oppositeIdUrl: thisData.oppositeIdUrl,
  52. aftUsername: thisData.aftUsername,
  53. contactMobile: thisData.contactMobile,
  54. bankName: thisData.bankName,
  55. bankAccount: thisData.bankAccount,
  56. bankCardNumber: thisData.bankCardNumber,
  57. amountMoney: thisData.amountMoney,
  58. auditStatus: thisData.auditStatus,
  59. process: thisData.process ? String(thisData.process) : undefined,
  60. paymentDateFormattedDate: thisData.paymentDateFormattedDate,
  61. paymentDate: thisData.paymentDate
  62. });
  63. this.props.form.resetFields();
  64. }.bind(this),
  65. }).always(function () {
  66. this.setState({
  67. loading: false
  68. });
  69. }.bind(this));
  70. },
  71. handleSubmit(e) {
  72. e.preventDefault();
  73. this.props.form.validateFields((err, values) => {
  74. //地址值
  75. let cmbP = document.getElementById('cmbProvince').value;
  76. let cmbC = document.getElementById('cmbCity').value;
  77. let cmbA = document.getElementById('cmbArea').value;
  78. //金额判断
  79. if (values.amountMoney && values.amountMoney < 0 && values.amountMoney > 100 && /^\d+(\.\d{2})?$/.test(values.amountMoney)) {
  80. message.warning('请输入0-100以内的金额');
  81. return;
  82. };
  83. if (!err) {
  84. this.setState({
  85. loading: true
  86. });
  87. $.ajax({
  88. method: "POST",
  89. dataType: "json",
  90. crossDomain: false,
  91. url: globalConfig.context + "/api/admin/updateUserDetail",
  92. data: {
  93. uid: this.props.uid,
  94. id: this.state.id,
  95. username: values.username,
  96. sex: values.sex,
  97. dateOfBirthYear: values.birth ? values.birth._d.getFullYear() : undefined,
  98. dateOfBirthMonth: values.birth ? values.birth._d.getMonth() + 1 : undefined,
  99. idNumber: values.idNumber,
  100. aftUsername: values.aftUsername,
  101. province: cmbP,
  102. city: cmbC,
  103. area: cmbA,
  104. contactMobile: values.contactMobile,
  105. bankName: values.bankName,
  106. bankAccount: values.bankAccount,
  107. bankCardNumber: values.bankCardNumber,
  108. amountMoney: values.amountMoney,
  109. auditStatus: values.auditStatus,
  110. paymentDateFormattedDate: values.paymentDateFormattedDate ? values.paymentDateFormattedDate.format("YYYY-MM-DD") : undefined,
  111. process: this.state.process
  112. }
  113. }).done(function (data) {
  114. if (!data.error.length) {
  115. message.success('保存成功!');
  116. } else {
  117. message.warning(data.error[0].message);
  118. }
  119. }.bind(this)).always(function () {
  120. this.setState({
  121. visible: false,
  122. });
  123. this.props.handleOk();
  124. }.bind(this));
  125. }
  126. });
  127. },
  128. componentDidMount() {
  129. addressInit('cmbProvince', 'cmbCity', 'cmbArea');
  130. this.loadData(this.props.uid);
  131. },
  132. componentWillReceiveProps(nextProps) {
  133. if (!this.props.visible && nextProps.visible) {
  134. this.loadData(nextProps.uid);
  135. };
  136. },
  137. render() {
  138. const { getFieldDecorator } = this.props.form;
  139. const { MonthPicker } = DatePicker;
  140. const FormItem = Form.Item
  141. const formItemLayout = {
  142. labelCol: { span: 6 },
  143. wrapperCol: { span: 12 },
  144. };
  145. return (
  146. <Form horizontal onSubmit={this.handleSubmit} className="person-form">
  147. <FormItem
  148. {...formItemLayout}
  149. label="用户名"
  150. >
  151. {getFieldDecorator('username', {
  152. initialValue: this.state.username
  153. })(
  154. <Input />
  155. )}
  156. </FormItem>
  157. <FormItem
  158. {...formItemLayout}
  159. label="性别"
  160. >
  161. {getFieldDecorator('sex', {
  162. initialValue: this.state.sex
  163. })(
  164. <Radio.Group>
  165. <Radio value="男">男</Radio>
  166. <Radio value="女">女</Radio>
  167. </Radio.Group>
  168. )}
  169. </FormItem>
  170. <FormItem
  171. {...formItemLayout}
  172. label="出生日期"
  173. >
  174. {getFieldDecorator('birth', {
  175. initialValue: !this.state.birth ? null : moment(this.state.birth, 'YYYY/MM')
  176. })(
  177. <MonthPicker />
  178. )}
  179. </FormItem>
  180. <FormItem
  181. {...formItemLayout}
  182. label="身份证号"
  183. >
  184. {getFieldDecorator('idNumber', {
  185. initialValue: this.state.idNumber
  186. })(
  187. <Input />
  188. )}
  189. </FormItem>
  190. <FormItem
  191. labelCol={{ span: 6 }}
  192. wrapperCol={{ span: 18 }}
  193. label="身份证图片"
  194. >
  195. <div className="idcard-img clearfix">
  196. {this.state.positiveIdUrl ? <div>
  197. <div className="idcard-imgbox">
  198. <img src={globalConfig.context + '/open/writeImage?path=' + this.state.positiveIdUrl} alt="点击查看大图"
  199. onClick={(e) => { window.open(e.target.src) }} />
  200. </div>
  201. </div> : <div><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传</div>}
  202. {this.state.oppositeIdUrl ? <div>
  203. <div className="idcard-imgbox">
  204. <img src={globalConfig.context + '/open/writeImage?path=' + this.state.oppositeIdUrl} alt="点击查看大图"
  205. onClick={(e) => { window.open(e.target.src) }} />
  206. </div>
  207. </div> : <div><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传</div>}
  208. </div>
  209. </FormItem>
  210. <FormItem
  211. {...formItemLayout}
  212. label="认证姓名"
  213. >
  214. {getFieldDecorator('aftUsername', {
  215. initialValue: this.state.aftUsername
  216. })(
  217. <Input />
  218. )}
  219. </FormItem>
  220. <FormItem
  221. {...formItemLayout}
  222. label="联系电话"
  223. >
  224. {getFieldDecorator('contactMobile', {
  225. initialValue: this.state.contactMobile
  226. })(
  227. <Input />
  228. )}
  229. </FormItem>
  230. <FormItem
  231. labelCol={{ span: 6 }}
  232. wrapperCol={{ span: 18 }}
  233. label="所在地"
  234. >
  235. {getFieldDecorator('address')(
  236. <div>
  237. <select id="cmbProvince" name="cmbProvince"></select>
  238. <select id="cmbCity" name="cmbCity"></select>
  239. <select id="cmbArea" name="cmbArea"></select>
  240. </div>
  241. )}
  242. </FormItem>
  243. <FormItem
  244. {...formItemLayout}
  245. label="开户银行"
  246. >
  247. {getFieldDecorator('bankAccount', {
  248. initialValue: this.state.bankAccount
  249. })(
  250. <Input />
  251. )}
  252. </FormItem>
  253. <FormItem
  254. {...formItemLayout}
  255. label="银行卡号"
  256. >
  257. {getFieldDecorator('bankCardNumber', {
  258. initialValue: this.state.bankCardNumber
  259. })(
  260. <Input />
  261. )}
  262. </FormItem>
  263. <FormItem
  264. {...formItemLayout}
  265. label="打款金额"
  266. >
  267. {getFieldDecorator('amountMoney', {
  268. initialValue: this.state.amountMoney
  269. })(
  270. <Input />
  271. )}
  272. </FormItem>
  273. <FormItem
  274. {...formItemLayout}
  275. label="打款日期"
  276. >
  277. {getFieldDecorator('paymentDateFormattedDate', {
  278. initialValue: this.state.paymentDate ? moment(this.state.paymentDate) : null
  279. })(
  280. <DatePicker />
  281. )}
  282. </FormItem>
  283. <FormItem
  284. {...formItemLayout}
  285. label="认证状态"
  286. >
  287. {getFieldDecorator('auditStatus', {
  288. initialValue: this.state.auditStatus
  289. })(
  290. <Select placeholder="选择要修改的认证状态" style={{ width: 200 }}
  291. onChange={(e) => { this.state.auditStatus = e }}>
  292. {
  293. auditStatusList.map(function (item, i) {
  294. return <Select.Option key={i} value={item.value} >{item.key}</Select.Option>
  295. })
  296. }
  297. </Select>
  298. )}
  299. </FormItem>
  300. <FormItem
  301. {...formItemLayout}
  302. label="认证步骤"
  303. >
  304. {getFieldDecorator('process', {
  305. initialValue: this.state.process
  306. })(
  307. <Select placeholder="选择要修改的认证步骤" style={{ width: 200 }}
  308. onChange={(e) => { this.state.process = e }}>
  309. {
  310. certifyStepList.map(function (item, i) {
  311. return <Select.Option key={i} value={item.value} >{item.key}</Select.Option>
  312. })
  313. }
  314. </Select>
  315. )}
  316. </FormItem>
  317. <FormItem wrapperCol={{ span: 12, offset: 4 }}>
  318. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  319. </FormItem>
  320. </Form >
  321. )
  322. }
  323. }));
  324. const PatentDesc = React.createClass({
  325. getInitialState() {
  326. return {
  327. visible: false,
  328. loading: false
  329. };
  330. },
  331. showModal() {
  332. this.setState({
  333. visible: true,
  334. });
  335. },
  336. handleCancel(e) {
  337. this.setState({
  338. visible: false,
  339. });
  340. this.props.closeDesc(false);
  341. },
  342. handleOk(e) {
  343. this.setState({
  344. visible: false,
  345. });
  346. this.props.closeDesc(false, true);
  347. },
  348. componentWillReceiveProps(nextProps) {
  349. this.state.visible = nextProps.showDesc;
  350. },
  351. render() {
  352. if (this.props.data) {
  353. return (
  354. <div className="patent-desc">
  355. <Spin spinning={this.state.loading} className='spin-box'>
  356. <Modal title="用户详情" visible={this.state.visible}
  357. onOk={this.checkPatentProcess} onCancel={this.handleCancel}
  358. width='600px'
  359. footer=''
  360. className="admin-desc-content">
  361. <UserForm
  362. uid={this.props.data.id}
  363. closeDesc={this.handleCancel}
  364. visible={this.state.visible}
  365. handleOk={this.handleOk} />
  366. </Modal>
  367. </Spin>
  368. </div>
  369. );
  370. } else {
  371. return <div></div>
  372. }
  373. },
  374. });
  375. export default PatentDesc;