index.js

import React, {Component} from 'react'
import {Link} from 'react-router-dom'
import {Tabs, WhiteSpace} from 'antd-mobile'
import './index.scss'
import {api, getParam, http} from "@/utils"
import {Toast} from 'antd-mobile'


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

    htmlDecode = (content) => {
        let e = document.createElement('div');
        e.innerHTML = content;
        return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
    }

    tabchange = (tab, index) => {
        if(index === 1) {
            this.getList()
        }
    };

    // 获取大纲数据
    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)
            }
        })
    }

    render() {
        const tabs = [
            {title: '介绍'},
            {title: '大纲'}
        ];
        let introduce = ''
        if (this.props.data) {
            introduce = this.props.data
        }
        return (
            <div className='course-detail'>
                <WhiteSpace/>
                <Tabs tabs={tabs}
                initialPage={0}
                onChange={(tab, index) => { this.tabchange(tab, index) }}
                >
                    {/*介绍*/}
                    <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>
                    {/*大纲*/}
                    <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-可试听但无试听权限
                                                            */}
                                                            { // 试听
                                                                !introduce.is_aist && item.class_status === 6 &&
                                                                <span className='btn-right-10 audition'
                                                                      onClick={this.props.toAudition}>试听
                                                                <i className='iconfont iconcelluar'></i>
                                                                </span>
                                                            }
                                                            {  // 未购买未开单集购买：上锁标志，点击提示购买
                                                                !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={`/campTest?keshi_id=${item.video_id}&qid=${item.practice.qid}`} 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={`/campResolve?keshi_id=${item.video_id}&qid=${item.practice.qid}`} className='camp camp_test' key={index}>
                                                                        <span>课后练习：{item.practice.title}</span>
                                                                        <i className='exam exam_open' />
                                                                    </Link>
                                                                }
                                                            </>
                                                        }
                                                    </ul>
                                                )
                                            })
                                        }
                                    </div>
                                )
                            })
                        }
                    </div>
                </Tabs>
                <WhiteSpace/>
            </div>
        );
    }

}

export default OutLine;