index.js

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";
import {RenderTabBar} from "src/common";

class OutLine extends Component {
    constructor(props) {
        super(props)
        this.state = {
            stageInfo: [],
            tab: 0,
        }
    }

    componentDidMount() {
        this.getList()
    }


    htmlDecode = (content) => {
        if (content) {
            content = content.replace(/&lt;/g, '<');
            content = content.replace(/&gt;/g, '>');
            content = content.replace(/&amp;gt;/g, '');
            content = content.replace(/&quot;/g, '"');
            content = content.replace(/&amp;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;