account.jsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488
  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. render() {
  191. const formItemLayout = {
  192. labelCol: { span: 8 },
  193. wrapperCol: { span: 10 }
  194. };
  195. const formItemLayoutBtn = {
  196. labelCol: { span: 8 },
  197. wrapperCol: { span: 6 }
  198. };
  199. const accountData = this.state.account || [];
  200. return (
  201. <div className="account-wrap">
  202. <div className="clearfix">
  203. <Spin spinning={this.state.loading}>
  204. <Row>
  205. <Col span={8}>
  206. <FormItem className="half-mid" {...formItemLayout} label="注册账号">
  207. <span>{accountData.account}</span>
  208. <Button
  209. size="default"
  210. onClick={this.passFun.bind(this)}
  211. type="primary"
  212. className="Authentication"
  213. >
  214. 修改密码
  215. </Button>
  216. </FormItem>
  217. </Col>
  218. </Row>
  219. <Row>
  220. <Col span={8}>
  221. <FormItem className="half-mid" {...formItemLayout} label="注册名称">
  222. {this.state.editName ? (
  223. <Input
  224. value={this.state.name}
  225. onBlur={(e) => {
  226. this.saveFun(1);
  227. }}
  228. placeholder="请填写注册名称"
  229. onChange={(e) => {
  230. this.setState({ name: e.target.value });
  231. }}
  232. />
  233. ) : (
  234. <span>{this.state.name}</span>
  235. )}
  236. {this.state.editName ? (
  237. ''
  238. ) : (
  239. <Button
  240. className="Authentication"
  241. onClick={(e) => {
  242. this.btnFun(1);
  243. }}
  244. icon="edit"
  245. />
  246. )}
  247. </FormItem>
  248. </Col>
  249. </Row>
  250. <Row>
  251. <Col span={8}>
  252. <FormItem className="half-mid" {...formItemLayout} label="注册手机号">
  253. {this.state.editPhoto ? (
  254. <Input
  255. value={this.state.photo}
  256. onBlur={(e) => {
  257. this.saveFun(2);
  258. }}
  259. placeholder="请填写注册手机号码"
  260. onChange={(e) => {
  261. this.setState({ photo: e.target.value });
  262. }}
  263. />
  264. ) : (
  265. <span>{this.state.photo}</span>
  266. )}
  267. {this.state.editPhoto ? (
  268. ''
  269. ) : (
  270. <Button
  271. className="Authentication"
  272. onClick={(e) => {
  273. this.btnFun(2);
  274. }}
  275. icon="edit"
  276. />
  277. )}
  278. </FormItem>
  279. </Col>
  280. <Col span={8}>
  281. <FormItem className="half-mid" {...formItemLayout} label="注册邮箱">
  282. {this.state.editEmail ? (
  283. <Input
  284. value={this.state.email}
  285. onBlur={(e) => {
  286. this.saveFun(3);
  287. }}
  288. placeholder="请填写注册邮箱"
  289. onChange={(e) => {
  290. this.setState({ email: e.target.value });
  291. }}
  292. />
  293. ) : (
  294. <span>{this.state.email}</span>
  295. )}
  296. {this.state.editEmail ? (
  297. ''
  298. ) : (
  299. <Button
  300. className="Authentication"
  301. onClick={(e) => {
  302. this.btnFun(3);
  303. }}
  304. icon="edit"
  305. />
  306. )}
  307. </FormItem>
  308. </Col>
  309. <Col span={8}>
  310. <FormItem className="half-mid" {...formItemLayout} label="账号昵称">
  311. {this.state.editNickname ? (
  312. <Input
  313. value={this.state.nickname}
  314. onBlur={(e) => {
  315. this.saveFun(4);
  316. }}
  317. placeholder="请填写账号昵称"
  318. onChange={(e) => {
  319. this.setState({ nickname: e.target.value });
  320. }}
  321. />
  322. ) : (
  323. <span>{this.state.nickname}</span>
  324. )}
  325. {this.state.editNickname ? (
  326. ''
  327. ) : (
  328. <Button
  329. className="Authentication"
  330. onClick={(e) => {
  331. this.btnFun(4);
  332. }}
  333. icon="edit"
  334. />
  335. )}
  336. </FormItem>
  337. </Col>
  338. </Row>
  339. <Row>
  340. <Col span={8}>
  341. <FormItem className="half-mid" {...formItemLayout} label="账号类型">
  342. <span>{this.state.contacts}</span>
  343. </FormItem>
  344. </Col>
  345. <Col span={8}>
  346. <FormItem className="half-mid" {...formItemLayout} label="账号状态">
  347. <span>{this.state.contacts}</span>
  348. </FormItem>
  349. </Col>
  350. <Col span={8}>
  351. <FormItem className="half-mid" {...formItemLayout} label="注册时间">
  352. <span>{this.state.contacts}</span>
  353. </FormItem>
  354. </Col>
  355. </Row>
  356. <Row>
  357. <Col span={8}>
  358. <FormItem className="half-mid" {...formItemLayout} label="企业实名认证">
  359. <span>{accountData.account}</span>
  360. <Button
  361. size="default"
  362. onClick={this.companyFun.bind(this)}
  363. type="primary"
  364. className="Authentication"
  365. >
  366. 立即企业认证
  367. </Button>
  368. </FormItem>
  369. </Col>
  370. <Col span={16}>
  371. <span className="danger">实行企业实名认证后,您将享受到技淘网提供的全方位的科技咨询服务</span>
  372. </Col>
  373. </Row>
  374. <Row>
  375. <Col span={8}>
  376. <FormItem className="half-mid" {...formItemLayout} label="个人实名认证">
  377. <span>{accountData.account}</span>
  378. <Button
  379. size="default"
  380. onClick={this.companyFun.bind(this)}
  381. type="primary"
  382. className="Authentication"
  383. >
  384. 立即个人认证
  385. </Button>
  386. </FormItem>
  387. </Col>
  388. <Col span={16}>
  389. <span className="danger">实行个人实名认证后,您将享受技淘网提供的全方位的知识产权运营服务</span>
  390. </Col>
  391. </Row>
  392. <Row>
  393. <Col span={8}>
  394. <FormItem className="half-mid" {...formItemLayout} label="科技专家认证">
  395. <span>{accountData.account}</span>
  396. <Button
  397. size="default"
  398. onClick={this.companyFun.bind(this)}
  399. type="primary"
  400. className="Authentication"
  401. >
  402. 立即申请专家
  403. </Button>
  404. </FormItem>
  405. </Col>
  406. <Col span={16}>
  407. <span className="danger">实行科技专家认证后,您将成为技淘网的科技服务专家,为其他用户提供科技咨询服务</span>
  408. </Col>
  409. </Row>
  410. </Spin>
  411. </div>
  412. <Modal
  413. title="修改密码"
  414. width="600px"
  415. visible={this.state.visible}
  416. onOk={this.handleOk.bind(this)}
  417. onCancel={this.handleCancel.bind(this)}
  418. >
  419. <div>
  420. <Form layout="horizontal" id="demand-form" onSubmit={this.passSubmit}>
  421. <Spin spinning={this.state.loading}>
  422. <div className="clearfix">
  423. <FormItem
  424. labelCol={{ span: 8 }}
  425. wrapperCol={{ span: 8 }}
  426. className="half-mid"
  427. label="注册账号"
  428. >
  429. <span>{this.state.followTime}</span>
  430. </FormItem>
  431. <FormItem
  432. labelCol={{ span: 8 }}
  433. wrapperCol={{ span: 8 }}
  434. className="half-mid"
  435. label="注册名称"
  436. >
  437. <Input
  438. value={this.state.name}
  439. type="text"
  440. onChange={(e) => {
  441. this.setState({ name: e.target.value });
  442. }}
  443. />
  444. </FormItem>
  445. <FormItem
  446. labelCol={{ span: 8 }}
  447. wrapperCol={{ span: 8 }}
  448. className="half-mid"
  449. label="新密码"
  450. >
  451. <Input
  452. value={this.state.password}
  453. type="password"
  454. placeholder="请输入新密码"
  455. onChange={(e) => {
  456. this.setState({ password: e.target.value });
  457. }}
  458. />
  459. </FormItem>
  460. <FormItem
  461. labelCol={{ span: 8 }}
  462. wrapperCol={{ span: 8 }}
  463. className="half-mid"
  464. label="新密码确认"
  465. >
  466. <Input
  467. value={this.state.repeatPass}
  468. type="password"
  469. placeholder="请再次输入新密码"
  470. onChange={(e) => {
  471. this.setState({ repeatPass: e.target.value });
  472. }}
  473. />
  474. </FormItem>
  475. </div>
  476. </Spin>
  477. </Form>
  478. </div>
  479. </Modal>
  480. </div>
  481. );
  482. }
  483. }
  484. export default Account;