group.jsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. import React from 'react';
  2. import { Input, Button, Form, Icon, Spin, message } from 'antd';
  3. import './base.less';
  4. import ajax from 'jquery/src/ajax/xhr.js'
  5. import $ from 'jquery/src/ajax';
  6. import ChangePw from './changePassword.jsx';
  7. const FormItem = Form.Item;
  8. import weixin from '../../../../image/weixin-w.png';
  9. import qq from '../../../../image/qq-w.png';
  10. import weibo from '../../../../image/weibo-w.png';
  11. const BaseFrom = Form.create()(React.createClass({
  12. getData() {
  13. this.props.spinState(true);
  14. $.ajax({
  15. method: "get",
  16. dataType: "json",
  17. url: globalConfig.context + "/api/user/base",
  18. success: function (data) {
  19. if (data.data) {
  20. this.setState({
  21. id:data.data.id,
  22. fixedTel: data.data.fixedTel,
  23. firstContacts: data.data.firstContacts,
  24. firstMobile: data.data.firstMobile,
  25. secondContacts: data.data.secondContacts,
  26. secondMobile: data.data.secondMobile,
  27. thirdContacts: data.data.thirdContacts,
  28. thirdMobile: data.data.thirdMobile,
  29. qq: data.data.qq,
  30. address: data.data.postalAddress,
  31. postcode: data.data.postcode,
  32. legalPerson: data.data.legalPerson,
  33. email: data.data.email,
  34. });
  35. };
  36. }.bind(this),
  37. }).done(function (data) {
  38. if (data.error.length) {
  39. message.warning(data.error[0].message);
  40. }
  41. }.bind(this)).always(function () {
  42. this.props.spinState(false);
  43. }.bind(this));
  44. },
  45. getInitialState() {
  46. return {
  47. };
  48. },
  49. componentWillMount() {
  50. this.getData();
  51. },
  52. handleSubmit(e) {
  53. e.preventDefault();
  54. this.props.form.validateFields((err, values) => {
  55. if (!err) {
  56. this.props.spinState(true);
  57. $.ajax({
  58. method: "POST",
  59. dataType: "json",
  60. crossDomain: false,
  61. url: globalConfig.context + "/api/user/orgIdentity",
  62. data: {
  63. "id":this.state.id,
  64. "firstContacts": values.firstContacts,
  65. "firstMobile": values.firstMobile,
  66. "secondContacts": values.secondContacts,
  67. "secondMobile": values.secondMobile,
  68. "thirdContacts": values.thirdContacts,
  69. "thirdMobile": values.thirdMobile,
  70. "email": values.email,
  71. "fixedTel": values.telephone,
  72. "qq": values.qq,
  73. "postalAddress": values.address,
  74. "postcode": values.postcode,
  75. "moblie": values.moblie,
  76. "legalPerson": values.legalPerson
  77. }
  78. }).done(function (data) {
  79. if (!data.error.length) {
  80. message.success('保存成功!');
  81. } else {
  82. message.warning(data.error[0].message);
  83. }
  84. }.bind(this)).always(function () {
  85. this.props.spinState(false);
  86. }.bind(this));
  87. }
  88. });
  89. },
  90. checkidNum(rule, value, callback) {
  91. const form = this.props.form;
  92. if (value && value !== form.getFieldValue('password')) {
  93. callback('Two passwords that you enter is inconsistent!');
  94. } else {
  95. callback();
  96. }
  97. },
  98. checkUpload(file) {
  99. const isJPG = file.type === 'image/jpeg';
  100. if (!isJPG) {
  101. callback('You can only upload JPG file!');
  102. }
  103. const isLt2M = file.size / 1024 / 1024 < 2;
  104. if (!isLt2M) {
  105. callback('Image must smaller than 2MB!');
  106. }
  107. return isJPG && isLt2M;
  108. },
  109. checkPhone(rule, value, callback) {
  110. const form = this.props.form;
  111. if (value && value.length !== 0 && !(/^1[34578]\d{9}$/.test(value))) {
  112. callback('请输入正确的手机号码!');
  113. } else {
  114. callback();
  115. }
  116. },
  117. render() {
  118. const { getFieldDecorator } = this.props.form;
  119. const formItemLayout = {
  120. labelCol: { span: 4 },
  121. wrapperCol: { span: 12 },
  122. };
  123. return (
  124. <Form horizontal onSubmit={this.handleSubmit} className="base-form">
  125. <FormItem
  126. {...formItemLayout}
  127. label='第一联系人'
  128. >
  129. {getFieldDecorator('firstContacts', {
  130. initialValue: this.state.firstContacts,
  131. })(
  132. <Input />
  133. )}
  134. </FormItem>
  135. <FormItem
  136. {...formItemLayout}
  137. label="手机号码"
  138. >
  139. {getFieldDecorator('firstMobile', {
  140. initialValue: this.state.firstMobile,
  141. rules: [
  142. {
  143. validator: this.checkPhone
  144. }],
  145. })(
  146. <Input />
  147. )}
  148. </FormItem>
  149. <FormItem
  150. {...formItemLayout}
  151. label='第二联系人'
  152. >
  153. {getFieldDecorator('secondContacts', {
  154. initialValue: this.state.secondContacts,
  155. })(
  156. <Input />
  157. )}
  158. </FormItem>
  159. <FormItem
  160. {...formItemLayout}
  161. label="手机号码"
  162. >
  163. {getFieldDecorator('secondMobile', {
  164. initialValue: this.state.secondMobile,
  165. rules: [
  166. {
  167. validator: this.checkPhone
  168. }],
  169. })(
  170. <Input />
  171. )}
  172. </FormItem>
  173. <FormItem
  174. {...formItemLayout}
  175. label='第三联系人'
  176. >
  177. {getFieldDecorator('thirdContacts', {
  178. initialValue: this.state.thirdContacts,
  179. })(
  180. <Input />
  181. )}
  182. </FormItem>
  183. <FormItem
  184. {...formItemLayout}
  185. label="手机号码"
  186. >
  187. {getFieldDecorator('thirdMobile', {
  188. initialValue: this.state.thirdMobile,
  189. rules: [
  190. {
  191. validator: this.checkPhone
  192. }],
  193. })(
  194. <Input />
  195. )}
  196. </FormItem>
  197. <FormItem
  198. {...formItemLayout}
  199. label="电子邮箱"
  200. >
  201. {getFieldDecorator('email', {
  202. initialValue: this.state.email,
  203. rules: [{
  204. type: 'email', message: '请输入正确的邮箱地址!',
  205. }],
  206. })(
  207. <Input />
  208. )}
  209. </FormItem>
  210. <FormItem
  211. {...formItemLayout}
  212. label="固定电话"
  213. >
  214. {getFieldDecorator('telephone', {
  215. initialValue: this.state.fixedTel
  216. })(
  217. <Input />
  218. )}
  219. </FormItem>
  220. <FormItem
  221. {...formItemLayout}
  222. label="QQ"
  223. >
  224. {getFieldDecorator('qq', {
  225. initialValue: this.state.qq
  226. })(
  227. <Input />
  228. )}
  229. </FormItem>
  230. <FormItem
  231. {...formItemLayout}
  232. label="通讯地址"
  233. >
  234. {getFieldDecorator('address', {
  235. initialValue: this.state.address
  236. })(
  237. <Input />
  238. )}
  239. </FormItem>
  240. <FormItem wrapperCol={{ span: 12, offset: 4 }}>
  241. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  242. </FormItem>
  243. </Form >
  244. );
  245. },
  246. }));
  247. // <FormItem
  248. // {...formItemLayout}
  249. // label="法人"
  250. // >
  251. // {getFieldDecorator('legalPerson', {
  252. // initialValue: this.state.legalPerson
  253. // })(
  254. // <Input />
  255. // )}
  256. // </FormItem>
  257. const Base = React.createClass({
  258. getInitialState() {
  259. return {
  260. loading: false,
  261. };
  262. },
  263. spinChange(e) {
  264. this.setState({
  265. loading: e
  266. });
  267. },
  268. render() {
  269. return (
  270. <Spin spinning={this.state.loading} className='spin-box'>
  271. <div className="set-base">
  272. <div className="acc-detail">
  273. <p className="acc-title">您登录的账号</p>
  274. <p>阿凡提号: <span>{userData.number}</span></p>
  275. <p>认证状态: <span>{userData.lvl == '1' ? <span>已认证</span> : <span>未认证 <a href={globalConfig.context + '/user/groupCertify'}> 马上认证</a></span>}</span></p>
  276. <div className="clearfix">
  277. <ChangePw />
  278. </div>
  279. </div>
  280. <div className="acc-bind" style={{ 'display': 'none' }}>
  281. <p className="acc-title">绑定账号 <span>绑定后,可使用第三方账号直接登录阿凡提网</span></p>
  282. <p>
  283. <Button className="relateqq"><img src={qq} alt="" /> QQ账号登录</Button>
  284. <Button className="relateweibo"><img src={weibo} alt="" />微博账号登录</Button>
  285. <Button className="relateweixin"><img src={weixin} alt="" />微信账号登录</Button>
  286. </p>
  287. </div>
  288. <div className="acc-info">
  289. <p className="acc-title">请确认您的联系信息</p>
  290. <BaseFrom spinState={this.spinChange} />
  291. </div>
  292. </div>
  293. </Spin>
  294. )
  295. }
  296. });
  297. export default Base;