import React from 'react'; import { Link } from 'react-router-dom'; import { Dropdown } from 'antd'; import Assets from '@src/components/Assets'; import Button from '../Button'; import './index.less'; import { User } from '../../stores/user'; import { formatDate } from '../../../../src/services/Tools'; function Header(props) { const { tabs = [], active, user } = props; const { info = {} } = user; let inviteStatus = false; if (info.login) { const inviteDate = new Date(info.inviteLatestTime); inviteStatus = (inviteDate.getTime() - new Date().getTime) > 864000000; } return ( <div id="header"> <div className="body"> <div className="left"> <Assets name="logo" className="c-p" onClick={() => linkTo('/')} /> </div> <div className="center"> <div className="tabs"> {tabs.map(item => { return ( <Link to={item.path}> <div className={`tab ${active === item.key ? 'active' : ''}`}>{item.name}</div> </Link> ); })} </div> </div> <div className="right"> {user.login ? ( <Dropdown trigger="hover" overlayClassName="header-user-overlay" overlay={ <div className="list"> <div className={`item ${info.previewNumber > 0 ? 'more-message' : ''}`} onClick={() => linkTo('/my/course')}> <div className="t-1"> <Assets name={info.previewNumber > 0 ? 'course_more' : 'course'} svg /> 课程 </div> {info.previewNumber > 0 && <div className="t-s-12 nowrap" onClick={(e) => { e.stopPropagation(); linkTo('exercise?tab=course'); }}> <span className="t-4">{info.previewNumber}</span> 份作业待完成 </div>} </div> <div className={`item ${info.textbook ? 'more-message' : ''}`} onClick={() => linkTo('/textbook')}> <div className="t-1"> <Assets name={info.textbook ? 'jijing_more' : 'jijing'} svg /> 机经 </div> {info.textbook && <div className="t-s-12 nowrap">最近更新:{formatDate(info.textbook, 'YYYY-MM-DD')}</div>} </div> <div className={`item ${inviteStatus ? 'more-message' : ''}`}> <div className="t-1"> <Assets name={inviteStatus ? 'yaoqing_more' : 'yaoqing'} svg /> 邀请好友 </div> {inviteStatus && <div className="t-s-12 nowrap">第{info.inviteNumber}位好友加入</div>} </div> <div className={`item ${info.messageNumber > 0 ? 'more-message' : ''}`} onClick={() => linkTo('/my/message')}> <div className="t-1"> <Assets name={info.messageNumber > 0 ? 'message_more' : 'message'} svg /> 消息 </div> {info.messageNumber > 0 && <div className="t-s-12 nowrap" onClick={(e) => { e.stopPropagation(); if (info.messages[0].link) { linkTo(info.messages[0].link); } else { linkTo('/my/message'); } }}>{`[${info.messages[0].title}]`}{info.messages[0].content.substr(0, 6)}...</div>} </div> <div className="item" onClick={() => User.logout()}> <div className="t-1"> <Assets name="exit" svg /> 退出 </div> </div> </div> } > <Link to="/my/main" className="info"> <Assets className="avatar" name="sun_blue" src={user.info.avatar} /> <span className="t-2 f-s-12">{(user.info.nickname || '').substr(0, 5) || `qx${user.info.mobile}`}</span> </Link> </Dropdown> ) : (<Button onClick={() => { User.needLogin(); }}>登录</Button>)} </div> </div> </div> ); } Header.propTypes = {}; export default Header;