changeMobile.jsx 5.2 KB

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