| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287 | 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';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;        $.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[34578]\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.state.vCodeUrl = 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="group clearfix">                <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="手机号码"                        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 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> 阿凡提会员服务协议条款</a></Checkbox>                            )}                    </FormItem>                    <FormItem {...tailFormItemLayout}>                        <Button type="primary" htmlType="submit" size="large">提 交</Button>                    </FormItem>                </Form>            </div>        );    },}));export default Group;
 |