|
|
import React,{Component} from 'react';
|
|
|
import { Modal,Checkbox,Select,Input,Tooltip,Spin,Icon,Drawer,Dropdown,Menu,Breadcrumb,Pagination,Button} from "antd";
|
|
|
import axios from'axios';
|
|
|
import './Newshixunmodel.css';
|
|
|
const Search = Input.Search;
|
|
|
class NewShixunModel extends Component{
|
|
|
constructor(props){
|
|
|
super(props)
|
|
|
this.state={
|
|
|
diff:0,
|
|
|
shixun_list:undefined,
|
|
|
shixuns_count:undefined,
|
|
|
}
|
|
|
}
|
|
|
componentDidMount() {
|
|
|
console.log(this.props.type)
|
|
|
|
|
|
if(this.props.type==='shixun'){
|
|
|
let url="/shixuns/shixun_list.json"
|
|
|
axios.get(url).then((response) => {
|
|
|
|
|
|
if(response.data){
|
|
|
console.log(response.data);
|
|
|
if(response.data.status===0){
|
|
|
}
|
|
|
}
|
|
|
|
|
|
})
|
|
|
}else{
|
|
|
let url="/shixuns/shixun_list.json"
|
|
|
axios.get(url,{params:{
|
|
|
type:'all', //这是带过来的值
|
|
|
status:'all',
|
|
|
search:undefined,
|
|
|
diff:0,
|
|
|
order:'desc',
|
|
|
page:1,
|
|
|
limit:15,
|
|
|
}}).then((response) => {
|
|
|
|
|
|
if(response.data){
|
|
|
this.setState({
|
|
|
shixun_list:response.data.shixun_list,
|
|
|
shixuns_count:response.data.shixuns_count,
|
|
|
})
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
DropdownClick=(type)=>{
|
|
|
this.setState({
|
|
|
diff:type
|
|
|
})
|
|
|
}
|
|
|
|
|
|
ItsCourse=(item)=>{
|
|
|
return <Menu className={"inherits"}>
|
|
|
{item.map((list,key)=>{
|
|
|
return(
|
|
|
<Menu.Item key={key} id={list.id}>
|
|
|
{list.name}
|
|
|
</Menu.Item>
|
|
|
)
|
|
|
})}
|
|
|
</Menu>
|
|
|
}
|
|
|
render() {
|
|
|
|
|
|
let {diff,datas,shixun_list,shixuns_count}=this.state;
|
|
|
// let {visible,patheditarry}=this.props;
|
|
|
|
|
|
const menus = (
|
|
|
<Menu>
|
|
|
<Menu.Item>
|
|
|
<a onClick={()=>this.DropdownClick(0)}>
|
|
|
所有
|
|
|
</a>
|
|
|
</Menu.Item>
|
|
|
|
|
|
<Menu.Item >
|
|
|
<a onClick={()=>this.DropdownClick(1)} >
|
|
|
初级
|
|
|
</a>
|
|
|
</Menu.Item>
|
|
|
|
|
|
<Menu.Item>
|
|
|
<a onClick={()=>this.DropdownClick(2)}>
|
|
|
中级
|
|
|
</a>
|
|
|
</Menu.Item>
|
|
|
|
|
|
<Menu.Item>
|
|
|
<a onClick={()=>this.DropdownClick(3)}>
|
|
|
高级
|
|
|
</a>
|
|
|
</Menu.Item>
|
|
|
|
|
|
<Menu.Item>
|
|
|
<a onClick={()=>this.DropdownClick(4)}>
|
|
|
顶级
|
|
|
</a>
|
|
|
</Menu.Item>
|
|
|
</Menu>
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
return(
|
|
|
<div>
|
|
|
<style>
|
|
|
{
|
|
|
`body{ overflow: hidden !important; }
|
|
|
.ant-drawer-content{ overflow:auto !important; background: #f5f5f5; }
|
|
|
.yslbottomsj{position: absolute;bottom: -8px;}
|
|
|
`
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<Drawer
|
|
|
placement="top"
|
|
|
closable={false}
|
|
|
onClose={this.onClose}
|
|
|
destroyOnClose={true}
|
|
|
visible={true}
|
|
|
height={'100%'}
|
|
|
>
|
|
|
<div className={"clearfix educontent pr"}>
|
|
|
|
|
|
<div className={"square-list clearfix"}>
|
|
|
|
|
|
<div className="newshixunheadersear">
|
|
|
<div style={{height:"53px"}}></div>
|
|
|
<Search
|
|
|
style={{ width: "800px"}}
|
|
|
className="packinput"
|
|
|
placeholder="实训信息 / 院校名称 / 创建者"
|
|
|
value={this.state.keywords}
|
|
|
enterButton={<span>搜索</span>}
|
|
|
onInput={(e)=>this.setdatafunsval(e)}
|
|
|
onSearch={ (value)=>this.setdatafuns(value)} />
|
|
|
</div>
|
|
|
|
|
|
<div className="clearfix font-12 mt20 mb10">
|
|
|
|
|
|
<p className="font-12 ml5 fl">
|
|
|
|
|
|
<span className="fl color-grey-9 mr20">已选 <span className={"color-blue"}>6</span> 个实训</span>
|
|
|
<span className="fl color-grey-9 mr20">共 <span className={"color-blue"}>{shixuns_count===undefined?"":shixuns_count}</span> 个实训</span>
|
|
|
|
|
|
<span className="fl color-grey-9 pointer mr30">
|
|
|
<a className={" color-grey-6"}>学习人数</a>
|
|
|
<sapn className="relativef ml5 " onClick={()=>this.updatedlist(sort_by)}>
|
|
|
<i className={"iconfont icon-sanjiaoxing-up font-12 ntopsj color-grey-9 color-blue"}></i>
|
|
|
<i className={"iconfont icon-sanjiaoxing-down font-12 nyslbottomsj color-grey-9"}></i>
|
|
|
</sapn>
|
|
|
</span>
|
|
|
|
|
|
<Dropdown overlay={menus}>
|
|
|
<a className="ant-dropdown-link color-grey-6">
|
|
|
{diff===0?"所有":diff===1?"初级":diff===2?"中级":diff===3?"高级":diff===4?"顶级":""}<Icon type="down" className={"color-grey-6"}/>
|
|
|
</a>
|
|
|
</Dropdown>
|
|
|
</p>
|
|
|
|
|
|
<p className="font-12 alltopiscright ml25 fr">
|
|
|
<span className="fr mr30 topcsactive pointer color-grey-3">我的实训</span>
|
|
|
<span className="fr mr30 topcsactive pointer color-grey-3 color-blue">全部实训</span>
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
{/*author_name: "刘强"*/}
|
|
|
{/*author_school_name: "湖南工业大学"*/}
|
|
|
{/*challenge_names: ["打印输出 Hello World", "打印输出图形", "求3个数的最大值", "熟悉C语言调试过程"]*/}
|
|
|
{/*challenges_count: 4*/}
|
|
|
{/*content: {}*/}
|
|
|
{/*id: 1504*/}
|
|
|
{/*identifier: "tb7hw62n"*/}
|
|
|
{/*level: "初级"*/}
|
|
|
{/*study_count: 6002*/}
|
|
|
{/*subjects: [{id: 138, name: "C语言程序设计"}, {id: 180, name: "C语言程序设计（湖南师范大学）"}, {id: 211, name: "移动云启 —— C语言练习题库"}]*/}
|
|
|
{/*title: "C语言程序设计编辑与调试环境"*/}
|
|
|
{/*visits_count: 9419*/}
|
|
|
{shixun_list===undefined?"":shixun_list.length===0?"":shixun_list.map((item,key)=>{
|
|
|
console.log(item.content)
|
|
|
return(
|
|
|
<div className="mt20 edu-back-white pd20 relativef newshixunlist" key={key}>
|
|
|
<div className="clearfix">
|
|
|
<div className="item-body">
|
|
|
<div className="clearfix ds pr contentSection">
|
|
|
<a title={item.title} className="ml30 fl font-16 color-dark maxwidth900">
|
|
|
{item.title}
|
|
|
</a>
|
|
|
|
|
|
<div className="cl"></div>
|
|
|
<p className="newshixunmodelmidfont">
|
|
|
{/*{item.content}*/}
|
|
|
</p>
|
|
|
|
|
|
<p className="newshixunmodelbotfont">
|
|
|
{item.challenge_names.map((item,key)=>{
|
|
|
return(
|
|
|
<span>{item}</span>
|
|
|
)
|
|
|
})}
|
|
|
</p>
|
|
|
|
|
|
<div className={"newshixunpd030"}>
|
|
|
<div className="xuxianpro"></div>
|
|
|
</div>
|
|
|
|
|
|
<p className="color-grey panel-lightgrey fl ml30">
|
|
|
<style>
|
|
|
{`
|
|
|
.ant-breadcrumb-separator{
|
|
|
color: #D7D7D7 !important;
|
|
|
}
|
|
|
.panel-lightgrey, .panel-lightgrey span{
|
|
|
color: #999 !important;
|
|
|
}
|
|
|
.ant-breadcrumb-link{
|
|
|
margin-right:10px !important;
|
|
|
}
|
|
|
.ant-breadcrumb-separator{
|
|
|
margin-right:20px !important;
|
|
|
}
|
|
|
`}
|
|
|
</style>
|
|
|
<Breadcrumb separator="|">
|
|
|
<Breadcrumb.Item>{item.author_name}</Breadcrumb.Item>
|
|
|
<Breadcrumb.Item>{item.author_school_name}</Breadcrumb.Item>
|
|
|
<Breadcrumb.Item>难度系数：{item.level}</Breadcrumb.Item>
|
|
|
<Breadcrumb.Item>学习人数：{item.study_count}</Breadcrumb.Item>
|
|
|
</Breadcrumb>
|
|
|
|
|
|
</p>
|
|
|
{item.subjects.length===0?"":<Dropdown overlay={()=>this.ItsCourse(item.subjects)}>
|
|
|
<a className="ant-dropdown-link fl ml30 newshixunfont12 color-blue" >
|
|
|
所属课程<Icon className={"color-blue"} type="down" />
|
|
|
</a>
|
|
|
</Dropdown>}
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
)})
|
|
|
}
|
|
|
|
|
|
|
|
|
{shixun_list===undefined?"":shixuns_count>15?<div className={" edu-txt-center pd303010"}>
|
|
|
<Pagination
|
|
|
showQuickJumper
|
|
|
defaultCurrent={1}
|
|
|
pageSize={15}
|
|
|
total={shixuns_count===undefined?"":shixuns_count}
|
|
|
// current={page}
|
|
|
// onChange={this.PaginationCourse}
|
|
|
/>
|
|
|
</div>:""}
|
|
|
|
|
|
<div className={" edu-txt-center padding20-30"}>
|
|
|
<Button className={"mr20 newshixunmode"}>取消</Button>
|
|
|
<Button className={"newshixunmode"} type="primary">确定</Button>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</Drawer>
|
|
|
</div>
|
|
|
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export default NewShixunModel; |
