| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295 | 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[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.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;
 |