userDesc.jsx 14 KB

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