|
|
import React,{ Component } from "react";
|
|
|
import { Modal,Radio,Input,Tooltip, Menu, Dropdown, Icon,Breadcrumb } from "antd";
|
|
|
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
|
|
|
import SendPanel from "./sendPanel.js";
|
|
|
import { getImageUrl } from 'educoder';
|
|
|
import axios from 'axios';
|
|
|
import Modals from '../../modals/Modals';
|
|
|
import OpenCourse from './OpenCourse';
|
|
|
import Jointheclass from '../../modals/Jointheclass'
|
|
|
import './DetailTop.css';
|
|
|
|
|
|
const Search = Input.Search;
|
|
|
const RadioGroup = Radio.Group;
|
|
|
class DetailTop extends Component{
|
|
|
constructor(props){
|
|
|
super(props)
|
|
|
this.state={
|
|
|
cardsModalcancel:this.cardsModalcancel,
|
|
|
cardsModalsave:this.cardsModalsave,
|
|
|
Modalstype:false,
|
|
|
Modalstopval:"",
|
|
|
Modalsbottomval:'',
|
|
|
loadtype:false,
|
|
|
deletepathtype:false,
|
|
|
cardsModalsavetype:false,
|
|
|
MenuItemskey:1,
|
|
|
courseslist:[],
|
|
|
Pathcourseid:undefined,
|
|
|
OpenCourseTypes:false
|
|
|
}
|
|
|
}
|
|
|
componentDidMount(){
|
|
|
let courseslist=[]
|
|
|
|
|
|
if(this.props.courses!=undefined&&this.props.courses.length!=0){
|
|
|
this.props.courses.map((item,key)=>{
|
|
|
if(1===key+1){
|
|
|
return(
|
|
|
courseslist.push(item)
|
|
|
)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
this.setState({
|
|
|
courseslist:courseslist
|
|
|
})
|
|
|
}
|
|
|
|
|
|
componentDidUpdate=(prevProps)=> {
|
|
|
if(prevProps.courses!=this.props.courses){
|
|
|
let courseslist=[]
|
|
|
|
|
|
if(this.props.courses!=undefined&&this.props.courses.length!=0){
|
|
|
this.props.courses.map((item,key)=>{
|
|
|
if(1===key+1){
|
|
|
return(
|
|
|
courseslist.push(item)
|
|
|
)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
this.setState({
|
|
|
courseslist:courseslist
|
|
|
})
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
allow_deletepath=()=>{
|
|
|
this.setState({
|
|
|
Modalstype:true,
|
|
|
Modalstopval:"是否删除路径?",
|
|
|
deletepathtype:true
|
|
|
})
|
|
|
}
|
|
|
|
|
|
applyissuePath=()=>{
|
|
|
this.setState({
|
|
|
Modalstype:true,
|
|
|
Modalstopval:"发布申请已提交，请等待管理员的审核",
|
|
|
Modalsbottomval:"• 我们将在1-2个工作日内完成审核",
|
|
|
loadtype:true
|
|
|
})
|
|
|
}
|
|
|
|
|
|
cancelissuePath=()=>{
|
|
|
let pathId=this.props.match.params.pathId;
|
|
|
let url ="/paths/"+pathId+"/cancel_publish.json";
|
|
|
axios.get(url).then((result)=>{
|
|
|
if(result.status===200){
|
|
|
if(result.data.status===0){
|
|
|
|
|
|
}else if(result.data.status===1){
|
|
|
window.location.href = "/paths/" + result.data.subject_id
|
|
|
}
|
|
|
}
|
|
|
}).catch((error)=>{
|
|
|
console.log(error);
|
|
|
})
|
|
|
}
|
|
|
|
|
|
reovkissuePath=()=>{
|
|
|
|
|
|
this.setState({
|
|
|
Modalstype:true,
|
|
|
Modalstopval:"是否确认撤销发布",
|
|
|
Modalsbottomval:"确认后，回退到编辑状态",
|
|
|
cardsModalsavetype:true,
|
|
|
})
|
|
|
|
|
|
}
|
|
|
reovkissuePaths=()=>{
|
|
|
let pathId=this.props.match.params.pathId;
|
|
|
let url ="/paths/"+pathId+"/cancel_has_publish.json";
|
|
|
axios.get(url).then((result)=>{
|
|
|
if(result.status===200){
|
|
|
if(result.data.status===0){
|
|
|
|
|
|
}else if(result.data.status===1){
|
|
|
this.setState({
|
|
|
cardsModalsavetype:false,
|
|
|
loadtype:false,
|
|
|
deletepathtype:false
|
|
|
})
|
|
|
window.location.href = "/paths/" + result.data.subject_id
|
|
|
}
|
|
|
}
|
|
|
}).catch((error)=>{
|
|
|
console.log(error);
|
|
|
})
|
|
|
}
|
|
|
|
|
|
cardsModalcancel=()=>{
|
|
|
this.setState({
|
|
|
Modalstype:false,
|
|
|
Modalsbottomval:'',
|
|
|
loadtype:false,
|
|
|
deletepathtype:false
|
|
|
})
|
|
|
}
|
|
|
|
|
|
cardsModalsave=()=>{
|
|
|
let {loadtype,deletepathtype}=this.state;
|
|
|
|
|
|
//删除路径
|
|
|
if(deletepathtype===true){
|
|
|
let pathid=this.props.match.params.pathId;
|
|
|
const deleteUrl = `/paths/`+pathid+`.json`;
|
|
|
axios.delete(deleteUrl).then((response) => {
|
|
|
const status = response.data.status
|
|
|
if (status === 1) {
|
|
|
window.location.href = "/paths";
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
//申请发布
|
|
|
if(loadtype===true){
|
|
|
|
|
|
let pathid=this.props.match.params.pathId;
|
|
|
let url ="/paths/"+pathid+"/publish.json";
|
|
|
axios.get(url).then((result)=>{
|
|
|
if(result.status===200){
|
|
|
if(result.data.status===0){
|
|
|
this.setState({
|
|
|
Modalstype:true,
|
|
|
Modalstopval: result.data.message,
|
|
|
})
|
|
|
}else if(result.data.status===1){
|
|
|
window.location.reload();
|
|
|
}
|
|
|
}
|
|
|
}).catch((error)=>{
|
|
|
console.log(error);
|
|
|
})
|
|
|
|
|
|
}
|
|
|
this.setState({
|
|
|
Modalstype:false,
|
|
|
Modalsbottomval:''
|
|
|
})
|
|
|
}
|
|
|
|
|
|
onVisibleChanges=(type)=>{
|
|
|
this.setState({
|
|
|
onVisibleChangestype:type
|
|
|
})
|
|
|
}
|
|
|
|
|
|
MenuItems=(keys)=>{
|
|
|
let courseslist=[]
|
|
|
this.props.courses.map((item,key)=>{
|
|
|
if(keys===key+1){
|
|
|
return(
|
|
|
courseslist.push(item)
|
|
|
)
|
|
|
}
|
|
|
})
|
|
|
this.setState({
|
|
|
MenuItemskey:keys,
|
|
|
courseslist:courseslist
|
|
|
})
|
|
|
}
|
|
|
|
|
|
JoinnowCourse=(id)=>{
|
|
|
|
|
|
if(this.props.checkIfLogin()===false){
|
|
|
this.props.showLoginDialog()
|
|
|
return
|
|
|
}
|
|
|
|
|
|
if(this.props.current_user&&this.props.current_user.profile_completed===false){
|
|
|
this.props.showProfileCompleteDialog()
|
|
|
return
|
|
|
}
|
|
|
|
|
|
|
|
|
this.setState({
|
|
|
yslJointhe:true,
|
|
|
Pathcourseid:id
|
|
|
})
|
|
|
}
|
|
|
ysljoinmodalCancel=()=>{
|
|
|
this.setState({
|
|
|
yslJointhe:false
|
|
|
})
|
|
|
};
|
|
|
ysljoinmodalCanceltwo=()=>{
|
|
|
this.setState({
|
|
|
yslJointhe:false
|
|
|
})
|
|
|
this.props.getdatasindex()
|
|
|
};
|
|
|
|
|
|
OpenCoursefun=()=>{
|
|
|
this.setState({
|
|
|
OpenCourseTypes:true
|
|
|
})
|
|
|
}
|
|
|
OpenCourseCancel=()=>{
|
|
|
this.setState({
|
|
|
OpenCourseTypes:false
|
|
|
})
|
|
|
}
|
|
|
render(){
|
|
|
let{detailInfoList}=this.props;
|
|
|
let{Modalstype,Modalstopval,cardsModalcancel,OpenCourseTypes,Modalsbottomval,cardsModalsavetype,loadtype}=this.state;
|
|
|
const radioStyle = {
|
|
|
display: 'block',
|
|
|
height: '30px',
|
|
|
lineHeight: '30px',
|
|
|
};
|
|
|
|
|
|
let menu = (
|
|
|
<Menu>
|
|
|
{this.props.courses===undefined||this.props.courses.length===0?"":this.props.courses.map((item,key)=>{
|
|
|
return(
|
|
|
<Menu.Item>
|
|
|
<a rel="noopener noreferrer" onClick={()=>this.MenuItems(key+1)}>
|
|
|
第{key+1}次开课
|
|
|
</a>
|
|
|
</Menu.Item>
|
|
|
)
|
|
|
})}
|
|
|
</Menu>
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
return(
|
|
|
|
|
|
<div className={this.props.courses===undefined||this.props.courses.length===0?"subhead":"subhead mb70"}>
|
|
|
<Modals
|
|
|
modalsType={Modalstype}
|
|
|
modalsTopval={Modalstopval}
|
|
|
modalsBottomval={Modalsbottomval}
|
|
|
modalCancel={cardsModalcancel}
|
|
|
modalSave={cardsModalsavetype===true?this.reovkissuePaths:this.cardsModalsave}
|
|
|
loadtype={loadtype}
|
|
|
>
|
|
|
</Modals>
|
|
|
{this.state.yslJointhe===true?<Jointheclass {...this.props} {...this.state} ysljoinmodalCancel={()=>this.ysljoinmodalCancel()} ysljoinmodalCanceltwo={()=>this.ysljoinmodalCanceltwo()}></Jointheclass>:""}
|
|
|
{this.state.OpenCourseTypes===true?<OpenCourse {...this.props} {...this.state} OpenCourseCancel={()=>this.OpenCourseCancel()}/>:""}
|
|
|
|
|
|
{
|
|
|
detailInfoList &&
|
|
|
<div className={this.props.courses===undefined||this.props.courses.length===0?"subhead_content":"subhead_content pt100"}>
|
|
|
<div className="font-28 color-white clearfix">
|
|
|
<Tooltip placement="bottom" title={detailInfoList.name.length>27?detailInfoList.name:""}>
|
|
|
<span className="fl lineh-40 bannername780">
|
|
|
{detailInfoList.name}
|
|
|
</span>
|
|
|
</Tooltip>
|
|
|
|
|
|
<style>
|
|
|
{
|
|
|
`
|
|
|
.pathoranges .tag-name{
|
|
|
display: block;
|
|
|
width: auto;
|
|
|
background-color: #FF6800;
|
|
|
background-size: 100% 100%;
|
|
|
padding: 0px 4px;
|
|
|
color: #fff;
|
|
|
float: left;
|
|
|
height: 28px;
|
|
|
line-height: 28px;
|
|
|
font-size: 14px;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
`
|
|
|
}
|
|
|
</style>
|
|
|
{detailInfoList===undefined?"":detailInfoList.excellent === false ? "" :
|
|
|
<span className="pathoranges">
|
|
|
<span className="tag-name mt6 ml10">开放课程</span>
|
|
|
</span>}
|
|
|
{detailInfoList===undefined?"":detailInfoList.allow_statistics===true?
|
|
|
<Tooltip placement="bottom" title={"编辑"}>
|
|
|
<Link to={"/paths/"+this.props.match.params.pathId+"/edit"} className="ml10 ring-green fl mt10" >
|
|
|
<img src={getImageUrl("images/educoder/icon/edit.svg")} className="fl mt3 ml2" />
|
|
|
</Link>
|
|
|
</Tooltip>
|
|
|
:""
|
|
|
}
|
|
|
|
|
|
{detailInfoList===undefined?"":detailInfoList.allow_statistics===true?this.props.courses===undefined?
|
|
|
<Link to={"/paths/"+this.props.match.params.pathId+"/statistics"} className="user_default_btn edu-greenback-btn fr font-18"
|
|
|
>
|
|
|
学习统计
|
|
|
</Link>:"":""
|
|
|
}
|
|
|
|
|
|
{ detailInfoList.allow_send === true?this.props.courses===undefined?
|
|
|
<SendPanel {...this.props} {...this.state}></SendPanel>:"":""
|
|
|
}
|
|
|
<div className="fr pr">
|
|
|
{this.props.courses===undefined?"":detailInfoList.is_creator===true?<a className={"fl font-18 color-white mt5 kaike mr20"} onClick={()=>this.OpenCoursefun()}>开课</a>:""}
|
|
|
{detailInfoList===undefined?"":detailInfoList.allow_statistics===true?this.props.courses===undefined?"":<Link to={"/paths/"+this.props.match.params.pathId+"/statistics"} className="fl font-18 color-white mt5 kaike">
|
|
|
学习统计
|
|
|
</Link>:""
|
|
|
}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="clearfix mt20">
|
|
|
{
|
|
|
detailInfoList &&
|
|
|
<ul className="fl color-grey-eb pathInfo">
|
|
|
{ detailInfoList.stages_count!=0 ? <li><span>章节</span><span className="ml5">{detailInfoList.stages_count}</span></li> : ""}
|
|
|
{ detailInfoList.shixuns_count!=0 ? <li><span>实训</span><span className="ml5">{ detailInfoList.shixuns_count}</span></li> : ""}
|
|
|
{ detailInfoList.challenge_choose_count!=0 ? <li><span>选择题任务</span><span>{detailInfoList.challenge_choose_count}</span></li> : ""}
|
|
|
{ detailInfoList.challenges_count!=0 ? <li><span>实践任务</span><span>{detailInfoList.challenges_count}</span></li> : ""}
|
|
|
{ detailInfoList.subject_score!=0 ? <li><span>经验值</span><span>{detailInfoList.subject_score}</span></li> : ""}
|
|
|
{ detailInfoList.member_count!=0 ? <li><span>学习人数</span><span>{detailInfoList.member_count}</span></li> : ""}
|
|
|
</ul>
|
|
|
}
|
|
|
<div className="fr pr">
|
|
|
{detailInfoList===undefined?"":detailInfoList.allow_delete===true?<a
|
|
|
className={detailInfoList.publish_status===-1?"fl font-18 color-white mt5 mr20":"fl font-18 color-white mt5"}
|
|
|
style={{opacity: '0.6'}} onClick={this.allow_deletepath}
|
|
|
>删除课程</a>:""}
|
|
|
|
|
|
{
|
|
|
detailInfoList.publish_status===0&&detailInfoList.allow_add_member===true?
|
|
|
<a className="user_default_btn user_bluebg_btn font-18 fl ml40 userbluebgfont" onClick={this.applyissuePath}>申请发布</a>:""
|
|
|
}
|
|
|
|
|
|
|
|
|
{
|
|
|
detailInfoList.publish_status===1 && detailInfoList.allow_statistics===true?
|
|
|
<a className="user_default_btn user_grey_btn font-18 fl pointer ml40" onClick={this.cancelissuePath}>撤销申请</a>:""
|
|
|
}
|
|
|
|
|
|
{
|
|
|
detailInfoList.publish_status===2 && detailInfoList.allow_statistics===true?
|
|
|
<a className="user_default_btn user_grey_btn font-18 fl pointer ml40" onClick={this.reovkissuePath}>撤销发布</a>:""
|
|
|
}
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
{this.props.courses===undefined||this.props.courses.length===0?"":<div className="userNavs mt20">
|
|
|
|
|
|
<li className={"fl pd4020"}>
|
|
|
<style>
|
|
|
{
|
|
|
`
|
|
|
.anticon-down{
|
|
|
font-size:14px !important;
|
|
|
transform:none !important;
|
|
|
}
|
|
|
.ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover {
|
|
|
background-color: rgba(240,240,240,1);
|
|
|
}
|
|
|
.alist{
|
|
|
color:#000;
|
|
|
}
|
|
|
.alist:hover{
|
|
|
color:#000;
|
|
|
}
|
|
|
.aIcons{
|
|
|
color:#CDCDCD;
|
|
|
}
|
|
|
`
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
|
|
|
{this.props.courses===undefined?"":detailInfoList.is_creator===true?this.state.courseslist.map((item,key)=>{
|
|
|
return(
|
|
|
<Tooltip placement="bottom" title={"编辑课堂"} key={key}>
|
|
|
<a href={`/courses/${item.course_id}/newgolds/settings`} target={"_blank"}>
|
|
|
<i className="iconfont icon-bianji1 newbianji1"></i>
|
|
|
</a>
|
|
|
</Tooltip>
|
|
|
)}):""
|
|
|
}
|
|
|
|
|
|
|
|
|
<Dropdown
|
|
|
overlay={menu}
|
|
|
onVisibleChange={this.onVisibleChanges}
|
|
|
>
|
|
|
<a className={"alist"}>
|
|
|
第<span className={"color-orange"}>{this.state.MenuItemskey}</span>次开课 <Icon className="aIcons" type={!this.state.onVisibleChangestype?"down":"up"} />
|
|
|
</a>
|
|
|
</Dropdown>
|
|
|
</li>
|
|
|
<style>
|
|
|
{
|
|
|
`
|
|
|
.pdt28{
|
|
|
padding-top: 28px;
|
|
|
}
|
|
|
.ml23{
|
|
|
margin-left:23px;
|
|
|
}
|
|
|
.pathtime{
|
|
|
color: #9B9B9B;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
.pathtimes{
|
|
|
color: #05101A;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
`
|
|
|
}
|
|
|
</style>
|
|
|
<li className={"ml20"}>
|
|
|
{this.state.courseslist.map((item,key)=>{
|
|
|
return(
|
|
|
<div className={"ant-breadcrumb pdt28"} key={key}>
|
|
|
<span>
|
|
|
<div className="ant-breadcrumb-link fl mr23">
|
|
|
<div className={"pathtime"}>
|
|
|
开课时间：
|
|
|
</div>
|
|
|
<div className={"pathtimes"}>
|
|
|
{item.start_date}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="fl solidright"></div>
|
|
|
</span>
|
|
|
|
|
|
<span>
|
|
|
<div className="ant-breadcrumb-link fl mr23 ml23">
|
|
|
<div className={"pathtime"}>
|
|
|
结课时间：
|
|
|
</div>
|
|
|
<div className={"pathtimes"}>
|
|
|
{item.end_date}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="fl solidright"></div>
|
|
|
</span>
|
|
|
|
|
|
<span>
|
|
|
<div className="ant-breadcrumb-link fl mr23 ml23">
|
|
|
<div className={"pathtime"}>
|
|
|
报名人数：
|
|
|
</div>
|
|
|
<div className={"pathtimes"}>
|
|
|
{item.student_count}人
|
|
|
</div>
|
|
|
</div>
|
|
|
</span>
|
|
|
</div>
|
|
|
)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li className={"fr mr25"}>
|
|
|
<style>
|
|
|
{
|
|
|
`
|
|
|
.user-colorgrey-9b{color:#9B9B9B}
|
|
|
.user-colorgrey-green{color:#7ED321}
|
|
|
.background191{
|
|
|
background: rgba(191,191,191,1) !important;
|
|
|
color: #fff;
|
|
|
}
|
|
|
.mr51{
|
|
|
margin-right: 51px;
|
|
|
}
|
|
|
.pathbtens{
|
|
|
width: 150px !important;
|
|
|
height: 44px !important;
|
|
|
line-height: 44px !important;
|
|
|
}
|
|
|
.pathdefault{
|
|
|
cursor: default !important;
|
|
|
}
|
|
|
`
|
|
|
}
|
|
|
</style>
|
|
|
{this.state.courseslist.map((item,key)=>{
|
|
|
|
|
|
return(
|
|
|
<div key={key}>
|
|
|
{item.course_status.status===0?<div className="mr51 shixun_detail pointer fl user-colorgrey-green pathdefault">即将开课</div>:""}
|
|
|
{item.course_status.status===1?<div className="mr51 shixun_detail pointer fl color-orange pathdefault">{item.course_status.time}</div>:""}
|
|
|
{item.course_status.status===2?
|
|
|
detailInfoList.is_creator===true||detailInfoList.allow_add_member===true?<div className="mr51 shixun_detail pointer fl user-colorgrey-9b pathdefault">已结束</div>:item.course_identity<6?
|
|
|
<div className="mr51 shixun_detail pointer fl user-colorgrey-9b pathdefault">已结束</div>:"":""}
|
|
|
|
|
|
{item.course_status.status===0?
|
|
|
detailInfoList.is_creator===true||detailInfoList.allow_add_member===true?<a className="fr user_default_btn task-btn-orange font-18 mt28 pathbtens" href={item.first_category_url} target="_blank">
|
|
|
进入课堂
|
|
|
</a>:item.course_identity<6?<div className="fr user_default_btn background191 font-18 mt28 pathbtens pathdefault">报名成功</div>
|
|
|
:<a className="fr user_default_btn task-btn-orange font-18 mt28 pathbtens" onClick={()=>this.JoinnowCourse(item.course_id)}>立即报名</a>:""}
|
|
|
|
|
|
{item.course_status.status===1?
|
|
|
detailInfoList.is_creator===true||detailInfoList.allow_add_member===true?<a className="fr user_default_btn task-btn-orange font-18 mt28 pathbtens" onClick={()=>this.JoinnowCourse(item.course_id)}>
|
|
|
进入课堂
|
|
|
</a>:item.course_identity<6?<a className="fr user_default_btn task-btn-orange font-18 mt28 pathbtens" href={item.first_category_url} target="_blank">
|
|
|
立即学习
|
|
|
</a>:<a className="fr user_default_btn task-btn-orange font-18 mt28 pathbtens" onClick={()=>this.JoinnowCourse(item.course_id)}>立即加入</a>:""}
|
|
|
|
|
|
{item.course_status.status===2?
|
|
|
detailInfoList.is_creator===true||detailInfoList.allow_add_member===true?<a className="fr user_default_btn task-btn-orange font-18 mt28 pathbtens" href={item.first_category_url} target="_blank">
|
|
|
进入课堂
|
|
|
</a>:item.course_identity<6?<a className="fr user_default_btn task-btn-orange font-18 mt28 pathbtens" href={item.first_category_url} target="_blank">
|
|
|
进入课堂
|
|
|
</a>:<div className="fr user_default_btn background191 font-18 mt28 pathbtens pathdefault">已结束</div>:""}
|
|
|
|
|
|
</div>
|
|
|
)})}
|
|
|
|
|
|
|
|
|
</li>
|
|
|
</div>}
|
|
|
|
|
|
</div>
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
export default DetailTop; |
