account.jsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482
  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. <span>{this.state.mobile}</span>
  266. </FormItem>
  267. </Col>
  268. <Col span={8}>
  269. <FormItem className="half-mid" {...formItemLayout} label="注册邮箱">
  270. {this.state.editEmail ? (
  271. <Input
  272. value={this.state.email}
  273. onBlur={(e) => {
  274. this.saveFun(3);
  275. }}
  276. ref="email"
  277. placeholder="请填写注册邮箱"
  278. onChange={(e) => {
  279. this.setState({ email: e.target.value });
  280. }}
  281. />
  282. ) : (
  283. <span>{this.state.email}</span>
  284. )}
  285. {this.state.editEmail ? (
  286. ''
  287. ) : (
  288. <Button
  289. className="Authentication"
  290. onClick={(e) => {
  291. this.btnFun(3);
  292. }}
  293. icon="edit"
  294. />
  295. )}
  296. </FormItem>
  297. </Col>
  298. <Col span={8}>
  299. <FormItem className="half-mid" {...formItemLayout} label="账号昵称">
  300. {this.state.editNickname ? (
  301. <Input
  302. value={this.state.nickname}
  303. onBlur={(e) => {
  304. this.saveFun(4);
  305. }}
  306. ref="nickname"
  307. placeholder="请填写账号昵称"
  308. onChange={(e) => {
  309. this.setState({ nickname: e.target.value });
  310. }}
  311. />
  312. ) : (
  313. <span>{this.state.nickname}</span>
  314. )}
  315. {this.state.editNickname ? (
  316. ''
  317. ) : (
  318. <Button
  319. className="Authentication"
  320. onClick={(e) => {
  321. this.btnFun(4);
  322. }}
  323. icon="edit"
  324. />
  325. )}
  326. </FormItem>
  327. </Col>
  328. </Row>
  329. <Row>
  330. <Col span={8}>
  331. <FormItem className="half-mid" {...formItemLayout} label="账号类型">
  332. {this.state.type=='1'&&<span>企业</span>}
  333. {this.state.type=='0'&&<span>个人</span>}
  334. </FormItem>
  335. </Col>
  336. <Col span={8}>
  337. <FormItem className="half-mid" {...formItemLayout} label="账号状态">
  338. <span>{getStatuslist(this.state.status)||'正常'}</span>
  339. </FormItem>
  340. </Col>
  341. <Col span={8}>
  342. <FormItem className="half-mid" {...formItemLayout} label="注册时间">
  343. <span>{this.state.createTime}</span>
  344. </FormItem>
  345. </Col>
  346. </Row>
  347. {/* <Row>
  348. <Col span={8}>
  349. <FormItem className="half-mid" {...formItemLayout} label="企业实名认证">
  350. <span>{accountData.account}</span>
  351. <Button
  352. size="default"
  353. onClick={this.companyFun.bind(this)}
  354. type="primary"
  355. className="Authentication"
  356. >
  357. 立即企业认证
  358. </Button>
  359. </FormItem>
  360. </Col>
  361. <Col span={16}>
  362. <span className="danger">实行企业实名认证后,您将享受到技淘网提供的全方位的科技咨询服务</span>
  363. </Col>
  364. </Row>
  365. <Row>
  366. <Col span={8}>
  367. <FormItem className="half-mid" {...formItemLayout} label="个人实名认证">
  368. <span>{accountData.account}</span>
  369. <Button
  370. size="default"
  371. onClick={this.companyFun.bind(this)}
  372. type="primary"
  373. className="Authentication"
  374. >
  375. 立即个人认证
  376. </Button>
  377. </FormItem>
  378. </Col>
  379. <Col span={16}>
  380. <span className="danger">实行个人实名认证后,您将享受技淘网提供的全方位的知识产权运营服务</span>
  381. </Col>
  382. </Row>
  383. <Row>
  384. <Col span={8}>
  385. <FormItem className="half-mid" {...formItemLayout} label="科技专家认证">
  386. <span>{accountData.account}</span>
  387. <Button
  388. size="default"
  389. onClick={this.companyFun.bind(this)}
  390. type="primary"
  391. className="Authentication"
  392. >
  393. 立即申请专家
  394. </Button>
  395. </FormItem>
  396. </Col>
  397. <Col span={16}>
  398. <span className="danger">实行科技专家认证后,您将成为技淘网的科技服务专家,为其他用户提供科技咨询服务</span>
  399. </Col>
  400. </Row>
  401. */}
  402. </Spin>
  403. </div>
  404. <Modal
  405. title="修改密码"
  406. width="600px"
  407. visible={this.state.visible}
  408. onOk={this.handleOk.bind(this)}
  409. onCancel={this.handleCancel.bind(this)}
  410. >
  411. <div>
  412. <Form layout="horizontal" id="demand-form" onSubmit={this.passSubmit}>
  413. <Spin spinning={this.state.loading}>
  414. <div className="clearfix">
  415. <FormItem
  416. labelCol={{ span: 8 }}
  417. wrapperCol={{ span: 8 }}
  418. className="half-mid"
  419. label="注册账号"
  420. >
  421. <span>{this.state.followTime}</span>
  422. </FormItem>
  423. <FormItem
  424. labelCol={{ span: 8 }}
  425. wrapperCol={{ span: 8 }}
  426. className="half-mid"
  427. label="注册名称"
  428. >
  429. <Input
  430. value={this.state.name}
  431. type="text"
  432. onChange={(e) => {
  433. this.setState({ name: e.target.value });
  434. }}
  435. />
  436. </FormItem>
  437. <FormItem
  438. labelCol={{ span: 8 }}
  439. wrapperCol={{ span: 8 }}
  440. className="half-mid"
  441. label="新密码"
  442. >
  443. <Input
  444. value={this.state.password}
  445. type="password"
  446. placeholder="请输入新密码"
  447. onChange={(e) => {
  448. this.setState({ password: e.target.value });
  449. }}
  450. />
  451. </FormItem>
  452. <FormItem
  453. labelCol={{ span: 8 }}
  454. wrapperCol={{ span: 8 }}
  455. className="half-mid"
  456. label="新密码确认"
  457. >
  458. <Input
  459. value={this.state.repeatPass}
  460. type="password"
  461. placeholder="请再次输入新密码"
  462. onChange={(e) => {
  463. this.setState({ repeatPass: e.target.value });
  464. }}
  465. />
  466. </FormItem>
  467. </div>
  468. </Spin>
  469. </Form>
  470. </div>
  471. </Modal>
  472. </div>
  473. );
  474. }
  475. }
  476. export default Account;