account.jsx 13 KB

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