竞赛首页 战队详情页接口联调

public/react/config/env.js

@@ -7,22 +7,22 @@ const paths = require('./paths');
 // Make sure that including paths.js after env.js will read .env variables.
 delete require.cache[require.resolve('./paths')];
 
-const NODE_ENV = "production";
+const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
-  throw new Error(
-    'The NODE_ENV environment variable is required but was not specified.'
-  );
+	throw new Error(
+		'The NODE_ENV environment variable is required but was not specified.'
+	);
 }
 
 // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
 var dotenvFiles = [
-  `${paths.dotenv}.${NODE_ENV}.local`,
-  `${paths.dotenv}.${NODE_ENV}`,
-  // Don't include `.env.local` for `test` environment
-  // since normally you expect tests to produce the same
-  // results for everyone
-  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
-  paths.dotenv,
+	`${paths.dotenv}.${NODE_ENV}.local`,
+	`${paths.dotenv}.${NODE_ENV}`,
+	// Don't include `.env.local` for `test` environment
+	// since normally you expect tests to produce the same
+	// results for everyone
+	NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+	paths.dotenv,
 ].filter(Boolean);
 
 // Load environment variables from .env* files. Suppress warnings using silent
@@ -31,13 +31,13 @@ var dotenvFiles = [
 // https://github.com/motdotla/dotenv
 // https://github.com/motdotla/dotenv-expand
 dotenvFiles.forEach(dotenvFile => {
-  if (fs.existsSync(dotenvFile)) {
-    require('dotenv-expand')(
-      require('dotenv').config({
-        path: dotenvFile,
-      })
-    );
-  }
+	if (fs.existsSync(dotenvFile)) {
+		require('dotenv-expand')(
+			require('dotenv').config({
+				path: dotenvFile,
+			})
+		);
+	}
 });
 
 // We support resolving modules according to `NODE_PATH`.
@@ -51,43 +51,43 @@ dotenvFiles.forEach(dotenvFile => {
 // We also resolve them to make sure all tools using them work consistently.
 const appDirectory = fs.realpathSync(process.cwd());
 process.env.NODE_PATH = (process.env.NODE_PATH || '')
-  .split(path.delimiter)
-  .filter(folder => folder && !path.isAbsolute(folder))
-  .map(folder => path.resolve(appDirectory, folder))
-  .join(path.delimiter);
+	.split(path.delimiter)
+	.filter(folder => folder && !path.isAbsolute(folder))
+	.map(folder => path.resolve(appDirectory, folder))
+	.join(path.delimiter);
 
 // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
 // injected into the application via DefinePlugin in Webpack configuration.
 const REACT_APP = /^REACT_APP_/i;
 
 function getClientEnvironment(publicUrl) {
-  const raw = Object.keys(process.env)
-    .filter(key => REACT_APP.test(key))
-    .reduce(
-      (env, key) => {
-        env[key] = process.env[key];
-        return env;
-      },
-      {
-        // Useful for determining whether we’re running in production mode.
-        // Most importantly, it switches React into the correct mode.
-        NODE_ENV: "production",
-        // Useful for resolving the correct path to static assets in `public`.
-        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
-        // This should only be used as an escape hatch. Normally you would put
-        // images into the `src` and `import` them in code to get their paths.
-        PUBLIC_URL: '/react/build/.',
-      }
-    );
-  // Stringify all values so we can feed into Webpack DefinePlugin
-  const stringified = {
-    'process.env': Object.keys(raw).reduce((env, key) => {
-      env[key] = JSON.stringify(raw[key]);
-      return env;
-    }, {}),
-  };
+	const raw = Object.keys(process.env)
+		.filter(key => REACT_APP.test(key))
+		.reduce(
+			(env, key) => {
+				env[key] = process.env[key];
+				return env;
+			},
+			{
+				// Useful for determining whether we’re running in production mode.
+				// Most importantly, it switches React into the correct mode.
+				NODE_ENV: process.env.NODE_ENV || 'development',
+				// Useful for resolving the correct path to static assets in `public`.
+				// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+				// This should only be used as an escape hatch. Normally you would put
+				// images into the `src` and `import` them in code to get their paths.
+				PUBLIC_URL: '/react/build/.',
+			}
+		);
+	// Stringify all values so we can feed into Webpack DefinePlugin
+	const stringified = {
+		'process.env': Object.keys(raw).reduce((env, key) => {
+			env[key] = JSON.stringify(raw[key]);
+			return env;
+		}, {}),
+	};
 
-  return { raw, stringified };
+	return { raw, stringified };
 }
 
 module.exports = getClientEnvironment;

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

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { Menu, Icon, List, Avatar,Row, Col,Tag,Pagination} from 'antd';
 import axios from 'axios';
 import './Competitionsindex.css';
@@ -25,25 +25,31 @@ class CompetitionsIndex extends Component{
 		this.state={
 			current: 'all',
 			datas:undefined,
-			page:1
+			page:1,
+			category:undefined
 
 		}
 	}
 
 	componentDidMount(){
 		window.document.title = '竞赛';
+		let{category,page}=this.state;
+		this.getdata(category,page)
+	}
 
-		let{page}=this.state;
+	getdata=(category,page)=>{
 		const Url =`/competitions.json`;
 		axios.get(Url,{params:{
-				page:page
+				category:category,
+				page:page,
+				per_page:6,
 			}
-			}).then((response) => {
+		}).then((response) => {
 				if(response.status===200){
-		       this.setState({
-						 datas:response.data.competitions,
-						 count:response.data.count,
-					 })
+					this.setState({
+						datas:response.data.competitions,
+						count:response.data.count,
+					})
 				}
 			})
 			.catch(function (error) {
@@ -51,11 +57,13 @@ class CompetitionsIndex extends Component{
 			});
 	}
 
+
 	handleClick = e => {
-		console.log('click ', e);
 		this.setState({
 			current: e.key,
 		});
+		let{category,page}=this.state;
+		this.getdata(e.key,page)
 	};
 
 	render() {
@@ -103,20 +111,19 @@ class CompetitionsIndex extends Component{
 										 .competitonimg{
 										 		position: absolute;
 												right: -5px;
-												width: 100px;
+												width: 80px;
 												top: 20px;
 										 }
 										`
 									}
 								</style>
 								<List
-									className={"CompetitionsList"}
 									itemLayout="vertical"
 									size="large"
 									dataSource={datas&&datas}
 									renderItem={(item,key) => (
-										<div className={"CompetitionsList"}>
-
+										<Link to={`/newcompetitions/${item.identifier}/common_header`}>
+											<div className={"CompetitionsList"} >
 											{item.description===null||item.description===undefined||item.description===""?<style>
 												{
 													`
@@ -126,7 +133,8 @@ class CompetitionsIndex extends Component{
 												`
 												}
 											</style>:""}
-											<img className={"competitonimg"} src={groups3} />
+											<img className={"competitonimg"}
+													 src={item.nearly_published===true?groups2:item.published===true?groups2:groups1} />
 											<List.Item
 												key={key}
 												actions={[
@@ -149,13 +157,13 @@ class CompetitionsIndex extends Component{
 
 														<Row gutter={16}>
 															<Col className="gutter-row" span={6}>
-																<div className="gutter-box CompetitionsIndexbottomvalue">¥4500</div>
+																<div className="gutter-box CompetitionsIndexbottomvalue">¥{item.bonus}</div>
 															</Col>
 															<Col className="gutter-row" span={6}>
-																<div className="gutter-box CompetitionsIndexbottomvalue">351</div>
+																<div className="gutter-box CompetitionsIndexbottomvalue">{item.visits_count}</div>
 															</Col>
 															<Col className="gutter-row" span={6}>
-																<div className="gutter-box CompetitionsIndexbottomvalue">351</div>
+																<div className="gutter-box CompetitionsIndexbottomvalue">{item.member_count}</div>
 															</Col>
 														</Row>
 
@@ -170,31 +178,27 @@ class CompetitionsIndex extends Component{
 												/>
 												{item.description}
 											</List.Item>
-										</div>
+											</div>
+										</Link>
 
 									)
 
 									}
 								/>
 
-								<div className="mb40 edu-txt-center padding20-30"
-										 // style={
-											//  // {
-											// 	//  display: datas===undefined?'none':datas.task_count >15 ? 'block':'none'
-											//  // }
-										 // }
+								{datas===undefined?'none':datas.task_count >6 ?<div className="mb40 edu-txt-center padding20-30"
 								>
 
 									<Pagination
 										showQuickJumper
 										defaultCurrent={1}
-										pageSize={8}
+										pageSize={6}
 										total={count===undefined?"":count}
 										current={page}
 										onChange={this.PaginationCourse}
 									/>
 
-								</div>
+								</div>:""}
 
 								{
 									datas===undefined?"":datas && datas.length===0? <NoneData></NoneData>:""

public/react/src/modules/competitions/Competitimain/Competitionsindex.css

@@ -104,6 +104,12 @@
 
 .competitionsrelative{
     position: absolute;
-    /*top: 28px;*/
+    top: 28px;
 }
 
+.CompetitionsList:hover{
+    /*box-shadow: 0 2px 6px rgba(51,51,51,.09);*/
+    box-shadow: 1px 1px 6px rgba(0,0,0,0.3);
+    opacity: 1;
+    border-radius: 2px;
+}

public/react/src/modules/competitions/Competition_teams/Competitionteams.css

@@ -0,0 +1,53 @@
+.teamsLayout{background: transparent !important;}
+.teamsLayout .teamsLayoutitle{
+    font-size:18px;
+    font-family:PingFangSC-Semibold,PingFang SC;
+    font-weight:600;
+    color:rgba(5,16,26,1);
+    line-height:25px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+.teamsLayoutTable  .ant-table-bordered .ant-table-thead > tr > th, .ant-table-bordered .ant-table-tbody > tr > td {
+    border-right: 1px solid transparent !important;
+}
+
+.teamsLayoutTable .ant-table-body .ant-table-thead > tr> th:nth-last-child(1){
+    border-right: 1px solid #e8e8e8 !important;
+}
+
+.teamsLayoutTable .ant-table-body .ant-table-tbody > tr> td:nth-last-child(1){
+    border-right: 1px solid #e8e8e8 !important;
+}
+
+.teamsLayoutTable  .ant-table-bordered .ant-table-thead > tr > th{
+    background:#EEEEEE;
+    font-size: 14px;
+    font-family: PingFangSC-Regular,PingFang SC;
+    font-weight: 400;
+    color: rgba(102,102,102,1);
+    line-height: 20px;
+}
+
+.teamsLayoutTable  .ant-table-bordered .ant-table-tbody > tr > th{
+    background:#EEEEEE;
+    font-size:14px;
+    font-family:PingFangSC-Regular,PingFang SC;
+    font-weight:400;
+    color:rgba(5,16,26,1);
+    line-height:20px;
+}
+
+.teamsLayout .mt40{
+    margin-top: 40px !important;
+}
+
+.teamsLayoutheji{
+    color: #878787;
+    font-size: 16px;
+}
+
+.teamsLayoucolor-orange {
+     color: #ff6800!important;
+    font-size: 16px;
+}

public/react/src/modules/competitions/Competition_teams/Competitionteams.js

@@ -0,0 +1,241 @@
+import React, { Component } from 'react';
+import { Breadcrumb,Layout,Table, Divider, Tag,Badge} from 'antd';
+import axios from 'axios';
+
+import NoneData from "../../courses/shixunHomework/shixunHomework";
+
+import './Competitionteams.css';
+const { Header, Footer, Sider, Content } = Layout;
+
+class Competitionteams extends Component{
+	constructor(props) {
+		super(props)
+		this.state={
+	    shixundata: undefined,
+			coursedata:undefined,
+		}
+	}
+
+	componentDidMount(){
+		window.document.title = '竞赛';
+
+		this.getshixundata();
+		this.getcoursedata();
+	}
+
+	getshixundata=()=>{
+		const Url =`/competitions/${"gcc-course-2019"}/competition_teams/${"2007"}/shixun_detail.json`;
+		// axios.get(Url).then((response) => {
+		// 		if(response.status===200){
+		// 			console.log(response)
+		// 		}
+		// 	})
+		// 	.catch(function (error) {
+		// 		console.log(error);
+		// 	});
+
+
+  let data={
+  	shixuns: [
+			{
+				creator: "黄井泉",  // 创建者
+				shixun_name: "单链表的学习与应用（I）", // 实训名称
+				shixun_identifier: "mnf6b7z3",
+				forked: false,  // false:原创
+				myshixuns_count: 179, // 学习人数
+				forked_myshixun_count: 0, // 被fork发布的学习人数
+				valid_count: 82, // 有效作品数
+				score: 1320 // 应用值
+			}
+		],
+		shixun_count: 1, // 实训总计
+		total_myshixun_count: 179, // 学习人数总计
+		total_forked_myshixun_count: 0,  // 被fork发布的学习人数总计
+		total_valid_count: 82, // 有效作品数总计
+		total_shixun_score: 1320 // 应用值总计
+		}
+
+
+		let newarr=data.shixuns;
+
+    let newobj={
+			creator:"合计:",
+			shixun_name:data.shixun_count,
+			myshixuns_count:data.total_myshixun_count,
+			forked_myshixun_count:data.total_forked_myshixun_count,
+			valid_count:data.total_valid_count,
+			score:data.total_shixun_score
+		}
+		newarr.push(newobj)
+
+		this.setState({
+			shixundata:newarr
+		})
+
+	}
+
+	getcoursedata=()=>{
+		const Url =`/competitions/${"gcc-course-2019"}/competition_teams/${"2007"}/course_detail.json`;
+		// axios.get(Url).then((response) => {
+		// 		if(response.status===200){
+		// 			console.log(response)
+		// 		}
+		// 	})
+		// 	.catch(function (error) {
+		// 		console.log(error);
+		// 	});
+
+		let data={
+			courses: [
+				{
+					creator: "周海芳",  // 创建者
+					creator_login: "Nancy", // login
+					course_name: "大学计算机基础2018年秋季",
+					course_id: 1502,
+					students_count: 122, // 学生数量
+					shixun_homework_count: 8, // 发布的实训作业数量
+					valid_count: 977, // 有效作品数
+					score: 29810 // 应用值
+				}
+			],
+					total_course_count: 1, // 课堂总计
+					total_students_count: 122,  // 学生数总计
+					total_shixun_homework_count: 8,  // 实训作业数总计
+					total_valid_count: 977, // 有效作品数总计
+					total_course_score: 29810  // 应用值总计
+				}
+
+
+	let newarr=data.courses;
+
+	let newobj={
+		creator:"合计:",
+		course_name:data.total_course_count,
+		students_count:data.total_students_count,
+		shixun_homework_count:data.total_shixun_homework_count,
+		valid_count:data.total_valid_count,
+		score:data.total_course_score
+	}
+		newarr.push(newobj)
+
+		this.setState({
+		   coursedata:newarr
+		})
+
+	}
+
+	render() {
+
+		const shixuncolumns = [
+			{
+				title: '创建者',
+				dataIndex: 'creator',
+				key: 'creator',
+				render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoutheji":""}>{text}</div>,
+			},
+			{
+				title: '名称',
+				dataIndex: 'shixun_name',
+				key: 'shixun_name',
+				render: (text, record) =>
+					<div className={record.creator==="合计:"?"teamsLayoucolor-orange":""}>{text}{record.forked===true?<Badge count={"原创"} style={{ backgroundColor: '#459BE5' }} />:""}</div>,
+			},
+			{
+				title: '学习人数',
+				dataIndex: 'myshixuns_count',
+				key: 'myshixuns_count',
+				render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoucolor-orange":""}>{text}</div>,
+			},
+			{
+				title: '被fork发布的学习人数',
+				dataIndex: 'forked_myshixun_count',
+				key: 'forked_myshixun_count',
+				render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoucolor-orange":""}>{text}</div>,
+			},
+			{
+				title: '有效作品数',
+				dataIndex: 'valid_count',
+				key: 'valid_count',
+				render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoucolor-orange":""}>{text}</div>,
+			},
+			{
+				title: '应用值',
+				dataIndex: 'score',
+				key: 'score',
+				render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoucolor-orange":""}>{text}</div>,
+			},
+		];
+
+		const coursecolumns = [
+			{
+				title: '创建者',
+				dataIndex: 'creator',
+				key: 'creator',
+				render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoutheji":""}>{text}</div>,
+			},
+			{
+				title: '名称',
+				dataIndex: 'course_name',
+				key: 'course_name',
+				render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoucolor-orange":""}>{text}</div>,
+			},
+			{
+				title: '学习人数',
+				dataIndex: 'students_count',
+				key: 'students_count',
+				render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoucolor-orange":""}>{text}</div>,
+			},
+			{
+				title: '被fork发布的学习人数',
+				dataIndex: 'shixun_homework_count',
+				key: 'shixun_homework_count',
+				render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoucolor-orange":""}>{text}</div>,
+			},
+			{
+				title: '有效作品数',
+				dataIndex: 'valid_count',
+				key: 'valid_count',
+				render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoucolor-orange":""}>{text}</div>,
+			},
+			{
+				title: '应用值',
+				dataIndex: 'score',
+				key: 'score',
+				render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoucolor-orange":""}>{text}</div>,
+			},
+		];
+
+
+
+
+		console.log(this.state.shixundata)
+		return (
+
+				<div className={"educontent clearfix mt20 "}>
+					<Breadcrumb separator=">">
+						<Breadcrumb.Item>全国高校计算机大赛战</Breadcrumb.Item>
+						<Breadcrumb.Item href="">报名</Breadcrumb.Item>
+						<Breadcrumb.Item href="">战队详情</Breadcrumb.Item>
+					</Breadcrumb>
+
+					<Layout className={"teamsLayout"}>
+
+						<Content className={"teamsLayoutitle"}>实训项目</Content>
+						<Content className={"teamsLayoutContent"}>
+							<Table className="teamsLayoutTable" columns={shixuncolumns} dataSource={this.state.shixundata} bordered pagination={false}/>
+						</Content>
+						<Content className={"teamsLayoutitle mt40"}>翻转课堂</Content>
+						<Content className={"teamsLayoutContents"}>
+							<Table className="teamsLayoutTable" columns={coursecolumns} dataSource={this.state.coursedata} bordered pagination={false}/>
+						</Content>
+
+					</Layout>
+
+
+
+				</div>
+
+		)
+	}
+}
+export default Competitionteams;

public/react/src/modules/competitions/Competitions.js

@@ -12,10 +12,24 @@ import { SnackbarHOC } from 'educoder'
 
 //新版竞赛首页
 const CompetitionsIndex = Loadable({
-	loader: () => import('./competitimain/CompetitionsIndex'),
+	loader: () => import('./Competitimain/CompetitionsIndex'),
 	loading: Loading,
 })
 
+//竞赛详情页
+const CompetitionCommon=Loadable({
+	loader: () => import('./CompetitionCommon/CompetitionCommon'),
+	loading: Loading,
+})
+
+
+//战队详情
+const CompetitionTeams = Loadable({
+	loader: () => import('./Competition_teams/Competitionteams'),
+	loading: Loading,
+})
+
+
 class Competitions extends Component {
 	constructor(props) {
 		super(props)
@@ -31,14 +45,28 @@ class Competitions extends Component {
 			<div className="newMain clearfix">
 
 				<Switch>
-					{/*新版竞赛首页*/}
+					{/*新版竞赛详情页面*/}
+					<Route path="/newcompetitions/:identifier/common_header"
+								 render={
+									 (props) => (<CompetitionCommon {...this.props} {...props} {...this.state} />)
+								 }
+					></Route>
 
+					{/*新版竞赛战队详情*/}
+					<Route path="/newcompetitions/competition_teams"
+								 render={
+									 (props) => (<CompetitionTeams {...this.props} {...props} {...this.state} />)
+								 }
+					></Route>
 
+					{/*新版竞赛首页*/}
 					<Route path="/newcompetitions"
 								 render={
 									 (props) => (<CompetitionsIndex {...this.props} {...props} {...this.state} />)
 								 }
 					></Route>
+
+
 				</Switch>
 
 			</div>