account.jsx 13 KB

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