Merge branch 'dev_aliyun' of https://bdgit.educoder.net/Hjqreturn/educoder into dev_aliyun
commit
38f15abb37
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 239 KiB |
@ -0,0 +1,48 @@
|
||||
import React,{ Component } from "react";
|
||||
import './css/moopCases.css'
|
||||
import '../courses/css/Courses.css'
|
||||
|
||||
import { getUrl } from 'educoder';
|
||||
|
||||
import Tags from './CaseTags'
|
||||
|
||||
class CaseItem extends Component{
|
||||
constructor(props){
|
||||
super(props);
|
||||
}
|
||||
|
||||
render(){
|
||||
let { libraries } = this.props;
|
||||
console.log(libraries)
|
||||
return(
|
||||
<div className="library-list-container">
|
||||
{
|
||||
libraries && libraries.map((item,key)=>{
|
||||
return(
|
||||
<li className="library_list_item">
|
||||
<img alt={item.id} className="mr15 mt3 radius4" height="90" src={getUrl(`${item.cover_url}`)} width="120" />
|
||||
<div className="flex1">
|
||||
<p className="clearfix mb25 lineh-40">
|
||||
<a href={`/moop_cases/${item.id}`} className="task-hide font-22 library_l_name">{item.title}</a>
|
||||
<span className="fl mt10"><Tags tags={item.tags}></Tags></span>
|
||||
</p>
|
||||
<p className="clearfix lineh-20">
|
||||
<span className="color-grey-3 mr10">{item.author_name}</span>
|
||||
<span className="color-grey-3 mr20">{item.author_school_name}</span>
|
||||
<span className="color-grey-c fr">
|
||||
<span className="color-grey-c mr20"><span className=" item-group-icon mr5"><i className="fa fa-eye"></i></span>{item.visited_count} 浏览</span>
|
||||
<span className="color-grey-c mr20"><span className=" item-group-icon mr5"><i className="fa fa-thumbs-o-up"></i></span>{item.praise_count} 赞</span>
|
||||
<span className="color-grey-c"><span className=" item-group-icon mr5"><i className="fa fa-download"></i></span>{item.download_count} 下载</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default CaseItem;
|
||||
@ -0,0 +1,134 @@
|
||||
import React,{ Component } from "react";
|
||||
import { Input , Spin , Pagination } from "antd";
|
||||
import './css/moopCases.css'
|
||||
import '../courses/css/Courses.css'
|
||||
|
||||
import { ActionBtn } 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
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
})
|
||||
}
|
||||
}).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 = () =>{
|
||||
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;
|
||||
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>
|
||||
<ActionBtn style="colorBlue" className="fr" onClick={() => this.addQuestion(null, Q_TYPE_SINGLE)}>发布案例</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>
|
||||
<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>
|
||||
{
|
||||
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>
|
||||
}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default CaseList
|
||||
@ -0,0 +1,26 @@
|
||||
import React,{ Component } from "react";
|
||||
import './css/moopCases.css'
|
||||
import '../courses/css/Courses.css'
|
||||
|
||||
class CaseTags extends Component{
|
||||
constructor(props){
|
||||
super(props);
|
||||
}
|
||||
|
||||
render(){
|
||||
let { tags } = this.props;
|
||||
return(
|
||||
<React.Fragment>
|
||||
{
|
||||
tags && tags.map((item,key)=>{
|
||||
return(
|
||||
<span key={key} className={item.name == "获奖案例" ? "edu-filter-btn fl cdefault edu-activity-red ml10" : "edu-filter-btn fl cdefault edu-activity-blue ml10"}>{item.name}</span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</React.Fragment>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
export default CaseTags;
|
||||
@ -0,0 +1,155 @@
|
||||
.winput-300-35{
|
||||
width: 300px;
|
||||
height: 35px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.library_nav li {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
margin-right: 30px;
|
||||
position: relative;
|
||||
color: #05101A;
|
||||
height: 40px;
|
||||
line-height: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.library_nav li.active a, .library_nav li:hover a{
|
||||
color: #4cacff!important;
|
||||
}
|
||||
.library_list {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.library_list_item:hover {
|
||||
box-shadow: 0px 4px 8px rgba(158,158,158,0.16);
|
||||
}
|
||||
.library_list_item {
|
||||
background: #fff;
|
||||
padding: 20px 30px;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
}
|
||||
.library_list_item .library_l_name {
|
||||
max-width: 600px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.edu-activity-red {
|
||||
background-color: #FC2B6A;
|
||||
color: #fff!important;
|
||||
cursor: pointer;
|
||||
border: 1px solid #FC2B6A;
|
||||
line-height: 17px;
|
||||
}
|
||||
.edu-activity-green {
|
||||
background-color: green;
|
||||
color: #fff!important;
|
||||
cursor: pointer;
|
||||
border: 1px solid green;
|
||||
line-height: 17px;
|
||||
}
|
||||
.edu-activity-blue {
|
||||
background-color: #4CACFF;
|
||||
color: #fff!important;
|
||||
cursor: pointer;
|
||||
border: 1px solid #4CACFF;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.pointsBtn {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background-color: #4cacff;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 2px 0;
|
||||
cursor: pointer;
|
||||
line-height: 22px;
|
||||
padding-top: 12px;
|
||||
}
|
||||
.pointedBtn{
|
||||
background: #BCD1E3;
|
||||
cursor: default
|
||||
}
|
||||
.pointsBtn span{
|
||||
display: block;
|
||||
}
|
||||
.upload_Title {
|
||||
position: relative;
|
||||
margin-right: 20px;
|
||||
float: left;
|
||||
line-height: 35px;
|
||||
font-size: 16px;
|
||||
width: 56px;
|
||||
color:rgba(0, 0, 0, 0.85);
|
||||
text-align: center
|
||||
}
|
||||
.upload_Title.must:before {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
color: #f5222d;
|
||||
font-size: 14px;
|
||||
font-family: SimSun, sans-serif;
|
||||
line-height: 1;
|
||||
content: '*';
|
||||
}
|
||||
.upload_Title:after{
|
||||
content: ':';
|
||||
position: relative;
|
||||
top: -0.5px;
|
||||
margin: 0 8px 0 2px;
|
||||
}
|
||||
.libraries_tab li {
|
||||
width: 120px;
|
||||
height: 35px;
|
||||
line-height: 33px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid #4C98FF;
|
||||
color: #4C98FF;
|
||||
cursor: pointer;
|
||||
margin-right: 30px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
.libraries_tab li.active {
|
||||
background: #4C98FF;
|
||||
color: #fff;
|
||||
}
|
||||
.librariesField .ant-upload{
|
||||
width: 100%;
|
||||
background: #F2F9FF;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: -webkit-flex;
|
||||
text-align: center;
|
||||
height: 120px!important;
|
||||
border-radius: 4px;
|
||||
border: 1px dashed #4cacff!important;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.uploadImage .ant-upload.ant-upload-select-picture-card{
|
||||
width:120px;
|
||||
height: 90px;
|
||||
}
|
||||
.uploadImage .ant-upload.ant-upload-select-picture-card > .ant-upload{
|
||||
padding:0px!important;
|
||||
}
|
||||
.successPage {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: -webkit-flex;
|
||||
height: 570px;
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.changebtn {
|
||||
width:166px;
|
||||
font-size: 16px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
}
|
||||
@ -0,0 +1,130 @@
|
||||
import React,{ Component } from "react";
|
||||
import './css/moopCases.css'
|
||||
import '../courses/css/Courses.css'
|
||||
|
||||
import { SnackbarHOC } from 'educoder';
|
||||
|
||||
import { TPMIndexHOC } from '../tpm/TPMIndexHOC';
|
||||
import { CNotificationHOC } from '../courses/common/CNotificationHOC'
|
||||
|
||||
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
|
||||
import Loading from '../../Loading';
|
||||
import Loadable from 'react-loadable';
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
const CaseList = Loadable({
|
||||
loader: () => import('./CaseList'),
|
||||
loading:Loading,
|
||||
})
|
||||
const CaseDetail = Loadable({
|
||||
loader: () => import('./CaseDetail'),
|
||||
loading:Loading,
|
||||
})
|
||||
const CaseNew = Loadable({
|
||||
loader: () => import('./CaseNew'),
|
||||
loading:Loading,
|
||||
})
|
||||
const CaseSuccess = Loadable({
|
||||
loader: () => import('./Success'),
|
||||
loading:Loading,
|
||||
})
|
||||
|
||||
|
||||
|
||||
class Index extends Component{
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state={
|
||||
praise_count:0,
|
||||
CaseDetail:undefined,
|
||||
cover:undefined,
|
||||
creator:undefined,
|
||||
operation:undefined,
|
||||
tags:undefined,
|
||||
attachments:undefined,
|
||||
user_praised:true,
|
||||
}
|
||||
}
|
||||
// 获取案例详情
|
||||
getDetail = (caseID) =>{
|
||||
let url=`/libraries/${caseID}.json`
|
||||
axios.get(url).then((result)=>{
|
||||
if(result){
|
||||
this.setState({
|
||||
CaseDetail:result.data,
|
||||
praise_count:result.data.praise_count,
|
||||
cover:result.data.cover,
|
||||
creator:result.data.creator,
|
||||
operation:result.data.operation,
|
||||
user_praised:result.data.operation.user_praised,
|
||||
tags:result.data.tags,
|
||||
attachments:result.data.attachments
|
||||
})
|
||||
}
|
||||
}).catch((error)=>{
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
// 点赞
|
||||
praisePoint=(caseID)=>{
|
||||
let { praise_count }=this.state;
|
||||
let url =`/praise_tread/like.json`;
|
||||
axios.post(url,{
|
||||
object_id:caseID,
|
||||
object_type:"library"
|
||||
}).then((result)=>{
|
||||
if(result){
|
||||
this.setState({
|
||||
praise_count: parseInt(praise_count)+1,
|
||||
user_praised:true
|
||||
})
|
||||
}
|
||||
}).catch((error)=>{
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
|
||||
render(){
|
||||
|
||||
return(
|
||||
<div className="newMain">
|
||||
<Switch {...this.props}>
|
||||
|
||||
<Route exact path="/moop_cases"
|
||||
render={
|
||||
(props) => (<CaseList {...this.props} {...props} {...this.state} />)
|
||||
}
|
||||
></Route>
|
||||
|
||||
<Route exact path="/moop_cases/new"
|
||||
render={
|
||||
(props) => (<CaseNew {...this.props} {...props} {...this.state} />)
|
||||
}
|
||||
></Route>
|
||||
|
||||
<Route exact path="/moop_cases/:caseID"
|
||||
render={
|
||||
(props) => (<CaseDetail {...this.props} {...props} {...this.state} getDetail={this.getDetail} praisePoint ={this.praisePoint}/>)
|
||||
}
|
||||
></Route>
|
||||
|
||||
|
||||
<Route exact path="/moop_cases/:caseID/edit"
|
||||
render={
|
||||
(props) => (<CaseNew {...this.props} {...props} {...this.state} getDetail={this.getDetail} />)
|
||||
}
|
||||
></Route>
|
||||
|
||||
<Route exact path="/moop_cases/:caseID/publish_success"
|
||||
render={
|
||||
(props) => (<CaseSuccess {...this.props} {...props} {...this.state} getDetail={this.getDetail} />)
|
||||
}
|
||||
></Route>
|
||||
|
||||
</Switch>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default CNotificationHOC() ( SnackbarHOC() ( TPMIndexHOC(Index) ));
|
||||
Loading…
Reference in new issue