kede-client/js/component/sign/account.jsx

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[3-9]\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" /> 请输入正确的手机号码</span>}
                            hasFeedback
                        >
                            {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 {...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>
                    <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;