account.jsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  1. import React from 'react';
  2. import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Spin, message } from 'antd';
  3. import "./account.less";
  4. import ajax from 'jquery/src/ajax/xhr.js'
  5. import $ from 'jquery/src/ajax';
  6. import weixin from '../../../image/weixin-w.png';
  7. import qq from '../../../image/qq-w.png';
  8. import weibo from '../../../image/weibo-w.png';
  9. const FormItem = Form.Item;
  10. const Option = Select.Option;
  11. const LoginContent = Form.create()(React.createClass({
  12. getInitialState() {
  13. return {
  14. passwordDirty: false,
  15. getCodeButton: true,
  16. loading: false,
  17. mCodeText: '获取验证码',
  18. vCodeUrl: globalConfig.context + '/open/getVCode'
  19. };
  20. },
  21. handleSubmit(e) {
  22. e.preventDefault();
  23. this.props.form.validateFieldsAndScroll((err, values) => {
  24. if (!err) {
  25. this.setState({
  26. loading: true
  27. });
  28. $.ajax({
  29. method: "POST",
  30. dataType: "json",
  31. crossDomain: false,
  32. url: globalConfig.context + "/register",
  33. data: {
  34. "mobile": values.phone,
  35. "password": values.password,
  36. "type": 0,
  37. "mobileCode": values.phonecaptcha
  38. }
  39. }).done(function (data) {
  40. if (!data.error.length) {
  41. message.success('注册成功,5秒后跳转到登录页!');
  42. let interval = setInterval(function () {
  43. window.location.href = "./login.html"
  44. clearInterval(interval);
  45. }, 5000);
  46. } else {
  47. message.warning(data.error[0].message);
  48. this.reloadVCode();
  49. }
  50. }.bind(this)).always(function () {
  51. this.setState({
  52. loading: false
  53. });
  54. }.bind(this));
  55. }
  56. });
  57. },
  58. handlePasswordBlur(e) {
  59. const value = e.target.value;
  60. this.setState({ passwordDirty: this.state.passwordDirty || !!value });
  61. },
  62. checkPassowrd(rule, value, callback) {
  63. const form = this.props.form;
  64. if (value && value !== form.getFieldValue('password')) {
  65. callback('两次密码输入必须相同!');
  66. } else {
  67. callback();
  68. }
  69. },
  70. checkPhone(rule, value, callback) {
  71. const form = this.props.form;
  72. const _me = this;
  73. if (!(/^1[34578]\d{9}$/.test(value))) {
  74. callback('请输入正确的手机号码!');
  75. _me.setState({
  76. getCodeButton: true
  77. });
  78. } else {
  79. callback();
  80. _me.setState({
  81. getCodeButton: false
  82. });
  83. }
  84. },
  85. getMCode() {
  86. const _me = this;
  87. const form = this.props.form;
  88. $.ajax({
  89. method: "get",
  90. dataType: "json",
  91. url: globalConfig.context + "/open/getMCode",
  92. data: {
  93. "mobile": form.getFieldValue('phone'),
  94. "sign": false,
  95. "verificationCode": form.getFieldValue('captcha')
  96. },
  97. success: function (data) {
  98. if (data.error && data.error.length) {
  99. message.warning(data.error[0].message);
  100. } else {
  101. message.success('验证码发送成功!');
  102. this.setState({
  103. getCodeButton: true
  104. });
  105. let interval = setInterval(function () {
  106. _me.setState({
  107. getCodeButton: false
  108. });
  109. clearInterval(interval);
  110. }, 60000);
  111. let i = 59;
  112. let countDown = setInterval(function () {
  113. _me.setState({
  114. mCodeText: '剩余' + i + '秒'
  115. });
  116. i--;
  117. if (i == 0) {
  118. clearInterval(countDown);
  119. _me.setState({
  120. mCodeText: '获取验证码'
  121. });
  122. };
  123. }, 1000);
  124. };
  125. }.bind(this)
  126. }).always(function () {
  127. this.setState({
  128. loading: false
  129. });
  130. }.bind(this));
  131. },
  132. checkConfirm(rule, value, callback) {
  133. const form = this.props.form;
  134. if (value && value.length < 6) {
  135. callback('密码长度必须大于或者等于6位!');
  136. };
  137. if (value && this.state.passwordDirty) {
  138. form.validateFields(['confirm'], { force: true });
  139. }
  140. callback();
  141. },
  142. reloadVCode() {
  143. this.state.vCodeUrl = globalConfig.context + '/open/getVCode?t=' + Math.random();
  144. },
  145. render() {
  146. const { getFieldDecorator } = this.props.form;
  147. const formItemLayout = {
  148. labelCol: { span: 6 },
  149. wrapperCol: { span: 14 },
  150. };
  151. const tailFormItemLayout = {
  152. wrapperCol: {
  153. span: 14,
  154. offset: 6,
  155. },
  156. };
  157. return (
  158. <div className="account-content clearfix">
  159. <Spin spinning={this.state.loading} >
  160. <Form className="account-left" horizontal onSubmit={this.handleSubmit}>
  161. <FormItem
  162. {...formItemLayout}
  163. label="密码"
  164. extra={<span><Icon type="exclamation-circle" /> 建议字母、数字和符号两种以上组合,6-20个字符</span>}
  165. hasFeedback
  166. >
  167. {getFieldDecorator('password', {
  168. rules: [{
  169. required: true, message: '请输入密码!',
  170. }, {
  171. validator: this.checkConfirm,
  172. }],
  173. })(
  174. <Input type="password" onBlur={this.handlePasswordBlur} />
  175. )}
  176. </FormItem>
  177. <FormItem
  178. {...formItemLayout}
  179. label="确认密码"
  180. extra={<span><Icon type="exclamation-circle" /> 请再次输入密码</span>}
  181. hasFeedback
  182. >
  183. {getFieldDecorator('confirm', {
  184. rules: [{
  185. required: true, message: '请再次输入密码!',
  186. }, {
  187. validator: this.checkPassowrd,
  188. }],
  189. })(
  190. <Input type="password" />
  191. )}
  192. </FormItem>
  193. <FormItem
  194. {...formItemLayout}
  195. label="手机号码"
  196. extra={<span><Icon type="exclamation-circle" /> 请输入正确的手机号码</span>}
  197. hasFeedback
  198. >
  199. {getFieldDecorator('phone', {
  200. rules: [{ required: true, message: '请输入手机号码!' },
  201. {
  202. validator: this.checkPhone,
  203. }],
  204. })(
  205. <Input size="large" />
  206. )}
  207. </FormItem>
  208. <FormItem
  209. {...formItemLayout}
  210. label="验证码"
  211. extra={<span className="redFont"><Icon type="exclamation-circle" /> 看不清?点击图片更换验证码</span>}
  212. >
  213. <Row gutter={8}>
  214. <Col span={16}>
  215. {getFieldDecorator('captcha', {
  216. rules: [{ required: true, message: '请输入图片中的验证码' }],
  217. })(
  218. <Input size="large" />
  219. )}
  220. </Col>
  221. <Col span={8}>
  222. <div className="acc-getVcode">
  223. <img id="VCode" src={this.state.vCodeUrl} alt="点击刷新验证码" onClick={this.reloadVCode} />
  224. </div>
  225. </Col>
  226. </Row>
  227. </FormItem>
  228. <FormItem
  229. {...formItemLayout}
  230. label="手机验证码"
  231. extra={<span><Icon type="exclamation-circle" /> 点击获取后我们将发送验证码到上面手机号</span>}
  232. >
  233. <Row gutter={8}>
  234. <Col span={16}>
  235. {getFieldDecorator('phonecaptcha', {
  236. rules: [{ required: true, message: '请输入手机获取到的验证码' }],
  237. })(
  238. <Input size="large" />
  239. )}
  240. </Col>
  241. <Col span={8}>
  242. <Button size="large" onClick={this.getMCode} disabled={this.state.getCodeButton}>{this.state.mCodeText}</Button>
  243. </Col>
  244. </Row>
  245. </FormItem>
  246. <FormItem {...tailFormItemLayout} style={{ marginBottom: 8 }}>
  247. {getFieldDecorator('agreement', {
  248. valuePropName: 'checked',
  249. })(
  250. <Checkbox>同意 <a> 阿凡提会员服务协议条款</a></Checkbox>
  251. )}
  252. </FormItem>
  253. <FormItem {...tailFormItemLayout}>
  254. <Button type="primary" htmlType="submit" size="large">提 交</Button>
  255. </FormItem>
  256. </Form>
  257. <div className="account-right">
  258. <p className="haveID title">已有账号 <Icon type="right" /> <a href="./login.html">直接登录</a></p>
  259. <div className="relateID" style={{ 'display': 'none' }}>
  260. <p className="title">关联账号</p>
  261. <p><Button className="relateqq"><img src={qq} alt="" /> QQ账号登录</Button></p>
  262. <p><Button className="relateweibo"><img src={weibo} alt="" />微博账号登录</Button></p>
  263. <p><Button className="relateweixin"><img src={weixin} alt="" />微信账号登录</Button></p>
  264. </div>
  265. <div className="about">
  266. <p className="title">关于阿凡提通行证</p>
  267. <p className="about-content">
  268. 阿凡提通行证推出的统一账号管理系统,注册阿凡提通行证的用户可以使用同一通行证账号及密码登录阿凡提网及其他关联互联网平台。
  269. </p>
  270. </div>
  271. </div>
  272. </Spin>
  273. </div>
  274. );
  275. },
  276. }));
  277. export default LoginContent;