account.jsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491
  1. /*
  2. @author:李霆
  3. @update:2018/05/29
  4. @descript:复制粘贴,拿起来就是干!!
  5. */
  6. import React from 'react';
  7. import ajax from 'jquery/src/ajax/xhr.js';
  8. import $ from 'jquery/src/ajax';
  9. import { Row, Col, Form, Button, Spin, message, Modal, Input } from 'antd';
  10. import './account.less';
  11. const FormItem = Form.Item;
  12. class Account extends React.Component {
  13. constructor(props) {
  14. super(props);
  15. this.state = {
  16. loading: false,
  17. visible: false,
  18. editState: false,
  19. name: 'liting',
  20. followTime: '2010/09/18',
  21. contactMobile: '18320747565'
  22. };
  23. }
  24. loadData() {
  25. this.setState({
  26. loading: true
  27. });
  28. $.ajax({
  29. method: 'post',
  30. dataType: 'json',
  31. crossDomain: false,
  32. url: globalConfig.context + '/api/admin/customer/shuju',
  33. data: {},
  34. success: function(data) {
  35. if (data.error.length || data.data == '') {
  36. if (data.error && data.error.length) {
  37. message.warning(data.error[0].message);
  38. }
  39. } else {
  40. this.setState({
  41. id: data.data.id,
  42. name: data.data.name,
  43. photo: data.data.photo,
  44. email: data.data.email,
  45. nickname: data.data.nickname,
  46. accountData: data.data
  47. });
  48. }
  49. }.bind(this)
  50. }).always(
  51. function() {
  52. this.setState({
  53. loading: false
  54. });
  55. }.bind(this)
  56. );
  57. }
  58. //修改密码
  59. passFun() {
  60. this.setState({
  61. visible: true,
  62. password: '',
  63. repeatPass: ''
  64. });
  65. }
  66. //企业认证
  67. companyFun() {}
  68. //个人认证
  69. personFun() {}
  70. //修改密码
  71. passSubmit() {
  72. if (!this.state.name) {
  73. message.warning('请填写昵称!');
  74. return;
  75. }
  76. if (!this.state.password) {
  77. message.warning('请填写新密码!');
  78. return;
  79. }
  80. if (this.state.password !== this.state.repeatPass) {
  81. message.warning('两次输入的密码不一致!');
  82. }
  83. this.setState({
  84. loading: true
  85. });
  86. $.ajax({
  87. method: 'POST',
  88. dataType: 'json',
  89. crossDomain: false,
  90. url: globalConfig.context + '/api/user/mobile',
  91. data: {
  92. mobile: this.state.mobile,
  93. mobileCode: this.state.mcode,
  94. password: this.state.password,
  95. name: this.state.name
  96. }
  97. }).done(
  98. function(data) {
  99. if (!data.error.length) {
  100. this.setState({
  101. visible: false
  102. });
  103. message.success('修改成功!');
  104. this.loadData();
  105. } else {
  106. message.warning(data.error[0].message);
  107. }
  108. }.bind(this)
  109. );
  110. }
  111. handleOk() {
  112. this.passSubmit();
  113. }
  114. handleCancel() {
  115. this.setState({
  116. visible: false
  117. });
  118. }
  119. //单个修改
  120. btnFun(item) {
  121. switch (item) {
  122. case 1:
  123. this.setState({ editName: true });
  124. break;
  125. case 2:
  126. this.setState({ editPhoto: true });
  127. break;
  128. case 3:
  129. this.setState({ editEmail: true });
  130. break;
  131. case 4:
  132. this.setState({ editNickname: true });
  133. break;
  134. }
  135. this.enterFun(item);
  136. }
  137. //保存单个修改
  138. saveFun(item) {
  139. $.ajax({
  140. method: 'POST',
  141. dataType: 'json',
  142. crossDomain: false,
  143. url: globalConfig.context + '/api/user/mobile',
  144. data: {
  145. id: this.state.id,
  146. name: this.state.name,
  147. photo: this.state.photo,
  148. email: this.state.email,
  149. nickname: this.state.nickname
  150. }
  151. }).done(
  152. function(data) {
  153. if (!data.error.length) {
  154. this.setState({
  155. visible: false
  156. });
  157. message.success('修改成功!');
  158. switch (item) {
  159. case 1:
  160. this.setState({ editName: false });
  161. break;
  162. case 2:
  163. this.setState({ editPhoto: false });
  164. break;
  165. case 3:
  166. this.setState({ editEmail: false });
  167. break;
  168. case 4:
  169. this.setState({ editNickname: false });
  170. break;
  171. }
  172. this.loadData();
  173. } else {
  174. message.warning(data.error[0].message);
  175. }
  176. }.bind(this)
  177. );
  178. }
  179. //按下键盘回车键时保存
  180. enterFun(item) {
  181. if(item){
  182. document.onkeydown=function(e){ //对整个页面文档监听回车键
  183. var keyNum=window.event ? e.keyCode :e.which;
  184. if(keyNum==13){
  185. this.saveFun(item);
  186. }
  187. }.bind(this)
  188. }
  189. }
  190. componentWillMount(){
  191. this.loadData();
  192. }
  193. render() {
  194. const formItemLayout = {
  195. labelCol: { span: 8 },
  196. wrapperCol: { span: 10 }
  197. };
  198. const formItemLayoutBtn = {
  199. labelCol: { span: 8 },
  200. wrapperCol: { span: 6 }
  201. };
  202. const accountData = this.state.account || [];
  203. return (
  204. <div className="account-wrap">
  205. <div className="clearfix">
  206. <Spin spinning={this.state.loading}>
  207. <Row>
  208. <Col span={8}>
  209. <FormItem className="half-mid" {...formItemLayout} label="注册账号">
  210. <span>{accountData.account}</span>
  211. <Button
  212. size="default"
  213. onClick={this.passFun.bind(this)}
  214. type="primary"
  215. className="Authentication"
  216. >
  217. 修改密码
  218. </Button>
  219. </FormItem>
  220. </Col>
  221. </Row>
  222. <Row>
  223. <Col span={8}>
  224. <FormItem className="half-mid" {...formItemLayout} label="注册名称">
  225. {this.state.editName ? (
  226. <Input
  227. value={this.state.name}
  228. onBlur={(e) => {
  229. this.saveFun(1);
  230. }}
  231. placeholder="请填写注册名称"
  232. onChange={(e) => {
  233. this.setState({ name: e.target.value });
  234. }}
  235. />
  236. ) : (
  237. <span>{this.state.name}</span>
  238. )}
  239. {this.state.editName ? (
  240. ''
  241. ) : (
  242. <Button
  243. className="Authentication"
  244. onClick={(e) => {
  245. this.btnFun(1);
  246. }}
  247. icon="edit"
  248. />
  249. )}
  250. </FormItem>
  251. </Col>
  252. </Row>
  253. <Row>
  254. <Col span={8}>
  255. <FormItem className="half-mid" {...formItemLayout} label="注册手机号">
  256. {this.state.editPhoto ? (
  257. <Input
  258. value={this.state.photo}
  259. onBlur={(e) => {
  260. this.saveFun(2);
  261. }}
  262. placeholder="请填写注册手机号码"
  263. onChange={(e) => {
  264. this.setState({ photo: e.target.value });
  265. }}
  266. />
  267. ) : (
  268. <span>{this.state.photo}</span>
  269. )}
  270. {this.state.editPhoto ? (
  271. ''
  272. ) : (
  273. <Button
  274. className="Authentication"
  275. onClick={(e) => {
  276. this.btnFun(2);
  277. }}
  278. icon="edit"
  279. />
  280. )}
  281. </FormItem>
  282. </Col>
  283. <Col span={8}>
  284. <FormItem className="half-mid" {...formItemLayout} label="注册邮箱">
  285. {this.state.editEmail ? (
  286. <Input
  287. value={this.state.email}
  288. onBlur={(e) => {
  289. this.saveFun(3);
  290. }}
  291. placeholder="请填写注册邮箱"
  292. onChange={(e) => {
  293. this.setState({ email: e.target.value });
  294. }}
  295. />
  296. ) : (
  297. <span>{this.state.email}</span>
  298. )}
  299. {this.state.editEmail ? (
  300. ''
  301. ) : (
  302. <Button
  303. className="Authentication"
  304. onClick={(e) => {
  305. this.btnFun(3);
  306. }}
  307. icon="edit"
  308. />
  309. )}
  310. </FormItem>
  311. </Col>
  312. <Col span={8}>
  313. <FormItem className="half-mid" {...formItemLayout} label="账号昵称">
  314. {this.state.editNickname ? (
  315. <Input
  316. value={this.state.nickname}
  317. onBlur={(e) => {
  318. this.saveFun(4);
  319. }}
  320. placeholder="请填写账号昵称"
  321. onChange={(e) => {
  322. this.setState({ nickname: e.target.value });
  323. }}
  324. />
  325. ) : (
  326. <span>{this.state.nickname}</span>
  327. )}
  328. {this.state.editNickname ? (
  329. ''
  330. ) : (
  331. <Button
  332. className="Authentication"
  333. onClick={(e) => {
  334. this.btnFun(4);
  335. }}
  336. icon="edit"
  337. />
  338. )}
  339. </FormItem>
  340. </Col>
  341. </Row>
  342. <Row>
  343. <Col span={8}>
  344. <FormItem className="half-mid" {...formItemLayout} label="账号类型">
  345. <span>{this.state.contacts}</span>
  346. </FormItem>
  347. </Col>
  348. <Col span={8}>
  349. <FormItem className="half-mid" {...formItemLayout} label="账号状态">
  350. <span>{this.state.contacts}</span>
  351. </FormItem>
  352. </Col>
  353. <Col span={8}>
  354. <FormItem className="half-mid" {...formItemLayout} label="注册时间">
  355. <span>{this.state.contacts}</span>
  356. </FormItem>
  357. </Col>
  358. </Row>
  359. <Row>
  360. <Col span={8}>
  361. <FormItem className="half-mid" {...formItemLayout} label="企业实名认证">
  362. <span>{accountData.account}</span>
  363. <Button
  364. size="default"
  365. onClick={this.companyFun.bind(this)}
  366. type="primary"
  367. className="Authentication"
  368. >
  369. 立即企业认证
  370. </Button>
  371. </FormItem>
  372. </Col>
  373. <Col span={16}>
  374. <span className="danger">实行企业实名认证后,您将享受到技淘网提供的全方位的科技咨询服务</span>
  375. </Col>
  376. </Row>
  377. <Row>
  378. <Col span={8}>
  379. <FormItem className="half-mid" {...formItemLayout} label="个人实名认证">
  380. <span>{accountData.account}</span>
  381. <Button
  382. size="default"
  383. onClick={this.companyFun.bind(this)}
  384. type="primary"
  385. className="Authentication"
  386. >
  387. 立即个人认证
  388. </Button>
  389. </FormItem>
  390. </Col>
  391. <Col span={16}>
  392. <span className="danger">实行个人实名认证后,您将享受技淘网提供的全方位的知识产权运营服务</span>
  393. </Col>
  394. </Row>
  395. <Row>
  396. <Col span={8}>
  397. <FormItem className="half-mid" {...formItemLayout} label="科技专家认证">
  398. <span>{accountData.account}</span>
  399. <Button
  400. size="default"
  401. onClick={this.companyFun.bind(this)}
  402. type="primary"
  403. className="Authentication"
  404. >
  405. 立即申请专家
  406. </Button>
  407. </FormItem>
  408. </Col>
  409. <Col span={16}>
  410. <span className="danger">实行科技专家认证后,您将成为技淘网的科技服务专家,为其他用户提供科技咨询服务</span>
  411. </Col>
  412. </Row>
  413. </Spin>
  414. </div>
  415. <Modal
  416. title="修改密码"
  417. width="600px"
  418. visible={this.state.visible}
  419. onOk={this.handleOk.bind(this)}
  420. onCancel={this.handleCancel.bind(this)}
  421. >
  422. <div>
  423. <Form layout="horizontal" id="demand-form" onSubmit={this.passSubmit}>
  424. <Spin spinning={this.state.loading}>
  425. <div className="clearfix">
  426. <FormItem
  427. labelCol={{ span: 8 }}
  428. wrapperCol={{ span: 8 }}
  429. className="half-mid"
  430. label="注册账号"
  431. >
  432. <span>{this.state.followTime}</span>
  433. </FormItem>
  434. <FormItem
  435. labelCol={{ span: 8 }}
  436. wrapperCol={{ span: 8 }}
  437. className="half-mid"
  438. label="注册名称"
  439. >
  440. <Input
  441. value={this.state.name}
  442. type="text"
  443. onChange={(e) => {
  444. this.setState({ name: e.target.value });
  445. }}
  446. />
  447. </FormItem>
  448. <FormItem
  449. labelCol={{ span: 8 }}
  450. wrapperCol={{ span: 8 }}
  451. className="half-mid"
  452. label="新密码"
  453. >
  454. <Input
  455. value={this.state.password}
  456. type="password"
  457. placeholder="请输入新密码"
  458. onChange={(e) => {
  459. this.setState({ password: e.target.value });
  460. }}
  461. />
  462. </FormItem>
  463. <FormItem
  464. labelCol={{ span: 8 }}
  465. wrapperCol={{ span: 8 }}
  466. className="half-mid"
  467. label="新密码确认"
  468. >
  469. <Input
  470. value={this.state.repeatPass}
  471. type="password"
  472. placeholder="请再次输入新密码"
  473. onChange={(e) => {
  474. this.setState({ repeatPass: e.target.value });
  475. }}
  476. />
  477. </FormItem>
  478. </div>
  479. </Spin>
  480. </Form>
  481. </div>
  482. </Modal>
  483. </div>
  484. );
  485. }
  486. }
  487. export default Account;