index.js

import React, {Component} from 'react';
import {Tabs, WhiteSpace, Badge} from 'antd-mobile';
import './index.scss';
import Bargain from './bargain'


class Detail extends Component {
    state = {
        isbuy: 0,
        isvip: 0,
        stage_info: [
            {
                "stage_name": "预习阶段 机器学习中的数学基础",
                "lesson": [
                    {
                        "is_video": 1,
                        "name": "微积分",
                        "video_id": 1170,
                        "point": [
                            {
                                "name": "微积分的基本概念",
                                "type": 1
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    },
                    {
                        "is_video": 1,
                        "name": "概率论",
                        "video_id": 1171,
                        "point": [
                            {
                                "name": "概率论简介",
                                "type": 1
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    },
                    {
                        "is_video": 1,
                        "name": "线性代数",
                        "video_id": 1172,
                        "point": [
                            {
                                "name": "线性代数基础",
                                "type": 1
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    },
                    {
                        "is_video": 1,
                        "name": "凸优化",
                        "video_id": 1173,
                        "point": [
                            {
                                "name": "凸优化简介",
                                "type": 1
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    }
                ]
            },
            {
                "stage_name": "第一阶段 掌握基本模型 打开ML大门",
                "lesson": [
                    {
                        "is_video": 1,
                        "name": "第1课 回归问题与应用",
                        "video_id": 1118,
                        "point": [
                            {
                                "name": "线性回归",
                                "type": 1
                            },
                            {
                                "name": "logistic回归",
                                "type": 1
                            },
                            {
                                "name": "梯度下降",
                                "type": 1
                            },
                            {
                                "name": "实际工程海量数据下的logistic回归使用",
                                "type": 1
                            },
                            {
                                "name": "分布拟合与回归、用LR分类与概率预测",
                                "type": 2
                            },
                            {
                                "name": "用LR完成Kaggle比赛迈开第一步",
                                "type": 2
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    },
                    {
                        "is_video": 1,
                        "name": "第2课 决策树与树集成模型",
                        "video_id": 1119,
                        "point": [
                            {
                                "name": "不同类型的分类树模型",
                                "type": 1
                            },
                            {
                                "name": "决策树回归",
                                "type": 1
                            },
                            {
                                "name": "树模型过拟合与优化",
                                "type": 1
                            },
                            {
                                "name": "使用随机森林进行数据分类",
                                "type": 1
                            },
                            {
                                "name": "Bagging",
                                "type": 1
                            },
                            {
                                "name": "随机森林",
                                "type": 1
                            },
                            {
                                "name": "信用卡欺诈检测",
                                "type": 2
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    },
                    {
                        "is_video": 1,
                        "name": "第3课 SVM",
                        "video_id": 1120,
                        "point": [
                            {
                                "name": "线性可分支持向量机、线性支持向量机",
                                "type": 1
                            },
                            {
                                "name": "非线性支持向量机",
                                "type": 1
                            },
                            {
                                "name": "SMO",
                                "type": 1
                            },
                            {
                                "name": "使用SVM进行数据分类",
                                "type": 2
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    },
                    {
                        "is_video": 1,
                        "name": "第4课 最大熵与EM算法（上）",
                        "video_id": 1121,
                        "point": [
                            {
                                "name": "熵、相对熵、信息增益",
                                "type": 1
                            },
                            {
                                "name": "最大熵模型、IIS、GMM",
                                "type": 1
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    }
                ]
            },
            {
                "stage_name": "第二阶段 重中之重 特征工程",
                "lesson": [
                    {
                        "is_video": 1,
                        "name": "第5课 机器学习中的特征工程处理",
                        "video_id": 1122,
                        "point": [
                            {
                                "name": "数据清洗、异常点处理",
                                "type": 1
                            },
                            {
                                "name": "特征抽取、选择与组合策略",
                                "type": 1
                            },
                            {
                                "name": "特征处理与特征选择模板",
                                "type": 2
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    },
                    {
                        "is_video": 1,
                        "name": "第6课 多算法组合与模型最优化",
                        "video_id": 1123,
                        "point": [
                            {
                                "name": "机器学习问题场景分析、算法选择",
                                "type": 1
                            },
                            {
                                "name": "模型构建、模型性能分析与优化策略",
                                "type": 1
                            },
                            {
                                "name": "构建模型组合策略工具与模板",
                                "type": 2
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    }
                ]
            },
            {
                "stage_name": "第三阶段 工业实战 在实战中掌握一切",
                "lesson": [
                    {
                        "is_video": 1,
                        "name": "第7课 sklearn与机器学习实战",
                        "video_id": 1124,
                        "point": [
                            {
                                "name": "sklearn板块介绍",
                                "type": 1
                            },
                            {
                                "name": "sklearn完成数据预处理与特征工程",
                                "type": 1
                            },
                            {
                                "name": "建模流水线搭建",
                                "type": 1
                            },
                            {
                                "name": "经典Titanic案例，商品销量预测案例等",
                                "type": 2
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    },
                    {
                        "is_video": 1,
                        "name": "第8课 高级工具xgboost/lightGBM与建模实战",
                        "video_id": 1125,
                        "point": [
                            {
                                "name": "xgboost使用方法与高级功能",
                                "type": 1
                            },
                            {
                                "name": "lightGBM使用方法与高级功能",
                                "type": 1
                            },
                            {
                                "name": " Titanic与商品销量预测进阶，Kaggle案例实战",
                                "type": 2
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    },
                    {
                        "is_video": 1,
                        "name": "第9课 电商推荐系统",
                        "video_id": 1126,
                        "point": [
                            {
                                "name": "推荐系统与评估",
                                "type": 1
                            },
                            {
                                "name": "基于内容的推荐",
                                "type": 1
                            },
                            {
                                "name": "基于近邻的推荐--协同过滤",
                                "type": 1
                            },
                            {
                                "name": "隐语义模型",
                                "type": 1
                            },
                            {
                                "name": "从头手写搭建协同过滤与隐语义模型推荐",
                                "type": 2
                            },
                            {
                                "name": "基于scikit-surprise的推荐系统",
                                "type": 2
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    },
                    {
                        "is_video": 1,
                        "name": "第10课 聚类",
                        "video_id": 1127,
                        "point": [
                            {
                                "name": "K-means/K-Medoid",
                                "type": 1
                            },
                            {
                                "name": "层次聚类",
                                "type": 1
                            },
                            {
                                "name": "GMM",
                                "type": 1
                            },
                            {
                                "name": "K-means/GMM代码实现和实际应用分析",
                                "type": 2
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    },
                    {
                        "is_video": 1,
                        "name": "第11课 聚类与推荐系统实战",
                        "video_id": 1128,
                        "point": [
                            {
                                "name": "基于用户聚类的推荐系统",
                                "type": 2
                            },
                            {
                                "name": "推荐系统比赛案例（数据、代码）",
                                "type": 2
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    }
                ]
            },
            {
                "stage_name": "第四阶段 高阶知识 深入机器学习",
                "lesson": [
                    {
                        "is_video": 1,
                        "name": "第12课 贝叶斯网络",
                        "video_id": 1129,
                        "point": [
                            {
                                "name": "朴素贝叶斯",
                                "type": 1
                            },
                            {
                                "name": "有向分离",
                                "type": 1
                            },
                            {
                                "name": "马尔科夫模型",
                                "type": 1
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    },
                    {
                        "is_video": 1,
                        "name": "第13课 隐马尔科夫模型HMM",
                        "video_id": 1130,
                        "point": [
                            {
                                "name": "概率计算问题",
                                "type": 1
                            },
                            {
                                "name": "参数学习问题",
                                "type": 1
                            },
                            {
                                "name": "状态预测问题",
                                "type": 1
                            },
                            {
                                "name": "使用HMM进行中文分词",
                                "type": 2
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    },
                    {
                        "is_video": 1,
                        "name": "第14课 主题模型",
                        "video_id": 1131,
                        "point": [
                            {
                                "name": "pLSA",
                                "type": 1
                            },
                            {
                                "name": "共轭先验分布",
                                "type": 1
                            },
                            {
                                "name": "LDA",
                                "type": 1
                            },
                            {
                                "name": "使用LDA进行文档分类",
                                "type": 2
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    }
                ]
            },
            {
                "stage_name": "第五阶段 迈入深度学习 打开DL大门",
                "lesson": [
                    {
                        "is_video": 1,
                        "name": "第15课 神经网络初步",
                        "video_id": 1132,
                        "point": [
                            {
                                "name": "全连接神经网络",
                                "type": 1
                            },
                            {
                                "name": "反向传播算法与权重优化",
                                "type": 1
                            },
                            {
                                "name": "训练注意点",
                                "type": 1
                            },
                            {
                                "name": "通用混合神经网络模板",
                                "type": 1
                            },
                            {
                                "name": "手写神经网络解决非线性切分问题",
                                "type": 2
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    },
                    {
                        "is_video": 1,
                        "name": "第16课 卷积神经网络与计算机视觉",
                        "video_id": 1133,
                        "point": [
                            {
                                "name": "卷积神经网络结构分析",
                                "type": 1
                            },
                            {
                                "name": "过拟合与随机失活",
                                "type": 1
                            },
                            {
                                "name": "卷积神经网络理解",
                                "type": 1
                            },
                            {
                                "name": "典型网络结构详解",
                                "type": 1
                            },
                            {
                                "name": "利用ResNet与inception解决一般图像分类问题套路",
                                "type": 2
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    },
                    {
                        "is_video": 1,
                        "name": "第17课 循环神经网络与自然语言处理",
                        "video_id": 1134,
                        "point": [
                            {
                                "name": "循环神经网络",
                                "type": 1
                            },
                            {
                                "name": "长时依赖问题与长短时记忆网络",
                                "type": 1
                            },
                            {
                                "name": "BPTT算法",
                                "type": 1
                            },
                            {
                                "name": "利用循环神经网络生成文本作诗",
                                "type": 2
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    },
                    {
                        "is_video": 1,
                        "name": "第18课 深度学习实践",
                        "video_id": 1135,
                        "point": [
                            {
                                "name": "Caffe应用要点",
                                "type": 1
                            },
                            {
                                "name": "TensorFlow/Keras简介",
                                "type": 1
                            },
                            {
                                "name": "用神经网络完成图像分类与特征提取",
                                "type": 2
                            },
                            {
                                "name": "用Keras构建文本情感分析模型",
                                "type": 2
                            }
                        ],
                        "class_price": 0,
                        "is_preview": 0,
                        "is_class": 0,
                        "video_auth": 0
                    }
                ]
            }
        ]
    }

    render() {
        const tabs = [
            {title: '介绍'},
            {title: '大纲'}
        ];

        return (
            <div className='detail-box'>
                <div className="toapp">在APP打开</div>
                {/*头部*/}
                <div className="detail-header">
                    <i className={'iconfont iconiconfront-68 return'}></i>
                    <span className='herder'>课程详情</span>
                    <i className={'iconfont icongouwuche shopping-cart'}></i>
                </div>
                {/*课程*/}
                <div className='course-content'>
                    <div className='cover'>
                        <img src='https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg'
                             alt=""/>
                    </div>
                    <div className="info">
                        <p className='title'>区块链实战[一对一实战 公区块链实战[一对一实战 公...</p>
                        <p className='contact text-overflow-2'>从零入门区块链和比特币，送干货从零入门</p>
                        <div className='des'>
                            {this.state.isbuy === 0 && <p className="course-price">
                                <span className="new">￥3980</span>
                                <span className="old">￥5680</span>
                            </p>
                            }
                            {this.state.isbuy === 1 &&
                            <a href="/#" className="isbuy">已购买</a>
                            }
                        </div>
                    </div>
                </div>
                {/*正常课程已购买时显示*/}
                {
                    this.state.isbuy === 1 &&
                    <div className='group'>
                        上课QQ群：449141326，加群请备注您的学号：479409
                    </div>
                }
                {/*vip课程显示*/}
                {
                    this.state.isvip === 1 &&
                    <div className="vip">
                        <p>已开通年会员：2019/03/02 — 2020/03/02</p>
                        <p>年会员QQ群：967114537，加群请备注您的学号：479409</p>
                    </div>
                }


                {/*服务承诺*/}
                <div className='promise'>
                    <label>服务承诺</label>
                    <p>直播答疑 · 视频回放 · 讲师助教组长同答疑 · 毕业考核等十多项服务</p>
                </div>

                {/*分享赚钱*/}
                <div className='share-ranking'>
                    <span className="title">排行榜：</span>
                    <span className="ranking-mess"><img src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg" alt=""/><i>22元</i></span>
                    <span className="ranking-mess"><img src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg" alt=""/><i>22元</i></span>
                    <img className="ranking-ellipsis" src="https://julyedu-img.oss-cn-beijing.aliyuncs.com/Image/train/ellipsis.png" alt=""/>
                    <button className="share">分享赚22元</button>
                </div>

                {/*砍价*/}
                <Bargain/>

                {/*课程介绍、大纲*/}
                <div className='course-detail'>
                    <WhiteSpace/>
                    <Tabs tabs={tabs}>
                        {/*介绍*/}
                        <div className='introduce'>
                            讲师：寒小阳、褚博士、David、林老师、张雨石、李老师
                            课时：线上课每次至少2小时，线下课每次至少4小时
                            时间：随到随学，视频课件代码作考一应俱全，且讲师助教 答疑
                            <img
                                src='https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg'
                                alt=""/>
                        </div>
                        {/*大纲*/}
                        <div className='outline'>
                            {
                                this.state.stage_info.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 text-overflow-1'>{item.name}</h2>
                                                            {
                                                                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>
                                                                    )

                                                                })
                                                            }
                                                        </ul>
                                                    )
                                                })
                                            }
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </Tabs>
                    <WhiteSpace/>
                </div>
            </div>
        );
    }

}

export default Detail;