forked from Gitlink/forgeplus-react
459 lines
17 KiB
TypeScript
459 lines
17 KiB
TypeScript
import React, { FC, useEffect, useState, useRef } from 'react';
|
||
import {
|
||
GlobalSettingModelState,
|
||
ConnectProps,
|
||
Loading,
|
||
connect,
|
||
Dispatch,
|
||
Link,
|
||
useParams,
|
||
UserModelState,
|
||
useLocation,
|
||
} from 'umi';
|
||
import styles from './index.less';
|
||
import AuthModel from '@/components/AuthenticationModel'
|
||
import AddSubmitModel from './AddSubmitModel';
|
||
import { Base64 } from 'js-base64';
|
||
import { Breadcrumb, Button, Menu, message, Spin, Modal } from 'antd';
|
||
//查看内容
|
||
import SeeItem from './SeeItem';
|
||
//编辑内容
|
||
import UpItem from './Update';
|
||
import RanKing from './Ranking'//排行榜
|
||
import Award from './AwardPdf' //获奖证书
|
||
import ENV from '@/utils/env';
|
||
import { getCookie, openNewWindow,setCookie,setDocumentTitle } from '@/utils/util';
|
||
import { handleVerifyLogin, handleVerify , handleProfleCompletedModal } from '@/utils/verifyLogin';
|
||
import { isSuperAdmin } from '@/utils/authority';
|
||
import SubmitResult from './SubmitResult';
|
||
import SubCompetition from './components/SubCompetition';
|
||
import QR from './mCode.png';
|
||
import InitGitLink from './components/InitGitLink';
|
||
|
||
interface PageProps extends ConnectProps {
|
||
globalSetting: GlobalSettingModelState;
|
||
loading: Loading;
|
||
dispatch: Dispatch;
|
||
user: UserModelState;
|
||
|
||
}
|
||
|
||
|
||
const competitionDetails: FC<PageProps> = ({
|
||
globalSetting,
|
||
loading,
|
||
dispatch,
|
||
user,
|
||
...props
|
||
}) => {
|
||
const [HeaderDetail, setHeaderDetail] = useState<any>({
|
||
avatar_url: ""
|
||
});
|
||
const [StaffDetail, setStaffDetail] = useState<any>([])
|
||
const { identifier } = useParams();
|
||
const [ItemData, setItemData] = useState<any>([]);
|
||
//打开编辑还是打开查看
|
||
const [ISsee, setIssee] = useState(true);
|
||
const [MenuItem, setMenuItem] = useState<any>([]);
|
||
const [ModelType, setModelType] = useState<any>([]);
|
||
//点击了排行榜
|
||
const [isRanKing, setIsRanKing] = useState<any>(false);
|
||
//获取排行榜
|
||
const [ChartRules, setChartRules] = useState<any>(false);
|
||
//点击了获奖证书
|
||
const [isAward, setIsAward] = useState<any>(false);
|
||
//获奖证书信息
|
||
const [Prize, setPrize] = useState<any>([]);
|
||
//获取个人信息 Accounts
|
||
const [Accounts, SetAccounts] = useState<any>([]);
|
||
//设置选中的条目
|
||
let [Selectkey, setSeleckjey] = useState<any>([]);
|
||
//md_tab
|
||
const [MdTab, setMdTab] = useState<any>(false);
|
||
//getTabResults
|
||
const [TabResults, setTabResults] = useState<any>([]);
|
||
//弹窗
|
||
const [isshowType, setisshowType] = useState<any>();
|
||
|
||
const [ subComShow , setSubComShow ] = useState<any>(false);
|
||
const [ subGitlinkShow , setSubGitlinkShow ] = useState<any>(false);
|
||
const [ subComList , setSubComList] = useState<any>([]);
|
||
const loction = useLocation();
|
||
const see = useRef(null);
|
||
|
||
useEffect(()=>{
|
||
setSubGitlinkShow(true);
|
||
},[])
|
||
|
||
useEffect(() => {
|
||
async function init() {
|
||
const res = await dispatch({
|
||
type: 'competitions/getHeader',
|
||
payload: {
|
||
identifier: identifier
|
||
}
|
||
})
|
||
setHeaderDetail(res)
|
||
setDocumentTitle(res?.name || '竞赛');
|
||
|
||
setStaffDetail(await dispatch({
|
||
type: 'competitions/getStaff',
|
||
payload: {
|
||
identifier: identifier
|
||
}
|
||
}))
|
||
}
|
||
if (identifier) {
|
||
init();
|
||
//调用默认加载第一条数据
|
||
}
|
||
setDocumentTitle('竞赛')
|
||
}, [identifier])
|
||
useEffect(() => {
|
||
setisshowType(parseInt(loction?.query?.type) === 1)
|
||
}, [loction])
|
||
|
||
useEffect(() => {
|
||
if (HeaderDetail?.competition_modules?.length > 0) {
|
||
if (loction?.query?.active === '赛题发布') {
|
||
const item = HeaderDetail?.competition_modules?.find((e: any) => e.name === '赛题发布');
|
||
if (item) {
|
||
getrightdatas(item);
|
||
return;
|
||
}
|
||
|
||
}
|
||
getrightdatas(HeaderDetail?.competition_modules?.[0]);
|
||
}
|
||
}, [HeaderDetail])
|
||
|
||
async function getrightdatas(item: any) {
|
||
setSeleckjey(item.id);
|
||
Selectkey = item.id;
|
||
setMenuItem(item);
|
||
let data = await dispatch({
|
||
type: 'competitions/getItem',
|
||
payload: {
|
||
url: item.module_url
|
||
}
|
||
})
|
||
setIsRanKing(false)
|
||
setIsAward(false)
|
||
setMdTab(false)
|
||
setItemData(data);
|
||
setModelType(item.module_type);
|
||
|
||
if (item.module_type === "chart") {
|
||
setIsRanKing(true)
|
||
setIssee(false);
|
||
getChartRules();
|
||
} else if (item.module_type === "certificate") {
|
||
setIsAward(true);
|
||
setIsRanKing(false)
|
||
setIssee(false);
|
||
getPrize();
|
||
} else if (item.module_type === "md_tab") {
|
||
setMdTab(true);
|
||
setIssee(false);
|
||
setIsRanKing(false)
|
||
setIsAward(false);
|
||
// getChartRules();
|
||
getTabResults();
|
||
} else {
|
||
setIssee(true);
|
||
}
|
||
}
|
||
|
||
|
||
async function gotocourse(e: any, item: any, url: string) {
|
||
e.stopPropagation();
|
||
|
||
if (!handleVerify(dispatch)) {
|
||
return;
|
||
}
|
||
// 判断是否完善资料，未完善资料需弹出提示框
|
||
if(!handleProfleCompletedModal()){
|
||
return;
|
||
}
|
||
if(globalSetting?.setting?.sub_competitions){
|
||
let subArr = globalSetting?.setting?.sub_competitions;
|
||
if(subArr.length>0){
|
||
let filterArr = subArr.filter((i:any)=>i.identifier === item.identifier);
|
||
|
||
let filterlist = filterArr && filterArr.length >0 && filterArr[0].list;
|
||
|
||
if(filterArr && filterArr.length >0 && (filterlist && filterlist.length>1)){
|
||
setSubComShow(true);
|
||
setSubComList(filterArr[0]);
|
||
return;
|
||
}else if(filterArr && filterArr.length >0 && (filterlist && filterlist.length===1)){
|
||
window.location.href=filterArr[0].list[0].url;
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (HeaderDetail?.is_authentication && !user?.userInfo?.authentication) {
|
||
dispatch({
|
||
type: 'shixunsDetail/setActionTabs',
|
||
payload: {
|
||
key: 'Banner-Auth',
|
||
},
|
||
})
|
||
return
|
||
}
|
||
// if(item.identifier === "gcc-courses-2022"){
|
||
// let arr = HeaderDetail.competition_modules?.filter((item:any)=>item.name === "赛事发布");
|
||
// arr && arr.length > 0 && getrightdatas(arr[0]);
|
||
// return;
|
||
// }
|
||
if (url === "ismodel") {
|
||
if (item.member_of_course === true) {
|
||
openNewWindow(`/classrooms/${item.course_id}`)
|
||
} else {
|
||
if (!item.invite_code) {
|
||
message.info('本竞赛只面向部分学校/单位开放，你暂时没有参赛资格')
|
||
return
|
||
}
|
||
const result = await dispatch({
|
||
type: 'competitions/addApplytojoincourse',
|
||
payload: {
|
||
invite_code: item.invite_code,
|
||
student: 1
|
||
}
|
||
});
|
||
if (result.statue === 0) {
|
||
openNewWindow(`/classrooms/${item.course_id}`);
|
||
}
|
||
}
|
||
} else {
|
||
if (url === "personal") {
|
||
if (item.enroll_ended === true) {
|
||
//已截止
|
||
message.info(`报名已截止`);
|
||
return;
|
||
}
|
||
if (StaffDetail.enrolled === true) {
|
||
message.info(`你已经报名,不能重复报名！`);
|
||
return;
|
||
}
|
||
const competitionTeamsresult = await dispatch({
|
||
type: 'competitions/competitionTeams',
|
||
payload: {
|
||
identifier: item.identifier
|
||
}
|
||
})
|
||
if (competitionTeamsresult) {
|
||
message.info('报名成功,预祝您夺得桂冠!')
|
||
}
|
||
} else {
|
||
openNewWindow(url)
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
async function getChartRules() {
|
||
await setChartRules(
|
||
await dispatch({
|
||
type: 'competitions/ChartRules',
|
||
payload: {
|
||
identifier: identifier
|
||
}
|
||
})
|
||
)
|
||
}
|
||
|
||
async function getCharts(id: any) {
|
||
let data = await dispatch({
|
||
type: 'competitions/Charts',
|
||
payload: {
|
||
identifier: identifier,
|
||
stage_id: id
|
||
}
|
||
})
|
||
setItemData(data);
|
||
}
|
||
|
||
async function getResults(id: any) {
|
||
let data = await dispatch({
|
||
type: 'competitions/Results',
|
||
payload: {
|
||
identifier: identifier,
|
||
stage_id: id
|
||
}
|
||
})
|
||
setItemData(data);
|
||
}
|
||
|
||
async function getTabResults() {
|
||
setTabResults(
|
||
await dispatch({
|
||
type: 'competitions/TabResults',
|
||
payload: {
|
||
identifier: identifier,
|
||
competition_module_id: Selectkey,
|
||
}
|
||
})
|
||
)
|
||
}
|
||
|
||
|
||
async function getPrize() {
|
||
let data = await dispatch({
|
||
type: 'competitions/Prize',
|
||
payload: {
|
||
identifier: identifier,
|
||
user_id: user?.userInfo?.user_id,
|
||
}
|
||
})
|
||
setPrize(data);
|
||
}
|
||
//个人信息 Accounts
|
||
async function getAccounts() {
|
||
let data = await dispatch({
|
||
type: 'competitions/Accounts',
|
||
payload: {
|
||
id: user?.userInfo?.user_id,
|
||
}
|
||
})
|
||
SetAccounts(data);
|
||
}
|
||
|
||
return (
|
||
<div className={"edu-container minH500"}>
|
||
<SubCompetition visible={subComShow} onClose={()=>setSubComShow(false)} filterlist={subComList}/>
|
||
<InitGitLink visible={subGitlinkShow && !user?.userInfo?.is_new} onClose={()=>setSubGitlinkShow(false)}/>
|
||
<Breadcrumb className="mt10" separator=">">
|
||
<Breadcrumb.Item><Link to={"/competitions/index"}>在线竞赛</Link></Breadcrumb.Item>
|
||
<Breadcrumb.Item>{HeaderDetail.name}{HeaderDetail.sub_title ? '-' + HeaderDetail.sub_title : null}</Breadcrumb.Item>
|
||
</Breadcrumb>
|
||
|
||
<div className={"mt10 p12"} style={{ display: 'flex', background: '#fff', position: 'relative' }} >
|
||
|
||
<Spin spinning={loading.effects['competitions/getHeader']} >
|
||
<div style={{ height: '355px', width: "800px" }}>
|
||
{
|
||
HeaderDetail?.avatar_url && HeaderDetail?.avatar_url !== null && <img style={{ height: '355px', width: '800px' }} src={ENV.IMG_SERVER + '/' + HeaderDetail?.avatar_url} />
|
||
}
|
||
{
|
||
!HeaderDetail?.avatar_url && HeaderDetail?.avatar_url == null && <img style={{ height: '355px', width: '800px' }} src={ENV.IMG_SERVER + `/images/educoder/competitions/mainbanner.jpg`} />
|
||
}
|
||
</div>
|
||
</Spin>
|
||
|
||
|
||
|
||
<div style={{ marginLeft: '10px', width: '400px' }}>
|
||
{HeaderDetail.competition_status === 'ended' ? <img className={styles.commonimg} src={`${ENV.IMG_SERVER}/images/educoder/competitions/groups1.png`} /> : null}
|
||
{HeaderDetail.competition_status === 'nearly_published' ? <img className={styles.commonimg} src={`${ENV.IMG_SERVER}/images/educoder/competitions/groups2.png`} /> : null}
|
||
{HeaderDetail.competition_status === 'progressing' ? <img className={styles.commonimg} src={`${ENV.IMG_SERVER}/images/educoder/competitions/groups3.png`} /> : null}
|
||
<p className={`${styles.titlesize}`}>{HeaderDetail.name}{HeaderDetail.sub_title ? '-' + HeaderDetail.sub_title : null}</p>
|
||
<p className={styles.timesize}><span style={{ color: '#9b9b9b' }}>竞赛时间：</span>{HeaderDetail.start_time}~{HeaderDetail.end_time}</p>
|
||
<p className={styles.timesize}><span style={{ color: '#9b9b9b' }}>报名截止时间：</span>{HeaderDetail.enroll_end_time}</p>
|
||
<p style={{ display: 'flex', justifyContent: 'space-around' }}>
|
||
{!!HeaderDetail?.bonus && <span>奖金 <br /><span style={{ fontSize: '24px' }}>¥{parseInt(HeaderDetail && HeaderDetail.bonus).toLocaleString()}</span></span>}
|
||
<span>浏览数 <br /><span style={{ fontSize: '24px' }}>{parseInt(HeaderDetail && HeaderDetail.visits_count).toLocaleString()}</span></span>
|
||
<span>报名数 <br /><span style={{ fontSize: '24px' }}>{parseInt(HeaderDetail && HeaderDetail.member_count).toLocaleString()}</span></span>
|
||
</p>
|
||
{
|
||
HeaderDetail.competition_status === "ended" ?
|
||
<Button type="primary" className={styles.buttonsize} disabled={true} >已结束</Button> : null
|
||
}
|
||
{HeaderDetail.competition_status === 'nearly_published' ?
|
||
<Button type="primary" className={styles.buttonsize} disabled={true} >未发布</Button> : null
|
||
}
|
||
{
|
||
HeaderDetail.competition_status !== 'nearly_published' && HeaderDetail.enroll_end && HeaderDetail.competition_status !== 'ended' ?
|
||
<Button type="primary" className={styles.buttonsize} disabled={true} >报名截止</Button> : null
|
||
}
|
||
{/* */}
|
||
{HeaderDetail.competition_status === 'progressing' && HeaderDetail.enroll_end != true ? <Button type="primary" disabled={StaffDetail.enrolled && !HeaderDetail.need_attachment} className={styles.buttonsize} style={{fontSize:"18px"}} onClick={
|
||
(e) => {
|
||
if (StaffDetail.enrolled && HeaderDetail.need_attachment) {
|
||
see.current?.handleVisible()
|
||
return
|
||
}
|
||
gotocourse(e, HeaderDetail, HeaderDetail.mode === 2 ? 'ismodel' : HeaderDetail.personal ? 'personal' : `/competitions/index/${HeaderDetail.identifier}/enroll`)
|
||
}
|
||
}>{StaffDetail.enrolled ? HeaderDetail.need_attachment ? '上传作品' : '已报名' : '立即报名'}</Button> : null}
|
||
{user.userInfo.real_name != "游客" && <span onClick={(e) => gotocourse(e, HeaderDetail, `/competitions/index/${HeaderDetail.identifier}/enroll`)} className={styles.myteam}>{isSuperAdmin() ? '参赛战队>>' : '我的战队>>'}</span>}
|
||
</div>
|
||
</div>
|
||
<div className={styles.bootmdetail}>
|
||
<div className={styles.flex1}>
|
||
{/* selectedKeys要求string类型 */}
|
||
<Menu selectedKeys={[`${Selectkey}`]} >
|
||
{HeaderDetail && HeaderDetail.competition_modules && HeaderDetail.competition_modules.map((item: any, index: number) => {
|
||
if (item.module_type != "enroll") {
|
||
return (
|
||
<Menu.Item className={styles.menuItem} onClick={() => {
|
||
if (item?.is_authentication) {
|
||
if (!handleVerify(dispatch)) {
|
||
return;
|
||
}
|
||
message.info('加入战队才能查看');
|
||
return
|
||
}
|
||
// if(item?.item?.has_url){
|
||
// window.open(item?.module_url)
|
||
// return
|
||
// }
|
||
|
||
getrightdatas(item)
|
||
}} key={item.id} >{item.name}</Menu.Item>
|
||
)
|
||
}
|
||
})}
|
||
</Menu>
|
||
</div>
|
||
<div className={styles.flex6}>
|
||
{isAward ? <Award dispatch={dispatch} userid={user?.userInfo?.user_id} Prize={Prize} Accounts={Accounts} getAccounts={getAccounts} /> : null}
|
||
{isRanKing ? <RanKing HeaderDetail={HeaderDetail} userinfo={user.userInfo} Editable={HeaderDetail?.permission?.editable} getCharts={getCharts} getChartRules={getChartRules} Selectkey={Selectkey} ChartRules={ChartRules} ItemData={ItemData} /> : null}
|
||
{ISsee ? <SeeItem ref={see} StaffDetail={StaffDetail} HeaderDetail={HeaderDetail} userinfo={user.userInfo} Editable={HeaderDetail?.permission?.editable} ItemData={ItemData} setIssee={setIssee} ModelType={ModelType} dispatch={dispatch} /> : null}
|
||
{!ISsee && !isRanKing && !isAward && !MdTab ? <UpItem userinfo={user.userInfo} ModelType={ModelType} getrightdatas={getrightdatas} dispatch={dispatch} MenuItem={MenuItem} setIssee={setIssee} identifier={identifier} ItemData={ItemData} /> : null}
|
||
{MdTab && <SubmitResult dispatch={dispatch} StaffDetail={StaffDetail} userinfo={user.userInfo} HeaderDetail={HeaderDetail} Editable={HeaderDetail?.permission?.editable} getCharts={getResults} getChartRules={getTabResults} Selectkey={Selectkey} ChartRules={TabResults} ItemData={ItemData} />}
|
||
</div>
|
||
</div>
|
||
<AuthModel />
|
||
<AddSubmitModel getResults={getResults} />
|
||
<Modal
|
||
visible={isshowType}
|
||
// visible
|
||
footer={null}
|
||
width={720}
|
||
title="提示"
|
||
centered={true}
|
||
onCancel={() => setisshowType(false)}
|
||
>
|
||
<div className={styles.modal}>
|
||
<div>华为模型王者挑战赛黄金赛正式开启啦</div>
|
||
<div>本赛段总奖金高达<span style={{ color: '#FF8C29' }}>300,000</span>元</div>
|
||
<div>1、符合赛题要求的队伍（共25支）可获得奖金：12000RMB/队 ；</div>
|
||
<div>2、参与获得“荣耀殿堂”榜主的队伍，可获得由中国软件开源创新大赛组委会颁发的黄金宝箱；</div>
|
||
<div>3、各赛题精度最高的队伍，可获得由中国软件开源创新大赛组委会颁发的黄金宝箱+荣誉证书；</div>
|
||
<div>心动吧，那就快点击下方按钮报名参赛</div>
|
||
<Button type="primary" onClick={() => openNewWindow('https://competition.huaweicloud.com/information/1000041485/introduction')}>前往报名参赛</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
|
||
|
||
</div>
|
||
)
|
||
}; export default connect(
|
||
({
|
||
loading,
|
||
globalSetting,
|
||
user,
|
||
}: {
|
||
loading: Loading;
|
||
globalSetting: GlobalSettingModelState;
|
||
user: UserModelState;
|
||
}) => ({
|
||
globalSetting,
|
||
loading: loading,
|
||
user
|
||
}),
|
||
)(competitionDetails);
|