Merge pull request '增加竞赛弹框,修改上传报名表' (#375) from tongChong/forgeplus-react:dev_military_qz2022 into pre_dev_military

This commit is contained in:
xxq250 2022-05-16 17:08:22 +08:00
commit 146541acbd
12 changed files with 209 additions and 100 deletions

View File

@ -70,7 +70,7 @@ const Expert = Loadable({
loading: Loading,
})
// 启智2022 (为此竞赛定制化页面以及内容)
const Qz2022 = Loadable({
const Competition = Loadable({
loader: () => import('./military/qz2022'),
loading: Loading,
})
@ -134,11 +134,6 @@ const AboutUs = Loadable({
// loading: Loading,
// });
// 首页
const HomePage = Loadable({
loader: () => import('./home'),
loading: Loading,
});
// 管理页面
const Managements = Loadable({
@ -382,7 +377,7 @@ class App extends Component {
{/*专家评审*/}
<Route path="/expert" component={Expert} />
{/*启智2022*/}
<Route path="/competition/qz2022" component={Qz2022} />
<Route path="/competition/:competitionId" component={Competition} />
<Route exact path="/explore/all"
render={

View File

@ -13,10 +13,10 @@ export function getImageUrl(path) {
// const local = 'http://localhost:3000'
// const local = 'http://39.105.176.215:49999';
const local = 'http://111.8.36.180:8000';
if (isDev) {
return `${local}/${path}`
}
path && !path.startsWith('/') && (path = '/'.concat(path));
if (isDev) {
return `${local}${path}`
}
return `${path}`;
}

View File

@ -175,4 +175,9 @@ i.color-orange05:hover {
.color-light-green {
color: #29bd8b !important;
}
.ant-message-notice .ant-message-notice-content{
font-size: 16px;
padding: 15px 50px;
}

View File

@ -1,7 +1,7 @@
import React, { useEffect, useState } from "react";
import { Link, Route, Switch } from "react-router-dom";
import { withRouter } from "react-router";
import { SnackbarHOC } from "educoder";
import { SnackbarHOC, getImageUrl } from "educoder";
import { CNotificationHOC } from "../modules/courses/common/CNotificationHOC";
import { TPMIndexHOC } from "../modules/tpm/TPMIndexHOC";
import Loadable from "react-loadable";
@ -9,6 +9,7 @@ import Loading from "../Loading";
import { ImageLayerOfCommentHOC } from "../modules/page/layers/ImageLayerOfCommentHOC";
import './qz2022/index.scss';
import { Menu, Popover, Spin } from "antd";
import InfoModal from './qz2022/components/infoModal';
import banner from './qz2022/image/banner.jpg';
import banner_local from './qz2022/image/banner_local.jpg';
import logo from './qz2022/image/logo.png';
@ -66,7 +67,7 @@ const Management = Loadable({
})
const Qz2022 = (props) => {
const { history, current_user } = props;
const { history, current_user, match } = props;
const { location } = history;
const { pathname } = location;
const [active, setActive] = useState();
@ -77,13 +78,15 @@ const Qz2022 = (props) => {
const [fixedTop, setFixedTop] = useState('');
const { competitionId } = match.params;
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/${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/qz2022/management/production` : '' }} onClick={() => { current_user && !current_user.login && props.showLoginDialog() }}>作品列表</Link>
<Link to={{ pathname: current_user && current_user.login ? `/competition/${competitionId}/management/production` : '' }} onClick={() => { current_user && !current_user.login && props.showLoginDialog() }}>作品列表</Link>
</Menu.Item>
</Menu>
);
@ -101,16 +104,6 @@ const Qz2022 = (props) => {
}
}, []);
// useEffect(()=>{
// let footer=document.querySelector('.newFooter');
// let loading=document.querySelector('..ant-spin-nested-loading');
// if((footer.offsetTop +107)<window.screen.height){
// footer.style.position="absolute";
// loading.margin-b
// }else{
// footer.style.position="relative";
// }
// },[history])
function scrollListener() {
let qz2022Top = document.querySelector('.qz2022').offsetTop;
@ -123,8 +116,8 @@ const Qz2022 = (props) => {
}
useEffect(() => {
// 获取启智2022详情
getQz2022().then(response => {
// 获取竞赛详情
getQz2022(competitionId).then(response => {
if (response && response.status === 200) {
setQzDetail(response.data.data);
}
@ -133,7 +126,7 @@ const Qz2022 = (props) => {
useEffect(() => {
// 获取用户参与竞赛状态
userCompetitionStatus('qz2022').then(response => {
userCompetitionStatus(competitionId).then(response => {
if (response && response.status === 200) {
setEnrollStatus(response.data.data);
}
@ -152,59 +145,60 @@ const Qz2022 = (props) => {
function goToRefer() {
if (current_user && !current_user.login) {
props.showLoginDialog();
}else if(enrollStatus && !enrollStatus.enroll_status){
} else if (enrollStatus && !enrollStatus.enroll_status) {
props.showNotification("您还未报名竞赛!");
}else if(enrollStatus && enrollStatus.status === 0){
} else if (enrollStatus && enrollStatus.status === 0) {
props.showNotification("报名信息被管理员驳回!");
} 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;
const is_local = qzDetail && qzDetail.is_local;
const banner_url = qzDetail && qzDetail.banner_url && getImageUrl(qzDetail.banner_url);
return (
<React.Fragment>
<Login {...props} />
{/* banner图+选项 */}
<img src={banner_url || (is_local?banner_local: banner)} className="qz_banner" alt=""/>
<img src={banner_url || (is_local ? banner_local : banner)} className="qz_banner" alt="" />
{pathname.indexOf("qz2022") && <InfoModal />}
<div className="qz2022">
<div className={`qz2022-top ${fixedTop}`}>
{paths.indexOf(active) !== -1 && <ul className="qz2022Menu mt20 qz_main">
<li>
<a href="/"><img src={logo} alt="" style={{width: 120}}/></a>
</li>
<li className={ active==='qz2022' ||active === "introduce"? "active" : ""}>
<Link to={{ pathname: `/competition/qz2022/introduce` }}>首页</Link>
</li>
<li className={active === "fingerpost" ? "active" : ""}>
<Link to={{ pathname: `/competition/qz2022/fingerpost` }}>赛事指南</Link>
</li>
<li className={active === "notice" ? "active" : ""}>
<Link to={{ pathname: `/competition/qz2022/notice` }}>通知公告</Link>
</li>
{/* 处于报名阶段正常跳转到报名页面,不处于右侧弹消息 */}
<li className={active === "apply" ? "active" : ""}>
<Link to={{ pathname: applyStatus && current_user && current_user.login ? '/competition/qz2022/apply' :'' }} onClick={()=>{current_user && current_user.login ? !applyStatus && props.showNotification("报名时间已截止") : props.showLoginDialog()}}>参赛报名</Link>
</li>
<li className={active === "refer" ? "active" : ""}>
<Link to={{ pathname: referStatus && !referEnd && current_user && current_user.login && enrollStatus && enrollStatus.enroll_status ? `/competition/qz2022/refer` : '' }} onClick={goToRefer}>提案提交</Link>
</li>
{/* <li className={active === "apply" ? "active" : ""}>
<Link to={{ pathname: '/competition/qz2022/apply'}}>参赛报名</Link>
{paths.indexOf(active) !== -1 && <ul className="qz2022Menu mt20 qz_main">
<li>
<a href="/"><img src={logo} alt="" style={{ width: 120 }} /></a>
</li>
<li className={active === competitionId || active === "introduce" ? "active" : ""}>
<Link to={{ pathname: `/competition/${competitionId}/introduce` }}>首页</Link>
</li>
<li className={active === "fingerpost" ? "active" : ""}>
<Link to={{ pathname: `/competition/${competitionId}/fingerpost` }}>赛事指南</Link>
</li>
<li className={active === "notice" ? "active" : ""}>
<Link to={{ pathname: `/competition/${competitionId}/notice` }}>通知公告</Link>
</li>
{/* 处于报名阶段正常跳转到报名页面,不处于右侧弹消息 */}
<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 === "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 === "apply" ? "active" : ""}>
<Link to={{ pathname: `/competition/${competitionId}/apply`}}>参赛报名</Link>
</li> */}
{/* <li className={active === "refer" ? "active" : ""}>
<Link to={{ pathname: `/competition/qz2022/refer`}}>提案提交</Link>
<Link to={{ pathname: `/competition/${competitionId}/refer`}}>提案提交</Link>
</li> */}
<li className={active === "statistics" ? "active" : ""}>
<Link to={{ pathname: `/competition/qz2022/statistics` }}>数据统计</Link>
<Link to={{ pathname: `/competition/${competitionId}/statistics` }}>数据统计</Link>
</li>
<li className={active === "chat" ? "active" : ""}>
<Link to={{ pathname: `/competition/qz2022/chat` }}>交流互动</Link>
<Link to={{ pathname: `/competition/${competitionId}/chat` }}>交流互动</Link>
</li>
<li className={active === "contact" ? "active" : ""}>
<Link to={{ pathname: `/competition/qz2022/contact` }}>联系我们</Link>
<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">
@ -217,91 +211,91 @@ const Qz2022 = (props) => {
<Spin spinning={false} wrapperClassName="spinstyle qzCont" tip="正在同步镜像" size="large">
<Switch {...props}>
{/* 通知公告详情页 */}
<Route path="/competition/qz2022/notice/detail/:noticeId"
<Route path="/competition/:competitionId/notice/detail/:noticeId"
render={
({ match, history }) => (<NoticeDetail match={match} history={history} />)
}
></Route>
{/* 通知公告编辑页 */}
<Route path="/competition/qz2022/notice/:type/:noticeId"
<Route path="/competition/:competitionId/notice/:type/:noticeId"
render={
({ match }) => (<NoticeEdit {...props} match={match} qzDetail={qzDetail}/>)
({ match }) => (<NoticeEdit {...props} match={match} qzDetail={qzDetail} />)
}
></Route>
{/* 通知公告新增页 */}
<Route path="/competition/qz2022/notice/:type"
<Route path="/competition/:competitionId/notice/:type"
render={
({ match }) => (<NoticeEdit {...props} match={match} qzDetail={qzDetail}/>)
({ match }) => (<NoticeEdit {...props} match={match} qzDetail={qzDetail} />)
}
></Route>
{/* 大赛介绍、大赛指南、关于我们 编辑页 */}
<Route path="/competition/qz2022/:type/edit"
<Route path="/competition/:competitionId/:type/edit"
render={
({match}) => (<ManageEdit {...props} qzDetail={qzDetail} match={match} setReloadDetail={setReloadDetail}/>)
({ match }) => (<ManageEdit {...props} qzDetail={qzDetail} match={match} setReloadDetail={setReloadDetail} />)
}
></Route>
{/* 通知公告 */}
<Route path="/competition/qz2022/notice"
<Route path="/competition/:competitionId/notice"
render={
() => (<Notice {...props} qzDetail={qzDetail} />)
}
></Route>
{/* 参赛报名 */}
<Route path="/competition/qz2022/apply"
<Route path="/competition/:competitionId/apply"
render={
() => (<Apply {...props} qzDetail={qzDetail} enrollStatus={enrollStatus} setReload={setReload}/>)
() => (<Apply {...props} qzDetail={qzDetail} enrollStatus={enrollStatus} setReload={setReload} />)
}
></Route>
{/* 提案提交 */}
<Route path="/competition/qz2022/refer"
<Route path="/competition/:competitionId/refer"
render={
() => (<Refer {...props} enrollStatus={enrollStatus} qzDetail={qzDetail} setReload={setReload}/>)
() => (<Refer {...props} enrollStatus={enrollStatus} qzDetail={qzDetail} setReload={setReload} />)
}
></Route>
{/* 交流互动 */}
<Route path="/competition/qz2022/chat"
<Route path="/competition/:competitionId/chat"
render={
() => (<Chat {...props} isLoacl={qzDetail && qzDetail.is_local}/>)
() => (<Chat {...props} isLoacl={qzDetail && qzDetail.is_local} />)
}
></Route>
{/* 联系我们 */}
<Route path="/competition/qz2022/contact"
<Route path="/competition/:competitionId/contact"
render={
() => (<Contact {...props} aboutUs={qzDetail && qzDetail.about_us} qzDetail={qzDetail}/>)
() => (<Contact {...props} aboutUs={qzDetail && qzDetail.about_us} qzDetail={qzDetail} />)
}
></Route>
{/* 数据统计 */}
<Route path="/competition/qz2022/statistics"
<Route path="/competition/:competitionId/statistics"
render={
() => (<Statistics {...props} qzDetail={qzDetail} />)
}
></Route>
{/* 后台管理-报名列表 */}
<Route path="/competition/qz2022/management/applys"
<Route path="/competition/:competitionId/management/applys"
render={
() => (<Management {...props} qzDetail={qzDetail}/>)
() => (<Management {...props} qzDetail={qzDetail} />)
}
></Route>
{/* 后台管理-作品列表 */}
<Route path="/competition/qz2022/management/production"
<Route path="/competition/:competitionId/management/production"
render={
() => (<Management {...props} qzDetail={qzDetail}/>)
() => (<Management {...props} qzDetail={qzDetail} />)
}
></Route>
{/* 大赛介绍 */}
<Route path="/competition/qz2022/introduce"
<Route path="/competition/:competitionId/introduce"
render={
() => (<Introduce {...props} qzDetail={qzDetail} />)
}
></Route>
{/* 大赛指南 */}
<Route path="/competition/qz2022/fingerpost"
<Route path="/competition/:competitionId/fingerpost"
render={
() => (<Fingerpost {...props} qzDetail={qzDetail}/>)
() => (<Fingerpost {...props} qzDetail={qzDetail} />)
}
></Route>
{/* 大赛介绍 */}
<Route path="/competition/qz2022"
<Route path="/competition/:competitionId"
render={
() => (<Introduce {...props} qzDetail={qzDetail} />)
}

View File

@ -6,8 +6,8 @@ export async function userCompetitionStatus(id) {
}
// 启智2022详情接口
export function getQz2022() {
return axios.get(`/competition_infos/qz2022.json`);
export function getQz2022(competitionId) {
return axios.get(`/competition_infos/${competitionId}.json`);
}
// 报名启智2022 竞赛?debug=teacher
@ -21,8 +21,8 @@ export async function enrollUpdate(data){
}
// 统计启智2022 竞赛
export async function stattistics(data){
return axios.get( `/competition_infos/qz2022/statistics.json`);
export async function stattistics(competitionId){
return axios.get( `/competition_infos/${competitionId}/statistics.json`);
}
// 竞赛提交作品

View File

@ -37,6 +37,12 @@ export default Form.create()((props) => {
setSourceBy(enrollStatus.enroll_info.subject_source_type);
setFieldsValue(enrollStatus.enroll_info);
}
enrollStatus&&enrollStatus.enroll_info&&enrollStatus.enroll_info.enroll_template&&
setFiles([{...enrollStatus.enroll_info.enroll_template,
uid:"rc-upload-"+enrollStatus.enroll_info.enroll_template.id,
name:enrollStatus.enroll_info.enroll_template.title,
response:{id:enrollStatus.enroll_info.enroll_template.id}
}]);
},[current_user, enrollStatus])
// form
@ -145,6 +151,7 @@ export default Form.create()((props) => {
function handleChange(info) {
if (info.file.status === 'uploading' || info.file.status === "done" || info.file.status === 'removed') {
setLoading(true);
console.log(info.fileList);
setFiles(appendFileSizeToUploadFileAll(info.fileList).slice(-1));
}
if(info.file.status === "done" || info.file.status === 'removed'){
@ -298,9 +305,11 @@ export default Form.create()((props) => {
</div>
<div className="action_box">
<span>报名表扫描件:</span>
{enrollStatus && enrollStatus.enroll_info.enroll_template ? <a href={current_main_site_url+enrollStatus.enroll_info.enroll_template.url} className="ml10 mb30 download">
{/* */}
{/* {enrollStatus && enrollStatus.enroll_info.enroll_template ? <a href={current_main_site_url+enrollStatus.enroll_info.enroll_template.url} className="ml10 mb30 download">
{enrollStatus.enroll_info.enroll_template.title}
</a>:<Upload
</a>: */}
<Upload
accept=".zip,.rar"
// action?debug=admin
action={getUploadActionUrl}
@ -317,13 +326,18 @@ export default Form.create()((props) => {
>
<Button className="upload"><Icon type="upload"/>上传</Button>
<div className="tips mt10">
1. 您可选择是否上传单位盖章后的报名表扫描件<br/>
2. 上传附件名称需更改为单位名称+参赛团队负责人<br/>
3. 支持上传单个ziprar格式文件文件大小限制10M<br/>
4. 密级必须为{qzDetail && qzDetail.is_local ? '秘密及以下' : '公开级'}</div>
</Upload>}
<div className="text_red">1. 您已成功报名此处报名表扫描件不是必填项</div>
2. 您可选择是否上传单位盖章后的报名表扫描件<br/>
3. 上传附件名称需更改为单位名称+参赛团队负责人<br/>
4. 支持上传单个ziprar格式文件文件大小限制10M<br/>
5. 密级必须为{qzDetail && qzDetail.is_local ? '秘密及以下' : '公开级'}
{enrollStatus && enrollStatus.enroll_info.enroll_template ?<div className="text_red mt20">您已成功提交报名表扫描件若再次提交将覆盖您上一次的提交记录</div>:""}
</div>
</Upload>
{/* } */}
</div>
{enrollStatus && !enrollStatus.enroll_info.enroll_template && <Button className="submit" type="primary" onClick={submitTemplate} loading={loading}>提交</Button>}
{enrollStatus && <Button className="submit" type="primary" onClick={submitTemplate} loading={loading}>提交</Button>}
</div>}
</div>
{enrollStatus && (!enrollStatus.enroll_status || enrollStatus.status === 0) && <div className="apply_but">

View File

@ -111,6 +111,9 @@
font-size: 14px;
color: gray;
}
.text_red{
color: red;
}
.download{
color: #2e5bfe;
&:hover{

View File

@ -0,0 +1,48 @@
import React, { memo, useEffect, useState } from 'react';
import { Modal } from 'antd';
import { Link } from 'react-router-dom';
import bg from '../../image/infoModal.jpg';
import './index.scss';
function QzModal() {
const [visible, setVisible] = useState(false);
useEffect(() => {
let qzInfoTime = localStorage.qzInfoTime;
let nowTime = new Date().getTime();
let lastTime=new Date("2022-05-26").getTime();
if(nowTime>lastTime)return;
if (qzInfoTime) {
if (nowTime - qzInfoTime > 24 * 3600 * 1000) {
// modal
setTimeout(()=>{setVisible(true);},800)
localStorage.setItem('qzInfoTime', nowTime);
}
} else {
setTimeout(()=>{setVisible(true);},800)
localStorage.setItem('qzInfoTime', nowTime);
}
}, [])
return (
<Modal
title=""
visible={visible}
onCancel={() => { setVisible(false) }}
footer={null}
className='qzInfoModal'
width='728px'
maskClosable={false}
>
<img src={bg} />
{/* <Link to="/competition/qz2022/notice" className="qz-btn">查看详情</Link> */}
</Modal>
)
}
export default memo(QzModal);

View File

@ -0,0 +1,49 @@
.qzInfoModal {
top:calc(50vh - 250px);
.ant-modal-body {
padding: 0;
background: #fff;
img {
border-radius: 2px;
width: 100%;
}
}
.ant-modal-header {
height: 0;
background: #fff;
display: none !important;
}
.ant-modal-close {
top: -50px !important;
right: -50px;
}
.ant-modal-close-icon {
border: 1px solid #fff;
color: #fff;
border-radius: 50%;
padding: 5%;
}
.qz-btn {
position: absolute;
bottom: -70px;
left: 295px;
width: 137px;
height: 49px;
background-color: #e96d2a;
border-color: #e96d2a;
border-radius: 6px;
color: #fff;
font-size:16px;
text-align: center;
line-height: 49px;
&:hover{
color: #fff !important;
background-color: #f96d2a;
border-color: #f96d2a;
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 909 KiB

View File

@ -12,7 +12,8 @@ import EchartBar from './EchartBar';
const initBarYData = [[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0]];
function Statistics({ showNotification, qzDetail }) {
function Statistics({ showNotification, qzDetail,match }) {
const {competitionId}=match.params;
const is_local= qzDetail &&qzDetail.is_local;
const [pieArr, setPieArr] = useState([]);
@ -24,7 +25,7 @@ function Statistics({ showNotification, qzDetail }) {
useEffect(() => {
stattistics().then(res => {
stattistics(competitionId).then(res => {
if (res && res.data && Array.isArray(res.data.data)) {
let pieArrList = [];
let xData = [];

View File

@ -280,7 +280,7 @@ export function TPMIndexHOC(WrappedComponent, headFoot) {
resetUserInfo:this.fetchUsers,
showCompeleteDialog:this.showCompeleteDialog
};
let qz2022 = this.props.match.path.includes('/competition/qz2022');
let competition = this.props.match.path.includes('/competition');
return (
<div className="indexHOC">
<SystemNotice
@ -303,12 +303,12 @@ export function TPMIndexHOC(WrappedComponent, headFoot) {
/> : ""}
{/* <Header {...this.state} {...this.props} {...common} publicNav={publicNav}></Header> */}
{/* <NewHeader {...this.state} {...this.props} {...common}></NewHeader> */}
{!qz2022&&<NewHeader {...this.state} {...this.props} {...common}></NewHeader>}
{!competition&&<NewHeader {...this.state} {...this.props} {...common}></NewHeader>}
<Spin spinning={this.state.globalLoading} delay={0} className="globalSpin"
size="large" tip={this._gLoadingTip || "加载中..."}
>
<div className="newContainer newContainers">
{!publicNav && !qz2022&&<div style={{height:"70px"}}></div> }
{!publicNav && !competition&&<div style={{height:"70px"}}></div> }
{
current_user &&
<WrappedComponent initCommonState={(user) => this.initCommonState(user)}