changeMobile.jsx 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. import React from 'react';
  2. import ajax from 'jquery/src/ajax/xhr.js'
  3. import $ from 'jquery/src/ajax';
  4. import { Modal, Button, Icon, Input, message } from 'antd';
  5. import './changeModal.less';
  6. const ChangePw = React.createClass({
  7. getInitialState() {
  8. return {
  9. visible: false,
  10. getCodeButton: false,
  11. checkMobile: false
  12. };
  13. },
  14. showModal() {
  15. this.setState({
  16. visible: true,
  17. });
  18. },
  19. handleOk() {
  20. if (!this.state.checkMobile) {
  21. message.warning('请输入正确的手机号码!');
  22. } else if (this.state.checkMobile) {
  23. $.ajax({
  24. method: "POST",
  25. dataType: "json",
  26. crossDomain: false,
  27. url: globalConfig.context + "/api/user/mobile",
  28. data: {
  29. "mobile": this.state.mobile,
  30. "mobileCode": this.state.mcode
  31. }
  32. }).done(function (data) {
  33. if (!data.error.length) {
  34. this.setState({
  35. visible: false,
  36. });
  37. message.success('修改成功!马上跳转到登录页面,请重新登录!');
  38. setInterval(function () {
  39. $.ajax({
  40. method: "get",
  41. dataType: "json",
  42. url: globalConfig.context + "./login",
  43. }).done(function (data) {
  44. window.location.href = "../login.html"
  45. });
  46. clearInterval(interval);
  47. }, 3000);
  48. } else {
  49. message.warning(data.error[0].message);
  50. }
  51. }.bind(this));
  52. };
  53. },
  54. handleCancel(e) {
  55. this.setState({
  56. visible: false,
  57. });
  58. },
  59. newMobileChange(e) {
  60. this.state.mobile = e.target.value;
  61. if (/^1[34578]\d{9}$/.test(this.state.mobile)) {
  62. this.state.checkMobile = true
  63. }
  64. },
  65. mcodeChange(e) {
  66. this.state.mcode = e.target.value;
  67. },
  68. getMCode() {
  69. if (!this.state.checkMobile) {
  70. message.warning('请输入正确的手机号码!');
  71. } else if (this.state.checkMobile) {
  72. $.ajax({
  73. method: "get",
  74. dataType: "json",
  75. url: globalConfig.context + "/open/getMCode",
  76. data: {
  77. "mobile": this.state.mobile
  78. },
  79. success: function (data) {
  80. let _me = this;
  81. if (data.error.length == 0) {
  82. message.success('验证码发送成功!');
  83. this.setState({
  84. getCodeButton: true
  85. });
  86. let interval = setInterval(function () {
  87. _me.setState({
  88. getCodeButton: false
  89. });
  90. clearInterval(interval);
  91. }, 60000);
  92. } else {
  93. message.warning(data.error[0].message);
  94. }
  95. }.bind(this),
  96. });
  97. }
  98. },
  99. render() {
  100. return (
  101. <div style={{ 'float': 'left', 'marginTop': '0' }}>
  102. <Button type="ghost" onClick={this.showModal}>更换手机</Button>
  103. <Modal className="change-modal" title="更换手机号码" visible={this.state.visible}
  104. onOk={this.handleOk} onCancel={this.handleCancel}
  105. width={360}
  106. footer={[
  107. <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>确认</Button>,
  108. <Button key="back" type="ghost" size="large" onClick={this.handleCancel}>取消</Button>
  109. ]}
  110. >
  111. <p><span>新手机号码:</span><Input onChange={this.newMobileChange} /></p>
  112. <p><span>验证码:</span><Input className="mixwidth" onChange={this.mcodeChange} />
  113. <Button onClick={this.getMCode} disabled={this.state.getCodeButton}>获取验证码</Button></p>
  114. </Modal>
  115. </div>
  116. );
  117. },
  118. });
  119. export default ChangePw;