userDesc.jsx 14 KB

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