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 { getImageUrl,} from "educoder";
|
||||
import {getImageUrl,} from "educoder";
|
||||
|
||||
import './TPMright.css';
|
||||
|
||||
import {Icon,Tooltip} from 'antd';
|
||||
import {Icon, Tooltip} from 'antd';
|
||||
|
||||
// import "antd/dist/antd.css";
|
||||
|
||||
class TPMRightSection extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
|
||||
TPMRightSection:false,
|
||||
clickNewsubscripttype:false
|
||||
}
|
||||
}
|
||||
|
||||
// componentDidMount() {
|
||||
// let id=this.props.match.params.shixunId;
|
||||
//
|
||||
// let shixunsDetailsURL=`/shixuns/`+id+`/show_right.json`;
|
||||
//
|
||||
// axios.get(shixunsDetailsURL).then((response)=> {
|
||||
// if(response.status===200){
|
||||
// this.setState({
|
||||
// TPMRightSectionData: response.data
|
||||
// });
|
||||
// }
|
||||
// }).catch((error)=>{
|
||||
// console.log(error)
|
||||
// });
|
||||
// }
|
||||
|
||||
// shouldComponentUpdate(nextProps, nextState) {
|
||||
// return nextProps.TPMRightSectionData !== this.state.TPMRightSectionData
|
||||
// }
|
||||
clickNewsubscript=(val)=>{
|
||||
if(val===0){
|
||||
this.setState({
|
||||
TPMRightSection:true,
|
||||
clickNewsubscripttype:true
|
||||
})
|
||||
}else{
|
||||
this.setState({
|
||||
TPMRightSection:false,
|
||||
clickNewsubscripttype:false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
render() {
|
||||
let {TPMRightSection,clickNewsubscripttype}=this.state;
|
||||
let {TPMRightSectionData}=this.props
|
||||
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
TPMRightSectionData===undefined?"":
|
||||
<div>
|
||||
<div className="edu-back-white padding40-20 mb10">
|
||||
<p className="font-16 mb20">创建者</p>
|
||||
<div className="df">
|
||||
<a href={TPMRightSectionData===undefined?"":TPMRightSectionData.creator===undefined?"":`/users/${TPMRightSectionData.creator.login}/courses`}>
|
||||
<img alt="头像" className="radius mr10" height="80" src={getImageUrl(TPMRightSectionData===undefined?"":TPMRightSectionData.creator===undefined?"":'images/'+TPMRightSectionData.creator.image_url+"?1532489442")} width="80" />
|
||||
</a>
|
||||
<div className="flex1">
|
||||
|
||||
<p className="mb20">{TPMRightSectionData===undefined?"":TPMRightSectionData.creator===undefined?"":TPMRightSectionData.creator.name}</p>
|
||||
<div className="clearfix">
|
||||
<span>发布 {TPMRightSectionData.user_shixuns_count}</span>
|
||||
{/*<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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
TPMRightSectionData === undefined ? "" :TPMRightSectionData.tags===undefined?"": TPMRightSectionData.tags.length === 0 ? "" :
|
||||
<div className="edu-back-white padding40-20 mb10 relative">
|
||||
<p className="font-16 mb20">技能标签 <span className="color-grey-c">{TPMRightSectionData.tags.length}</span></p>
|
||||
<div className={TPMRightSection===false?"newedbox newedboxheight":"newedbox newminheight"}>
|
||||
<div className="clearfix" id="boxheight">
|
||||
{ TPMRightSectionData.tags.map((item,key)=>{
|
||||
return(
|
||||
<span className={item.status===false?"newedu-filter-btn fl":"edu-filter-btn29BD8B fl"}
|
||||
style={{display:item.tag_name===" "||item.tag_name===""?"none":""}}
|
||||
key={key}>{item.tag_name}</span>
|
||||
)})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className={TPMRightSectionData.tags.length>15&&clickNewsubscripttype===false?"newsubscript mb9 color-grey-9":"newsubscript mb9 color-grey-9 none"}
|
||||
|
||||
data-tip-down="显示全部"
|
||||
onClick={()=>this.clickNewsubscript(0)}><span className="mr8">...</span><Icon type="caret-down" />
|
||||
</div>
|
||||
|
||||
|
||||
<div className={clickNewsubscripttype===false?"newsubscript mb9 color-grey-9 none":"newsubscript mb9 color-grey-9"}
|
||||
|
||||
data-tip-down="显示全部"
|
||||
onClick={()=>this.clickNewsubscript(1)}><Icon type="caret-up" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
<div className="padding20 edu-back-white mb10 mt10" style={{
|
||||
display: TPMRightSectionData === undefined?"none":TPMRightSectionData.paths===undefined?"":TPMRightSectionData.paths.length === 0 ? "none" : "block"
|
||||
}}>
|
||||
<p className="mb20 font-16 clearfix">所属课程</p>
|
||||
<div className="recommend-list" >
|
||||
{
|
||||
TPMRightSectionData===undefined?"":TPMRightSectionData.paths===undefined?"":TPMRightSectionData.paths.map((i,k)=>{
|
||||
|
||||
return(
|
||||
|
||||
<div className="recomments clearfix df" key={k}>
|
||||
|
||||
<a href={"/paths/"+i.id} height="96" width="128" target="_blank">
|
||||
<img alt="实训" height="96" src={"/"+i.image_url} width="128" />
|
||||
</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>
|
||||
<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>
|
||||
</Tooltip>
|
||||
|
||||
{/*<Tooltip placement="bottom" title={"经验值"}>*/}
|
||||
{/*<span className="mr10 fl squareIconSpan"><i className="iconfont icon-jingyan fl mr3"></i>{i.score_count}</span>*/}
|
||||
{/*</Tooltip>*/}
|
||||
|
||||
<Tooltip placement="bottom" title={"学习人数"}>
|
||||
<span className="mr10 fl squareIconSpan"><i className="iconfont icon-chengyuan fl mr3"></i>{i.members_count}</span>
|
||||
</Tooltip>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{TPMRightSectionData === undefined?"":TPMRightSectionData.paths===undefined?"":TPMRightSectionData.paths.length === 0 ? "" :
|
||||
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"
|
||||
}}
|
||||
>
|
||||
<p className="mb20 font-16 clearfix">推荐实训</p>
|
||||
<div className="recommend-list">
|
||||
{
|
||||
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>
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
|
||||
TPMRightSection: false,
|
||||
clickNewsubscripttype: false
|
||||
}
|
||||
}
|
||||
|
||||
// componentDidMount() {
|
||||
// let id=this.props.match.params.shixunId;
|
||||
//
|
||||
// let shixunsDetailsURL=`/shixuns/`+id+`/show_right.json`;
|
||||
//
|
||||
// axios.get(shixunsDetailsURL).then((response)=> {
|
||||
// if(response.status===200){
|
||||
// this.setState({
|
||||
// TPMRightSectionData: response.data
|
||||
// });
|
||||
// }
|
||||
// }).catch((error)=>{
|
||||
// console.log(error)
|
||||
// });
|
||||
// }
|
||||
|
||||
// shouldComponentUpdate(nextProps, nextState) {
|
||||
// return nextProps.TPMRightSectionData !== this.state.TPMRightSectionData
|
||||
// }
|
||||
clickNewsubscript = (val) => {
|
||||
if (val === 0) {
|
||||
this.setState({
|
||||
TPMRightSection: true,
|
||||
clickNewsubscripttype: true
|
||||
})
|
||||
} else {
|
||||
this.setState({
|
||||
TPMRightSection: false,
|
||||
clickNewsubscripttype: false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
let {TPMRightSection, clickNewsubscripttype} = this.state;
|
||||
let {TPMRightSectionData} = this.props
|
||||
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
TPMRightSectionData === undefined ? "" :
|
||||
<div>
|
||||
<div className="edu-back-white pd302020zuoze mb10">
|
||||
<p className="font-16 mb20">创建者</p>
|
||||
<div className="df">
|
||||
<a
|
||||
href={TPMRightSectionData === undefined ? "" : TPMRightSectionData.creator === undefined ? "" : `/users/${TPMRightSectionData.creator.login}/courses`}>
|
||||
<img alt="头像" className="radius mr10" height="36"
|
||||
src={getImageUrl(TPMRightSectionData === undefined ? "" : TPMRightSectionData.creator === undefined ? "" : 'images/' + TPMRightSectionData.creator.image_url + "?1532489442")}
|
||||
width="36"/>
|
||||
</a>
|
||||
<div className="flex1">
|
||||
|
||||
<div className="creatorname sortinxdirection space-between">
|
||||
<div className={"creatornamelist"}>
|
||||
{TPMRightSectionData === undefined ? "" : TPMRightSectionData.creator === undefined ? "" : TPMRightSectionData.creator.name}
|
||||
</div>
|
||||
<div className={"creatornamelist width80center"}>
|
||||
{TPMRightSectionData.user_shixuns_count}
|
||||
</div>
|
||||
</div>
|
||||
<div className="clearfix">
|
||||
<span className={"fr color888hezuo"}>发布实训项目</span>
|
||||
{/*<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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
TPMRightSectionData === undefined ? "" : TPMRightSectionData.tags === undefined ? "" : TPMRightSectionData.tags.length === 0 ? "" :
|
||||
<div className="edu-back-white padding40-20 mb10 relative">
|
||||
<p className="font-16 mb20">
|
||||
<span>技能标签</span>
|
||||
<span className={"sortinxdirection space-between fr"}>
|
||||
<span className="color888hezuo font-12">已获得 {TPMRightSectionData&&TPMRightSectionData.user_tag_count} 个 / 共 {TPMRightSectionData&&TPMRightSectionData.tag_count} 个</span>
|
||||
</span>
|
||||
|
||||
</p>
|
||||
<div className={TPMRightSection === false ? "newedbox newedboxheight" : "newedbox newminheight"}>
|
||||
<div className="clearfix" id="boxheight">
|
||||
{TPMRightSectionData.tags.map((item, key) => {
|
||||
return (
|
||||
<span className={item.status === false ? "newedu-filter-btn fl" : "edu-filter-btn29BD8B fl"}
|
||||
style={{display: item.tag_name === " " || item.tag_name === "" ? "none" : ""}}
|
||||
key={key}>{item.tag_name}</span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
className={TPMRightSectionData.tags.length > 15 && clickNewsubscripttype === false ? "newsubscript mb9 color-grey-9" : "newsubscript mb9 color-grey-9 none"}
|
||||
|
||||
data-tip-down="显示全部"
|
||||
onClick={() => this.clickNewsubscript(0)}><span className="mr8">...</span><Icon
|
||||
type="caret-down"/>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
className={clickNewsubscripttype === false ? "newsubscript mb9 color-grey-9 none" : "newsubscript mb9 color-grey-9"}
|
||||
|
||||
data-tip-down="显示全部"
|
||||
onClick={() => this.clickNewsubscript(1)}><Icon type="caret-up"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
<div className="padding20 edu-back-white mb10 mt10" style={{
|
||||
display: TPMRightSectionData === undefined ? "none" : TPMRightSectionData.paths === undefined ? "" : TPMRightSectionData.paths.length === 0 ? "none" : "block"
|
||||
}}>
|
||||
<p className="mb20 font-16 clearfix">所属课程</p>
|
||||
<div className="recommend-list">
|
||||
{
|
||||
TPMRightSectionData === undefined ? "" : TPMRightSectionData.paths === undefined ? "" : TPMRightSectionData.paths.map((i, k) => {
|
||||
|
||||
return (
|
||||
|
||||
<div className="recomments clearfix df" key={k}>
|
||||
|
||||
<a href={"/paths/" + i.id} height="96" width="128" target="_blank">
|
||||
<img alt="实训" height="96" src={"/" + i.image_url} width="128"/>
|
||||
</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>
|
||||
<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>
|
||||
</Tooltip>
|
||||
|
||||
{/*<Tooltip placement="bottom" title={"经验值"}>*/}
|
||||
{/*<span className="mr10 fl squareIconSpan"><i className="iconfont icon-jingyan fl mr3"></i>{i.score_count}</span>*/}
|
||||
{/*</Tooltip>*/}
|
||||
|
||||
<Tooltip placement="bottom" title={"学习人数"}>
|
||||
<span className="mr10 fl squareIconSpan"><i
|
||||
className="iconfont icon-chengyuan fl mr3"></i>{i.members_count}</span>
|
||||
</Tooltip>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{TPMRightSectionData === undefined ? "" : TPMRightSectionData.paths === undefined ? "" : TPMRightSectionData.paths.length === 0 ? "" :
|
||||
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"
|
||||
}}
|
||||
>
|
||||
<p className="mb20 font-16 clearfix">推荐实训</p>
|
||||
<div className="recommend-list">
|
||||
{
|
||||
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;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue