forgeplus-react/src/military/competition.js

import React, { useEffect, useState } from "react";
import { Link, Route, Switch } from "react-router-dom";
import { withRouter } from "react-router";
import { SnackbarHOC, getImageUrl } from "educoder";
import { CNotificationHOC } from "../modules/courses/common/CNotificationHOC";
import { TPMIndexHOC } from "../modules/tpm/TPMIndexHOC";
import Loadable from "react-loadable";
import Loading from "../Loading";
import { ImageLayerOfCommentHOC } from "../modules/page/layers/ImageLayerOfCommentHOC";
import './competition/index.scss';
import { Menu, Popover, Spin } from "antd";
import InfoModal from './competition/components/infoModal';
// import banner from './competition/image/banner.jpg';
// import banner_local from './competition/image/banner_local.jpg';
import logo from './competition/image/logo.png';
import { getCompetitionDetail, userCompetitionStatus } from "./competition/api";
// import { paths } from "./competition/static";
import Login from './components/login';

const Introduce = Loadable({
  loader: () => import('./competition/introduce'),
  loading: Loading,
})
const ManageEdit = Loadable({
  loader: () => import('./competition/components/manageEdit'),
  loading: Loading,
})
const Fingerpost = Loadable({
  loader: () => import('./competition/fingerpost'),
  loading: Loading,
})
const Notice = Loadable({
  loader: () => import('./competition/notice'),
  loading: Loading,
})
const NoticeDetail = Loadable({
  loader: () => import('./competition/notice/detail.jsx'),
  loading: Loading,
})
const NoticeEdit = Loadable({
  loader: () => import('./competition/notice/addNotice.jsx'),
  loading: Loading,
})
const Apply = Loadable({
  loader: () => import('./competition/apply'),
  loading: Loading,
})
const Refer = Loadable({
  loader: () => import('./competition/refer'),
  loading: Loading,
})
const Rank = Loadable({
  loader: () => import('./competition/rank'),
  loading: Loading,
});
const Chat = Loadable({
  loader: () => import('./competition/chat'),
  loading: Loading,
});
const Contact = Loadable({
  loader: () => import('./competition/contact'),
  loading: Loading,
});
const Statistics = Loadable({
  loader: () => import('./competition/statistics'),
  loading: Loading,
})
const Management = Loadable({
  loader: () => import('./competition/management'),
  loading: Loading,
})

const Competition = (props) => {
  const { history, current_user, match } = 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 { competitionId } = match.params;

  const menu = (
    <Menu>
      <Menu.Item>
        <Link to={{ pathname: current_user && current_user.login ? `/competition/${competitionId}/management/applys` : '' }} onClick={() => { current_user && !current_user.login && props.showLoginDialog() }}>报名列表</Link>
      </Menu.Item>
      <Menu.Item>
        <Link to={{ pathname: current_user && current_user.login ? `/competition/${competitionId}/management/production` : '' }} onClick={() => { current_user && !current_user.login && props.showLoginDialog() }}>作品列表</Link>
      </Menu.Item>
    </Menu>
  );

  useEffect(() => {
    setActive(pathname.substring(pathname.lastIndexOf('/') + 1, pathname.lenght));
    // document.body.scrollTop = 0;
    // window.scrollTo(0,0);
  }, [pathname]);

  useEffect(() => {
    window.addEventListener("scroll", scrollListener, false);
    return () => {
      window.removeEventListener("scroll", scrollListener, false);
    }
  }, []);


  function scrollListener() {
    let qz2022Top = document.querySelector('.competition').offsetTop;
    let top = document.documentElement.scrollTop;
    if (!fixedTop && top > qz2022Top - 20) {
      setFixedTop('fixed-top');
    } else if (top < qz2022Top - 19) {
      setFixedTop('');
    }
  }

  useEffect(() => {
    // 获取竞赛详情
    getCompetitionDetail(competitionId).then(response => {
      if (response && response.status === 200) {
        setQzDetail(response.data.data);
      }
    })
  }, [reloadDetail])

  useEffect(() => {
    // 获取用户参与竞赛状态
    userCompetitionStatus(competitionId).then(response => {
      if (response && response.status === 200) {
        setEnrollStatus(response.data.data);
      }
    })
  }, [reload])

  let applyStatus; // 是否处于报名阶段
  let referStatus; // 是否处于提交作品阶段
  let referEnd; // 是否处于提交作品阶段（提交已经结束）
  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) {
      props.showLoginDialog();
    } else if (enrollStatus && !enrollStatus.enroll_status) {
      props.showNotification("您还未报名竞赛!");
    } else if (enrollStatus && enrollStatus.status === 0) {
      props.showNotification("报名信息被管理员驳回!");
    } else if (['ccks', 'zstp2022'].includes(competitionId) && enrollStatus && enrollStatus.status === 1) {
      props.showNotification("您的报名信息未通过审核!");
    } else if(['ccks', 'zstp2022'].includes(competitionId) && applyStatus){
      
    }else{
      !referStatus ? props.showNotification(!referEnd ? `竞赛尚未开始提交作品，提交作品开始时间为:${qzDetail && qzDetail.enroll_date.substring(0, 10)}` : "比赛已结束") : "";
    }
  }

  const is_local = qzDetail && qzDetail.is_local;
  const banner_url = qzDetail && qzDetail.banner_url && getImageUrl(qzDetail.banner_url);

  return (
    <React.Fragment>
      <Login {...props} />
      {/* banner图+选项 */}
      {banner_url && <img src={banner_url} className="qz_banner" alt="" />}
      {pathname.indexOf("qz2022") > -1 && <InfoModal />}
      <div className="competition">
        <div className={`competition-top ${fixedTop}`}>
          {/* {paths.indexOf(active) !== -1 && */}
          <ul className="qz2022Menu mt20 qz_main">
            <li>
              <a href="/"><img src={logo} alt="" style={{ width: 120 }} /></a>
            </li>
            {competitionId === 'qz2022' && <li className={active === competitionId || active === "introduce" ? "active" : ""}>
              <Link to={{ pathname: `/competition/${competitionId}/introduce` }}>首页</Link>
            </li>}
            {competitionId === 'qz2022' ? <li className={active === "fingerpost" ? "active" : ""} >
              <Link to={{ pathname: `/competition/${competitionId}/fingerpost` }}>赛事指南</Link>
            </li> : <li className={active === competitionId || active === "fingerpost" ? "active" : ""} >
              <Link to={{ pathname: `/competition/${competitionId}/fingerpost` }}>大赛简介</Link>
            </li>}
            <li className={active === "notice" ? "active" : ""}>
              <Link to={{ pathname: `/competition/${competitionId}/notice` }}>通知公告</Link>
            </li>
            {/* 处于报名阶段正常跳转到报名页面，不处于右侧弹消息 */}
            {competitionId === 'qz2022' ? <li className={active === "apply" ? "active" : ""}>
              <Link to={{ pathname: applyStatus && current_user && current_user.login ? `/competition/${competitionId}/apply` : '' }} onClick={() => { current_user && current_user.login ? !applyStatus && props.showNotification("报名时间已截止") : props.showLoginDialog() }}>参赛报名</Link>
            </li> : <li className={active === "apply" ? "active" : ""}>
              <Link to={{ pathname: applyStatus||( enrollStatus && enrollStatus.enroll_status) && current_user && current_user.login ? `/competition/${competitionId}/apply` : '' }} onClick={() => { current_user && current_user.login ? !applyStatus&& ( enrollStatus && !enrollStatus.enroll_status ) && props.showNotification("报名时间已截止") : props.showLoginDialog() }}>参赛报名</Link>
            </li>
            }
            {competitionId === 'qz2022' ? <li className={active === "refer" ? "active" : ""}>
              <Link to={{ pathname: referStatus && !referEnd && current_user && current_user.login && enrollStatus && enrollStatus.enroll_status ? `/competition/${competitionId}/refer` : '' }} onClick={goToRefer}>提案提交</Link>
            </li> :
              <li className={active === "refer" ? "active" : ""}>
                <Link to={{ pathname: !referEnd && current_user && current_user.login && enrollStatus && enrollStatus.status>1 ? `/competition/${competitionId}/refer` : '' }} onClick={goToRefer}>提案提交</Link>
              </li>}

            {
              ['ccks', 'zstp2022'].includes(competitionId) && <li className={active === "rank" ? "active" : ""}>
                <Link to={{ pathname: `/competition/${competitionId}/rank` }}>排行榜</Link>
              </li>
            }

            {competitionId === 'qz2022' && <li className={active === "statistics" ? "active" : ""}>
              <Link to={{ pathname: `/competition/${competitionId}/statistics` }}>数据统计</Link>
            </li>}
            <li className={active === "chat" ? "active" : ""}>
              <Link to={{ pathname: `/competition/${competitionId}/chat` }}>交流互动</Link>
            </li>
            <li className={active === "contact" ? "active" : ""}>
              <Link to={{ pathname: `/competition/${competitionId}/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/:competitionId/notice/detail/:noticeId"
              render={
                ({ match, history }) => (<NoticeDetail match={match} history={history} />)
              }
            ></Route>
            {/* 通知公告编辑页 */}
            <Route path="/competition/:competitionId/notice/:type/:noticeId"
              render={
                ({ match }) => (<NoticeEdit {...props} match={match} qzDetail={qzDetail} />)
              }
            ></Route>
            {/* 通知公告新增页 */}
            <Route path="/competition/:competitionId/notice/:type"
              render={
                ({ match }) => (<NoticeEdit {...props} match={match} qzDetail={qzDetail} />)
              }
            ></Route>
            {/* 大赛介绍、大赛指南、关于我们 编辑页 */}
            <Route path="/competition/:competitionId/:type/edit"
              render={
                ({ match }) => (<ManageEdit {...props} qzDetail={qzDetail} match={match} setReloadDetail={setReloadDetail} />)
              }
            ></Route>
            {/* 通知公告 */}
            <Route path="/competition/:competitionId/notice"
              render={
                () => (<Notice {...props} qzDetail={qzDetail} />)
              }
            ></Route>
            {/* 参赛报名 */}
            <Route path="/competition/:competitionId/apply"
              render={
                () => (<Apply {...props} qzDetail={qzDetail} enrollStatus={enrollStatus} setReload={setReload} />)
              }
            ></Route>
            {/* 提案提交 */}
            <Route path="/competition/:competitionId/refer"
              render={
                () => (<Refer {...props} enrollStatus={enrollStatus} qzDetail={qzDetail} setReload={setReload} />)
              }
            ></Route>
            {/* 排行榜 */}
            <Route path="/competition/:competitionId/rank"
              render={
                () => (<Rank {...props} isLoacl={qzDetail && qzDetail.is_local} />)
              }
            ></Route>
            {/* 交流互动 */}
            <Route path="/competition/:competitionId/chat"
              render={
                () => (<Chat {...props} isLoacl={qzDetail && qzDetail.is_local} />)
              }
            ></Route>
            {/* 联系我们 */}
            <Route path="/competition/:competitionId/contact"
              render={
                () => (<Contact {...props} aboutUs={qzDetail && qzDetail.about_us} qzDetail={qzDetail} />)
              }
            ></Route>
            {/* 数据统计 */}
            <Route path="/competition/:competitionId/statistics"
              render={
                () => (<Statistics {...props} qzDetail={qzDetail} />)
              }
            ></Route>
            {/* 后台管理-报名列表 */}
            <Route path="/competition/:competitionId/management/applys"
              render={
                () => (<Management {...props} qzDetail={qzDetail} />)
              }
            ></Route>
            {/* 后台管理-作品列表 */}
            <Route path="/competition/:competitionId/management/production"
              render={
                () => (<Management {...props} qzDetail={qzDetail} />)
              }
            ></Route>
            {/* 大赛介绍 */}
            <Route path="/competition/:competitionId/introduce"
              render={
                () => (<Introduce {...props} qzDetail={qzDetail} />)
              }
            ></Route>
            {/* 大赛指南 */}
            <Route path="/competition/:competitionId/fingerpost"
              render={
                () => (<Fingerpost {...props} qzDetail={qzDetail} />)
              }
            ></Route>
            {/* 大赛介绍 */}
            <Route path="/competition/:competitionId"
              render={
                () => (competitionId == 'qz2022' ? <Introduce {...props} qzDetail={qzDetail} /> : <Fingerpost {...props} qzDetail={qzDetail} />)
              }
            ></Route>
          </Switch>
        </Spin>
      </div>
    </React.Fragment>
  );
}

export default withRouter(
  ImageLayerOfCommentHOC({
    imgSelector: ".imageLayerParent img, .imageLayerParent .imageTarget",
    parentSelector: ".newMain",
  })(CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(Competition))))
);