groupAccount.jsx 11 KB

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