import React, {Component} from 'react';
import {Tabs, WhiteSpace} from 'antd-mobile';
import './index.scss';
import Bargain from './bargain'
class Detail extends Component {
state = {
isbuy: 0,
isvip: 0,
isshow: false,
status: 0,
stage_info: [
{
"stage_name": "预习阶段 机器学习中的数学基础",
"lesson": [
{
"is_video": 0,
"name": "微积分",
"video_id": 1170,
"point": [
{
"name": "微积分的基本概念",
"type": 1
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 2,
"name": "概率论",
"video_id": 1171,
"point": [
{
"name": "概率论简介",
"type": 1
}
],
"class_price": 22.99,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 3,
"name": "线性代数",
"video_id": 1172,
"point": [
{
"name": "线性代数基础",
"type": 1
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 4,
"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": 5,
"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": 6,
"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
}
]
}
]
}
toAudition() {
this.setState(status => ({
isshow: !status.isshow,
status: 0
}));
}
toSingleset() {
this.setState(status => ({
isshow: !status.isshow,
status: 1
}));
}
colse(){
this.setState(status => ({
isshow: !status.isshow,
}));
}
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}
{ // 试听
item.is_video === 0 &&
<span className='btn-right-10 audition' onClick={this.toAudition.bind(this)}>试听</span>
}
{ // 未购买未开单集购买：上锁标志，点击提示购买
item.is_video === 3 &&
<i className='iconfont iconiconfront-74 icon-right-22'></i>
}
{ // 未购买已开单集购买：显示单集价格，点击购买单集
item.is_video === 2 &&
<span className='btn-right-10 singleset' onClick={this.toSingleset.bind(this)}>¥ {item.class_price}</span>
}
{
// 已购买直播中：正在直播，点击进入直播间
item.is_video === 4 &&
<span className='live icon-right-22'>正在直播<i className='iconfont icondanseshixintubiao-23'></i></span>
}
{
// 已购买直播结束已上传视频：正常播放按钮，点击播放课程
item.is_video === 5 &&
<i className='iconfont icondanseshixintubiao-23 icon-right-22'></i>
}
{
// 已购买未开课、已购买直播结束：空
}
</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>
{
this.state.isshow === true &&
<div>
<div className='popup-box'>
{
this.state.status === 0 &&
<div className='content audition-box'>
<p className='audition-header'>当前页面不支持试听</p>
<p className='audition-dec'>请前往APP试听</p>
<div className='btn btn-18B4ED'>立即前往</div>
</div>
}
{
this.state.status === 1 &&
<div className='content singleset-payment'>
<div className='price-box'>
<span>实付款：</span>
<p>25元</p>
</div>
<div className='course-info'>
<p className='text-overflow-1'><span>课程：</span>机器学习</p>
<p className='text-overflow-1'><span>课时：</span>第2课时 决策树与树集成模型法法第2课时 决策树与树集成模型法法</p>
</div>
<div className='payment-type'>
<label>支付方式：</label>
<p>
<i className='iconfont iconzhifubaox-'></i>
<span>支付宝</span>
<i className='iconfont icondanseshixintubiao-5 redioed'></i>
</p>
<p>
<i className='iconfont iconweixinzhifu buy'></i>
<span>微信支付</span>
<i className='iconfont icondanseshixintubiao-5 redio'></i>
</p>
</div>
<div className='btn btn-18B4ED'>确认购买</div>
</div>
}
{
this.state.status === 2 &&
<div className='content payment-success'>
<div className="header">
<i className='iconfont icondanseshixintubiao-5'></i>
<span>购买成功</span>
</div>
<div className="dec">· 3天内购买全集，可直接抵扣该集费用，275元购买。</div>
<div className="dec">· 超过3天，按照未够集数/全部集数等比例计费，280元购买全集。</div>
<div className='btn btn-18B4ED'>开始学习</div>
<div className='btn btn-FF4000'>￥275购买全集</div>
</div>
}
{
this.state.status === 3 &&
<div className='content zero'>
<div className="header">
<i className='iconfont icondanseshixintubiao-5'></i>
<span>购买成功</span>
</div>
<div className="dec">· 恭喜您获得0元拼团购买剩余课时的机会。</div>
<div className='btn btn-FF4000'>0元参团</div>
</div>
}
{
this.state.status === 4 &&
<div className='content zero'>
<div className="header">
<i className='iconfont icondanseshixintubiao-5'></i>
<span>购买成功</span>
</div>
<div className="dec">· 恭喜您获得0元购买剩余课时的机会。</div>
<div className='btn btn-FF4000'>0元购</div>
</div>
}
<i onClick={this.colse.bind(this)} className={'iconfont iconiconfront-2 close'}></i>
</div>
</div>
}
</div>
);
}
}
export default Detail;