account.jsx 11 KB

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