You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
151 lines
4.5 KiB
151 lines
4.5 KiB
import React,{ Component } from "react";
|
|
import { Input , Spin , Pagination } from "antd";
|
|
import './css/moopCases.css'
|
|
import '../courses/css/Courses.css'
|
|
|
|
import { ActionBtn , LinkAfterLogin } from 'educoder';
|
|
|
|
import axios from 'axios'
|
|
|
|
import NoneData from '../courses/coursesPublic/NoneData'
|
|
|
|
import mainImg from '../../images/moop_cases/teach_ex.jpg'
|
|
import CaseItem from './CaseItem'
|
|
|
|
|
|
|
|
|
|
const Search = Input.Search;
|
|
class CaseList extends Component{
|
|
constructor(props){
|
|
super(props);
|
|
this.state={
|
|
type:0,
|
|
search:undefined,
|
|
page:1,
|
|
pageSize:20,
|
|
libraries:undefined,
|
|
totalCount:undefined,
|
|
isSpin:false
|
|
}
|
|
}
|
|
|
|
componentDidMount = () =>{
|
|
let { type , search , page , pageSize } = this.state;
|
|
this.InitList(type,search,page,pageSize);
|
|
}
|
|
|
|
// 列表
|
|
InitList = (type,search,page,pageSize) =>{
|
|
let url = `/libraries.json`;
|
|
axios.get(url,{params:{
|
|
type:type == 0 ? undefined : "mine",
|
|
keyword:search,
|
|
page,
|
|
per_page:pageSize
|
|
}}).then((result)=>{
|
|
if(result){
|
|
this.setState({
|
|
libraries:result.data.libraries,
|
|
totalCount:result.data.count,
|
|
isSpin:false
|
|
})
|
|
}
|
|
}).catch((error)=>{
|
|
console.log(error);
|
|
})
|
|
}
|
|
|
|
// tab切换
|
|
changeType = (type) =>{
|
|
this.setState({
|
|
type,
|
|
page:1
|
|
})
|
|
let { search , page , pageSize } = this.state;
|
|
this.InitList(type,search,page,pageSize);
|
|
}
|
|
|
|
// 输入搜索内容
|
|
inputStudent=(e)=>{
|
|
this.setState({
|
|
search:e.target.value
|
|
})
|
|
}
|
|
|
|
// 搜索
|
|
searchInfo = () =>{
|
|
this.setState({
|
|
isSpin:true
|
|
})
|
|
let { type , search , pageSize } = this.state;
|
|
this.InitList( type , search , 1 , pageSize );
|
|
}
|
|
|
|
// 切换分页
|
|
onChangePage =(pageNumber)=>{
|
|
this.setState({
|
|
page:pageNumber
|
|
})
|
|
let { type , search , pageSize } = this.state;
|
|
this.InitList( type , search , pageNumber , pageSize );
|
|
}
|
|
|
|
render(){
|
|
let { type , search ,libraries , totalCount ,pageSize ,page } = this.state;
|
|
let { checkIfLogin } = this.props;
|
|
|
|
return(
|
|
<React.Fragment>
|
|
<img src={mainImg} width="100%" />
|
|
<div className="educontent">
|
|
<div className="edu-back-white mb30 mt30">
|
|
<p className="padding20-30 clearfix bor-bottom-greyE">
|
|
<span className="font-18 fl color-grey-3">教学案例</span>
|
|
<LinkAfterLogin {...this.props} to={'/moop_cases/new'} className="fr edu-default-btn edu-blueline-btn" checkProfileComplete = {true}
|
|
|
|
>发布案例</LinkAfterLogin>
|
|
{/* <ActionBtn style="colorBlue" className="fr" to="/moop_cases/new">发布案例</ActionBtn> */}
|
|
</p>
|
|
<div className="clearfix pl30 pr30">
|
|
<ul className="fl library_nav mt25">
|
|
<li className={type == 0 ? "active" :""} onClick={()=>this.changeType(0)}>
|
|
<a href="javascript:void(0)">全部</a>
|
|
</li>
|
|
{
|
|
checkIfLogin() &&
|
|
<li className={type == 1 ? "active" :""} onClick={()=>this.changeType(1)}>
|
|
<a href="javascript:void(0)">我的</a>
|
|
</li>
|
|
}
|
|
</ul>
|
|
<div className="fr mt16 mb16 searchView"style={{width:"300px"}}>
|
|
<Search
|
|
value={search}
|
|
placeholder="输入教学案例标题、作者、单位进行检索"
|
|
onInput={this.inputStudent}
|
|
onSearch={this.searchInfo}
|
|
></Search>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Spin size="large" spinning={this.state.isSpin}>
|
|
{
|
|
libraries && libraries.length > 0 && <CaseItem {...this.props} {...this.state} libraries={libraries}></CaseItem>
|
|
}
|
|
{
|
|
libraries && libraries.length == 0 && <div className="mb50"><NoneData></NoneData></div>
|
|
}
|
|
{
|
|
totalCount && totalCount > pageSize &&
|
|
<div className="mb50 edu-txt-center clearfix">
|
|
<Pagination defaultCurrent={page} current={page} pageSize={pageSize} showQuickJumper onChange={this.onChangePage} total={totalCount}></Pagination>
|
|
</div>
|
|
}
|
|
</Spin>
|
|
</div>
|
|
</React.Fragment>
|
|
)
|
|
}
|
|
}
|
|
export default CaseList |