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 }; }, 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('修改成功!马上跳转到登录页面,请重新登录!'); setInterval(function () { $.ajax({ method: "get", dataType: "json", url: globalConfig.context + "./login", }).done(function (data) { window.location.href = "../login.html" }); clearInterval(interval); }, 3000); } else { message.warning(data.error[0].message); } }.bind(this)); }; }, handleCancel(e) { this.setState({ visible: false, }); }, 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 }, success: function (data) { let _me = this; if (data.error.length == 0) { message.success('验证码发送成功!'); this.setState({ getCodeButton: true }); let interval = setInterval(function () { _me.setState({ getCodeButton: false }); clearInterval(interval); }, 60000); } else { message.warning(data.error[0].message); } }.bind(this), }); } }, render() { return ( <div style={{ 'float': 'left', 'marginTop': '0' }}> <Button type="ghost" onClick={this.showModal}>更换手机</Button> <Modal 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> ]} > <p><span>新手机号码:</span><Input onChange={this.newMobileChange} /></p> <p><span>验证码:</span><Input className="mixwidth" onChange={this.mcodeChange} /> <Button onClick={this.getMCode} disabled={this.state.getCodeButton}>获取验证码</Button></p> </Modal> </div> ); }, }); export default ChangePw;