educoder/public/react/src/modules/user/usersInfo/InfosPackage.js

import React, { Component } from 'react';
import { SnackbarHOC } from 'educoder';
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
import {Tooltip,Menu,Pagination,Spin} from 'antd';
import axios from 'axios';
import {getImageUrl} from 'educoder';
import NoneData from '../../courses/coursesPublic/NoneData'
import "./usersInfo.css"
import moment from 'moment';
let categorylist=[
	{name:"全部",value:undefined},
	{name:"前端开发",value:"front"},
	{name:"后端开发",value:"backend"},
	{name:"移动开发",value:"mobile"},
	{name:"数据库",value:"database"},
	{name:"云计算和大数据",value:"cloud_compute_and_big_data"},
	{name:"人工智能",value:"ai"},
	{name:"运维与测试",value:"devops_and_test"},
	{name:"其他",value:"other"},
]
//
function setcategorylist(val){
	let vals=""
	categorylist.some((item,key)=> {
			if (item.name === val) {
				vals=item.value
				return true
			}
		}
	)

	return vals
}
class InfosPackage extends Component{
	constructor(props){
		super(props);
		this.state={
			category:undefined,
			status:undefined,
			page:1,
			per_page:20,
			sort_direction:'desc',
			totalCount:undefined,
			data:undefined,
			isSpin:false
		}
	}

	componentDidMount=()=>{
		this.setState({
			isSpin:true
		})
		let{category,status,page}=this.state;
		this.getCourses(category,status,page);
	}

	getCourses=(category,status,page)=>{
		let url=`/users/${this.props.match.params.username}/project_packages.json`;
		axios.get((url),{params:{
				category,
				status,
				page,
				sort_by:"published_at",
				sort_direction:'desc',
				per_page:20
			}}).then((result)=>{
			if(result){
				this.setState({
					totalCount:result.data.count,
					data:result.data,
					isSpin:false
				})
			}
		}).catch((error)=>{
			console.log(error);
		})
	}

	//切换种类
	changeCategory=(cate)=>{
		this.setState({
			category:cate,
			page:1,
			isSpin:true
		})
		let{status}=this.state;
		this.getCourses(cate,status,1);
	}
	//切换状态
	changeStatus=(status)=>{
		this.setState({
			status:status,
			page:1,
			isSpin:true
		})
		let{category}=this.state;
		this.getCourses(category,status,1);
	}
	//切换页数
	changePage=(page)=>{
		this.setState({
			page,
			isSpin:true
		})
		let{category,status}=this.state;
		this.getCourses(category,status,page);
	}

	// 进入课堂
	turnToCourses=(url,flag)=>{
		if(flag){
			this.props.history.push(url);
		}
	}

	render(){
		let{
			category,
			status,
			page,
			data,
			totalCount,
			isSpin
		} = this.state;
		let  is_current=this.props.is_current;

		// console.log(data)
		return(
			<div className="educontent mb50">
				<Spin size="large" spinning={isSpin}>
					<div className="white-panel edu-back-white pt25 pb25 clearfix ">
						<li className={category ? "" : "active"}><a onClick={()=>this.changeCategory()}>全部</a></li>
						<li className={category=="manage" ? "active" : ""}><a onClick={()=>this.changeCategory("manage")}>{is_current ? "我":"TA"}管理的</a></li>
						<li className={category=="bidden" ? "active" : ""}><a onClick={()=>this.changeCategory("bidden")}>{is_current ? "我":"TA"}参与的</a></li>
					</div>
					{
						category=="manage"?
						<div className="edu-back-white padding20-30 clearfix secondNav bor-top-greyE">
							<li className={status ? "" : "active"}><a  onClick={()=>this.changeStatus()}>全部</a></li>
							<li className={status=="unpublished" ? "active" : ""}><a onClick={()=>this.changeStatus("unpublished")}>未发布</a></li>
							<li className={status=="bidding" ? "active" : ""}><a onClick={()=>this.changeStatus("bidding")}>竞标中</a></li>
					  	<li className={status=="finished" ? "active" : ""}><a onClick={()=>this.changeStatus("finished")}>已完成</a></li>
						</div>:	category=="bidden"?
							<div className="edu-back-white padding20-30 clearfix secondNav bor-top-greyE">
								<li className={status ? "" : "active"}><a onClick={()=>this.changeStatus()}>全部</a></li>
								<li className={status=="bidding_lost" ? "active" : ""}><a onClick={()=>this.changeStatus("bidding_lost")}>未中标</a></li>
								<li className={status=="bidding_won" ? "active" : ""}><a onClick={()=>this.changeStatus("bidding_won")}>已中标</a></li>
							</div>:""
					}
					<p className="pl25 pr25 clearfix font-12 mb20 mt20">
						<span className="fl color-grey-9">共{totalCount}个</span>
						<span className="fr color-grey-9">发布时间</span>
					</p>

					{/*bidden_status: "pending"*/}

					{/*category_id: 2*/}

					{/*status: "published"*/}

					{/*type: "bidden"*/}


					{data===undefined?<NoneData></NoneData>:data.project_packages.length===0?<NoneData></NoneData>:data.project_packages.map((item,key)=>{
					return(
						<div className="educontent project-packages-list" key={key}>
							<div className="project-package-item  project-package-11">
								<div className="item-image">
									<img alt="图片" src={`/images/educoder/project_packages/${setcategorylist(item.category_name)}.png`} />
								</div>
								<div className="item-body">
									<div className="item-head">
										<div className="item-head-title" title={item.title}>
											<a href={`/crowdsourcing/${item.id}`}>{item.title}</a>
										</div>
										<div className="item-head-tags">
										</div>
										<div className="item-head-blank"></div>
										<div className="item-head-price">
											{item.min_price===null?"":<span>￥{item.min_price}</span>}
											{item.max_price===null||item.min_price===null?"":<span>~</span>}
											{item.max_price===null?"":<span>￥{item.max_price}</span>}
											{item.min_price===null&&item.max_price===null?<span>可议价</span>:""}
										</div>
									</div>
									<div className="item-category">
										<div className="item-category-item">{item.category_name}</div>
									</div>
									<div className="item-other">
										<div className="item-group item-other-visit">
											<span className="item-group-icon"><i className="fa fa-eye"></i></span>
											<span className="item-group-text">{item.visit_count}人浏览</span>
										</div>
										<div className="item-group item-other-deadline">
											<span className="item-group-icon"><i className="fa fa-clock-o"></i></span>
											<span className="item-group-text">{moment(item.deadline_at).format("YYYY-MM-DD HH:mm")}竞标截止</span>
										</div>
										<div className="item-group item-other-bidding pagemancenter">
											<span className="item-group-icon"><i className="fa fa-user"></i></span>
											<span className="item-group-text">{item.bidding_users_count}人竞标</span>
										</div>
										<div className="item-group item-other-publish-at">
											发布于：{moment(item.published_at).format("YYYY-MM-DD HH:mm")}
										</div>
									</div>
								</div>
							</div>
						</div>
					)})}

					{
						totalCount >20 &&
						<div className="mt30 mb50 edu-txt-center">
							<Pagination showQuickJumper total={totalCount} onChange={this.changePage} pageSize={20} current={page}/>
						</div>
					}

				</Spin>
			</div>
		)
	}
}
export default InfosPackage;