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.length) {
  37. this.setState({
  38. forgetPw: false,
  39. setPw: true,
  40. });
  41. } else {
  42. message.warning(data.error[0].message);
  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.state.uuid = data.data;
  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;