Skip to content

M
mr-julyedu
Commit 4cb9573e by baiguangyao
Options

.

parent f2af1ac9
Showing with 2459 additions and 9 deletions
.history/src/components/detail/index_20190429145954.js 0 → 100644
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;
.history/src/components/detail/index_20190429150246.js 0 → 100644
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,
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;
.history/src/components/preferential/index_20190427095700.js 0 → 100644
import React, {Component} from 'react';
import {VList} from '../../common';
import {Tabs, WhiteSpace, SearchBar} from 'antd-mobile';
import './index.scss';
class Preferential extends Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
this.ontabclick = this.ontabclick.bind(this)
}
handleClick() {
console.log(1);
}
ontabclick(tab, index) {
console.log(tab, index)
this.setState(status => ({
data: status.dataList,
}));
}
toSearch() {
window.location.href ='/search'
}
return() {
window.location.href ='/classify'
}
state = {
mockData: [
{
title: '三月面试求职三月面试求职三月面试求职',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒6',
time: '03月12日',
record: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒',
isbuy: 1,
price0: 100,
price1: 100
},
{
title: '三月面试求职三月面试求职三月面试求职',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒6',
time: '03月12日',
record: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒',
isbuy: 1,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
],
data: [
{
title: '三月面试求职三月面试求职三月面试求职',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒6',
time: '03月12日',
record: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒',
isbuy: 1,
price0: 100,
price1: 100
},
{
title: '三月面试求职三月面试求职三月面试求职',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒6',
time: '03月12日',
record: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒',
isbuy: 1,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
],
dataList: [
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': 'Spark大数据',
'teacher': 'wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '机器学习',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': 'Linux',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '数学',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 1,
'price0': 200,
'price1': 2000
}
]
}
render() {
const tabs = [
{title: '限时特惠'},
{title: '砍价专区'},
{title: '一键拼团'}
];
const bottom = (
<i className={'iconfont iconiconfront-69 pull-down'}></i>
)
const top = (
<i className={'iconfont iconiconfront-71 pull-down'}></i>
)
return (
<div className='preferential'>
<div className="search-nav">
<i className={'iconfont iconiconfront-68 return'} onClick={this.return.bind(this)}></i>
<SearchBar
placeholder="搜索课程"
cancelText={" "}
onFocus={this.toSearch.bind(this)}
showCancelButton={false}
/>
<i className={'iconfont icongouwuche shopping-cart'}></i>
</div>
<div className='class-content'>
<WhiteSpace/>
<Tabs
tabs={tabs}
animated={false}
onChange={(tab, index) => this.ontabclick(tab, index)}
onTabClick={(tab, index) => this.ontabclick(tab, index)}
>
<div className='tabs'>
<ul>
{this.state.data.map((item, index) => {
const Info = (
<div className="info">
<p className='title'>{item.title}</p>
<p className='contact text-overflow-2'>{item.contact}</p>
<div className='des'>
{item.isbuy === 0 && <p className="course-price">
<span className='price'>特惠价：</span>
<span className="new">¥{item.price0}</span>
<span className="old">¥{item.price1}</span>
</p>
}
{item.isbuy === 1 &&
<a href="/#" className="isbuy">已购买</a>
}
</div>
</div>
)
const status = (
<div>
{item.isbuy === 1 &&
<p className='course-status'>拼团减100元</p>
}
</div>
)
return (
<VList handleClick={this.handleClick} key={index} status={status}
info={Info}></VList>
)
})}
</ul>
</div>
</Tabs>
<WhiteSpace/>
</div>
</div>
)
}
}
export default Preferential;
.history/src/components/preferential/index_20190429150316.js 0 → 100644
import React, {Component} from 'react';
import {VList} from '../../common';
import {Tabs, WhiteSpace, SearchBar} from 'antd-mobile';
import './index.scss';
class Preferential extends Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
this.ontabclick = this.ontabclick.bind(this)
}
handleClick() {
console.log(1);
}
ontabclick(tab, index) {
console.log(tab, index)
this.setState(status => ({
data: status.dataList,
}));
}
toSearch() {
window.location.href ='/search'
}
return() {
window.location.href ='/classify'
}
state = {
mockData: [
{
title: '三月面试求职三月面试求职三月面试求职',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒6',
time: '03月12日',
record: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒',
isbuy: 1,
price0: 100,
price1: 100
},
{
title: '三月面试求职三月面试求职三月面试求职',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒6',
time: '03月12日',
record: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒',
isbuy: 1,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
],
data: [
{
title: '三月面试求职三月面试求职三月面试求职',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒6',
time: '03月12日',
record: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒',
isbuy: 1,
price0: 100,
price1: 100
},
{
title: '三月面试求职三月面试求职三月面试求职',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒6',
time: '03月12日',
record: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒',
isbuy: 1,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
],
dataList: [
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': 'Spark大数据',
'teacher': 'wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '机器学习',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': 'Linux',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '数学',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 1,
'price0': 200,
'price1': 2000
}
]
}
render() {
const tabs = [
{title: '限时特惠'},
{title: '砍价专区'},
{title: '一键拼团'}
];
// const bottom = (
// <i className={'iconfont iconiconfront-69 pull-down'}></i>
// )
// const top = (
// <i className={'iconfont iconiconfront-71 pull-down'}></i>
// )
return (
<div className='preferential'>
<div className="search-nav">
<i className={'iconfont iconiconfront-68 return'} onClick={this.return.bind(this)}></i>
<SearchBar
placeholder="搜索课程"
cancelText={" "}
onFocus={this.toSearch.bind(this)}
showCancelButton={false}
/>
<i className={'iconfont icongouwuche shopping-cart'}></i>
</div>
<div className='class-content'>
<WhiteSpace/>
<Tabs
tabs={tabs}
animated={false}
onChange={(tab, index) => this.ontabclick(tab, index)}
onTabClick={(tab, index) => this.ontabclick(tab, index)}
>
<div className='tabs'>
<ul>
{this.state.data.map((item, index) => {
const Info = (
<div className="info">
<p className='title'>{item.title}</p>
<p className='contact text-overflow-2'>{item.contact}</p>
<div className='des'>
{item.isbuy === 0 && <p className="course-price">
<span className='price'>特惠价：</span>
<span className="new">¥{item.price0}</span>
<span className="old">¥{item.price1}</span>
</p>
}
{item.isbuy === 1 &&
<a href="/#" className="isbuy">已购买</a>
}
</div>
</div>
)
const status = (
<div>
{item.isbuy === 1 &&
<p className='course-status'>拼团减100元</p>
}
</div>
)
return (
<VList handleClick={this.handleClick} key={index} status={status}
info={Info}></VList>
)
})}
</ul>
</div>
</Tabs>
<WhiteSpace/>
</div>
</div>
)
}
}
export default Preferential;
.history/src/components/shopCard/index_20190429150220.js 0 → 100644
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Checkbox, NavBar } from 'antd-mobile'
//组件
import ShopCard from './cardList.js'
import Loading from '@base/Loading'
//css
import './card.scss'
import classnames from 'classnames'
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110',
check: false
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '111',
check: false
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '112',
check: false
}
]
class Cart extends Component {
constructor(props) {
super(props)
this.state = {
deleteAll: false,
loading: false,
checkedNum: 0,
allPrice: 0,
cartNmu: 0,
data: mockData
}
this.checkChange = this.checkChange.bind(this);
this.getCartList = this.getCartList.bind(this);
this.changeStock = this.changeStock.bind(this);
}
//获取购物车列表
getCartList() {
}
changeStock() {
}
//全选
allChange(e) {
let checked = e.target.checked
let newData = this.state.data.map((item, i) => {
return {
...item,
check: checked
}
})
this.setState({
data: newData
})
this.calc(newData)
}
//点击
checkChange(id, check) {
let newData = this.state.data.map((item, i) => {
if (item.id === id) {
return {
...item,
check: check
}
} else {
return item;
}
})
this.setState({
data: newData
})
this.calc(newData)
}
//计算总价
calc(newData) {
let allPrice = 0;
let checkedNum = 0;
let cartNmu = 0;
newData.forEach((item, i) => {
if (item.check) {
i++;
cartNmu += 1;
checkedNum = i;
allPrice += parseFloat(item.newprice);
}
})
this.setState({
checkedNum,
allPrice,
cartNmu
})
}
//购买
buy() {
}
deleteAll() {
}
//装载组件
componentDidMount() {
this.getCartList()
}
render() {
return (
<div className="cart-page" style={{ overflow: 'hidden' }}>
<NavBar
style={{ "height": "44px" }}
className="order-tab"
mode="light"
icon={<i style={{"fontSize": '24px'}} className="iconfont iconiconfront-68"></i>}
rightContent={[
<i key="0" style={{ "fontSize": '24px' }} className="iconfont iconiconfront-56"></i>
]}
>
购物车
</NavBar>
<div className="cart-body">
{
this.state.loading ?
<Loading />
:
<ShopCard getCartList={this.getCartList} changeStock={this.changeStock} checkChange={this.checkChange} data={this.state.data}/>
}
{
this.state.deleteAll ?
<div className="cart-footer">
<div>
<Checkbox onChange={(e) => {
this.allChange(e)
}} />
<div>全选</div>
</div>
<div></div>
<div className={classnames({
'active': this.state.cartNmu > 0
})}
onClick={() => {
if (this.state.cartNmu > 0) {
this.delete()
}
}}>
删除<span>({this.state.cartNmu})</span>
</div>
</div>
:
<div className="cart-footer">
<div className="cart-label">
<Checkbox onChange={(e) => {
this.allChange(e)
}} />
<div>全选</div>
</div>
<div className="all-pirce">
<p>
<span>合计：</span>
<span>￥{this.state.allPrice}</span>
</p>
</div>
<div className={classnames({
'active': this.state.checkedNum > 0
})} onClick={() => {
if (this.state.checkedNum > 0) {
this.buy()
}
}}>
去结算<span>({this.state.checkedNum})</span>
</div>
</div>
}
</div>
</div>
)
}
}
export default connect()(Cart)
\ No newline at end of file
src/components/detail/index.js
import React, {Component} from 'react';
import {Tabs, WhiteSpace, Badge} from 'antd-mobile';
import {Tabs, WhiteSpace} from 'antd-mobile';
import './index.scss';
import Bargain from './bargain'
......
src/components/preferential/index.js
......@@ -320,12 +320,12 @@ class Preferential extends Component {
{title: '砍价专区'},
{title: '一键拼团'}
];
const bottom = (
<i className={'iconfont iconiconfront-69 pull-down'}></i>
)
const top = (
<i className={'iconfont iconiconfront-71 pull-down'}></i>
)
// const bottom = (
// <i className={'iconfont iconiconfront-69 pull-down'}></i>
// )
// const top = (
// <i className={'iconfont iconiconfront-71 pull-down'}></i>
// )
return (
<div className='preferential'>
......
src/components/shopCard/index.js
......@@ -80,8 +80,6 @@ class Cart extends Component {
//点击
checkChange(id, check) {
let newData = this.state.data.map((item, i) => {
console.log(item);
console.log(id);
if (item.id === id) {
return {
...item,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment