|
|
import React, { Component } from 'react';
|
|
|
import {getImageUrl} from 'educoder';
|
|
|
import { Tooltip,Modal,Icon,Spin,message} from 'antd';
|
|
|
import '../../paths/ShixunPaths.css';
|
|
|
import axios from 'axios';
|
|
|
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
|
|
|
|
|
|
class YslDetailCards extends Component{
|
|
|
constructor(props){
|
|
|
super(props)
|
|
|
this.state={
|
|
|
showparagraph:false,
|
|
|
showparagraphkey:"",
|
|
|
showparagraphindex:"",
|
|
|
shixunsreplace:false,
|
|
|
hidestartshixunsreplacevalue:"",
|
|
|
shixunsmessage:"",
|
|
|
startshixunCombattype:false,
|
|
|
isSpin:false,
|
|
|
}
|
|
|
}
|
|
|
|
|
|
showparagraph =(key,index)=>{
|
|
|
this.setState({
|
|
|
showparagraph:true,
|
|
|
showparagraphkey:key,
|
|
|
showparagraphindex:index
|
|
|
})
|
|
|
};
|
|
|
hideparagraph=()=>{
|
|
|
this.setState({
|
|
|
showparagraph:false
|
|
|
})
|
|
|
};
|
|
|
startgameid=(id)=>{
|
|
|
// 上面传过来的方法是用来没登入弹出弹框的
|
|
|
try {
|
|
|
let {userlogin} = this.props;
|
|
|
if (userlogin === undefined) {
|
|
|
this.props.Tojoinclass();
|
|
|
return
|
|
|
}
|
|
|
if (userlogin === "") {
|
|
|
this.props.Tojoinclass();
|
|
|
return;
|
|
|
}
|
|
|
}catch (e) {
|
|
|
|
|
|
}
|
|
|
|
|
|
try {
|
|
|
if(this.props.isNotMember()===true){
|
|
|
//这个是外部传过来的
|
|
|
this.props.Startlearningtwo();
|
|
|
return
|
|
|
}
|
|
|
}catch (e) {
|
|
|
|
|
|
}
|
|
|
|
|
|
let url = "/shixuns/" + id + "/shixun_exec.json";
|
|
|
axios.get(url).then((response) => {
|
|
|
|
|
|
if (response.data.status === -2) {
|
|
|
this.setState({
|
|
|
|
|
|
shixunsreplace:true,
|
|
|
hidestartshixunsreplacevalue:response.data.message+".json"
|
|
|
})
|
|
|
} else if (response.data.status === -1) {
|
|
|
console.log(response)
|
|
|
}else if(response.data.status===-3){
|
|
|
this.setState({
|
|
|
shixunsmessage:response.data.message,
|
|
|
startshixunCombattype:true,
|
|
|
})
|
|
|
} else {
|
|
|
console.log("开始学习了");
|
|
|
window.open("/tasks/" + response.data.game_identifier,'_blank');
|
|
|
//这个是传过来 调用刷新
|
|
|
this.props.Myreload();
|
|
|
// window.location.href = path
|
|
|
// let path="/tasks/"+response.data.game_identifier;
|
|
|
// this.props.history.push(path);
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
componentDidMount(){
|
|
|
}
|
|
|
|
|
|
|
|
|
hidestartshixunsreplace=(url)=>{
|
|
|
this.setState({
|
|
|
isSpin:true,
|
|
|
})
|
|
|
axios.get(url).then((response) => {
|
|
|
// debugger
|
|
|
if(response.status===200){
|
|
|
// let path="/shixuns/"+response.data.shixun_identifier+"/challenges";
|
|
|
// this.props.history.push(path);
|
|
|
message.success('重置成功，正在进入实训！');
|
|
|
this.startgameid(response.data.shixun_identifier);
|
|
|
this.setState({
|
|
|
shixunsreplace:false,
|
|
|
isSpin:false,
|
|
|
startbtn:false,
|
|
|
})
|
|
|
|
|
|
// message.success('重置成功，正在进入实训！');
|
|
|
// this.startshixunCombat();
|
|
|
}}
|
|
|
).catch((error) => {
|
|
|
this.setState({
|
|
|
isSpin:false,
|
|
|
shixunsreplace:false,
|
|
|
})
|
|
|
});
|
|
|
|
|
|
}
|
|
|
hidestartshixunCombattype=()=>{
|
|
|
this.setState({
|
|
|
startshixunCombattype:false
|
|
|
})
|
|
|
}
|
|
|
|
|
|
render(){
|
|
|
let{showparagraph,showparagraphkey,showparagraphindex,hidestartshixunsreplacevalue} =this.state;
|
|
|
let { stages }=this.props;
|
|
|
const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
|
|
|
return(
|
|
|
<div className="lesson-saved-list">
|
|
|
<Modal
|
|
|
keyboard={false}
|
|
|
title="提示"
|
|
|
visible={this.state.startshixunCombattype}
|
|
|
closable={false}
|
|
|
footer={null}
|
|
|
>
|
|
|
<div className="task-popup-content">
|
|
|
<p className="task-popup-text-center font-16 pb20">本实训的开启时间：{this.state.shixunsmessage} <br/>开启时间之前不能挑战 </p>
|
|
|
</div>
|
|
|
<div className="task-popup-submit clearfix">
|
|
|
{/*<a onClick={this.hidestartshixunCombattype} className="task-btn fl">取消</a>*/}
|
|
|
<a className="task-btn task-btn-orange fr"
|
|
|
style={{marginRight:'51px'}}
|
|
|
onClick={this.hidestartshixunCombattype}>知道了</a>
|
|
|
</div>
|
|
|
{/*<p className="inviteTipbtn with100 fl">*/}
|
|
|
{/*<a onClick={this.hidestartshixunCombattype}>知道了</a>*/}
|
|
|
{/*</p>*/}
|
|
|
</Modal>
|
|
|
<Modal
|
|
|
keyboard={false}
|
|
|
title="提示"
|
|
|
visible={this.state.shixunsreplace}
|
|
|
closable={false}
|
|
|
footer={null}
|
|
|
>
|
|
|
<Spin indicator={antIcon} spinning={this.state.isSpin}>
|
|
|
<div className="task-popup-content">
|
|
|
<p className="task-popup-text-center font-16 pb20">实训已经更新了，正在为您重置!</p>
|
|
|
</div>
|
|
|
<div className="task-popup-submit clearfix">
|
|
|
<a className="task-btn task-btn-orange fr"
|
|
|
style={{marginRight:'51px'}}
|
|
|
onClick={() => this.hidestartshixunsreplace(hidestartshixunsreplacevalue)}>知道了</a>
|
|
|
</div>
|
|
|
</Spin>
|
|
|
</Modal>
|
|
|
<style>{
|
|
|
`
|
|
|
.lesson-saved-list-item {
|
|
|
border-bottom: none!important;
|
|
|
margin-bottom: 20px;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
`
|
|
|
}</style>
|
|
|
{
|
|
|
stages && stages.map((item,key)=>{
|
|
|
|
|
|
return(
|
|
|
<div className={"lesson-saved-list-item"} key={key} id={"stage_div_"+key} >
|
|
|
<p className="clearfix title-line">
|
|
|
|
|
|
<a className="fl ring-blue mr10 mt2">
|
|
|
<img src={getImageUrl("images/educoder/icon/charpter-white.svg")} className="fl ml3 mt3"/>
|
|
|
</a>
|
|
|
<span className="font-18 font-bd lessonvalue" title={item.stage_name}>{item.stage_name}</span>
|
|
|
|
|
|
</p>
|
|
|
<div className="detail_for_paragraph clearfix" id={"detail_for_paragraph_"+key}>
|
|
|
<p className="color-dark-grey mt20 mb25 ml20 mr20 pl28 justify font-15">{item.stage_description}</p>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
{
|
|
|
item.shixuns_list && item.shixuns_list.map((line,index)=>{
|
|
|
return(
|
|
|
<div className="clearfix paragraph lineh-30" key={index} onMouseEnter={()=>this.showparagraph(key,index)} onMouseLeave={this.hideparagraph}>
|
|
|
|
|
|
<li className="fl li-width63">
|
|
|
|
|
|
<span className="progressRing mr10">
|
|
|
{
|
|
|
line.complete_status === 1 ?<i className="iconfont icon-wancheng progressRing-over font-18 mt10"></i>
|
|
|
:<i className="iconfont icon-bofang progressRing-part font-18 mt10"></i>
|
|
|
}
|
|
|
</span>
|
|
|
<span className={this.props.current_user&&this.props.current_user.admin===false&&line.shixun_status==="暂未公开"?"paragraph_name color204":"paragraph_name color-grey3"}>
|
|
|
<span className="subject_stage_shixun_index">{key+1}</span>-{index+1} {line.shixun_name}
|
|
|
</span>
|
|
|
|
|
|
</li>
|
|
|
{
|
|
|
this.props.current_user&&this.props.current_user.admin===false&&line.shixun_status==="暂未公开"?
|
|
|
<li className="fr status_li"><span className="fr color204">暂未公开</span></li>
|
|
|
:
|
|
|
<li className={showparagraph===false?"none":"fr status_li"}>
|
|
|
{
|
|
|
showparagraphkey===key&&showparagraphindex===index?<div>
|
|
|
<Link to={'/shixuns/'+line.identifier+'/challenges'} className="mr30 color-blue_4C shixun_detail pointer fl" target="_blank">查看详情</Link>
|
|
|
{line.shixun_status==="暂未公开"?"":<a onClick={()=>this.startgameid(line.identifier)} className="btn_auto user_bluebg_btn fl" id="shixun_operation" >开始学习</a>}
|
|
|
</div>:""
|
|
|
}
|
|
|
|
|
|
</li>
|
|
|
}
|
|
|
</div>)
|
|
|
})
|
|
|
}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
)
|
|
|
})
|
|
|
}
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
export default YslDetailCards; |
