educoder/public/react/src/modules/competitions/Competitimain/CompetitionsIndex.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Menu, Icon, List, Avatar,Row, Col,Tag,Pagination} from 'antd';
import {getImageUrl} from 'educoder';
import axios from 'axios';
import './Competitionsindex.css';
import NoneData from "../../courses/coursesPublic/NoneData";

const { SubMenu } = Menu;

const IconText = ({ type, text }) => (
	<span>
    <Icon type={type} style={{ marginRight: 8 }} />
		{text}
  </span>
);

class CompetitionsIndex extends Component{
	constructor(props) {
		super(props)
		this.state={
			current: 'all',
			datas:undefined,
			page:1,
			category:undefined

		}
	}

	componentDidMount(){
		window.document.title = '竞赛';
		let{category,page}=this.state;
		this.getdata(category,page)
	}

	getdata=(category,page)=>{
		const Url =`/competitions.json`;
		axios.get(Url,{params:{
				category:category,
				page:page,
				per_page:15,
			}
		}).then((response) => {
				if(response.status===200){
					this.setState({
						datas:response.data.competitions,
						count:response.data.count,
					})
				}
			})
			.catch(function (error) {
				console.log(error);
			});
	}


	handleClick = e => {
		this.setState({
			current: e.key,
		});
		let{category,page}=this.state;
		this.getdata(e.key,page)
	};

	setcompetitonurl=(url)=>{

		if(url!=null){
			this.props.history.replace(url);
		}
	}

	PaginationCourse=(pageNumber)=>{
		let {category}=this.state;
		this.setState({
			page: pageNumber,
		})
		this.getdata(category,pageNumber);
	}
	render() {
		let {datas,page,count}=this.state;



		return (
			<div>
				<div className="clearfix">
					<div>
						<div className="newMain clearfix">
							<style>
								{
									`
									.courses-head{
												width: 100%;
												height: 300px;
												background-image: url(`getImageUrl(`images/educoder/competitions/courses.png`)`);
												background-color: #081C4B;
												background-size: cover;
												background-position: center;
												background-repeat: no-repeat;
										}
									`
								}
							</style>
							<div className="courses-head pr">
								<div className="edu-txt-center pathNavLine">
									<div className="inline path-nav"></div>
								</div>
							</div>

							<div className="competitionstitle mb20">
								<div className="competitionstitle2">
									<Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
										<Menu.Item key="all" className={"competitionmr50"}>
										   <span className={"competitionsvalue"}>全部</span>
										</Menu.Item>
										<Menu.Item key="nearly_published" className={"competitionmr50"}>
											<span className={"competitionsvalue"}>即将发布</span>
										</Menu.Item>
										<Menu.Item key="progressing" className={"competitionmr50"}>
											<span className={"competitionsvalue"}>进行中</span>
										</Menu.Item>
										<Menu.Item key="ended" className={"competitionmr50"}>
											<span className={"competitionsvalue"}>往期比赛</span>
										</Menu.Item>
									</Menu>
								</div>
							</div>

							<div className={"educontent clearfix mtf10 CompetitionsIndex "}>
								<style>
									{
										`
										.CompetitionsList{
										     position: relative;
										     max-height: 210px;
										 }
										 .competitonimg{
										 		position: absolute;
												right: -5px;
												width: 80px;
												top: 20px;
										 }
										`
									}
								</style>
								{datas===undefined?"":datas.length===0?"":<List
									itemLayout="vertical"
									size="large"
									dataSource={datas&&datas}
									renderItem={(item,key) => (
										<div>
											<div className={"CompetitionsList"} >
											{item.description===null||item.description===undefined||item.description===""?<style>
												{
													`
												  .CompetitionsIndex .ant-list-vertical .ant-list-item-action{
															margin-top:50px;
												 }
												`
												}
											</style>:""}
											<img className={"competitonimg"}
													 src={item.competition_status==="ended"?getImageUrl(`images/educoder/competitions/groups1.png`):item.competition_status==="nearly_published"?getImageUrl(`images/educoder/competitions/groups2.png`):item.competition_status==="progressing"?getImageUrl(`images/educoder/competitions/groups3.png`):""} />
											<List.Item
												key={key}
												actions={[
													<span>竞赛时间: 2019-08-07 24: 00～2019-09-10 24: 00</span>,
													<span>报名截止时间：2019-08-07 08:10</span>,
												]}
												extra={
													<div className={"pt50"} style={{"width":'305px'}}>
														<Row gutter={16}>
															<Col className="gutter-row" span={6}>
																<div className="gutter-box CompetitionsIndexdadels">奖金</div>
															</Col>
															<Col className="gutter-row" span={6}>
																<div className="gutter-box CompetitionsIndexdadels">浏览数</div>
															</Col>
															<Col className="gutter-row" span={6}>
																<div className="gutter-box CompetitionsIndexdadels">报名数</div>
															</Col>
														</Row>

														<Row gutter={16}>
															<Col className="gutter-row" span={6}>
																<div className="gutter-box CompetitionsIndexbottomvalue">¥{item.bonus}</div>
															</Col>
															<Col className="gutter-row" span={6}>
																<div className="gutter-box CompetitionsIndexbottomvalue">{item.competition_status==="nearly_published"?"--":item.visits_count}</div>
															</Col>
															<Col className="gutter-row" span={6}>
																<div className="gutter-box CompetitionsIndexbottomvalue">{item.competition_status==="nearly_published"?"--":item.member_count}</div>
															</Col>
														</Row>
													</div>
												}
											>
												<List.Item.Meta
													title={<a className={item.competition_status==="ended"?"endedfont":""}>
														<span className={"competitionstitles"}
																					onClick={()=>this.setcompetitonurl(item.competition_status==="ended"?null:item.competition_status==="nearly_published"?`/newcompetitions/${item.identifier}/common_header`:item.competition_status==="progressing"?`/newcompetitions/${item.identifier}/common_header`:null)}
													>{item.name}</span><span>{item.sub_title===null?"":<Tag className="competitionsrelative" color="#87d068">{
														item.sub_title
													}</Tag>}</span>
													</a>}
												/>
												{item.description}
											</List.Item>
											</div>
										</div>

									)

									}
								/>}

								{datas===undefined?'none':datas.task_count >20 ?<div className="mb40 edu-txt-center padding20-30"
								>

									<Pagination
										showQuickJumper
										defaultCurrent={1}
										pageSize={20}
										total={count===undefined?"":count}
										current={page}
										onChange={this.PaginationCourse}
									/>

								</div>:""}

								{
									datas===undefined?"":datas && datas.length===0? <NoneData></NoneData>:""
								}
							</div>

						</div>

					</div>
				</div>
			</div>
		)
	}
}
export default CompetitionsIndex;