| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296 | 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 Modal from './modal';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,            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": 0,                        "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);                        this.reloadVCode();                    }                }.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;        if (!form.getFieldValue('captcha')) {            message.warning('图形验证码不能为空!');            return;        };        this.setState({            loading: true        });        $.ajax({            method: "get",            dataType: "json",            url: globalConfig.context + "/open/getMCode",            data: {                "mobile": form.getFieldValue('phone'),                "sign": false,                "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));    },    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="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={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 {...tailFormItemLayout} style={{ marginBottom: 8 }}>                            {getFieldDecorator('agreement', {                                valuePropName: 'checked',                            })(                                <Checkbox>同意 <a onClick={() => { this.setState({ showDesc: true }); }}> 阿凡提会员服务协议条款</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>                <Modal showDesc={this.state.showDesc} closeModal={this.closeModal} />            </div>        );    },}));export default LoginContent;
 |