| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151 | import React from 'react';import ajax from 'jquery/src/ajax/xhr.js'import $ from 'jquery/src/ajax';import { Modal, Button, Icon, Input, message } from 'antd';import './changeModal.less';const ChangePw = React.createClass({    getInitialState() {        return {            visible: false,            getCodeButton: false,            checkMobile: false,            vsCodeSrc: globalConfig.context + '/open/getVCode',            mCodeText: '获取验证码'        };    },    showModal() {        this.setState({            visible: true,        });    },    handleOk() {        if (!this.state.checkMobile) {            message.warning('请输入正确的手机号码!');        } else if (this.state.checkMobile) {            $.ajax({                method: "POST",                dataType: "json",                crossDomain: false,                url: globalConfig.context + "/api/user/mobile",                data: {                    "mobile": this.state.mobile,                    "mobileCode": this.state.mcode                }            }).done(function (data) {                if (!data.error.length) {                    this.setState({                        visible: false,                    });                    message.success('修改成功!3秒后跳转到登录页面,请重新登录!');                    setInterval(function () {                        $.ajax({                            method: "get",                            dataType: "json",                            url: globalConfig.context + "/login",                        }).done(function (data) {                            window.location.href = globalConfig.context + "/user/login.html"                        });                        clearInterval(interval);                    }, 3000);                } else {                    message.warning(data.error[0].message);                };            }.bind(this));        };    },    handleCancel(e) {        this.setState({            visible: false,        });    },    reloadVCode() {        this.setState({            vsCodeSrc: globalConfig.context + '/open/getVCode?t=' + Math.random()        });    },    newMobileChange(e) {        this.state.mobile = e.target.value;        if (/^1[34578]\d{9}$/.test(this.state.mobile)) {            this.state.checkMobile = true        }    },    mcodeChange(e) {        this.state.mcode = e.target.value;    },    getMCode() {        if (!this.state.checkMobile) {            message.warning('请输入正确的手机号码!');        } else if (this.state.checkMobile) {            $.ajax({                method: "get",                dataType: "json",                url: globalConfig.context + "/open/getMCode",                data: {                    "mobile": this.state.mobile,                    "verificationCode": this.state.Vcode                },                success: function (data) {                    let _me = this;                    if (data.error && data.error.length) {                        message.warning(data.error[0].message);                        this.reloadVCode();                    } 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);                    this.reloadVCode();                }.bind(this),            });        }    },    render() {        return (            <div style={{ 'float': 'left', 'marginTop': '0' }}>                <Button type="ghost" onClick={this.showModal}>更换手机</Button>                <Modal maskClosable={false} className="change-modal" title="更换手机号码" visible={this.state.visible}                    onOk={this.handleOk} onCancel={this.handleCancel}                    width={360}                    footer={[                        <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>确认</Button>,                        <Button key="back" type="ghost" size="large" onClick={this.handleCancel}>取消</Button>                    ]}                >                    <div><span>新手机号码:</span><Input onChange={this.newMobileChange} /></div>                    <div>                        <span>图形验证码:</span>                        <Input className="mixwidth" onChange={(e) => { this.state.Vcode = e.target.value; }} />                        <span className="getVcode">                            <img id="VCode" src={this.state.vsCodeSrc} alt="点击刷新验证码" onClick={this.reloadVCode} />                        </span>                    </div>                    <div><span>手机验证码:</span><Input className="mixwidth" onChange={this.mcodeChange} />                        <Button style={{width:'92px'}} onClick={this.getMCode} disabled={this.state.getCodeButton}>{this.state.mCodeText}</Button></div>                </Modal>            </div>        );    },});export default ChangePw;
 |