cherry-pick头部

This commit is contained in:
何童崇 2022-04-01 15:57:37 +08:00
parent c20332b7a3
commit 36d20c5250
2 changed files with 84 additions and 49 deletions

View File

@ -63,45 +63,64 @@ const Management = Loadable({
})
const Qz2022 = (props) => {
const {history, current_user} = props;
const {location} = history;
const {pathname} = location;
const { history, current_user } = props;
const { location } = history;
const { pathname } = location;
const [active, setActive] = useState();
const [reload, setReload] = useState();
const [reloadDetail, setReloadDetail] = useState();
const [qzDetail, setQzDetail] = useState();
const [enrollStatus, setEnrollStatus] = useState();
const [fixedTop, setFixedTop] = useState('');
const menu = (
<Menu>
<Menu.Item>
<Link to={{ pathname: current_user && current_user.login ? `/competition/qz2022/management/applys` :'' }} onClick={()=>{current_user && !current_user.login && props.showLoginDialog()}}>报名列表</Link>
<Link to={{ pathname: current_user && current_user.login ? `/competition/qz2022/management/applys` : '' }} onClick={() => { current_user && !current_user.login && props.showLoginDialog() }}>报名列表</Link>
</Menu.Item>
<Menu.Item>
<Link to={{ pathname: current_user && current_user.login ? `/competition/qz2022/management/production` :'' }} onClick={()=>{current_user && !current_user.login && props.showLoginDialog()}}>作品列表</Link>
<Link to={{ pathname: current_user && current_user.login ? `/competition/qz2022/management/production` : '' }} onClick={() => { current_user && !current_user.login && props.showLoginDialog() }}>作品列表</Link>
</Menu.Item>
</Menu>
);
useEffect(()=>{
setActive(pathname.substring(pathname.lastIndexOf('/')+1, pathname.lenght));
useEffect(() => {
setActive(pathname.substring(pathname.lastIndexOf('/') + 1, pathname.lenght));
// document.body.scrollTop = 0;
// window.scrollTo(0,0);
}, [pathname])
}, [pathname]);
useEffect(()=>{
useEffect(() => {
window.addEventListener("scroll", scrollListener, false);
return () => {
window.removeEventListener("scroll", scrollListener, false);
}
}, []);
function scrollListener() {
let qz2022Top = document.querySelector('.qz2022').offsetTop;
let top = document.documentElement.scrollTop;
if (!fixedTop && top > qz2022Top - 20) {
setFixedTop('fixed-top');
} else if (top < qz2022Top - 19) {
setFixedTop('');
}
}
useEffect(() => {
// 获取启智2022详情
getQz2022().then(response=>{
if(response && response.status===200){
getQz2022().then(response => {
if (response && response.status === 200) {
setQzDetail(response.data.data);
}
})
}, [reloadDetail])
useEffect(()=>{
useEffect(() => {
// 获取用户参与竞赛状态
userCompetitionStatus('qz2022').then(response=>{
if(response && response.status === 200){
userCompetitionStatus('qz2022').then(response => {
if (response && response.status === 200) {
setEnrollStatus(response.data.data);
}
})
@ -110,19 +129,19 @@ const Qz2022 = (props) => {
let applyStatus; // 是否处于报名阶段
let referStatus; // 是否处于提交作品阶段
let referEnd; // 是否处于提交作品阶段(提交已经结束)
if(qzDetail){
if (qzDetail) {
applyStatus = Date.parse(new Date()) < Date.parse(new Date(qzDetail.enroll_date));
referStatus = !applyStatus && Date.parse(new Date()) < Date.parse(new Date(qzDetail.upload_date));
referEnd = Date.parse(new Date()) > Date.parse(new Date(qzDetail.upload_date));
}
function goToRefer(){
if(current_user && !current_user.login){
function goToRefer() {
if (current_user && !current_user.login) {
props.showLoginDialog();
}else if(enrollStatus && !enrollStatus.enroll_status){
props.showNotification("您还未报名竞赛!");
}else{
!referStatus ? props.showNotification(!referEnd ? `竞赛尚未开始提交作品,提交作品开始时间为:${qzDetail && qzDetail.enroll_date.substring(0,10)}` :"比赛已结束"):"";
} else {
!referStatus ? props.showNotification(!referEnd ? `竞赛尚未开始提交作品,提交作品开始时间为:${qzDetail && qzDetail.enroll_date.substring(0, 10)}` : "比赛已结束") : "";
}
}
@ -151,43 +170,44 @@ const Qz2022 = (props) => {
{/* <li className={active === "apply" ? "active" : ""}>
<Link to={{ pathname: '/competition/qz2022/apply'}}>参赛报名</Link>
</li> */}
{/* <li className={active === "refer" ? "active" : ""}>
{/* <li className={active === "refer" ? "active" : ""}>
<Link to={{ pathname: `/competition/qz2022/refer`}}>提案提交</Link>
</li> */}
<li className={active === "statistics" ? "active" : ""}>
<Link to={{ pathname: `/competition/qz2022/statistics` }}>数据统计</Link>
</li>
<li className={active === "chat" ? "active" : ""}>
<Link to={{ pathname: `/competition/qz2022/chat` }}>交流互动</Link>
</li>
<li className={active === "contact" ? "active" : ""}>
<Link to={{ pathname: `/competition/qz2022/contact` }}>联系我们</Link>
</li>
{qzDetail && qzDetail.is_manager && <li className={(active === "applys" || active === "production") ? "active" : ""}>
<Popover content={menu} placement="bottomRight" overlayClassName="qz_manage">
<a>后台管理</a>
</Popover>
</li>}
</ul>}
{paths.indexOf(active) !== -1 && <div className="menu_border mt20 qz_main"></div>}
<li className={active === "statistics" ? "active" : ""}>
<Link to={{ pathname: `/competition/qz2022/statistics` }}>数据统计</Link>
</li>
<li className={active === "chat" ? "active" : ""}>
<Link to={{ pathname: `/competition/qz2022/chat` }}>交流互动</Link>
</li>
<li className={active === "contact" ? "active" : ""}>
<Link to={{ pathname: `/competition/qz2022/contact` }}>联系我们</Link>
</li>
{qzDetail && qzDetail.is_manager && <li className={(active === "applys" || active === "production") ? "active" : ""}>
<Popover content={menu} placement="bottomRight" overlayClassName="qz_manage">
<a>后台管理</a>
</Popover>
</li>}
</ul>}
{paths.indexOf(active) !== -1 && <div className="menu_border mt20 qz_main"></div>}
{/* </div> */}
<Spin spinning={false} wrapperClassName="spinstyle qzCont" tip="正在同步镜像" size="large">
<Switch {...props}>
{/* 通知公告详情页 */}
<Route path="/competition/qz2022/notice/detail/:noticeId"
render={
({match,history}) => (<NoticeDetail match={match} history={history}/>)
({ match, history }) => (<NoticeDetail match={match} history={history} />)
}
></Route>
{/* 通知公告编辑页 */}
<Route path="/competition/qz2022/notice/:type/:noticeId"
render={
({match}) => (<NoticeEdit {...props} match={match}/>)
({ match }) => (<NoticeEdit {...props} match={match} />)
}
></Route>
{/* 通知公告新增页 */}
<Route path="/competition/qz2022/notice/:type"
render={
({match}) => (<NoticeEdit {...props} match={match}/>)
({ match }) => (<NoticeEdit {...props} match={match} />)
}
></Route>
{/* 大赛介绍、大赛指南、关于我们 编辑页 */}
@ -199,13 +219,13 @@ const Qz2022 = (props) => {
{/* 通知公告 */}
<Route path="/competition/qz2022/notice"
render={
() => (<Notice {...props} qzDetail={qzDetail}/>)
() => (<Notice {...props} qzDetail={qzDetail} />)
}
></Route>
{/* 参赛报名 */}
<Route path="/competition/qz2022/apply"
render={
() => (<Apply {...props} qzDetail={qzDetail} enrollStatus={enrollStatus} setReload={setReload}/>)
() => (<Apply {...props} qzDetail={qzDetail} enrollStatus={enrollStatus} setReload={setReload} />)
}
></Route>
{/* 提案提交 */}
@ -223,25 +243,25 @@ const Qz2022 = (props) => {
{/* 联系我们 */}
<Route path="/competition/qz2022/contact"
render={
() => (<Contact {...props} aboutUs={qzDetail&&qzDetail.about_us}/>)
() => (<Contact {...props} aboutUs={qzDetail && qzDetail.about_us} />)
}
></Route>
{/* 数据统计 */}
<Route path="/competition/qz2022/statistics"
render={
() => (<Statistics {...props} qzDetail={qzDetail}/>)
() => (<Statistics {...props} qzDetail={qzDetail} />)
}
></Route>
{/* 后台管理-报名列表 */}
<Route path="/competition/qz2022/management/applys"
render={
() => (<Management {...props} qzDetail={qzDetail}/>)
() => (<Management {...props} qzDetail={qzDetail} />)
}
></Route>
{/* 后台管理-作品列表 */}
<Route path="/competition/qz2022/management/production"
render={
() => (<Management {...props} qzDetail={qzDetail}/>)
() => (<Management {...props} qzDetail={qzDetail} />)
}
></Route>
{/* 大赛介绍 */}
@ -259,7 +279,7 @@ const Qz2022 = (props) => {
{/* 大赛介绍 */}
<Route path="/competition/qz2022"
render={
() => (<Introduce {...props} qzDetail={qzDetail}/>)
() => (<Introduce {...props} qzDetail={qzDetail} />)
}
></Route>
</Switch>

View File

@ -4,15 +4,29 @@
}
.qz2022 {
font-size: 1rem;
.qz2022-top {
width: 100%;
&.fixed-top {
position: fixed;
z-index: 100;
background: #fff;
top:0;
& + div{
padding-top:3.75rem;
}
}
}
.qz2022Menu {
height: 2.25rem;
// line-height: 2.25rem;
position: relative;
display: flex;
justify-content: space-between;
a {
color: #2e3341;
font-size: 1.1rem;
transition:all .2s;
transition: all 0.2s;
}
li.active {
background-color: #fafafa;
@ -29,6 +43,7 @@
content: "";
height: 2px;
background: #4154f1;
z-index: 10;
}
}
.menu_border {
@ -43,11 +58,11 @@
}
.qzCont {
min-height: 35vh;
border-radius:4px;
border-radius: 4px;
}
}
.qz_manage {
.ant-popover-inner-content{
.ant-popover-inner-content {
padding: 0;
}
.ant-dropdown-menu-item > a {