group.jsx 11 KB

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