index.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. import React from 'react';
  2. import { Link } from 'react-router-dom';
  3. import { Dropdown } from 'antd';
  4. import Assets from '@src/components/Assets';
  5. import Button from '../Button';
  6. import './index.less';
  7. import { User } from '../../stores/user';
  8. import { formatDate } from '../../../../src/services/Tools';
  9. function Header(props) {
  10. const { tabs = [], active, user } = props;
  11. const { info = {} } = user;
  12. let inviteStatus = false;
  13. if (info.login) {
  14. const inviteDate = new Date(info.inviteLatestTime);
  15. inviteStatus = (inviteDate.getTime() - new Date().getTime) > 864000000;
  16. }
  17. return (
  18. <div id="header">
  19. <div className="body">
  20. <div className="left">
  21. <Assets name="logo" className="c-p" onClick={() => linkTo('/')} />
  22. </div>
  23. <div className="center">
  24. <div className="tabs">
  25. {tabs.map(item => {
  26. return (
  27. <Link to={item.path}>
  28. <div className={`tab ${active === item.key ? 'active' : ''}`}>{item.name}</div>
  29. </Link>
  30. );
  31. })}
  32. </div>
  33. </div>
  34. <div className="right">
  35. {user.login ? (
  36. <Dropdown
  37. trigger="hover"
  38. overlayClassName="header-user-overlay"
  39. overlay={
  40. <div className="list">
  41. <div className={`item ${info.previewNumber > 0 ? 'more-message' : ''}`} onClick={() => linkTo('/my/course')}>
  42. <div className="t-1">
  43. <Assets name={info.previewNumber > 0 ? 'course_more' : 'course'} svg />
  44. 课程
  45. </div>
  46. {info.previewNumber > 0 && <div className="t-s-12 nowrap" onClick={(e) => {
  47. e.stopPropagation();
  48. linkTo('exercise?tab=course');
  49. }}>
  50. <span className="t-4">{info.previewNumber}</span> 份作业待完成
  51. </div>}
  52. </div>
  53. <div className={`item ${info.textbook ? 'more-message' : ''}`} onClick={() => linkTo('/textbook')}>
  54. <div className="t-1">
  55. <Assets name={info.textbook ? 'jijing_more' : 'jijing'} svg />
  56. 机经
  57. </div>
  58. {info.textbook && <div className="t-s-12 nowrap">最近更新:{formatDate(info.textbook, 'YYYY-MM-DD')}</div>}
  59. </div>
  60. <div className={`item ${inviteStatus ? 'more-message' : ''}`}>
  61. <div className="t-1">
  62. <Assets name={inviteStatus ? 'yaoqing_more' : 'yaoqing'} svg />
  63. 邀请好友
  64. </div>
  65. {inviteStatus && <div className="t-s-12 nowrap">第{info.inviteNumber}位好友加入</div>}
  66. </div>
  67. <div className={`item ${info.messageNumber > 0 ? 'more-message' : ''}`} onClick={() => linkTo('/my/message')}>
  68. <div className="t-1">
  69. <Assets name={info.messageNumber > 0 ? 'message_more' : 'message'} svg />
  70. 消息
  71. </div>
  72. {info.messageNumber > 0 && <div className="t-s-12 nowrap" onClick={(e) => {
  73. e.stopPropagation();
  74. if (info.messages[0].link) {
  75. linkTo(info.messages[0].link);
  76. } else {
  77. linkTo('/my/message');
  78. }
  79. }}>{`[${info.messages[0].title}]`}{info.messages[0].content.substr(0, 6)}...</div>}
  80. </div>
  81. <div className="item" onClick={() => User.logout()}>
  82. <div className="t-1">
  83. <Assets name="exit" svg />
  84. 退出
  85. </div>
  86. </div>
  87. </div>
  88. }
  89. >
  90. <Link to="/my/main" className="info">
  91. <Assets className="avatar" name="sun_blue" src={user.info.avatar} />
  92. <span className="t-2 f-s-12">{(user.info.nickname || '') || `qx${user.info.mobile}`}</span>
  93. </Link>
  94. </Dropdown>
  95. ) : (<Button onClick={() => {
  96. User.needLogin();
  97. }}>登录</Button>)}
  98. </div>
  99. </div>
  100. </div>
  101. );
  102. }
  103. Header.propTypes = {};
  104. export default Header;