|
|
import React, { Component } from 'react';
|
|
|
import { Breadcrumb,Layout,Table, Divider, Tag,Badge,Row, Col,Button, Menu, Icon} from 'antd';
|
|
|
import { Link } from 'react-router-dom';
|
|
|
import axios from 'axios';
|
|
|
import {markdownToHTML,getImageUrl} from 'educoder';
|
|
|
import CompetitionContents from './CompetitionContents';
|
|
|
import CompetitionContentsChart from './CompetitionContentsChart';
|
|
|
import CompetitionContentsMd from './CompetitionContentsMd';
|
|
|
import NoneData from "../../courses/shixunHomework/shixunHomework";
|
|
|
|
|
|
import './CompetitionCommon.css';
|
|
|
|
|
|
const {Sider } = Layout;
|
|
|
|
|
|
class CompetitionCommon extends Component{
|
|
|
constructor(props) {
|
|
|
super(props)
|
|
|
this.state={
|
|
|
data:undefined,
|
|
|
bannerdata:undefined,
|
|
|
module_type:undefined,
|
|
|
mdContentdata:undefined,
|
|
|
chart_rules:undefined,
|
|
|
Competitionedittype:false,
|
|
|
chartdata:undefined,
|
|
|
has_url:false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
componentDidMount(){
|
|
|
window.document.title = '竞赛';
|
|
|
if(this.props.match.params.identifier!=null){
|
|
|
this.getbannerdata();
|
|
|
// let url=`/competitions/${this.props.match.params.identifier}.json`;
|
|
|
// axios.get(url).then((response) => {
|
|
|
// if(response.status===200){
|
|
|
// this.setState({
|
|
|
// bannerdata:response.data
|
|
|
// })
|
|
|
// }
|
|
|
// }).catch((error) => {
|
|
|
// console.log(error)
|
|
|
// })
|
|
|
}
|
|
|
}
|
|
|
|
|
|
getbannerdata=()=>{
|
|
|
let url=`/competitions/${this.props.match.params.identifier}/common_header.json`;
|
|
|
axios.get(url).then((response) => {
|
|
|
if(response.status===200){
|
|
|
this.setState({
|
|
|
data:response.data,
|
|
|
thiskeys:response.data.competition_modules[0].id
|
|
|
})
|
|
|
this.getrightdata(
|
|
|
response.data.competition_modules[0].id,
|
|
|
response.data.competition_modules[0].module_type,
|
|
|
response.data.competition_modules[0].module_url,
|
|
|
response.data.competition_modules[0].has_url
|
|
|
)
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
|
|
|
if(this.props.user&&this.props.user.login!= ""){
|
|
|
const zul = `/competitions/${this.props.match.params.identifier}/competition_staff.json`;
|
|
|
axios.get((zul)).then((result) => {
|
|
|
if (result) {
|
|
|
if (result.data) {
|
|
|
this.setState({
|
|
|
signupdata:result.data
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
//console.log(error);
|
|
|
})
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
getrightdatas=(e)=>{
|
|
|
let keys=parseInt(e.key);
|
|
|
this.getlistdata(keys)
|
|
|
}
|
|
|
|
|
|
getlistdata=(keys,listkey)=>{
|
|
|
|
|
|
let{data}=this.state;
|
|
|
this.setState({
|
|
|
thiskeys:keys
|
|
|
})
|
|
|
data&&data.competition_modules.map((item,key)=>{
|
|
|
if(item.module_type!="enroll") {
|
|
|
if (keys === item.id) {
|
|
|
this.getrightdata(item.id, item.module_type, item.module_url, item.has_url, listkey)
|
|
|
return
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
getnewchartdata=(typeid,tabkey)=>{
|
|
|
if(typeid==="chart"){
|
|
|
let url=`/competitions/${this.props.match.params.identifier}/chart_rules.json`;
|
|
|
axios.get(url)
|
|
|
.then((response) => {
|
|
|
if(response.status===200){
|
|
|
this.setState({
|
|
|
chart_rules:response.data,
|
|
|
tabkey:tabkey===undefined?response.data.stages[0].id===null?"0":`${response.data.stages[0].id}`:tabkey
|
|
|
})
|
|
|
|
|
|
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
getrightdata=(id,typeid,module_url,has_url,listkey)=>{
|
|
|
// if(typeid==="enroll"){
|
|
|
// this.props.history.replace(`/competitions/${this.props.match.params.identifier}/enroll`);
|
|
|
// return
|
|
|
// }
|
|
|
|
|
|
this.getnewchartdata(typeid,listkey)
|
|
|
|
|
|
if(has_url===false){
|
|
|
let url=`${module_url}`;
|
|
|
axios.get(url).then((response) => {
|
|
|
if(response.status===200){
|
|
|
|
|
|
if(typeid==="chart"){
|
|
|
this.setState({
|
|
|
chartdata:response.data
|
|
|
})
|
|
|
}else{
|
|
|
this.setState({
|
|
|
mdContentdata:response.data
|
|
|
})
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
}else{
|
|
|
if(module_url.substring(0,7)=='http://'||module_url.substring(0,8)=='https://') {
|
|
|
// window.location.href= module_url
|
|
|
window.open(module_url)
|
|
|
}else{
|
|
|
window.open(`https://${module_url}`)
|
|
|
// window.location.href=;
|
|
|
}
|
|
|
return
|
|
|
}
|
|
|
|
|
|
this.setState({
|
|
|
module_id:id,
|
|
|
module_type:typeid,
|
|
|
has_url:has_url
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
Competitionedit=()=>{
|
|
|
this.setState({
|
|
|
Competitionedittype:true
|
|
|
})
|
|
|
}
|
|
|
|
|
|
hideCompetitionedit=()=>{
|
|
|
this.setState({
|
|
|
Competitionedittype:false
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
gotocourse=(url)=>{
|
|
|
if(this.props.checkIfLogin()===false){
|
|
|
this.props.showLoginDialog()
|
|
|
return
|
|
|
}
|
|
|
if(this.props.checkIfProfileCompleted()===false){
|
|
|
this.props.showProfileCompleteDialog()
|
|
|
return
|
|
|
}
|
|
|
if(url===undefined){
|
|
|
let {data,signupdata}=this.state;
|
|
|
if(signupdata.enrolled===true){
|
|
|
this.props.history.replace(`/courses/${data.course_id}`);
|
|
|
}else{
|
|
|
if(data.member_of_course===true){
|
|
|
this.props.history.replace(`/courses/${data.course_id}`);
|
|
|
}else{
|
|
|
// 以学生身份调用加入课堂 进入课堂首页
|
|
|
let url="/courses/apply_to_join_course.json"
|
|
|
axios.post(url, {
|
|
|
invite_code:data.invite_code,
|
|
|
student:1
|
|
|
}
|
|
|
).then((response) => {
|
|
|
if(response.data.status===0){
|
|
|
this.props.history.replace(`/courses/${data.course_id}`);
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}else{
|
|
|
this.props.history.replace(url);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
Competitioncallback=(key)=>{
|
|
|
this.setState({
|
|
|
tabkey:key
|
|
|
})
|
|
|
let url=`/competitions/${this.props.match.params.identifier}/charts.json`;
|
|
|
axios.get(url,{params:{
|
|
|
stage_id:key===0||key===null?undefined:key
|
|
|
}}).then((response) => {
|
|
|
if(response.status===200){
|
|
|
this.setState({
|
|
|
chartdata:response.data
|
|
|
})
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
let {data,has_url,module_type,Competitionedittype,mdContentdata}=this.state;
|
|
|
|
|
|
return (
|
|
|
data===undefined?"":<div className={"educontent clearfix mt20 "}>
|
|
|
|
|
|
<Breadcrumb separator=">">
|
|
|
<Breadcrumb.Item><Link to={"/competitions"}>在线竞赛</Link></Breadcrumb.Item>
|
|
|
<Breadcrumb.Item>{data&&data.name}</Breadcrumb.Item>
|
|
|
</Breadcrumb>
|
|
|
|
|
|
<div className={"mt10 relative"}>
|
|
|
|
|
|
<Row className={"CompetitionCommonbanner"}>
|
|
|
{data.competition_status==="nearly_published"?
|
|
|
this.props.current_user&&this.props.current_user.admin===true?"":this.props.current_user&&this.props.current_user.business===true?"":<div className={"CompetitionsListzhezhao"}>即将发布 敬请期待</div>:""}
|
|
|
<img className={"Commonimg"}
|
|
|
src={data.competition_status==="ended"?getImageUrl(`images/educoder/competitions/groups1.png`):data.competition_status==="nearly_published"?getImageUrl(`images/educoder/competitions/groups2.png`):data.competition_status==="progressing"?getImageUrl(`images/educoder/competitions/groups3.png`):""} />
|
|
|
<Col span={15} className={"Commonimgbox"}>
|
|
|
<img className={"image_urlbox"} src={data===undefined?getImageUrl(`images/educoder/competitions/mainbanner.jpg`):data.avatar_url===null?getImageUrl(`images/educoder/competitions/mainbanner.jpg`):getImageUrl(data.avatar_url)}/>
|
|
|
</Col>
|
|
|
<Col className={"CompetitionCommonbannerfont"} span={9}>
|
|
|
|
|
|
<Col className={data&&data.name.length>15?"competitionbannerdiv mt30":"competitionbannerdiv mt30"}>{data&&data.name}</Col>
|
|
|
|
|
|
<Col className={"competitionbannerdiv mt10"}>
|
|
|
<Col className={"Competitioncolor9b"}>竞赛时间：<span className={"color000"}>{data&&data.start_time}～{data&&data.end_time}</span></Col>
|
|
|
{/*<Col></Col>*/}
|
|
|
</Col>
|
|
|
|
|
|
<Col className={"competitionbannerdiv mt10"}>
|
|
|
<Row gutter={16}>
|
|
|
<Col className="gutter-row" span={6}>
|
|
|
<div className="gutter-box CompetitionsIndexdadels Competitioncolor77">奖金</div>
|
|
|
</Col>
|
|
|
<Col className="gutter-row ml20 rankbeicenter" span={6}>
|
|
|
<div className="gutter-box CompetitionsIndexdadels Competitioncolor77">浏览数</div>
|
|
|
</Col>
|
|
|
<Col className="gutter-row rankbeicenter" span={6}>
|
|
|
<div className="gutter-box CompetitionsIndexdadels Competitioncolor77">报名数</div>
|
|
|
</Col>
|
|
|
</Row>
|
|
|
|
|
|
<Row gutter={16}>
|
|
|
<Col className="gutter-row" span={6}>
|
|
|
<div className="gutter-box CompetitionsIndexbottomvalue Competitioncolor516">¥{data&&data.bonus}</div>
|
|
|
</Col>
|
|
|
<Col className="gutter-row ml20 rankbeicenter" span={6}>
|
|
|
<div className="gutter-box CompetitionsIndexbottomvalue Competitioncolor516">{data.competition_status==="nearly_published"?"--":data&&data.visits_count}</div>
|
|
|
</Col>
|
|
|
<Col className="gutter-row rankbeicenter" span={6}>
|
|
|
<div className="gutter-box CompetitionsIndexbottomvalue Competitioncolor516" onClick={data.competition_status==="nearly_published"?"":()=>this.gotocourse(`/competitions/${this.props.match.params.identifier}/enroll`)}>{data.competition_status==="nearly_published"?"--":data&&data.member_count}</div>
|
|
|
</Col>
|
|
|
</Row>
|
|
|
</Col>
|
|
|
|
|
|
{data.competition_status==="ended"?<style>
|
|
|
{
|
|
|
`
|
|
|
.Competitionfontsize22{
|
|
|
height: 50px;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
`
|
|
|
}
|
|
|
</style>:<style>
|
|
|
{
|
|
|
`
|
|
|
.Competitionfontsize22{
|
|
|
height: 50px;
|
|
|
background: rgba(76,172,255,1);
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
`
|
|
|
}
|
|
|
</style>}
|
|
|
<Col className={"competitionbannerdiv mt20"}>
|
|
|
{data.competition_status==="ended"?
|
|
|
<Button type="primary" block className={"Competitionfontsize22"} disabled={true}>
|
|
|
已结束
|
|
|
</Button>:data.enroll_end===true?<Button type="primary" block className={"Competitionfontsize22"} disabled={true}>
|
|
|
报名截止
|
|
|
</Button>:
|
|
|
data.competition_status==="progressing"?<Button type="primary" block className={"Competitionfontsize22"}>
|
|
|
{data.mode===2?<a onClick={()=>this.gotocourse()}>立即报名</a>:<a onClick={()=>this.gotocourse(`/competitions/${this.props.match.params.identifier}/enroll`)}>立即报名</a>}
|
|
|
</Button>:""}
|
|
|
</Col>
|
|
|
<Col className={"mt10 Competitionfontsize16"}>{data&&data.enroll_end_time===null?"":`报名截止时间：${data&&data.enroll_end_time}`}</Col>
|
|
|
</Col>
|
|
|
</Row>
|
|
|
</div>
|
|
|
|
|
|
<Layout className={'teamsLayout mt40'}>
|
|
|
<Sider>
|
|
|
<Menu mode="inline" className="CompetitionMenu" defaultSelectedKeys={[`${this.state.thiskeys}`]} onClick={(e)=>this.getrightdatas(e)}>
|
|
|
{data&&data.competition_modules.map((item,key)=>{
|
|
|
if(item.module_type!="enroll"){
|
|
|
return(
|
|
|
<Menu.Item key={item.id}>
|
|
|
{/*{item.has_url===false?<span*/}
|
|
|
{/*// onClick={()=>this.getrightdata(item.id,item.module_type,item.module_url,item.has_url)}*/}
|
|
|
{/*>{item.name}</span>:<a*/}
|
|
|
{/*// target="_blank"*/}
|
|
|
{/*href={item.module_url}*/}
|
|
|
{/*// onClick={()=>this.getrightdata(item.id,item.module_type)}*/}
|
|
|
{/*>{item.name}</a>}*/}
|
|
|
<a>{item.name}</a>
|
|
|
</Menu.Item>
|
|
|
)
|
|
|
}
|
|
|
})}
|
|
|
</Menu>
|
|
|
</Sider>
|
|
|
|
|
|
<Layout className={"teamsLayoutleft CompetitionContents mb30"}>
|
|
|
{this.state.module_type==="chart"?Competitionedittype===false?<CompetitionContentsChart
|
|
|
{...this.props}
|
|
|
{...this.state}
|
|
|
Competitionedit={()=>this.Competitionedit()}
|
|
|
Competitioncallback={(e)=>this.Competitioncallback(e)}
|
|
|
/>:"":Competitionedittype===false?<CompetitionContents
|
|
|
Competitionedit={()=>this.Competitionedit()}
|
|
|
{...this.props}
|
|
|
{...this.state}
|
|
|
/>:""}
|
|
|
{/*<CompetitionContentsChart*/}
|
|
|
{/*{...this.props}*/}
|
|
|
{/*{...this.state}*/}
|
|
|
{/*/>*/}
|
|
|
{Competitionedittype===true?<CompetitionContentsMd
|
|
|
hideCompetitionedit={()=>this.hideCompetitionedit()}
|
|
|
getlistdata={(keys,listkey)=>this.getlistdata(keys,listkey)}
|
|
|
Competitioncallback={(e)=>this.Competitioncallback(e)}
|
|
|
{...this.props}
|
|
|
{...this.state}
|
|
|
/>:""}
|
|
|
</Layout>
|
|
|
|
|
|
</Layout>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
export default CompetitionCommon; |
