loginForm.jsx 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. import React from 'react';
  2. import { Form, Icon, Input, Button, Checkbox, Spin,message } from 'antd';
  3. import './login.less';
  4. import ajax from 'jquery/src/ajax/xhr.js'
  5. import $ from 'jquery/src/ajax';
  6. const FormItem = Form.Item;
  7. const LoginForm = Form.create()(React.createClass({
  8. getInitialState() {
  9. return {
  10. loading: false
  11. };
  12. },
  13. handleSubmit(e) {
  14. e.preventDefault();
  15. this.props.form.validateFields((err, values) => {
  16. if (!err) {
  17. this.props.spinState(true);
  18. $.ajax({
  19. method: "POST",
  20. dataType: "json",
  21. url: globalConfig.context + "/signin",
  22. data: {
  23. "mobile": values.phone,
  24. "password": values.password,
  25. "type": this.props.loginProp,
  26. "remember": values.remember
  27. }
  28. }).done(function (data) {
  29. if (!data.error.length) {
  30. window.location.href = "account/index.html"
  31. } else {
  32. message.warning(data.error[0].message);
  33. }
  34. }.bind(this)).always(function () {
  35. this.props.spinState(false);
  36. }.bind(this));
  37. }
  38. });
  39. },
  40. render() {
  41. const { getFieldDecorator } = this.props.form;
  42. return (
  43. <Form onSubmit={this.handleSubmit} className="login-form">
  44. <FormItem>
  45. {getFieldDecorator('phone', {
  46. rules: [{ required: true, message: '请输入手机号!' }],
  47. })(
  48. <Input addonBefore={<Icon type="user" />} placeholder="手机号" />
  49. )}
  50. </FormItem>
  51. <FormItem>
  52. {getFieldDecorator('password', {
  53. rules: [{ required: true, message: '请输入密码!' }],
  54. })(
  55. <Input addonBefore={<Icon type="lock" />} type="password" placeholder="密码" />
  56. )}
  57. </FormItem>
  58. <FormItem>
  59. {getFieldDecorator('remember', {
  60. valuePropName: 'checked',
  61. initialValue: true,
  62. })(
  63. <Checkbox>记住我</Checkbox>
  64. )}
  65. <a className="login-form-forgot">忘记密码</a>
  66. <Button type="primary" htmlType="submit" className="login-form-button">
  67. 登录
  68. </Button>
  69. </FormItem>
  70. </Form>
  71. );
  72. },
  73. }));
  74. export default LoginForm;