changeMobile.jsx 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  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. message.success('修改成功!');
  35. this.setState({
  36. visible: false,
  37. });
  38. } else {
  39. message.warning(data.error[0].message);
  40. }
  41. }.bind(this));
  42. };
  43. },
  44. handleCancel(e) {
  45. this.setState({
  46. visible: false,
  47. });
  48. },
  49. newMobileChange(e) {
  50. this.state.mobile = e.target.value;
  51. if (/^1[34578]\d{9}$/.test(this.state.mobile)) {
  52. this.state.checkMobile = true
  53. }
  54. },
  55. mcodeChange(e) {
  56. this.state.mcode = e.target.value;
  57. },
  58. getMCode() {
  59. debugger
  60. if (!this.state.checkMobile ) {
  61. message.warning('请输入正确的手机号码!');
  62. } else if (this.state.checkMobile) {
  63. debugger
  64. $.ajax({
  65. method: "get",
  66. dataType: "json",
  67. url: globalConfig.context + "/open/getMCode",
  68. data: {
  69. "mobile": this.state.mobile
  70. },
  71. success: function (data) {
  72. if (data.error.length == 0) {
  73. message.success('验证码发送成功!');
  74. this.setState({
  75. getCodeButton: true
  76. });
  77. let interval = setInterval(function () {
  78. _me.setState({
  79. getCodeButton: false
  80. });
  81. clearInterval(interval);
  82. }, 60000);
  83. } else {
  84. message.warning(data.error[0]);
  85. }
  86. }.bind(this),
  87. });
  88. }
  89. },
  90. render() {
  91. return (
  92. <div style={{ 'float': 'left', 'marginTop': '0' }}>
  93. <Button type="ghost" onClick={this.showModal}>更换手机</Button>
  94. <Modal className="change-modal" title="更换手机号码" visible={this.state.visible}
  95. onOk={this.handleOk} onCancel={this.handleCancel}
  96. width={360}
  97. footer={[
  98. <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>确认</Button>,
  99. <Button key="back" type="ghost" size="large" onClick={this.handleCancel}>取消</Button>
  100. ]}
  101. >
  102. <p><span>新手机号码:</span><Input onChange={this.newMobileChange} /></p>
  103. <p><span>验证码:</span><Input className="mixwidth" onChange={this.mcodeChange} />
  104. <Button onClick={this.getMCode} disabled={this.state.getCodeButton}>获取验证码</Button></p>
  105. </Modal>
  106. </div>
  107. );
  108. },
  109. });
  110. export default ChangePw;