import React from 'react'; import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Spin, message } from 'antd'; import "./account.less"; import ajax from 'jquery/src/ajax/xhr.js' import $ from 'jquery/src/ajax'; import weixin from '../../../image/weixin-w.png'; import qq from '../../../image/qq-w.png'; import weibo from '../../../image/weibo-w.png'; const FormItem = Form.Item; const Option = Select.Option; const LoginContent = Form.create()(React.createClass({ getInitialState() { return { passwordDirty: false, getCodeButton: true, loading: false }; }, 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": 0, "verificationCode": values.captcha, "mobileCode": values.phonecaptcha } }).done(function (data) { if (!data.error.length) { message.success('注册成功,5秒后跳转到登录页!'); let interval = setInterval(function () { window.location.href = "./login.html" clearInterval(interval); }, 5000); } else { message.warning(data.error[0].message); document.getElementById('VCode').src = globalConfig.context + '/open/getVCode?t=' + Math.random(); } }.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[34578]\d{9}$/.test(value))) { callback('请输入正确的手机号码!'); _me.setState({ getCodeButton: true }); } else { callback(); _me.setState({ getCodeButton: false }); } }, getMCode() { const _me = this; const form = this.props.form; $.ajax({ method: "get", dataType: "json", url: globalConfig.context + "/open/getMCode", data: { "mobile": form.getFieldValue('phone'), }, success: function (data) { if (data.error.length == 0) { message.success('验证码发送成功!'); this.setState({ getCodeButton: true }); let interval = setInterval(function () { _me.setState({ getCodeButton: false }); clearInterval(interval); }, 60000); } else { message.warning(data.error[0].message); } }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, 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(e) { e.target.src = globalConfig.context + '/open/getVCode?t=' + Math.random(); }, render() { const { getFieldDecorator } = this.props.form; const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 }, }; const tailFormItemLayout = { wrapperCol: { span: 14, offset: 6, }, }; return ( <div className="account-content clearfix"> <Spin spinning={this.state.loading} > <Form className="account-left" horizontal onSubmit={this.handleSubmit}> <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><Icon type="exclamation-circle" /> 请输入正确的手机号码</span>} hasFeedback > {getFieldDecorator('phone', { rules: [{ required: true, message: '请输入手机号码!' }, { validator: this.checkPhone, }], })( <Input size="large" /> )} </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={globalConfig.context + '/open/getVCode'} 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}>获取验证码</Button> </Col> </Row> </FormItem> <FormItem {...tailFormItemLayout} style={{ marginBottom: 8 }}> {getFieldDecorator('agreement', { valuePropName: 'checked', })( <Checkbox>同意 <a> 阿凡提会员服务协议条款</a></Checkbox> )} </FormItem> <FormItem {...tailFormItemLayout}> <Button type="primary" htmlType="submit" size="large">提 交</Button> </FormItem> </Form> <div className="account-right"> <p className="haveID title">已有账号 <Icon type="right" /> <a href="./login.html">直接登录</a></p> <div className="relateID" style={{ 'display': 'none' }}> <p className="title">关联账号</p> <p><Button className="relateqq"><img src={qq} alt="" /> QQ账号登录</Button></p> <p><Button className="relateweibo"><img src={weibo} alt="" />微博账号登录</Button></p> <p><Button className="relateweixin"><img src={weixin} alt="" />微信账号登录</Button></p> </div> <div className="about"> <p className="title">关于阿凡提通行证</p> <p className="about-content"> 阿凡提通行证推出的统一账号管理系统,注册阿凡提通行证的用户可以使用同一通行证账号及密码登录阿凡提网及其他关联互联网平台。 </p> </div> </div> </Spin> </div> ); }, })); export default LoginContent;