groupAccount.jsx 12 KB

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