loginForm.jsx 2.9 KB

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