|
|
import React, {Component} from 'react';
|
|
|
import {Link} from "react-router-dom";
|
|
|
import axios from 'axios';
|
|
|
import { Input ,Icon,Button,Pagination,Spin} from 'antd';
|
|
|
import moment from 'moment';
|
|
|
import '../packageconcnet.css';
|
|
|
import AccountProfile from"../../user/AccountProfile";
|
|
|
import LoginDialog from '../../login/LoginDialog';
|
|
|
|
|
|
|
|
|
const { Search } = Input;
|
|
|
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 PackageConcent extends Component {
|
|
|
constructor(props) {
|
|
|
super(props)
|
|
|
this.state = {
|
|
|
data:undefined,
|
|
|
project_packages:undefined,
|
|
|
category:undefined,
|
|
|
keyword:undefined,
|
|
|
sort_by:"recently",
|
|
|
sort_direction:"desc",
|
|
|
page:1,
|
|
|
per_page:20,
|
|
|
categories:[],
|
|
|
isRender:false,
|
|
|
AccountProfiletype:false,
|
|
|
isSpin:false
|
|
|
}
|
|
|
}
|
|
|
//desc’, ‘desc’, ‘asc’
|
|
|
//否 string 排序，默认最新, ‘recently’, ‘price’
|
|
|
// 否 string 类型, front,backend,mobile,database, cloud_compute_and_big_data,devops_and_test,ai,other
|
|
|
componentDidMount() {
|
|
|
window.document.title = '众包创新'
|
|
|
let {category,keyword,sort_by,sort_direction,page}=this.state
|
|
|
this.setdatas(category,keyword,sort_by,sort_direction,page)
|
|
|
|
|
|
let Url = `/project_package_categories.json`;
|
|
|
axios.get(Url).then((response) => {
|
|
|
// console.log(response)
|
|
|
this.setState({
|
|
|
categories:response.data.categories
|
|
|
})
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
setdatas=(category,keyword,sort_by,sort_direction,page)=>{
|
|
|
this.setState({
|
|
|
isSpin:true
|
|
|
})
|
|
|
let Url = `/project_packages.json`;
|
|
|
axios.get(Url,{params:{
|
|
|
category_id:category,
|
|
|
keyword:keyword,
|
|
|
sort_by:sort_by,
|
|
|
sort_direction:sort_direction,
|
|
|
page:page,
|
|
|
per_page:20,
|
|
|
}}
|
|
|
).then((response) => {
|
|
|
this.setState({
|
|
|
data:response.data,
|
|
|
isSpin:false,
|
|
|
project_packages:response.data.project_packages
|
|
|
})
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
setdatafuns=(value)=>{
|
|
|
let {category,keyword,sort_by,sort_direction,page}=this.state
|
|
|
this.setState({
|
|
|
keyword:value
|
|
|
})
|
|
|
this.setdatas(category,value,sort_by,sort_direction,page)
|
|
|
}
|
|
|
|
|
|
|
|
|
setcategory=(value)=>{
|
|
|
let {category,keyword,sort_by,sort_direction,page}=this.state
|
|
|
this.setState({
|
|
|
category:value
|
|
|
})
|
|
|
this.setdatas(value,keyword,sort_by,sort_direction,page)
|
|
|
}
|
|
|
|
|
|
setsort_byfun=(value)=>{
|
|
|
let {category,keyword,sort_by,sort_direction,page}=this.state
|
|
|
|
|
|
this.setState({
|
|
|
sort_by:value
|
|
|
})
|
|
|
let sort_directionvalue;
|
|
|
if(value===sort_by){
|
|
|
if(sort_direction==="desc"){
|
|
|
this.setState({
|
|
|
sort_direction:"asc"
|
|
|
})
|
|
|
sort_directionvalue="asc";
|
|
|
}else{
|
|
|
this.setState({
|
|
|
sort_direction:"desc"
|
|
|
})
|
|
|
sort_directionvalue="desc";
|
|
|
}
|
|
|
}else{
|
|
|
this.setState({
|
|
|
sort_direction:"desc"
|
|
|
})
|
|
|
sort_directionvalue="desc";
|
|
|
}
|
|
|
|
|
|
this.setdatas(category,keyword,value,sort_directionvalue,page)
|
|
|
}
|
|
|
|
|
|
onReleaseRequirements=(url)=>{
|
|
|
|
|
|
let{current_user} =this.props;
|
|
|
if(current_user===undefined){
|
|
|
this.setState({
|
|
|
isRender:true
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
if(current_user&¤t_user.login===""){
|
|
|
this.setState({
|
|
|
isRender:true
|
|
|
})
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if(current_user&¤t_user.profile_completed===false){
|
|
|
this.setState({
|
|
|
AccountProfiletype:true
|
|
|
})
|
|
|
return;
|
|
|
}
|
|
|
if(url !== undefined || url!==""){
|
|
|
window.location.href = url;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// 登录
|
|
|
Modifyloginvalue=()=>{
|
|
|
this.setState({
|
|
|
isRender:false,
|
|
|
})
|
|
|
}
|
|
|
|
|
|
hideAccountProfile=()=>{
|
|
|
this.setState({
|
|
|
AccountProfiletype:false
|
|
|
})
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
let {data,page,category,sort_by,sort_direction,project_packages,
|
|
|
isRender,AccountProfiletype
|
|
|
}=this.state;
|
|
|
|
|
|
return (
|
|
|
<div className="educontent clearfix mtf10" style={{flex: "1 0 auto"}}>
|
|
|
{isRender===true?<LoginDialog
|
|
|
Modifyloginvalue={()=>this.Modifyloginvalue()}
|
|
|
{...this.state}
|
|
|
{...this.props}
|
|
|
/>:""}
|
|
|
|
|
|
{AccountProfiletype===true?<AccountProfile
|
|
|
hideAccountProfile={()=>this.hideAccountProfile()}
|
|
|
{...this.state}
|
|
|
{...this.props}
|
|
|
/>:""}
|
|
|
<div className="stud-class-set">
|
|
|
<div className="news">
|
|
|
<div className="edu-class-inner container clearfix">
|
|
|
<div className="member for-content-0 for-content">
|
|
|
<div className="people clearfix mb25">
|
|
|
|
|
|
|
|
|
{/*concent*/}
|
|
|
<div className="mb30">
|
|
|
<div className="clearfix">
|
|
|
<p className="clearfix" >
|
|
|
<p style={{height: '50px'}}>
|
|
|
<Search placeholder="输入标题名称进行检索"
|
|
|
|
|
|
className="packinput"
|
|
|
enterButton={<span><Icon type="search" className="mr5"/> 搜索</span>}
|
|
|
onSearch={ (value)=>this.setdatafuns(value)} />
|
|
|
<Button type="primary" className="setissues fr" size={"large"}>
|
|
|
<a onClick={()=>this.onReleaseRequirements("/crowdsourcing/new")}>发布需求</a>
|
|
|
</Button>
|
|
|
</p>
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div className="edu-back-white mb30">
|
|
|
<p className="clearfix padding30">
|
|
|
<p className="clearfix mb30 shaiContent">
|
|
|
<span className="shaiTitle fl mt3">类型：</span>
|
|
|
<div className="fl pr shaiAllItem pagetype">
|
|
|
<li className={category===undefined?"shaiItem shixun_repertoire active":"shaiItem shixun_repertoire"} onClick={()=>this.setcategory(undefined)}>全部</li>
|
|
|
{this.state.categories.map((item,key)=>{
|
|
|
return(
|
|
|
<li key={key} className={category===item.id?"shaiItem shixun_repertoire active":"shaiItem shixun_repertoire"} value={item.id} onClick={()=>this.setcategory(item.id)}>{item.name}</li>
|
|
|
)
|
|
|
})}
|
|
|
|
|
|
</div>
|
|
|
</p>
|
|
|
|
|
|
<p className="clearfix shaiContent">
|
|
|
<span className="shaiTitle fl mt3">排序：</span>
|
|
|
<div className="fl pr shaiAllItem">
|
|
|
<li className="shaiItem shixun_repertoire" value="recently" onClick={()=>this.setsort_byfun("recently")}>
|
|
|
<span className={sort_by==="recently"?"color-blue":""}>最新</span>
|
|
|
<sapn className="relativef">
|
|
|
<i className={sort_by==="recently"&&sort_direction==="asc"?
|
|
|
"iconfont icon-sanjiaoxing-up font-12 topsj color-blue" :"iconfont icon-sanjiaoxing-up font-12 topsj"}></i>
|
|
|
<i className={sort_by==="recently"&&sort_direction==="desc"?
|
|
|
"iconfont icon-sanjiaoxing-down font-12 bottomsj color-blue":"iconfont icon-sanjiaoxing-down font-12 bottomsj"}></i>
|
|
|
</sapn>
|
|
|
</li>
|
|
|
|
|
|
<li className="shaiItem shixun_repertoire " value="price" onClick={()=>this.setsort_byfun("price")}>
|
|
|
<span className={sort_by==="price"?"color-blue":""}>价格</span>
|
|
|
<sapn className="relativef">
|
|
|
<i className={sort_by==="price"&&sort_direction==="asc"?
|
|
|
"iconfont icon-sanjiaoxing-up font-12 topsj color-blue" :"iconfont icon-sanjiaoxing-up font-12 topsj"}></i>
|
|
|
<i className={sort_by==="price"&&sort_direction==="desc"?
|
|
|
"iconfont icon-sanjiaoxing-down font-12 bottomsj color-blue":"iconfont icon-sanjiaoxing-down font-12 bottomsj"}></i>
|
|
|
</sapn>
|
|
|
</li>
|
|
|
</div>
|
|
|
</p>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
<Spin size="large" spinning={this.state.isSpin}>
|
|
|
{project_packages&&project_packages.map((item,key)=>{
|
|
|
return(
|
|
|
<div className="educontent project-packages-list mb30" key={key}>
|
|
|
|
|
|
<div className="project-package-item">
|
|
|
|
|
|
<div className="item-image">
|
|
|
<img src={"/images/educoder/project_packages/"+setcategorylist(item.category_name)+".png"}/>
|
|
|
</div>
|
|
|
|
|
|
<div className=" item-body">
|
|
|
|
|
|
<div className=" item-head mbf10">
|
|
|
|
|
|
<div className=" item-head-title">
|
|
|
<a className={"fl mt3 font-20 font-bd color-dark maxwidth700 "}
|
|
|
onClick={()=>this.onReleaseRequirements("/crowdsourcing/"+item.id)}
|
|
|
title={item.title}
|
|
|
>{item.title}</a>
|
|
|
</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 mt10">
|
|
|
<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 mr10"><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 mr10"><i className="fa fa-clock-o"></i></span>
|
|
|
<span className=" item-group-text">{item.deadline_at}竞标截止</span>
|
|
|
|
|
|
</div>
|
|
|
<div className=" item-group item-other-bidding ml0 pagemancenter">
|
|
|
|
|
|
<span className=" item-group-icon mr10"><i className="fa fa-user" ></i></span>
|
|
|
<span className=" item-group-text">{item.bidding_users_count}人竞标</span>
|
|
|
|
|
|
</div>
|
|
|
{/*<div className=" item-other-blank"></div>*/}
|
|
|
<div className=" item-group item-other-publish-at">
|
|
|
{item.published_at===null?<span className="item-group-text">更新于：{moment(item.updated_at).format("YYYY-MM-DD HH:mm")} </span>:
|
|
|
<span className=" item-group-text">发布于：{moment(item.published_at).format("YYYY-MM-DD HH:mm")} </span>}
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
)
|
|
|
})}
|
|
|
</Spin>
|
|
|
{project_packages&&project_packages.length===0?<div className="edu-back-white">
|
|
|
<div className="edu-tab-con-box clearfix edu-txt-center">
|
|
|
<img className="edu-nodata-img mb20" src="https://www.educoder.net/images/educoder/nodata.png" />
|
|
|
<p className="edu-nodata-p mb20">暂无数据哦~</p></div>
|
|
|
</div>:""}
|
|
|
|
|
|
<div className={"mt40"}>
|
|
|
<Pagination className="edu-txt-center" hideOnSinglePage={true} pageSize={20} current={page} total={data&&data.count} />
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export default PackageConcent;
|
|
|
|
