forgetPw.jsx 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  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 '../account/set/changeModal.less';
  6. const ChangePw = React.createClass({
  7. getInitialState() {
  8. return {
  9. forgetPw: false,
  10. setPw: false,
  11. getCodeButton: false,
  12. checkMobile: false
  13. };
  14. },
  15. showModal() {
  16. this.setState({
  17. forgetPw: true,
  18. });
  19. },
  20. forgetPwOk() {
  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/checkMCode",
  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. forgetPw: false,
  37. setPw: true,
  38. });
  39. } else {
  40. message.warning(data.error[0].message);
  41. }
  42. }.bind(this));
  43. };
  44. },
  45. setPwOk() {
  46. if (this.state.newPw.length < 6 || this.state.newPw.length > 20) {
  47. message.warning('请使用长度为6-20位的密码!');
  48. } else if (this.state.confirmPw !== this.state.newPw) {
  49. message.warning('两次密码输入不相同!');
  50. } else if (this.state.confirmPw === this.state.newPw) {
  51. $.ajax({
  52. method: "POST",
  53. dataType: "json",
  54. crossDomain: false,
  55. url: globalConfig.context + "/api/user/resetPwd",
  56. data: {
  57. "mobile": this.state.mobile,
  58. "type": this.props.theType,
  59. "newPwd": this.state.newPw,
  60. "resetCode": this.state.uuid
  61. }
  62. }).done(function (data) {
  63. if (!data.error.length) {
  64. message.success('修改成功!');
  65. this.handleCancel;
  66. } else {
  67. message.warning(data.error[0].message);
  68. }
  69. }.bind(this));
  70. };
  71. },
  72. handleCancel(e) {
  73. this.setState({
  74. forgetPw: false,
  75. setPw: false,
  76. });
  77. },
  78. newMobileChange(e) {
  79. this.state.mobile = e.target.value;
  80. if (/^1[34578]\d{9}$/.test(this.state.mobile)) {
  81. this.state.checkMobile = true
  82. }
  83. },
  84. mcodeChange(e) {
  85. this.state.mcode = e.target.value;
  86. },
  87. newPwChange(e) {
  88. this.state.newPw = e.target.value;
  89. },
  90. confirmPwChange(e) {
  91. this.state.confirmPw = e.target.value;
  92. },
  93. getMCode() {
  94. let _me = this;
  95. if (!this.state.checkMobile) {
  96. message.warning('请输入正确的手机号码!');
  97. } else if (this.state.checkMobile) {
  98. $.ajax({
  99. method: "get",
  100. dataType: "json",
  101. url: globalConfig.context + "/open/getMCode",
  102. data: {
  103. "mobile": this.state.mobile,
  104. "type": this.props.theType,
  105. "sign": true
  106. },
  107. success: function (data) {
  108. if (data.error.length == 0) {
  109. message.success('验证码发送成功!');
  110. this.state.uuid = data.data;
  111. this.setState({
  112. getCodeButton: true
  113. });
  114. let interval = setInterval(function () {
  115. _me.setState({
  116. getCodeButton: false
  117. });
  118. clearInterval(interval);
  119. }, 60000);
  120. } else {
  121. message.warning(data.error[0].message);
  122. }
  123. }.bind(this),
  124. });
  125. }
  126. },
  127. render() {
  128. return (
  129. <div style={{ 'float': 'right', 'marginTop': '0' }}>
  130. <a className="login-form-forgot" onClick={this.showModal}>忘记密码</a>
  131. <Modal maskClosable={false} key='1' className="change-modal" title="忘记密码" visible={this.state.forgetPw}
  132. onOk={this.forgetPwOk} onCancel={this.handleCancel}
  133. width={360}
  134. footer={[
  135. <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.forgetPwOk}>确认</Button>,
  136. <Button key="back" type="ghost" size="large" onClick={this.handleCancel}>取消</Button>
  137. ]}
  138. >
  139. <p><span>手机号码:</span><Input onChange={this.newMobileChange} /></p>
  140. <p>
  141. <span>验证码:</span>
  142. <Input className="mixwidth" onChange={this.mcodeChange} />
  143. <Button key="getCodeBtn" onClick={this.getMCode} disabled={this.state.getCodeButton}>获取验证码</Button>
  144. </p>
  145. </Modal>
  146. <Modal maskClosable={false} key='2' className="change-modal" title="设置新密码" visible={this.state.setPw}
  147. onOk={this.setPwOk} onCancel={this.handleCancel}
  148. width={360}
  149. footer={[
  150. <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.setPwOk}>确认</Button>,
  151. <Button key="back" type="ghost" size="large" onClick={this.handleCancel}>取消</Button>
  152. ]}
  153. >
  154. <p className="modal-intro"><Icon type="info-circle" />密码长度为6-20个字符,区分大小写</p>
  155. <p><span>新密码:</span><Input type="password" onChange={this.newPwChange} /></p>
  156. <p><span>确认密码:</span><Input type="password" onChange={this.confirmPwChange} /></p>
  157. </Modal>
  158. </div>
  159. );
  160. },
  161. });
  162. export default ChangePw;