import React from 'react'; import { Form, Input, message, Icon, Cascader, Select, Row, Col, Checkbox, Button, Spin } from 'antd'; import "./group.less"; import ajax from 'jquery/src/ajax/xhr.js' import $ from 'jquery/src/ajax'; import Modal from './modal'; const FormItem = Form.Item; const Option = Select.Option; const Group = Form.create()(React.createClass({ getInitialState() { return { passwordDirty: false, getCodeButton: true, loading: false, mCodeText: '获取验证码', vCodeUrl: globalConfig.context + '/open/getVCode' }; }, handleSubmit(e) { e.preventDefault(); this.props.form.validateFieldsAndScroll((err, values) => { if (!err) { this.setState({ loading: true }); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/register", data: { "mobile": values.phone, "password": values.password, "type": 1, "companyName": values.company, "contacts": values.user, "mobileCode": values.phonecaptcha } }).done(function (data) { if (!data.error.length) { message.success('注册成功,5秒后跳转到登录页!'); let interval = setInterval(function () { window.location.href = "./login.html?1" clearInterval(interval); }, 5000); } else { message.warning(data.error[0].message); this.reloadVCode(); } }.bind(this)).always(function () { this.setState({ loading: false }); }.bind(this)); } }); }, getMCode() { const _me = this; const form = this.props.form; this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", url: globalConfig.context + "/open/getMCode", data: { "mobile": form.getFieldValue('phone'), "verificationCode": form.getFieldValue('captcha') }, success: function (data) { if (data.error && data.error.length) { message.warning(data.error[0].message); } else { message.success('验证码发送成功!'); this.setState({ getCodeButton: true }); let interval = setInterval(function () { _me.setState({ getCodeButton: false }); clearInterval(interval); }, 60000); let i = 59; let countDown = setInterval(function () { _me.setState({ mCodeText: '剩余' + i + '秒' }); i--; if (i == 0) { clearInterval(countDown); _me.setState({ mCodeText: '获取验证码' }); }; }, 1000); }; }.bind(this) }).always(function () { this.setState({ loading: false }); }.bind(this)); }, handlePasswordBlur(e) { const value = e.target.value; this.setState({ passwordDirty: this.state.passwordDirty || !!value }); }, checkPassowrd(rule, value, callback) { const form = this.props.form; if (value && value !== form.getFieldValue('password')) { callback('两次密码输入必须相同!'); } else { callback(); } }, checkPhone(rule, value, callback) { const form = this.props.form; const _me = this; if (!(/^1[3-9]\d{9}$/.test(value))) { callback('请输入正确的手机号码!'); _me.setState({ getCodeButton: true }); } else { callback(); _me.setState({ getCodeButton: false }); } }, checkConfirm(rule, value, callback) { const form = this.props.form; if (value && value.length < 6) { callback('密码长度必须大于或者等于6位!'); }; if (value && this.state.passwordDirty) { form.validateFields(['confirm'], { force: true }); } callback(); }, reloadVCode() { this.setState({ vCodeUrl: globalConfig.context + '/open/getVCode?t=' + Math.random() }); }, closeModal() { this.setState({ showDesc: false }); }, render() { const { getFieldDecorator } = this.props.form; const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 }, }; const tailFormItemLayout = { wrapperCol: { span: 14, offset: 6, }, }; return ( <div className="group clearfix"> <Spin spinning={this.state.loading} > <Form className="account-left" horizontal onSubmit={this.handleSubmit}> <FormItem {...formItemLayout} label="手机号码" hasFeedback extra={<span><Icon type="exclamation-circle" /> 请输入正确的手机号码</span>} > {getFieldDecorator('phone', { rules: [{ required: true, message: '请输入手机号码!' }, { validator: this.checkPhone, }], })( <Input size="large" /> )} </FormItem> <FormItem {...formItemLayout} label="密码" extra={<span><Icon type="exclamation-circle" /> 建议字母、数字和符号两种以上组合,6-20个字符</span>} hasFeedback > {getFieldDecorator('password', { rules: [{ required: true, message: '请输入密码!', }, { validator: this.checkConfirm, }], })( <Input type="password" onBlur={this.handlePasswordBlur} /> )} </FormItem> <FormItem {...formItemLayout} label="确认密码" extra={<span><Icon type="exclamation-circle" /> 请再次输入密码</span>} hasFeedback > {getFieldDecorator('confirm', { rules: [{ required: true, message: '请再次输入密码!', }, { validator: this.checkPassowrd, }], })( <Input type="password" /> )} </FormItem> <FormItem {...formItemLayout} label="验证码" extra={<span className="redFont"><Icon type="exclamation-circle" /> 看不清?点击图片更换验证码</span>} > <Row gutter={8}> <Col span={16}> {getFieldDecorator('captcha', { rules: [{ required: true, message: '请输入图片中的验证码' }], })( <Input size="large" /> )} </Col> <Col span={8}> <div className="acc-getVcode"> <img id="VCode" src={this.state.vCodeUrl} alt="点击刷新验证码" onClick={this.reloadVCode} /> </div> </Col> </Row> </FormItem> <FormItem {...formItemLayout} label="手机验证码" extra={<span><Icon type="exclamation-circle" /> 点击获取后我们将发送验证码到上面手机号</span>} > <Row gutter={8}> <Col span={16}> {getFieldDecorator('phonecaptcha', { rules: [{ required: true, message: '请输入手机获取到的验证码' }], })( <Input size="large" /> )} </Col> <Col span={8}> <Button size="large" onClick={this.getMCode} disabled={this.state.getCodeButton}>{this.state.mCodeText}</Button> </Col> </Row> </FormItem> <FormItem {...formItemLayout} label="单位名称" hasFeedback extra={<span><Icon type="exclamation-circle" /> 请填写工商局注册的全称</span>} > {getFieldDecorator('company', { rules: [{ required: true, message: '请填写公司全称!' }], })( <Input size="large" /> )} </FormItem> <FormItem {...formItemLayout} label="联系人" hasFeedback > {getFieldDecorator('user', { rules: [{ required: true, message: '请输入联系人姓名!' }], })( <Input size="large" /> )} </FormItem> <FormItem {...tailFormItemLayout} style={{ marginBottom: 8 }}> {getFieldDecorator('agreement', { valuePropName: 'checked', })( <Checkbox>同意 <a onClick={() => { this.setState({ showDesc: true }); }}> 技淘网会员服务协议条款</a></Checkbox> )} </FormItem> <FormItem {...tailFormItemLayout}> <Button disabled={!this.props.form.getFieldValue('agreement')} type="primary" htmlType="submit" size="large">提 交</Button> </FormItem> </Form> <Modal showDesc={this.state.showDesc} closeModal={this.closeModal} /> </Spin> </div> ); }, })); export default Group;