parent
984e38c55c
commit
cb44790e9e
@ -1,205 +1,230 @@
|
|||||||
import React, { Component } from 'react';
|
import React, {Component} from 'react';
|
||||||
|
|
||||||
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
|
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
|
||||||
|
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
|
||||||
import { getImageUrl,} from "educoder";
|
import {getImageUrl,} from "educoder";
|
||||||
|
|
||||||
import './TPMright.css';
|
import './TPMright.css';
|
||||||
|
|
||||||
import {Icon,Tooltip} from 'antd';
|
import {Icon, Tooltip} from 'antd';
|
||||||
|
|
||||||
// import "antd/dist/antd.css";
|
// import "antd/dist/antd.css";
|
||||||
|
|
||||||
class TPMRightSection extends Component {
|
class TPMRightSection extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props)
|
super(props)
|
||||||
this.state = {
|
this.state = {
|
||||||
|
|
||||||
TPMRightSection:false,
|
TPMRightSection: false,
|
||||||
clickNewsubscripttype:false
|
clickNewsubscripttype: false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// componentDidMount() {
|
// componentDidMount() {
|
||||||
// let id=this.props.match.params.shixunId;
|
// let id=this.props.match.params.shixunId;
|
||||||
//
|
//
|
||||||
// let shixunsDetailsURL=`/shixuns/`+id+`/show_right.json`;
|
// let shixunsDetailsURL=`/shixuns/`+id+`/show_right.json`;
|
||||||
//
|
//
|
||||||
// axios.get(shixunsDetailsURL).then((response)=> {
|
// axios.get(shixunsDetailsURL).then((response)=> {
|
||||||
// if(response.status===200){
|
// if(response.status===200){
|
||||||
// this.setState({
|
// this.setState({
|
||||||
// TPMRightSectionData: response.data
|
// TPMRightSectionData: response.data
|
||||||
// });
|
// });
|
||||||
// }
|
// }
|
||||||
// }).catch((error)=>{
|
// }).catch((error)=>{
|
||||||
// console.log(error)
|
// console.log(error)
|
||||||
// });
|
// });
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// shouldComponentUpdate(nextProps, nextState) {
|
// shouldComponentUpdate(nextProps, nextState) {
|
||||||
// return nextProps.TPMRightSectionData !== this.state.TPMRightSectionData
|
// return nextProps.TPMRightSectionData !== this.state.TPMRightSectionData
|
||||||
// }
|
// }
|
||||||
clickNewsubscript=(val)=>{
|
clickNewsubscript = (val) => {
|
||||||
if(val===0){
|
if (val === 0) {
|
||||||
this.setState({
|
this.setState({
|
||||||
TPMRightSection:true,
|
TPMRightSection: true,
|
||||||
clickNewsubscripttype:true
|
clickNewsubscripttype: true
|
||||||
})
|
})
|
||||||
}else{
|
} else {
|
||||||
this.setState({
|
this.setState({
|
||||||
TPMRightSection:false,
|
TPMRightSection: false,
|
||||||
clickNewsubscripttype:false
|
clickNewsubscripttype: false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
render() {
|
|
||||||
let {TPMRightSection,clickNewsubscripttype}=this.state;
|
render() {
|
||||||
let {TPMRightSectionData}=this.props
|
let {TPMRightSection, clickNewsubscripttype} = this.state;
|
||||||
|
let {TPMRightSectionData} = this.props
|
||||||
return (
|
|
||||||
<div>
|
return (
|
||||||
{
|
<div>
|
||||||
TPMRightSectionData===undefined?"":
|
{
|
||||||
<div>
|
TPMRightSectionData === undefined ? "" :
|
||||||
<div className="edu-back-white padding40-20 mb10">
|
<div>
|
||||||
<p className="font-16 mb20">创建者</p>
|
<div className="edu-back-white pd302020zuoze mb10">
|
||||||
<div className="df">
|
<p className="font-16 mb20">创建者</p>
|
||||||
<a href={TPMRightSectionData===undefined?"":TPMRightSectionData.creator===undefined?"":`/users/${TPMRightSectionData.creator.login}/courses`}>
|
<div className="df">
|
||||||
<img alt="头像" className="radius mr10" height="80" src={getImageUrl(TPMRightSectionData===undefined?"":TPMRightSectionData.creator===undefined?"":'images/'+TPMRightSectionData.creator.image_url+"?1532489442")} width="80" />
|
<a
|
||||||
</a>
|
href={TPMRightSectionData === undefined ? "" : TPMRightSectionData.creator === undefined ? "" : `/users/${TPMRightSectionData.creator.login}/courses`}>
|
||||||
<div className="flex1">
|
<img alt="头像" className="radius mr10" height="36"
|
||||||
|
src={getImageUrl(TPMRightSectionData === undefined ? "" : TPMRightSectionData.creator === undefined ? "" : 'images/' + TPMRightSectionData.creator.image_url + "?1532489442")}
|
||||||
<p className="mb20">{TPMRightSectionData===undefined?"":TPMRightSectionData.creator===undefined?"":TPMRightSectionData.creator.name}</p>
|
width="36"/>
|
||||||
<div className="clearfix">
|
</a>
|
||||||
<span>发布 {TPMRightSectionData.user_shixuns_count}</span>
|
<div className="flex1">
|
||||||
{/*<span className="ml20">粉丝 <span id="user_h_fan_count">{TPMRightSectionData.fans_count}</span></span>*/}
|
|
||||||
{/* <a href="/watchers/unwatch?className=fr+user_watch_btn+edu-default-btn+edu-focus-btn&object_id=3039&object_type=user&shixun_id=61&target_id=3039" className="fr edu-default-btn user_watch_btn edu-focus-btn" data-method="post" data-remote="true" id="cancel_watch" rel="nofollow">取消关注</a> */}
|
<div className="creatorname sortinxdirection space-between">
|
||||||
</div>
|
<div className={"creatornamelist"}>
|
||||||
|
{TPMRightSectionData === undefined ? "" : TPMRightSectionData.creator === undefined ? "" : TPMRightSectionData.creator.name}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className={"creatornamelist width80center"}>
|
||||||
</div>
|
{TPMRightSectionData.user_shixuns_count}
|
||||||
{
|
</div>
|
||||||
TPMRightSectionData === undefined ? "" :TPMRightSectionData.tags===undefined?"": TPMRightSectionData.tags.length === 0 ? "" :
|
</div>
|
||||||
<div className="edu-back-white padding40-20 mb10 relative">
|
<div className="clearfix">
|
||||||
<p className="font-16 mb20">技能标签 <span className="color-grey-c">{TPMRightSectionData.tags.length}</span></p>
|
<span className={"fr color888hezuo"}>发布实训项目</span>
|
||||||
<div className={TPMRightSection===false?"newedbox newedboxheight":"newedbox newminheight"}>
|
{/*<span className="ml20">粉丝 <span id="user_h_fan_count">{TPMRightSectionData.fans_count}</span></span>*/}
|
||||||
<div className="clearfix" id="boxheight">
|
{/* <a href="/watchers/unwatch?className=fr+user_watch_btn+edu-default-btn+edu-focus-btn&object_id=3039&object_type=user&shixun_id=61&target_id=3039" className="fr edu-default-btn user_watch_btn edu-focus-btn" data-method="post" data-remote="true" id="cancel_watch" rel="nofollow">取消关注</a> */}
|
||||||
{ TPMRightSectionData.tags.map((item,key)=>{
|
</div>
|
||||||
return(
|
|
||||||
<span className={item.status===false?"newedu-filter-btn fl":"edu-filter-btn29BD8B fl"}
|
</div>
|
||||||
style={{display:item.tag_name===" "||item.tag_name===""?"none":""}}
|
</div>
|
||||||
key={key}>{item.tag_name}</span>
|
</div>
|
||||||
)})
|
{
|
||||||
}
|
TPMRightSectionData === undefined ? "" : TPMRightSectionData.tags === undefined ? "" : TPMRightSectionData.tags.length === 0 ? "" :
|
||||||
</div>
|
<div className="edu-back-white padding40-20 mb10 relative">
|
||||||
</div>
|
<p className="font-16 mb20">
|
||||||
|
<span>技能标签</span>
|
||||||
|
<span className={"sortinxdirection space-between fr"}>
|
||||||
<div className={TPMRightSectionData.tags.length>15&&clickNewsubscripttype===false?"newsubscript mb9 color-grey-9":"newsubscript mb9 color-grey-9 none"}
|
<span className="color888hezuo font-12">已获得 {TPMRightSectionData&&TPMRightSectionData.user_tag_count} 个 / 共 {TPMRightSectionData&&TPMRightSectionData.tag_count} 个</span>
|
||||||
|
</span>
|
||||||
data-tip-down="显示全部"
|
|
||||||
onClick={()=>this.clickNewsubscript(0)}><span className="mr8">...</span><Icon type="caret-down" />
|
</p>
|
||||||
</div>
|
<div className={TPMRightSection === false ? "newedbox newedboxheight" : "newedbox newminheight"}>
|
||||||
|
<div className="clearfix" id="boxheight">
|
||||||
|
{TPMRightSectionData.tags.map((item, key) => {
|
||||||
<div className={clickNewsubscripttype===false?"newsubscript mb9 color-grey-9 none":"newsubscript mb9 color-grey-9"}
|
return (
|
||||||
|
<span className={item.status === false ? "newedu-filter-btn fl" : "edu-filter-btn29BD8B fl"}
|
||||||
data-tip-down="显示全部"
|
style={{display: item.tag_name === " " || item.tag_name === "" ? "none" : ""}}
|
||||||
onClick={()=>this.clickNewsubscript(1)}><Icon type="caret-up" />
|
key={key}>{item.tag_name}</span>
|
||||||
</div>
|
)
|
||||||
|
})
|
||||||
</div>
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
}
|
|
||||||
|
|
||||||
|
<div
|
||||||
<div className="padding20 edu-back-white mb10 mt10" style={{
|
className={TPMRightSectionData.tags.length > 15 && clickNewsubscripttype === false ? "newsubscript mb9 color-grey-9" : "newsubscript mb9 color-grey-9 none"}
|
||||||
display: TPMRightSectionData === undefined?"none":TPMRightSectionData.paths===undefined?"":TPMRightSectionData.paths.length === 0 ? "none" : "block"
|
|
||||||
}}>
|
data-tip-down="显示全部"
|
||||||
<p className="mb20 font-16 clearfix">所属课程</p>
|
onClick={() => this.clickNewsubscript(0)}><span className="mr8">...</span><Icon
|
||||||
<div className="recommend-list" >
|
type="caret-down"/>
|
||||||
{
|
</div>
|
||||||
TPMRightSectionData===undefined?"":TPMRightSectionData.paths===undefined?"":TPMRightSectionData.paths.map((i,k)=>{
|
|
||||||
|
|
||||||
return(
|
<div
|
||||||
|
className={clickNewsubscripttype === false ? "newsubscript mb9 color-grey-9 none" : "newsubscript mb9 color-grey-9"}
|
||||||
<div className="recomments clearfix df" key={k}>
|
|
||||||
|
data-tip-down="显示全部"
|
||||||
<a href={"/paths/"+i.id} height="96" width="128" target="_blank">
|
onClick={() => this.clickNewsubscript(1)}><Icon type="caret-up"/>
|
||||||
<img alt="实训" height="96" src={"/"+i.image_url} width="128" />
|
</div>
|
||||||
</a>
|
|
||||||
|
</div>
|
||||||
<div className="ml10 flex1">
|
|
||||||
<a href={"/paths/"+i.id} target="_blank" data-tip-down={i.name} className="color-grey-6 task-hide mb12 recomment-name">{i.name}</a>
|
|
||||||
<p className="clearfix mt8 font-12 color-grey-B4">
|
}
|
||||||
|
|
||||||
<Tooltip placement="bottom" title={"章节"}>
|
|
||||||
<span className="mr10 fl squareIconSpan"><i className="iconfont icon-shixun fl mr3"></i>{i.stages_count}</span>
|
<div className="padding20 edu-back-white mb10 mt10" style={{
|
||||||
</Tooltip>
|
display: TPMRightSectionData === undefined ? "none" : TPMRightSectionData.paths === undefined ? "" : TPMRightSectionData.paths.length === 0 ? "none" : "block"
|
||||||
|
}}>
|
||||||
{/*<Tooltip placement="bottom" title={"经验值"}>*/}
|
<p className="mb20 font-16 clearfix">所属课程</p>
|
||||||
{/*<span className="mr10 fl squareIconSpan"><i className="iconfont icon-jingyan fl mr3"></i>{i.score_count}</span>*/}
|
<div className="recommend-list">
|
||||||
{/*</Tooltip>*/}
|
{
|
||||||
|
TPMRightSectionData === undefined ? "" : TPMRightSectionData.paths === undefined ? "" : TPMRightSectionData.paths.map((i, k) => {
|
||||||
<Tooltip placement="bottom" title={"学习人数"}>
|
|
||||||
<span className="mr10 fl squareIconSpan"><i className="iconfont icon-chengyuan fl mr3"></i>{i.members_count}</span>
|
return (
|
||||||
</Tooltip>
|
|
||||||
|
<div className="recomments clearfix df" key={k}>
|
||||||
</p>
|
|
||||||
</div>
|
<a href={"/paths/" + i.id} height="96" width="128" target="_blank">
|
||||||
|
<img alt="实训" height="96" src={"/" + i.image_url} width="128"/>
|
||||||
</div>
|
</a>
|
||||||
|
|
||||||
)
|
<div className="ml10 flex1">
|
||||||
})
|
<a href={"/paths/" + i.id} target="_blank" data-tip-down={i.name}
|
||||||
}
|
className="color-grey-6 task-hide mb12 recomment-name">{i.name}</a>
|
||||||
</div>
|
<p className="clearfix mt8 font-12 color-grey-B4">
|
||||||
</div>
|
|
||||||
|
<Tooltip placement="bottom" title={"章节"}>
|
||||||
{TPMRightSectionData === undefined?"":TPMRightSectionData.paths===undefined?"":TPMRightSectionData.paths.length === 0 ? "" :
|
<span className="mr10 fl squareIconSpan"><i
|
||||||
this.props.user&&this.props.user.main_site===true?<div className="padding20 edu-back-white"
|
className="iconfont icon-shixun fl mr3"></i>{i.stages_count}</span>
|
||||||
style={{
|
</Tooltip>
|
||||||
display:
|
|
||||||
TPMRightSectionData === undefined?"none":TPMRightSectionData.recommands===undefined?"none":TPMRightSectionData.recommands.length === 0 ? "none" : "block"
|
{/*<Tooltip placement="bottom" title={"经验值"}>*/}
|
||||||
}}
|
{/*<span className="mr10 fl squareIconSpan"><i className="iconfont icon-jingyan fl mr3"></i>{i.score_count}</span>*/}
|
||||||
>
|
{/*</Tooltip>*/}
|
||||||
<p className="mb20 font-16 clearfix">推荐实训</p>
|
|
||||||
<div className="recommend-list">
|
<Tooltip placement="bottom" title={"学习人数"}>
|
||||||
{
|
<span className="mr10 fl squareIconSpan"><i
|
||||||
TPMRightSectionData===undefined?"":TPMRightSectionData.recommands===undefined?"":TPMRightSectionData.recommands.map((item,key)=>{
|
className="iconfont icon-chengyuan fl mr3"></i>{i.members_count}</span>
|
||||||
return(
|
</Tooltip>
|
||||||
<div className="recomments clearfix df" key={key}>
|
|
||||||
<a href={"/shixuns/"+item.identifier+"/challenges"} target="_blank">
|
</p>
|
||||||
<img alt="69?1526971094" height="96" src={"/"+item.pic} width="128"/>
|
</div>
|
||||||
</a>
|
|
||||||
<div className="ml10 flex1">
|
</div>
|
||||||
<Tooltip placement="bottom" title={item.name}>
|
|
||||||
<a href={"/shixuns/"+item.identifier+"/challenges"} target="_blank" className="color-grey-6 task-hide mb12 recomment-name">{item.name}</a>
|
)
|
||||||
</Tooltip>
|
})
|
||||||
<p className="clearfix mt8 font-12 color-grey-B4">
|
}
|
||||||
{item.stu_num} 人学习
|
</div>
|
||||||
</p>
|
</div>
|
||||||
<p className="edu-txt-right color-orange pr10">{item.level}</p>
|
|
||||||
</div>
|
{TPMRightSectionData === undefined ? "" : TPMRightSectionData.paths === undefined ? "" : TPMRightSectionData.paths.length === 0 ? "" :
|
||||||
</div>
|
this.props.user && this.props.user.main_site === true ? <div className="padding20 edu-back-white"
|
||||||
)
|
style={{
|
||||||
})
|
display:
|
||||||
}
|
TPMRightSectionData === undefined ? "none" : TPMRightSectionData.recommands === undefined ? "none" : TPMRightSectionData.recommands.length === 0 ? "none" : "block"
|
||||||
</div>
|
}}
|
||||||
</div>:""
|
>
|
||||||
}
|
<p className="mb20 font-16 clearfix">推荐实训</p>
|
||||||
</div>
|
<div className="recommend-list">
|
||||||
}
|
{
|
||||||
</div>
|
TPMRightSectionData === undefined ? "" : TPMRightSectionData.recommands === undefined ? "" : TPMRightSectionData.recommands.map((item, key) => {
|
||||||
)
|
return (
|
||||||
|
<div className="recomments clearfix df" key={key}>
|
||||||
|
<a href={"/shixuns/" + item.identifier + "/challenges"} target="_blank">
|
||||||
}
|
<img alt="69?1526971094" height="96" src={"/" + item.pic} width="128"/>
|
||||||
|
</a>
|
||||||
|
<div className="ml10 flex1">
|
||||||
|
<Tooltip placement="bottom" title={item.name}>
|
||||||
|
<a href={"/shixuns/" + item.identifier + "/challenges"} target="_blank"
|
||||||
|
className="color-grey-6 task-hide mb12 recomment-name">{item.name}</a>
|
||||||
|
</Tooltip>
|
||||||
|
<p className="clearfix mt8 font-12 color-grey-B4">
|
||||||
|
{item.stu_num} 人学习
|
||||||
|
</p>
|
||||||
|
<p className="edu-txt-right color-orange pr10">{item.level}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div> : ""
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default TPMRightSection;
|
export default TPMRightSection;
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue