import React from 'react'; import { Icon, Modal, message, Spin, Input, Select, DatePicker, Button, Radio, Form } from 'antd'; import moment from 'moment'; import './userList.less'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import { addressInit } from '../../tools.js'; import { auditStatusList } from '../../dataDic.js'; const UserForm = Form.create()(React.createClass({ getInitialState() { return { visible: false, loading: false }; }, loadData() { this.state.data = []; this.setState({ loading: true }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/userDetail", data: { uid: this.props.uid }, success: function (data) { if (data.error.length || !data.data) { message.warning(data.error[0].message); return; } let d = new Date() if (data.data.dateOfBirthMonth && data.data.dateOfBirthYear) { d.setMonth(data.data.dateOfBirthMonth - 1); d.setYear(parseInt(data.data.dateOfBirthYear)); }; addressInit('cmbProvince', 'cmbCity', 'cmbArea', data.data.province, data.data.city, data.data.area); this.setState({ username: data.data.username, sex: data.data.sex, id: data.data.id, birth: d, idNumber: data.data.idNumber, positiveIdUrl: data.data.positiveIdUrl, oppositeIdUrl: data.data.oppositeIdUrl, aftUsername: data.data.aftUsername, contactMobile: data.data.contactMobile, bankName: data.data.bankName, bankAccount: data.data.bankAccount, bankCardNumber: data.data.bankCardNumber, amountMoney: data.data.amountMoney, auditStatus: String(data.data.auditStatus), process: data.data.process, paymentDateFormattedDate: data.data.paymentDateFormattedDate, paymentDate: data.data.paymentDate }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, handleSubmit(e) { e.preventDefault(); this.props.form.validateFields((err, values) => { //地址值 let cmbP = document.getElementById('cmbProvince').value; let cmbC = document.getElementById('cmbCity').value; let cmbA = document.getElementById('cmbArea').value; if (!err) { this.setState({ loading: true }); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/updateUserDetail", data: { id: this.state.id, username: values.username, sex: values.sex, dateOfBirthYear: values.birth ? values.birth._d.getFullYear() : undefined, dateOfBirthMonth: values.birth ? values.birth._d.getMonth() + 1 : undefined, idNumber: values.idNumber, aftUsername: values.aftUsername, province: cmbP, city: cmbC, area: cmbA, contactMobile: values.contactMobile, bankName: values.bankName, bankAccount: values.bankAccount, bankCardNumber: values.bankCardNumber, amountMoney: values.amountMoney, auditStatus: values.auditStatus, paymentDateFormattedDate: values.paymentDateFormattedDate.format("YYYY-MM-DD"), process: values.process } }).done(function (data) { if (!data.error.length) { message.success('保存成功!'); } else { message.warning(data.error[0].message); } }.bind(this)).always(function () { this.setState({ visible: false, }); this.props.closeDesc(false); }.bind(this)); } }); }, componentDidMount() { addressInit('cmbProvince', 'cmbCity', 'cmbArea'); this.loadData(); }, componentWillReceiveProps() { this.loadData(); }, render() { const { getFieldDecorator } = this.props.form; const { MonthPicker } = DatePicker; const FormItem = Form.Item const formItemLayout = { labelCol: { span: 4 }, wrapperCol: { span: 12 }, }; return ( <Form horizontal onSubmit={this.handleSubmit} className="person-form"> <FormItem {...formItemLayout} label="用户名" > {getFieldDecorator('username', { initialValue: this.state.username || null })( <Input /> )} </FormItem> <FormItem {...formItemLayout} label="性别" > {getFieldDecorator('sex', { initialValue: this.state.sex || null })( <Radio.Group> <Radio value="男">男</Radio> <Radio value="女">女</Radio> </Radio.Group> )} </FormItem> <FormItem {...formItemLayout} label="出生日期" > {getFieldDecorator('birth', { initialValue: !this.state.birth ? null : moment(this.state.birth, 'YYYY/MM') })( <MonthPicker /> )} </FormItem> <FormItem {...formItemLayout} label="身份证号" > {getFieldDecorator('idNumber', { initialValue: this.state.idNumber || null })( <Input /> )} </FormItem> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="身份证图片" > <div className="idcard-img clearfix"> {this.state.positiveIdUrl ? <div> <div className="idcard-imgbox"> <img src={globalConfig.context + '/open/writeImage?path=' + this.state.positiveIdUrl} alt="点击查看大图" onClick={(e) => { window.open(e.target.src) }} /> </div> </div> : <div>未上传</div>} {this.state.oppositeIdUrl ? <div> <div className="idcard-imgbox"> <img src={globalConfig.context + '/open/writeImage?path=' + this.state.oppositeIdUrl} alt="点击查看大图" onClick={(e) => { window.open(e.target.src) }} /> </div> </div> : <div>未上传</div>} </div> </FormItem> <FormItem {...formItemLayout} label="认证姓名" > {getFieldDecorator('aftUsername', { initialValue: this.state.aftUsername || null })( <Input /> )} </FormItem> <FormItem {...formItemLayout} label="联系电话" > {getFieldDecorator('contactMobile', { initialValue: this.state.contactMobile || null })( <Input /> )} </FormItem> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="所在地" > {getFieldDecorator('address')( <div> <select id="cmbProvince" name="cmbProvince"></select> <select id="cmbCity" name="cmbCity"></select> <select id="cmbArea" name="cmbArea"></select> </div> )} </FormItem> <FormItem {...formItemLayout} label="开户银行" > {getFieldDecorator('bankAccount', { initialValue: this.state.bankAccount || null })( <Input /> )} </FormItem> <FormItem {...formItemLayout} label="银行卡号" > {getFieldDecorator('bankCardNumber', { initialValue: this.state.bankCardNumber || null })( <Input /> )} </FormItem> <FormItem {...formItemLayout} label="打款金额" > {getFieldDecorator('amountMoney', { initialValue: this.state.amountMoney || null })( <Input /> )} </FormItem> <FormItem {...formItemLayout} label="打款日期" > {getFieldDecorator('paymentDateFormattedDate', { initialValue: this.state.paymentDate ? moment(this.state.paymentDate) : null })( <DatePicker /> )} </FormItem> <FormItem {...formItemLayout} label="认证状态" > {getFieldDecorator('auditStatus', { initialValue: this.state.auditStatus || null })( <Select placeholder="选择认证状态" style={{ width: 200 }} onChange={(e) => { this.state.auditStatus = e }}> { auditStatusList.map(function (item, i) { return <Select.Option key={i} value={item.value} >{item.key}</Select.Option> }) } </Select> )} </FormItem> <FormItem {...formItemLayout} label="认证步骤" > {getFieldDecorator('process', { initialValue: this.state.process || null })( <Input /> )} </FormItem> <FormItem wrapperCol={{ span: 12, offset: 4 }}> <Button className="set-submit" type="primary" htmlType="submit">保存</Button> </FormItem> </Form > ) } })); const PatentDesc = React.createClass({ getInitialState() { return { visible: false, loading: false }; }, showModal() { this.setState({ visible: true, }); }, handleCancel(e) { this.setState({ visible: false, }); this.props.closeDesc(false); }, componentWillReceiveProps(nextProps) { this.state.visible = nextProps.showDesc; }, render() { if (this.props.data) { return ( <div className="patent-desc"> <Spin spinning={this.state.loading} className='spin-box'> <Modal title="用户详情" visible={this.state.visible} onOk={this.checkPatentProcess} onCancel={this.handleCancel} width='800px' footer={[]} className="admin-desc-content"> <UserForm uid={this.props.data.id} closeDesc={this.handleCancel} /> </Modal> </Spin> </div> ); } else { return <div></div> } }, }); export default PatentDesc;