增加竞赛弹框,修改上传报名表

This commit is contained in:
何童崇 2022-05-16 16:54:30 +08:00
parent 2d54110047
commit 4a56895be2
8 changed files with 133 additions and 22 deletions

View File

@ -25,7 +25,7 @@ if (isDev) {
}
debugType = window.location.search.indexOf('debug=t') !== -1 ? 'teacher' :
window.location.search.indexOf('debug=s') !== -1 ? 'student' :
window.location.search.indexOf('debug=a') !== -1 ? 'a' : parsed.debug || 'a'
window.location.search.indexOf('debug=a') !== -1 ? 'a' : parsed.debug || 'admin'
}
window._debugType = debugType;
export function initAxiosInterceptors(props) {

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

@ -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,match } = props;
const { history, current_user, match } = props;
const { location } = history;
const { pathname } = location;
const [active, setActive] = useState();
@ -77,7 +78,7 @@ const Qz2022 = (props) => {
const [fixedTop, setFixedTop] = useState('');
const {competitionId}=match.params;
const { competitionId } = match.params;
const menu = (
<Menu>
@ -103,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;
@ -171,13 +162,14 @@ const Qz2022 = (props) => {
<Login {...props} />
{/* banner图+选项 */}
<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" : ""}>
<li className={active === competitionId || active === "introduce" ? "active" : ""}>
<Link to={{ pathname: `/competition/${competitionId}/introduce` }}>首页</Link>
</li>
<li className={active === "fingerpost" ? "active" : ""}>

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