dev_forum
parent
98c45b524a
commit
e51192ed5f
@ -1,203 +1,205 @@
|
|||||||
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,Menu,Pagination,Spin} from 'antd';
|
import {Tooltip,Menu,Pagination,Spin} from 'antd';
|
||||||
import Loadable from 'react-loadable';
|
import Loadable from 'react-loadable';
|
||||||
import Loading from '../../../Loading';
|
import Loading from '../../../Loading';
|
||||||
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 { TPMIndexHOC } from '../../tpm/TPMIndexHOC';
|
import { TPMIndexHOC } from '../../tpm/TPMIndexHOC';
|
||||||
import { CNotificationHOC } from '../../courses/common/CNotificationHOC'
|
import { CNotificationHOC } from '../../courses/common/CNotificationHOC'
|
||||||
import "./usersInfo.css"
|
import "./usersInfo.css"
|
||||||
import Create from './publicCreatNew'
|
import Create from './publicCreatNew'
|
||||||
|
|
||||||
class InfosCourse extends Component{
|
class InfosCourse 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}/courses.json`;
|
let url=`/users/${this.props.match.params.username}/courses.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(
|
|
||||||
<div className="educontent">
|
console.log(this.props.current_user&&this.props.current_user.user_identity==="学生")
|
||||||
<Spin size="large" spinning={isSpin}>
|
return(
|
||||||
<div className="white-panel edu-back-white pt25 pb25 clearfix ">
|
<div className="educontent">
|
||||||
<li className={category ? "" : "active"}><a href="javascript:void(0)" onClick={()=>this.changeCategory()}>全部</a></li>
|
<Spin size="large" spinning={isSpin}>
|
||||||
<li className={category=="manage" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeCategory("manage")}>{is_current ? "我":"TA"}管理的</a></li>
|
<div className="white-panel edu-back-white pt25 pb25 clearfix ">
|
||||||
<li className={category=="study" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeCategory("study")}>{is_current ? "我":"TA"}学习的</a></li>
|
<li className={category ? "" : "active"}><a href="javascript:void(0)" onClick={()=>this.changeCategory()}>全部</a></li>
|
||||||
</div>
|
<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>
|
||||||
is_current &&
|
</div>
|
||||||
<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>
|
is_current &&
|
||||||
<li className={status=="processing" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeStatus("processing")}>正在进行</a></li>
|
<div className="edu-back-white padding20-30 clearfix secondNav bor-top-greyE">
|
||||||
<li className={status=="end" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeStatus("end")}>已结束</a></li>
|
<li className={status ? "" : "active"}><a href="javascript:void(0)" onClick={()=>this.changeStatus()}>全部</a></li>
|
||||||
</div>
|
<li className={status=="processing" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeStatus("processing")}>正在进行</a></li>
|
||||||
}
|
<li className={status=="end" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeStatus("end")}>已结束</a></li>
|
||||||
<p className="pl25 pr25 clearfix font-12 mb20 mt20">
|
</div>
|
||||||
<span className="fl color-grey-9">共参与{totalCount}个{category?category=="manage"?"发布":"学习":"课堂"}</span>
|
}
|
||||||
<span className="fr color-grey-9">时间最新</span>
|
<p className="pl25 pr25 clearfix font-12 mb20 mt20">
|
||||||
</p>
|
<span className="fl color-grey-9">共参与{totalCount}个{category?category=="manage"?"发布":"学习":"课堂"}</span>
|
||||||
<div className="square-list clearfix">
|
<span className="fr color-grey-9">时间最新</span>
|
||||||
{
|
</p>
|
||||||
!isStudent && page == 1 && !category && is_current &&
|
<div className="square-list clearfix">
|
||||||
<Create href={"/courses/new"} name={"新建课堂"} index="1"></Create>
|
{
|
||||||
}
|
!isStudent && page == 1 && !category && is_current &&
|
||||||
{
|
this.props.current_user&&this.props.current_user.user_identity==="学生"?"":<Create href={"/courses/new"} name={"新建课堂"} index="1"></Create>
|
||||||
(!data || data.courses.length==0) && (isStudent || category) && <NoneData></NoneData>
|
}
|
||||||
}
|
{
|
||||||
{
|
(!data || data.courses.length==0) && (isStudent || category) && <NoneData></NoneData>
|
||||||
data && data.courses && data.courses.map((item,key)=>{
|
}
|
||||||
return(
|
{
|
||||||
<div className="square-Item" onClick={()=>this.turnToCourses(`${item.first_category_url}`,item.can_visited)} style={{"cursor": "pointer"}}>
|
data && data.courses && data.courses.map((item,key)=>{
|
||||||
{
|
return(
|
||||||
item.is_public == 1 &&
|
<div className="square-Item" onClick={()=>this.turnToCourses(`${item.first_category_url}`,item.can_visited)} style={{"cursor": "pointer"}}>
|
||||||
<React.Fragment>
|
{
|
||||||
<div className={key == 0 ?"publicpart orangeBlack":"publicpart"}></div>
|
item.is_public == 1 &&
|
||||||
<span className="smalltrangle"></span>
|
<React.Fragment>
|
||||||
<span className="publicword">公开</span>
|
<div className={key == 0 ?"publicpart orangeBlack":"publicpart"}></div>
|
||||||
</React.Fragment>
|
<span className="smalltrangle"></span>
|
||||||
}
|
<span className="publicword">公开</span>
|
||||||
{
|
</React.Fragment>
|
||||||
item.can_visited ==false?
|
}
|
||||||
<div className="closeSquare">
|
{
|
||||||
<img src={getImageUrl("/images/educoder/icon/lockclose.svg")} className="mt80 mb25"/>
|
item.can_visited ==false?
|
||||||
<p className="font-14 color-white">非成员不能访问</p>
|
<div className="closeSquare">
|
||||||
</div>:""
|
<img src={getImageUrl("/images/educoder/icon/lockclose.svg")} className="mt80 mb25"/>
|
||||||
}
|
<p className="font-14 color-white">非成员不能访问</p>
|
||||||
|
</div>:""
|
||||||
<div className="substance">
|
}
|
||||||
<p className="subName font-16">
|
|
||||||
<span>{item.name}</span>
|
<div className="substance">
|
||||||
</p>
|
<p className="subName font-16">
|
||||||
<span><img alt="用户" className="radius mt15" height="60" src={getImageUrl('images/'+`${item.teacher && item.teacher.avatar_url}`)} width="60"/></span>
|
<span>{item.name}</span>
|
||||||
<p className="font-14 mt10"><span>{item.teacher && item.teacher.real_name}</span></p>
|
</p>
|
||||||
<p className="font-16 mb15 task-hide mt10"><span className="color-grey-98">{item.teacher && item.teacher.school_name}</span></p>
|
<span><img alt="用户" className="radius mt15" height="60" src={getImageUrl('images/'+`${item.teacher && item.teacher.avatar_url}`)} width="60"/></span>
|
||||||
</div>
|
<p className="font-14 mt10"><span>{item.teacher && item.teacher.real_name}</span></p>
|
||||||
<div className="edu-txt-center course-bottom">
|
<p className="font-16 mb15 task-hide mt10"><span className="color-grey-98">{item.teacher && item.teacher.school_name}</span></p>
|
||||||
<div className="inline color-grey-6">
|
</div>
|
||||||
{
|
<div className="edu-txt-center course-bottom">
|
||||||
item.members_count > 0 &&
|
<div className="inline color-grey-6">
|
||||||
<Tooltip placement="bottom" title="成员">
|
{
|
||||||
<span className="fl ml10 mr10 squareIconSpan">
|
item.members_count > 0 &&
|
||||||
<i className="iconfont icon-chengyuan fl mr3" data-tip-down="成员"></i>{item.members_count}</span>
|
<Tooltip placement="bottom" title="成员">
|
||||||
</Tooltip>
|
<span className="fl ml10 mr10 squareIconSpan">
|
||||||
}
|
<i className="iconfont icon-chengyuan fl mr3" data-tip-down="成员"></i>{item.members_count}</span>
|
||||||
{
|
</Tooltip>
|
||||||
item.homework_commons_count > 0 &&
|
}
|
||||||
<Tooltip placement="bottom" title="作业">
|
{
|
||||||
<span className="fl ml10 mr10 squareIconSpan">
|
item.homework_commons_count > 0 &&
|
||||||
<i className="iconfont icon-zuoye fl mr3" data-tip-down="作业"></i>{item.homework_commons_count}</span>
|
<Tooltip placement="bottom" title="作业">
|
||||||
</Tooltip>
|
<span className="fl ml10 mr10 squareIconSpan">
|
||||||
}
|
<i className="iconfont icon-zuoye fl mr3" data-tip-down="作业"></i>{item.homework_commons_count}</span>
|
||||||
{
|
</Tooltip>
|
||||||
item.attachments_count > 0 &&
|
}
|
||||||
<Tooltip placement="bottom" title="资源">
|
{
|
||||||
<span className="fl ml10 mr10 squareIconSpan">
|
item.attachments_count > 0 &&
|
||||||
<i className="iconfont icon-ziyuan fl mr3" data-tip-down="资源"></i>{item.attachments_count}</span>
|
<Tooltip placement="bottom" title="资源">
|
||||||
</Tooltip>
|
<span className="fl ml10 mr10 squareIconSpan">
|
||||||
}
|
<i className="iconfont icon-ziyuan fl mr3" data-tip-down="资源"></i>{item.attachments_count}</span>
|
||||||
</div>
|
</Tooltip>
|
||||||
</div>
|
}
|
||||||
</div>
|
</div>
|
||||||
)
|
</div>
|
||||||
})
|
</div>
|
||||||
}
|
)
|
||||||
</div>
|
})
|
||||||
{
|
}
|
||||||
totalCount > 15 &&
|
</div>
|
||||||
<div className="mt30 mb50 edu-txt-center">
|
{
|
||||||
<Pagination showQuickJumper total={totalCount} onChange={this.changePage} pageSize={16} current={page}/>
|
totalCount > 15 &&
|
||||||
</div>
|
<div className="mt30 mb50 edu-txt-center">
|
||||||
}
|
<Pagination showQuickJumper total={totalCount} onChange={this.changePage} pageSize={16} current={page}/>
|
||||||
</Spin>
|
</div>
|
||||||
</div>
|
}
|
||||||
)
|
</Spin>
|
||||||
}
|
</div>
|
||||||
}
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
export default InfosCourse;
|
export default InfosCourse;
|
||||||
Loading…
Reference in new issue