Skip to content

M
mr-julyedu
Commit 4adcd871 by wangshuo
Options

tabs bug 修改

parent a9864947
Showing with 131 additions and 148 deletions
src/components/detail/outline/index.js
...@@ -11,7 +11,8 @@ class OutLine extends Component { ...@@ -11,7 +11,8 @@ class OutLine extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
stageInfo: [] stageInfo: [],
tab: 0,
} }
} }
...@@ -44,8 +45,10 @@ class OutLine extends Component { ...@@ -44,8 +45,10 @@ class OutLine extends Component {
}) })
} }
change = (index) => { changeTab = (tab, index) => {
console.log(index); this.setState({
tab: index
})
} }
render() { render() {
...@@ -61,41 +64,41 @@ class OutLine extends Component { ...@@ -61,41 +64,41 @@ class OutLine extends Component {
<div className='course-detail'> <div className='course-detail'>
<WhiteSpace/> <WhiteSpace/>
<StickyContainer> <StickyContainer>
<div className='detail_tab'>
{
tabs.map((item, index) => {
return <div onClick={e => change(index)} className="tabItem" key={index}>
<span>{item.title}</span>
</div>
})
}
</div>
<Tabs tabs={tabs} <Tabs tabs={tabs}
initialPage={0} initialPage={0}
swipeable={false} swipeable={false}
onTabClick={(tab, index) => this.changeTab(tab, index)}
// renderTabBar={RenderTabBar} // renderTabBar={RenderTabBar}
> >
{/*介绍*/} </Tabs>
<div className='introduce'>
<p>讲师：{introduce.teachers}</p> {/*介绍*/}
<p>课时：{introduce.course_hour}</p> {
<p>时间：{introduce.start_time}</p> this.state.tab === 0 ? (
<div className='dec' dangerouslySetInnerHTML={{__html: this.htmlDecode(introduce.intro)}}></div> <div className='introduce'>
</div> <p>讲师：{introduce.teachers}</p>
{/*大纲*/} <p>课时：{introduce.course_hour}</p>
<div className='outline'> <p>时间：{introduce.start_time}</p>
{ <div className='dec' dangerouslySetInnerHTML={{__html: this.htmlDecode(introduce.intro)}}></div>
this.state.stageInfo && this.state.stageInfo.length > 0 && this.state.stageInfo.map((item, index) => { </div>
return ( ) : null
<div className='stagebox' key={index}> }
<h1 className='stage text-overflow-1'>{item.stage_name}</h1> {/*大纲*/}
{ {
item.lesson.map((item, index) => { this.state.tab === 1 ? (
return ( <div className='outline'>
<ul key={index}> {
<h2 className='classhour'> this.state.stageInfo && this.state.stageInfo.length > 0 && this.state.stageInfo.map((item, index) => {
<span className='title text-overflow-1'>{item.name}</span> return (
{/* <div className='stagebox' key={index}>
<h1 className='stage text-overflow-1'>{item.stage_name}</h1>
{
item.lesson.map((item, index) => {
return (
<ul key={index}>
<h2 className='classhour'>
<span className='title text-overflow-1'>{item.name}</span>
{/*
class_status class_status
0-未购买未开单集购买 0-未购买未开单集购买
1-未购买已开单集购买 1-未购买已开单集购买
...@@ -105,116 +108,117 @@ class OutLine extends Component { ...@@ -105,116 +108,117 @@ class OutLine extends Component {
5-可试听且有试听权限 5-可试听且有试听权限
6-可试听但无试听权限 6-可试听但无试听权限
*/} */}
{ // 试听 { // 试听
!introduce.is_aist && (item.class_status === 6 || item.class_status === 5) && !introduce.is_aist && (item.class_status === 6 || item.class_status === 5) &&
<span className='btn-right-10 audition' <span className='btn-right-10 audition'
onClick={e => this.props.toAudition(introduce.v_course_id, item.video_id)}>试听 onClick={e => this.props.toAudition(introduce.v_course_id, item.video_id)}>试听
<i className='iconfont iconcelluar'></i> <i className='iconfont iconcelluar'></i>
</span> </span>
} }
{ // 未购买未开单集购买：上锁标志，点击提示购买 { // 未购买未开单集购买：上锁标志，点击提示购买
!introduce.is_aist && item.class_status === 0 && !introduce.is_aist && item.class_status === 0 &&
<i className='iconfont iconiconfront-74 icon-right-22'></i> <i className='iconfont iconiconfront-74 icon-right-22'></i>
} }
{ // 未购买已开单集购买：显示单集价格，点击购买单集 { // 未购买已开单集购买：显示单集价格，点击购买单集
!introduce.is_aist && item.class_status === 1 && !introduce.is_aist && item.class_status === 1 &&
<span className='btn-right-10 singleset' <span className='btn-right-10 singleset'
onClick={e => this.props.toSingleset(item)}>¥ {item.class_price}</span> onClick={e => this.props.toSingleset(item)}>¥ {item.class_price}</span>
} }
{ {
!introduce.is_aist && item.class_status === 4 && !introduce.is_aist && item.class_status === 4 &&
item.video_auth === 1 && item.is_video === 4 && item.video_auth === 1 && item.is_video === 4 &&
<span className='live icon-right-22'>正在直播<i <span className='live icon-right-22'>正在直播<i
className='iconfont icondanseshixintubiao-23'></i></span> className='iconfont icondanseshixintubiao-23'></i></span>
} }
{ {
// 已购买直播结束已上传视频：正常播放按钮，点击播放课程 // 已购买直播结束已上传视频：正常播放按钮，点击播放课程
!introduce.is_aist && item.class_status === 2 && !introduce.is_aist && item.class_status === 2 &&
<Link <Link
to={`/play/video?id=${introduce.v_course_id + '&video_id=' + item.video_id}`} to={`/play/video?id=${introduce.v_course_id + '&video_id=' + item.video_id}`}
className='iconfont icondanseshixintubiao-23 icon-right-22'></Link> className='iconfont icondanseshixintubiao-23 icon-right-22'></Link>
} }
{ {
// 返现课程 是返现课程 未开课 已开课 是返现课程 未开课 已开课 已练习 // 返现课程 是返现课程 未开课 已开课 是返现课程 未开课 已开课 已练习
introduce.is_aist && item.is_open && introduce.is_baoming === 1 && introduce.is_aist && item.is_open && introduce.is_baoming === 1 &&
<Link <Link
to={`/play/video?id=${introduce.v_course_id + '&video_id=' + item.video_id}`} to={`/play/video?id=${introduce.v_course_id + '&video_id=' + item.video_id}`}
className='aist aist_open'></Link> className='aist aist_open'></Link>
} }
{ {
// 返现课程 是返现课程 未开课 已开课 是返现课程 未开课 已开课 已练习 // 返现课程 是返现课程 未开课 已开课 是返现课程 未开课 已开课 已练习
introduce.is_aist && (!item.is_open || introduce.is_baoming === 0) && introduce.is_aist && (!item.is_open || introduce.is_baoming === 0) &&
<i className='aist iconfont iconiconfront-74'></i> <i className='aist iconfont iconiconfront-74'></i>
} }
</h2> </h2>
{ {
item.point && item.point.length > 0 && item.point.map((item, index) => { item.point && item.point.length > 0 && item.point.map((item, index) => {
const type = ( const type = (
<span> <span>
{ {
item.type === 1 && item.type === 1 &&
<span>知识点{index + 1}：</span> <span>知识点{index + 1}：</span>
} }
{ {
item.type === 2 && item.type === 2 &&
<span className='red'>实战项目：</span> <span className='red'>实战项目：</span>
} }
</span> </span>
) )
return ( return (
<li className='points text-overflow-1' <li className='points text-overflow-1'
key={index}>{type}{item.name}</li> key={index}>{type}{item.name}</li>
) )
}) })
} }
{ {
<> <>
{ {
introduce.is_aist && item.practice.title !== "" && (!item.is_open || introduce.is_baoming === 0) && introduce.is_aist && item.practice.title !== "" && (!item.is_open || introduce.is_baoming === 0) &&
<span className='camp camp_test' key={index}> <span className='camp camp_test' key={index}>
<span>课后练习：{item.practice.title}</span> <span>课后练习：{item.practice.title}</span>
<i className='exam exam_close'/> <i className='exam exam_close'/>
</span> </span>
} }
{ {
introduce.is_aist && item.practice.title !== "" && item.is_open && introduce.is_baoming === 1 && !item.practice.is_tested && introduce.is_aist && item.practice.title !== "" && item.is_open && introduce.is_baoming === 1 && !item.practice.is_tested &&
<Link to={{ <Link to={{
pathname: `/campTest`, pathname: `/campTest`,
search: `?keshi_id=${item.video_id}&qid=${item.practice.qid}`, search: `?keshi_id=${item.video_id}&qid=${item.practice.qid}`,
state: {from: `/detail${window.location.search}`} state: {from: `/detail${window.location.search}`}
}} className='camp camp_test' key={index}> }} className='camp camp_test' key={index}>
<span>课后练习：{item.practice.title}</span> <span>课后练习：{item.practice.title}</span>
</Link> </Link>
} }
{ {
introduce.is_aist && item.practice.title !== "" && item.is_open && introduce.is_baoming === 1 && item.practice.is_tested && introduce.is_aist && item.practice.title !== "" && item.is_open && introduce.is_baoming === 1 && item.practice.is_tested &&
<Link to={{ <Link to={{
pathname: `/campResolve`, pathname: `/campResolve`,
search: `?keshi_id=${item.video_id}&qid=${item.practice.qid}`, search: `?keshi_id=${item.video_id}&qid=${item.practice.qid}`,
state: {from: `/detail${window.location.search}`} state: {from: `/detail${window.location.search}`}
}} className='camp camp_test' key={index}> }} className='camp camp_test' key={index}>
<span>课后练习：{item.practice.title}</span> <span>课后练习：{item.practice.title}</span>
<i className='exam exam_open'/> <i className='exam exam_open'/>
</Link> </Link>
} }
</> </>
} }
</ul> </ul>
) )
}) })
} }
</div> </div>
) )
}) })
} }
</div> </div>
</Tabs> ) : null
}
</StickyContainer> </StickyContainer>
<WhiteSpace/> <WhiteSpace/>
</div> </div>
......
src/components/detail/outline/index.scss
...@@ -185,25 +185,4 @@ ...@@ -185,25 +185,4 @@
background-color: $bg_FE2F2F; background-color: $bg_FE2F2F;
} }
} }
.detail_tab {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 46px;
.tabItem {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
span {
display: inline-block;
height: 100%;
border-bottom: 1px solid #09f;
padding: 6px 0;
}
}
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment