changeMobile.jsx 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  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: "POST",
  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. if (data.error.length == 0) {
  81. message.success('验证码发送成功!');
  82. this.setState({
  83. getCodeButton: true
  84. });
  85. let interval = setInterval(function () {
  86. _me.setState({
  87. getCodeButton: false
  88. });
  89. clearInterval(interval);
  90. }, 60000);
  91. } else {
  92. message.warning(data.error[0].message);
  93. }
  94. }.bind(this),
  95. });
  96. }
  97. },
  98. render() {
  99. return (
  100. <div style={{ 'float': 'left', 'marginTop': '0' }}>
  101. <Button type="ghost" onClick={this.showModal}>更换手机</Button>
  102. <Modal className="change-modal" title="更换手机号码" visible={this.state.visible}
  103. onOk={this.handleOk} onCancel={this.handleCancel}
  104. width={360}
  105. footer={[
  106. <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>确认</Button>,
  107. <Button key="back" type="ghost" size="large" onClick={this.handleCancel}>取消</Button>
  108. ]}
  109. >
  110. <p><span>新手机号码:</span><Input onChange={this.newMobileChange} /></p>
  111. <p><span>验证码:</span><Input className="mixwidth" onChange={this.mcodeChange} />
  112. <Button onClick={this.getMCode} disabled={this.state.getCodeButton}>获取验证码</Button></p>
  113. </Modal>
  114. </div>
  115. );
  116. },
  117. });
  118. export default ChangePw;