import React, { Component } from "react"
import { Link } from "react-router-dom"
import { Tabs, WhiteSpace } from "antd-mobile"
import "./index.scss"
import { getParam, http } from "src/utils"
import { Toast } from "antd-mobile"
import { StickyContainer } from "react-sticky"
class OutLine extends Component {
constructor(props) {
super(props)
this.state = {
stageInfo: [],
tab: 0,
}
}
componentDidMount() {
this.getList()
}
htmlDecode = (content) => {
if (content) {
content = content.replace(/</g, "<")
content = content.replace(/>/g, ">")
content = content.replace(/&gt;/g, "")
content = content.replace(/"/g, '"')
content = content.replace(/&nbsp;/g, "")
}
return content
}
// 获取大纲数据
getList = () => {
http
.get(`${API.home}/m/course/syllabuses/${getParam("id")}`)
.then((res) => {
if (res.data.code === 200) {
this.setState({
stageInfo: res.data.data,
})
} else {
Toast.info(res.data.msg, 2)
}
})
}
changeTab = (tab, index) => {
this.setState({
tab: index,
})
}
render() {
const tabs = [{ title: "介绍" }, { title: "大纲" }]
let introduce = ""
if (this.props.data) {
introduce = this.props.data
}
return (
<div className="course-detail">
<WhiteSpace />
<StickyContainer>
<Tabs
tabs={tabs}
initialPage={0}
swipeable={false}
onTabClick={(tab, index) => this.changeTab(tab, index)}
// renderTabBar={RenderTabBar}
></Tabs>
{/*介绍*/}
{this.state.tab === 0 ? (
<div className="introduce">
<p>讲师：{introduce.teachers}</p>
<p>课时：{introduce.course_hour}</p>
<p>时间：{introduce.start_time}</p>
<div
className="dec"
dangerouslySetInnerHTML={{
__html: this.htmlDecode(introduce.intro),
}}
></div>
</div>
) : null}
{/*大纲*/}
{this.state.tab === 1 ? (
<div className="outline">
{this.state.stageInfo &&
this.state.stageInfo.length > 0 &&
this.state.stageInfo.map((item, index) => {
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
0-未购买未开单集购买
1-未购买已开单集购买
2-已购买直播结束已上传视频
3-已购买未开课、已购买直播结束
4-已购买直播中
5-可试听且有试听权限
6-可试听但无试听权限
7-新试听功能，点击试听跳转播放页
*/}
{
// 试听
!introduce.is_aist &&
(item.class_status === 6 ||
item.class_status === 5) && (
<span
className="btn-right-10 audition"
onClick={(e) =>
this.props.toAudition(
introduce.v_course_id,
item.video_id
)
}
>
试听
<i className="iconfont iconcelluar"></i>
</span>
)
}
{
// 点击试听跳转播放页
!introduce.is_aist && item.class_status === 7 && (
<Link
to={`/play/video?id=${
introduce.v_course_id +
"&video_id=" +
item.video_id
}`}
className="btn-right-10 audition"
>
{" "}
<i className="iconfont iconcelluar"></i>试听
</Link>
)
}
{
// 未购买未开单集购买：上锁标志，点击提示购买
!introduce.is_aist &&
item.class_status === 0 && (
<i className="iconfont iconiconfront-74 icon-right-22"></i>
)
}
{
// 未购买已开单集购买：显示单集价格，点击购买单集
!introduce.is_aist && item.class_status === 1 && (
<span
className="btn-right-10 singleset"
onClick={(e) =>
this.props.toSingleset(item)
}
>
¥ {item.class_price}
</span>
)
}
{!introduce.is_aist &&
item.class_status === 4 &&
item.video_auth === 1 &&
item.is_video === 4 && (
<span className="live icon-right-22">
正在直播
<i className="iconfont icondanseshixintubiao-23"></i>
</span>
)}
{
// 已购买直播结束已上传视频：正常播放按钮，点击播放课程
!introduce.is_aist &&
item.class_status === 2 && (
<Link
to={`/play/video?id=${
introduce.v_course_id +
"&video_id=" +
item.video_id
}`}
className="iconfont icondanseshixintubiao-23 icon-right-22"
></Link>
)
}
{
// 返现课程 是返现课程 未开课 已开课 是返现课程 未开课 已开课 已练习
introduce.is_aist &&
item.is_open &&
introduce.is_baoming === 1 && (
<Link
to={`/play/video?id=${
introduce.v_course_id +
"&video_id=" +
item.video_id
}`}
className="aist aist_open"
></Link>
)
}
{
// 返现课程 是返现课程 未开课 已开课 是返现课程 未开课 已开课 已练习
introduce.is_aist &&
(!item.is_open ||
introduce.is_baoming === 0) && (
<i className="aist iconfont iconiconfront-74"></i>
)
}
</h2>
{item.point &&
item.point.length > 0 &&
item.point.map((item, index) => {
const type = (
<span>
{item.type === 1 && (
<span>知识点{index + 1}：</span>
)}
{item.type === 2 && (
<span className="red">实战项目：</span>
)}
</span>
)
return (
<li
className="points text-overflow-1"
key={index}
>
{type}
{item.name}
</li>
)
})}
{
<>
{introduce.is_aist &&
item.practice.title !== "" &&
(!item.is_open ||
introduce.is_baoming === 0) && (
<span
className="camp camp_test"
key={index}
>
<span>
课后练习：{item.practice.title}
</span>
<i className="exam exam_close" />
</span>
)}
{introduce.is_aist &&
item.practice.title !== "" &&
item.is_open &&
introduce.is_baoming === 1 &&
!item.practice.is_tested && (
<Link
to={{
pathname: `/campTest`,
search: `?keshi_id=${item.video_id}&qid=${item.practice.qid}`,
state: {
from: `/detail${window.location.search}`,
},
}}
className="camp camp_test"
key={index}
>
<span>
课后练习：{item.practice.title}
</span>
</Link>
)}
{introduce.is_aist &&
item.practice.title !== "" &&
item.is_open &&
introduce.is_baoming === 1 &&
item.practice.is_tested && (
<Link
to={{
pathname: `/campResolve`,
search: `?keshi_id=${item.video_id}&qid=${item.practice.qid}`,
state: {
from: `/detail${window.location.search}`,
},
}}
className="camp camp_test"
key={index}
>
<span>
课后练习：{item.practice.title}
</span>
<i className="exam exam_open" />
</Link>
)}
</>
}
</ul>
)
})}
</div>
)
})}
</div>
) : null}
</StickyContainer>
<WhiteSpace />
</div>
)
}
}
export default OutLine