forgetPw.jsx 7.7 KB

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