forgetPw.jsx 7.6 KB

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