account.jsx 11 KB

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