groupAccount.jsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. import React from 'react';
  2. import { Form, Input, message, Icon, Cascader, Select, Row, Col, Checkbox, Button, Spin } from 'antd';
  3. import "./group.less";
  4. import ajax from 'jquery/src/ajax/xhr.js'
  5. import $ from 'jquery/src/ajax';
  6. const FormItem = Form.Item;
  7. const Option = Select.Option;
  8. const Group = Form.create()(React.createClass({
  9. getInitialState() {
  10. return {
  11. passwordDirty: false,
  12. getCodeButton: true,
  13. loading: false
  14. };
  15. },
  16. handleSubmit(e) {
  17. e.preventDefault();
  18. this.props.form.validateFieldsAndScroll((err, values) => {
  19. if (!err) {
  20. this.setState({
  21. loading: true
  22. });
  23. $.ajax({
  24. method: "POST",
  25. dataType: "json",
  26. crossDomain: false,
  27. url: globalConfig.context + "/register",
  28. data: {
  29. "mobile": values.phone,
  30. "password": values.password,
  31. "type": 1,
  32. "companyName": values.company,
  33. "contacts": values.user,
  34. "verificationCode": values.captcha,
  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?1"
  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. getMCode() {
  57. const _me = this;
  58. const form = this.props.form;
  59. $.ajax({
  60. method: "get",
  61. dataType: "json",
  62. url: globalConfig.context + "/open/getMCode",
  63. data: {
  64. "mobile": form.getFieldValue('phone'),
  65. },
  66. success: function (data) {
  67. if (data.error.length == 0) {
  68. message.success('验证码发送成功!');
  69. this.setState({
  70. getCodeButton: true
  71. });
  72. let interval = setInterval(function () {
  73. _me.setState({
  74. getCodeButton: false
  75. });
  76. clearInterval(interval);
  77. }, 60000);
  78. } else {
  79. message.warning(data.error[0].message);
  80. }
  81. }.bind(this),
  82. }).always(function () {
  83. this.setState({
  84. loading: false
  85. });
  86. }.bind(this));
  87. },
  88. handlePasswordBlur(e) {
  89. const value = e.target.value;
  90. this.setState({ passwordDirty: this.state.passwordDirty || !!value });
  91. },
  92. checkPassowrd(rule, value, callback) {
  93. const form = this.props.form;
  94. if (value && value !== form.getFieldValue('password')) {
  95. callback('两次密码输入必须相同!');
  96. } else {
  97. callback();
  98. }
  99. },
  100. checkPhone(rule, value, callback) {
  101. const form = this.props.form;
  102. const _me = this;
  103. if (!(/^1[34578]\d{9}$/.test(value))) {
  104. callback('请输入正确的手机号码!');
  105. _me.setState({
  106. getCodeButton: true
  107. });
  108. } else {
  109. callback();
  110. _me.setState({
  111. getCodeButton: false
  112. });
  113. }
  114. },
  115. checkConfirm(rule, value, callback) {
  116. const form = this.props.form;
  117. if (value && value.length < 6) {
  118. callback('密码长度必须大于或者等于6位!');
  119. };
  120. if (value && this.state.passwordDirty) {
  121. form.validateFields(['confirm'], { force: true });
  122. }
  123. callback();
  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="group clearfix">
  139. <Form className="account-left" horizontal onSubmit={this.handleSubmit}>
  140. <FormItem
  141. {...formItemLayout}
  142. label="密码"
  143. extra={<span><Icon type="exclamation-circle" /> 建议字母、数字和符号两种以上组合,6-20个字符</span>}
  144. hasFeedback
  145. >
  146. {getFieldDecorator('password', {
  147. rules: [{
  148. required: true, message: '请输入密码!',
  149. }, {
  150. validator: this.checkConfirm,
  151. }],
  152. })(
  153. <Input type="password" onBlur={this.handlePasswordBlur} />
  154. )}
  155. </FormItem>
  156. <FormItem
  157. {...formItemLayout}
  158. label="确认密码"
  159. extra={<span><Icon type="exclamation-circle" /> 请再次输入密码</span>}
  160. hasFeedback
  161. >
  162. {getFieldDecorator('confirm', {
  163. rules: [{
  164. required: true, message: '请再次输入密码!',
  165. }, {
  166. validator: this.checkPassowrd,
  167. }],
  168. })(
  169. <Input type="password" />
  170. )}
  171. </FormItem>
  172. <FormItem
  173. {...formItemLayout}
  174. label="手机号码"
  175. hasFeedback
  176. extra={<span><Icon type="exclamation-circle" /> 请输入正确的手机号码</span>}
  177. >
  178. {getFieldDecorator('phone', {
  179. rules: [{ required: true, message: '请输入手机号码!' }, {
  180. validator: this.checkPhone,
  181. }],
  182. })(
  183. <Input size="large" />
  184. )}
  185. </FormItem>
  186. <FormItem
  187. {...formItemLayout}
  188. label="验证码"
  189. extra={<span className="redFont"><Icon type="exclamation-circle" /> 看不清?点击图片更换验证码</span>}
  190. >
  191. <Row gutter={8}>
  192. <Col span={16}>
  193. {getFieldDecorator('captcha', {
  194. rules: [{ required: true, message: '请输入图片中的验证码' }],
  195. })(
  196. <Input size="large" />
  197. )}
  198. </Col>
  199. <Col span={8}>
  200. <div className="acc-getVcode">
  201. <img id="VCode" src={globalConfig.context + '/open/getVCode'} alt="" onClick={function (e) { e.target.src = globalConfig.context + '/open/getVcode' + Math.random(); }} />
  202. </div>
  203. </Col>
  204. </Row>
  205. </FormItem>
  206. <FormItem
  207. {...formItemLayout}
  208. label="手机验证码"
  209. extra={<span><Icon type="exclamation-circle" /> 点击获取后我们将发送验证码到上面手机号</span>}
  210. >
  211. <Row gutter={8}>
  212. <Col span={16}>
  213. {getFieldDecorator('phonecaptcha', {
  214. rules: [{ required: true, message: '请输入手机获取到的验证码' }],
  215. })(
  216. <Input size="large" />
  217. )}
  218. </Col>
  219. <Col span={8}>
  220. <Button size="large" onClick={this.getMCode} disabled={this.state.getCodeButton}>获取验证码</Button>
  221. </Col>
  222. </Row>
  223. </FormItem>
  224. <FormItem
  225. {...formItemLayout}
  226. label="单位名称"
  227. hasFeedback
  228. extra={<span><Icon type="exclamation-circle" /> 请填写工商局注册的全称</span>}
  229. >
  230. {getFieldDecorator('company', {
  231. rules: [{ required: true, message: '请填写公司全称!' }],
  232. })(
  233. <Input size="large" />
  234. )}
  235. </FormItem>
  236. <FormItem
  237. {...formItemLayout}
  238. label="联系人"
  239. hasFeedback
  240. >
  241. {getFieldDecorator('user', {
  242. rules: [{ required: true, message: '请输入联系人姓名!' }],
  243. })(
  244. <Input size="large" />
  245. )}
  246. </FormItem>
  247. <FormItem {...tailFormItemLayout} style={{ marginBottom: 8 }}>
  248. {getFieldDecorator('agreement', {
  249. valuePropName: 'checked',
  250. })(
  251. <Checkbox>同意 <a> 阿凡提会员服务协议条款</a></Checkbox>
  252. )}
  253. </FormItem>
  254. <FormItem {...tailFormItemLayout}>
  255. <Button type="primary" htmlType="submit" size="large">提 交</Button>
  256. </FormItem>
  257. </Form>
  258. </div>
  259. );
  260. },
  261. }));
  262. export default Group;