dev_forum
杨树明 6 years ago
parent 99f8f0a58b
commit 04f9948acc

@ -1,192 +1,192 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { SnackbarHOC } from 'educoder'; import { SnackbarHOC } from 'educoder';
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom'; import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
import {Tooltip,Pagination,Spin} from 'antd'; import {Tooltip,Pagination,Spin} from 'antd';
import axios from 'axios'; import axios from 'axios';
import NoneData from '../../courses/coursesPublic/NoneData' import NoneData from '../../courses/coursesPublic/NoneData'
import {getImageUrl} from 'educoder'; import {getImageUrl} from 'educoder';
import "./usersInfo.css" import "./usersInfo.css"
import Create from './publicCreatNew' import Create from './publicCreatNew'
class InfosProject extends Component{ class InfosProject extends Component{
constructor(props){ constructor(props){
super(props); super(props);
this.state={ this.state={
category:undefined, category:undefined,
status:undefined, status:undefined,
page:1, page:1,
per_page:16, per_page:16,
totalCount:undefined, totalCount:undefined,
data:undefined, data:undefined,
isSpin:false isSpin:false
} }
} }
componentDidMount=()=>{ componentDidMount=()=>{
this.setState({ this.setState({
isSpin:true isSpin:true
}) })
let{category,status,page}=this.state; let{category,status,page}=this.state;
this.getCourses(category,status,page); this.getCourses(category,status,page);
} }
getCourses=(category,status,page)=>{ getCourses=(category,status,page)=>{
let url=`/users/${this.props.match.params.username}/projects.json`; let url=`/users/${this.props.match.params.username}/projects.json`;
axios.get((url),{params:{ axios.get((url),{params:{
category, category,
status, status,
page, page,
per_page:this.props.is_current && category && page ==1?17:16 per_page:this.props.is_current && category && page ==1?17:16
}}).then((result)=>{ }}).then((result)=>{
if(result){ if(result){
this.setState({ this.setState({
totalCount:result.data.count, totalCount:result.data.count,
data:result.data, data:result.data,
isSpin:false isSpin:false
}) })
} }
}).catch((error)=>{ }).catch((error)=>{
console.log(error); console.log(error);
}) })
} }
//切换种类 //切换种类
changeCategory=(cate)=>{ changeCategory=(cate)=>{
this.setState({ this.setState({
category:cate, category:cate,
page:1, page:1,
isSpin:true isSpin:true
}) })
let{status}=this.state; let{status}=this.state;
this.getCourses(cate,status,1); this.getCourses(cate,status,1);
} }
//切换状态 //切换状态
changeStatus=(status)=>{ changeStatus=(status)=>{
this.setState({ this.setState({
status:status, status:status,
page:1, page:1,
isSpin:true isSpin:true
}) })
let{category}=this.state; let{category}=this.state;
this.getCourses(category,status,1); this.getCourses(category,status,1);
} }
//切换页数 //切换页数
changePage=(page)=>{ changePage=(page)=>{
this.setState({ this.setState({
page, page,
isSpin:true isSpin:true
}) })
let{category,status}=this.state; let{category,status}=this.state;
this.getCourses(category,status,page); this.getCourses(category,status,page);
} }
// 进入项目 // 进入项目
turnToCourses=(url,flag)=>{ turnToCourses=(url,flag)=>{
if(flag){ if(flag){
this.props.history.push(url); this.props.history.push(url);
} }
} }
render(){ render(){
let{ let{
category, category,
status, status,
page, page,
data, data,
totalCount, totalCount,
isSpin isSpin
} = this.state; } = this.state;
let isStudent = this.props.isStudent(); let isStudent = this.props.isStudent();
let is_current=this.props.is_current; let is_current=this.props.is_current;
return( return(
<div className="educontent"> <div className="educontent">
<Spin size="large" spinning={isSpin}> <Spin size="large" spinning={isSpin}>
<div className="white-panel edu-back-white pt25 pb25 clearfix "> <div className="white-panel edu-back-white pt25 pb25 clearfix ">
<li className={category ? "" : "active"}><a href="javascript:void(0)" onClick={()=>this.changeCategory()}>全部</a></li> <li className={category ? "" : "active"}><a href="javascript:void(0)" onClick={()=>this.changeCategory()}>全部</a></li>
<li className={category=="manage" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeCategory("manage")}>{is_current ? "我":"TA"}管理的</a></li> <li className={category=="manage" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeCategory("manage")}>{is_current ? "我":"TA"}管理的</a></li>
<li className={category=="study" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeCategory("study")}>{is_current ? "我":"TA"}学习的</a></li> <li className={category=="study" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeCategory("study")}>{is_current ? "我":"TA"}学习的</a></li>
</div> </div>
{ {
is_current && is_current &&
<div className="edu-back-white padding20-30 clearfix secondNav bor-top-greyE"> <div className="edu-back-white padding20-30 clearfix secondNav bor-top-greyE">
<li className={status ? "" : "active"}><a href="javascript:void(0)" onClick={()=>this.changeStatus()}>全部</a></li> <li className={status ? "" : "active"}><a href="javascript:void(0)" onClick={()=>this.changeStatus()}>全部</a></li>
<li className={status=="publicly" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeStatus("publicly")}>公开</a></li> <li className={status=="publicly" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeStatus("publicly")}>公开</a></li>
<li className={status=="personal" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeStatus("personal")}>私有</a></li> <li className={status=="personal" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeStatus("personal")}>私有</a></li>
</div> </div>
} }
<p className="pl25 pr25 clearfix font-12 mb20 mt20"> <p className="pl25 pr25 clearfix font-12 mb20 mt20">
<span className="fl color-grey-9">共参与{totalCount}{category?category=="manage"?"发布":"学习":"项目"}</span> <span className="fl color-grey-9">共参与{totalCount}{category?category=="manage"?"发布":"学习":"项目"}</span>
<span className="fr color-grey-9">时间最新</span> <span className="fr color-grey-9">时间最新</span>
</p> </p>
<div className="square-list clearfix"> <div className="square-list clearfix">
{ {
!isStudent && page == 1 && !category && is_current && !isStudent && page == 1 && !category && is_current &&
<Create href={`${this.props.Headertop && this.props.Headertop.old_url}/projects/new`} name={"新建项目"} index="4"></Create> <Create href={`${this.props.Headertop && this.props.Headertop.old_url}/projects/new`} name={"新建项目"} index="4"></Create>
} }
{ {
(!data || data.projects.length==0) && (isStudent || category) && <NoneData></NoneData> (!data || data.projects.length==0) && (isStudent || category) && <NoneData></NoneData>
} }
{ {
data && data.projects && data.projects.map((item,key)=>{ data && data.projects && data.projects.map((item,key)=>{
return( return(
<div className="square-Item" onClick={()=>this.turnToCourses(`${this.props.Headertop && this.props.Headertop.old_url}/projects/${item.id}`,item.can_visited)} style={{"cursor": "pointer"}}> <div className="square-Item" onClick={()=>this.turnToCourses(`/projects/${item.id}`,item.can_visited)} style={{"cursor": "pointer"}}>
{ {
item.is_public==1 && item.is_public==1 &&
<React.Fragment> <React.Fragment>
<div className="publicpart"></div> <div className="publicpart"></div>
<span className="smalltrangle"></span> <span className="smalltrangle"></span>
<span className="publicword">公开</span> <span className="publicword">公开</span>
</React.Fragment> </React.Fragment>
} }
{ {
item.can_visited ==false? item.can_visited ==false?
<div className="closeSquare"> <div className="closeSquare">
<img src={getImageUrl("/images/educoder/icon/lockclose.svg")} className="mt80 mb25"/> <img src={getImageUrl("/images/educoder/icon/lockclose.svg")} className="mt80 mb25"/>
<p className="font-14 color-white">非成员不能访问</p> <p className="font-14 color-white">非成员不能访问</p>
</div>:"" </div>:""
} }
<div className="substance"> <div className="substance">
<p className="subName font-16"> <p className="subName font-16">
<span>{item.name}</span> <span>{item.name}</span>
</p> </p>
<span><img alt="用户" className="radius mt15" height="60" src={getImageUrl(`images/${item.owner.avatar_url}`)} width="60"/></span> <span><img alt="用户" className="radius mt15" height="60" src={getImageUrl(`images/${item.owner.avatar_url}`)} width="60"/></span>
<p className="font-14 mt10"><span>{item.owner.real_name}</span></p> <p className="font-14 mt10"><span>{item.owner.real_name}</span></p>
<p className="font-16 mb15 mt10 task-hide"><span className="color-grey-9">{item.owner.school_name}</span></p> <p className="font-16 mb15 mt10 task-hide"><span className="color-grey-9">{item.owner.school_name}</span></p>
</div> </div>
<div className="edu-txt-center course-bottom"> <div className="edu-txt-center course-bottom">
<div className="inline color-grey-6"> <div className="inline color-grey-6">
{ {
item.members_count> 0 && item.members_count> 0 &&
<span className="mr10 ml10 fl squareIconSpan"> <span className="mr10 ml10 fl squareIconSpan">
<i className="iconfont icon-chengyuan fl mr3" data-tip-down="成员"></i>{item.members_count}</span> <i className="iconfont icon-chengyuan fl mr3" data-tip-down="成员"></i>{item.members_count}</span>
} }
{ {
item.issues_count> 0 && item.issues_count> 0 &&
<span className="mr10 ml10 fl squareIconSpan"> <span className="mr10 ml10 fl squareIconSpan">
<i className="iconfont icon-issue fl mr3" data-tip-down="issues数"></i>{item.issues_count}</span> <i className="iconfont icon-issue fl mr3" data-tip-down="issues数"></i>{item.issues_count}</span>
} }
{ {
item.changesets_count> 0 && item.changesets_count> 0 &&
<span className="mr10 ml10 fl squareIconSpan"> <span className="mr10 ml10 fl squareIconSpan">
<i className="iconfont icon-banbenku fl mr3" data-tip-down="版本库"></i>{item.changesets_count}</span> <i className="iconfont icon-banbenku fl mr3" data-tip-down="版本库"></i>{item.changesets_count}</span>
} }
</div> </div>
</div> </div>
</div> </div>
) )
}) })
} }
</div> </div>
{ {
totalCount > 15 && totalCount > 15 &&
<div className="mt30 mb50 edu-txt-center"> <div className="mt30 mb50 edu-txt-center">
<Pagination showQuickJumper total={totalCount} onChange={this.changePage} pageSize={16} current={page}/> <Pagination showQuickJumper total={totalCount} onChange={this.changePage} pageSize={16} current={page}/>
</div> </div>
} }
</Spin> </Spin>
</div> </div>
) )
} }
} }
export default InfosProject; export default InfosProject;
Loading…
Cancel
Save