account.jsx 13 KB

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