Skip to content

M
mr-julyedu
Commit 0727b44d by xuzhenghua
Options

单集购买

parents 66d2ccd1 f5b2c545
Showing with 858 additions and 16 deletions
src/assets/css/variable.scss
...@@ -59,6 +59,9 @@ $bg_FFA200: #FFA200; ...@@ -59,6 +59,9 @@ $bg_FFA200: #FFA200;
$bg_FE2F2F: #FE2F2F; $bg_FE2F2F: #FE2F2F;
$bg_FADD29: #FADD29; $bg_FADD29: #FADD29;
$bg_E7E7E7: #E7E7E7; $bg_E7E7E7: #E7E7E7;
$bg_18B4ED: #18B4ED;
$bg_FF4000: #FF4000;
/* /*
......
src/components/Index/index.js
...@@ -5,7 +5,45 @@ import Topscroll from './topscroll' ...@@ -5,7 +5,45 @@ import Topscroll from './topscroll'
import './index.scss'; import './index.scss';
class Index extends Component { class Index extends Component {
liveColse(){
this.setState(status => ({
isshow: !status.isshow,
}));
}
toSubscribe(){
this.setState(status => ({
isshow: !status.isshow,
toSubscribe: !status.toSubscribe
}));
}
subscribeColse(){
this.setState(status => ({
toSubscribe: !status.toSubscribe
}));
}
iphoneStep(){
this.setState(status => ({
step: 1
}));
}
serverStep(){
this.setState(status => ({
step: 2
}));
}
submit(){
this.setState(status => ({
success: true,
toSubscribe: !status.toSubscribe
}));
}
state = { state = {
issubscribe: 0,
toSubscribe: false,
isfollow: true,
isshow: true,
step: 0,
success: false,
dataList: [ dataList: [
{ {
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png', 'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
...@@ -257,6 +295,94 @@ class Index extends Component { ...@@ -257,6 +295,94 @@ class Index extends Component {
<p>查看全部课程</p> <p>查看全部课程</p>
<span>数学基础、数学结构、大数据实战、Python...</span> <span>数学基础、数学结构、大数据实战、Python...</span>
</div> </div>
{
this.state.isshow === true &&
<div className='live-room-box'>
<div className='live-room-content'>
<div className='course-banner'>
<div className='left'><span></span></div>
<div className='center'><img src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png" alt=""/></div>
<div className='right'><span></span></div>
</div>
<div className='course-dec'>
<h2 className='title'>第四课：概率论算法精透</h2>
<p className='teacher'>讲师：林奔</p>
<p className='time'>时间：明晚20:00—22:00</p>
</div>
<div className='course-info'>
<ul>
<li>简介：</li>
<li className='text-overflow-2'>
知识点1：图的定义 (有向图，无向图)定义四行。
</li>
<li className='text-overflow-2'>
知识点2：拓扑排序实战项目：最短路（Floyd，Dijkstra，Bellmanford）。
</li>
</ul>
</div>
<div className='course-subscribe'>
{
this.state.issubscribe === 0 &&
<button onClick={this.toSubscribe.bind(this)}>预约</button>
}
{
this.state.issubscribe === 1 &&
<span>直播尚未开始，敬请期待...</span>
}
</div>
</div>
<div className='live-room-close'>
<i onClick={this.liveColse.bind(this)} className={'iconfont iconiconfront-2 close'}></i>
</div>
</div>
}
{
this.state.toSubscribe === true &&
<div className='subscribe-box'>
{ this.state.step === 0 &&
<div>
<div className='close-subscribe' onClick={this.subscribeColse.bind(this)}></div>
<div className='subscribe-content'>
<span className='title'>请选择即将直播时通知您的方式</span>
<button className={this.state.isfollow ? 'follow' : 'nofollow'} onClick={this.serverStep.bind(this)}>微信服务号通知</button>
{
this.state.isfollow === true &&
<span className='tips'>关注服务号即代表预约成功</span>
}
<button className={this.state.isfollow ? 'follow' : 'nofollow'} onClick={this.iphoneStep.bind(this)}>手机短信通知</button>
</div>
</div>
}
{ this.state.step === 1 &&
<div>
<div className='close-subscribe' onClick={this.subscribeColse.bind(this)}></div>
<div className='iphone-content'>
<span className='title'>预约</span>
<p className='dec'>直播前会通过手机短信通知您，您可通过预留的手机号快捷登录参与学习：</p>
<input type="text" placeholder='请输入手机号'/>
<button className='submit' onClick={this.submit.bind(this)}>预约</button>
</div>
</div>
}
{ this.state.step === 2 &&
<div>
<div className='close-subscribe' onClick={this.subscribeColse.bind(this)}></div>
<div className='iphone-content server-content'>
<p className='title'><i className={'iconfont icondanseshixintubiao-5'}></i><span>预约成功</span></p>
<p className='dec'>直播开始前会通过微信“服务通知”提醒您。 推荐预留手机号，届时可通过手机号登录直播 间直接学习：</p>
<input type="text" placeholder='请输入手机号'/>
<button className='submit' onClick={this.submit.bind(this)}>提交</button>
</div>
</div>
}
</div>
}
{
this.state.success === true &&
<div className='success'>预约成功</div>
}
</div> </div>
); );
} }
......
src/components/Index/index.scss
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
} }
.search { .search {
font-size: 22px!important; font-size: 22px !important;
float: right; float: right;
margin-top: -6px; margin-top: -6px;
} }
...@@ -107,11 +107,13 @@ ...@@ -107,11 +107,13 @@
overflow: auto; overflow: auto;
position: relative; position: relative;
margin-top: 15px; margin-top: 15px;
.scroll-list { .scroll-list {
height: 100%; height: 100%;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
.scroll-item { .scroll-item {
display: inline-block; display: inline-block;
width: 301px; width: 301px;
...@@ -160,9 +162,11 @@ ...@@ -160,9 +162,11 @@
} }
} }
} }
}::-webkit-scrollbar{ }
display:none;
} ::-webkit-scrollbar {
display: none;
}
.category-vip { .category-vip {
...@@ -283,4 +287,322 @@ ...@@ -283,4 +287,322 @@
} }
} }
} /*
\ No newline at end of file 直播间预约
*/
.live-room-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
.live-room-content {
background-color: $bg_fff;
width: 280px;
height: 400px;
border-radius: 10px;
margin: 110px auto 0 auto;
padding-top: 20px;
.course-banner {
width: 100%;
height: 118px;
display: flex;
justify-content: space-between;
.left {
width: 43px;
height: 73px;
background-color: #fdd9e9;
border-radius: 0 10px 10px 0;
margin-top: 22px;
span {
display: inline-block;
width: 37px;
height: 63px;
background-color: #FCC2DA;
border-radius: 0 10px 10px 0;
margin-top: 5px;
margin-right: 6px;
}
}
.right {
width: 43px;
height: 73px;
background-color: #fce4c4;
border-radius: 10px 0 0 10px;
margin-top: 22px;
span {
display: inline-block;
width: 37px;
height: 63px;
background-color: #FAD29F;
border-radius: 10px 0 0 10px;
margin-top: 5px;
margin-left: 6px;
}
}
.center {
img {
width: 165px;
height: 118px;
border-radius: 10px;
}
}
}
.course-dec {
text-align: center;
margin-top: 10px;
.title {
color: $color_333;
font-size: 14px;
}
.teacher {
color: $color_333;
font-size: 16px;
margin: 10px 0 5px 0;
}
.time {
color: $active;
font-size: 12px;
}
}
.course-info {
margin-top: 10px;
height: 115px;
padding: 13px 0;
border-top: 1px solid $border_e7eaf1;
border-bottom: 1px solid $border_e7eaf1;
ul {
margin: 0 auto;
width: 195px;
height: 90px;
overflow: hidden;
li {
color: $color_666;
font-size: 12px;
}
li:nth-child(1) {
color: $color_333;
font-size: 14px;
}
}
}
.course-subscribe {
text-align: center;
button {
margin-top: 12px;
width: 60px;
height: 27px;
background-color: $bg_active;
border-radius: 14px;
font-size: 14px;
color: $white;
border: none;
}
span {
display: inline-block;
margin-top: 12px;
font-size: 16px;
color: $redprice;
}
}
}
.live-room-close {
text-align: center;
margin-top: 20px;
.close {
font-size: 22px !important;
color: $white;
}
}
}
.subscribe-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .8);
.close-subscribe {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
}
.subscribe-content {
width: 300px;
height: 155px;
background-color: $bg_fff;
border-radius: 3px;
position: absolute;
top: 50%;
margin-top: -150px;
left: 50%;
margin-left: -150px;
text-align: center;
padding-top: 20px;
button {
background-color: $bg_18B4ED;
font-size: 16px;
color: $white;
width: 135px;
height: 30px;
border-radius: 15px;
border: none;
display: block;
margin: auto;
}
.title {
font-size: 16px;
color: $color_333;
display: block;
height: 15px;
line-height: 15px;
}
.follow {
margin-top: 15px;
}
.nofollow {
margin-top: 20px;
}
.tips {
font-size: 12px;
color: $color_555;
display: block;
height: 12px;
line-height: 12px;
margin-top: 7px;
}
.iphone {
margin-top: 15px;
}
}
.iphone-content {
width: 300px;
height: 191px;
background-color: $bg_fff;
border-radius: 3px;
position: absolute;
top: 50%;
margin-top: -150px;
left: 50%;
margin-left: -150px;
text-align: center;
padding: 15px 20px;
.title {
font-size: 16px;
color: $color_333;
display: block;
height: 15px;
line-height: 15px;
}
.dec {
font-size: 14px;
color: $color_666;
display: block;
margin-top: 15px;
text-align: left;
height: 33px;
line-height: 18px;
}
input {
width: 100%;
height: 30px;
padding-left: 15px;
border: 1px solid $border_ccc;
margin-top: 15px;
}
input:focus {
border: 1px solid $bg_active;
}
.submit {
width: 260px;
height: 30px;
background-color: $bg_18B4ED;
border-radius: 3px;
font-size: 16px;
color: $white;
border: none;
margin-top: 20px;
}
}
.server-content {
height: 226px;
padding: 20px;
.title {
font-size: 18px;
color: $active;
height: 24px;
line-height: 24px;
i{
font-size: 24px;
margin-right: 10px;
}
span {
position: relative;
top: -3px;
}
}
.dec {
height: 53px;
}
}
}
.success {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 32px;
background-color: $bg_000;
border-radius: 15px;
margin-left: -50px;
margin-top: -16px;
opacity: .6;
color: $white;
font-size: 16px;
text-align: center;
line-height: 32px;
}
}
src/components/detail/index.js
...@@ -8,12 +8,14 @@ class Detail extends Component { ...@@ -8,12 +8,14 @@ class Detail extends Component {
state = { state = {
isbuy: 0, isbuy: 0,
isvip: 0, isvip: 0,
isshow: false,
status: 0,
stage_info: [ stage_info: [
{ {
"stage_name": "预习阶段 机器学习中的数学基础", "stage_name": "预习阶段 机器学习中的数学基础",
"lesson": [ "lesson": [
{ {
"is_video": 1, "is_video": 0,
"name": "微积分", "name": "微积分",
"video_id": 1170, "video_id": 1170,
"point": [ "point": [
...@@ -28,7 +30,7 @@ class Detail extends Component { ...@@ -28,7 +30,7 @@ class Detail extends Component {
"video_auth": 0 "video_auth": 0
}, },
{ {
"is_video": 1, "is_video": 2,
"name": "概率论", "name": "概率论",
"video_id": 1171, "video_id": 1171,
"point": [ "point": [
...@@ -37,13 +39,13 @@ class Detail extends Component { ...@@ -37,13 +39,13 @@ class Detail extends Component {
"type": 1 "type": 1
} }
], ],
"class_price": 0, "class_price": 22.99,
"is_preview": 0, "is_preview": 0,
"is_class": 0, "is_class": 0,
"video_auth": 0 "video_auth": 0
}, },
{ {
"is_video": 1, "is_video": 3,
"name": "线性代数", "name": "线性代数",
"video_id": 1172, "video_id": 1172,
"point": [ "point": [
...@@ -58,7 +60,7 @@ class Detail extends Component { ...@@ -58,7 +60,7 @@ class Detail extends Component {
"video_auth": 0 "video_auth": 0
}, },
{ {
"is_video": 1, "is_video": 4,
"name": "凸优化", "name": "凸优化",
"video_id": 1173, "video_id": 1173,
"point": [ "point": [
...@@ -78,7 +80,7 @@ class Detail extends Component { ...@@ -78,7 +80,7 @@ class Detail extends Component {
"stage_name": "第一阶段 掌握基本模型 打开ML大门", "stage_name": "第一阶段 掌握基本模型 打开ML大门",
"lesson": [ "lesson": [
{ {
"is_video": 1, "is_video": 5,
"name": "第1课 回归问题与应用", "name": "第1课 回归问题与应用",
"video_id": 1118, "video_id": 1118,
"point": [ "point": [
...@@ -113,7 +115,7 @@ class Detail extends Component { ...@@ -113,7 +115,7 @@ class Detail extends Component {
"video_auth": 0 "video_auth": 0
}, },
{ {
"is_video": 1, "is_video": 6,
"name": "第2课 决策树与树集成模型", "name": "第2课 决策树与树集成模型",
"video_id": 1119, "video_id": 1119,
"point": [ "point": [
...@@ -592,6 +594,24 @@ class Detail extends Component { ...@@ -592,6 +594,24 @@ class Detail extends Component {
] ]
} }
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() { render() {
const tabs = [ const tabs = [
{title: '介绍'}, {title: '介绍'},
...@@ -687,7 +707,33 @@ class Detail extends Component { ...@@ -687,7 +707,33 @@ class Detail extends Component {
item.lesson.map((item, index) => { item.lesson.map((item, index) => {
return ( return (
<ul key={index}> <ul key={index}>
<h2 className='classhour text-overflow-1'>{item.name}</h2> <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) => { item.point.map((item, index) => {
const type = ( const type = (
...@@ -719,6 +765,84 @@ class Detail extends Component { ...@@ -719,6 +765,84 @@ class Detail extends Component {
</Tabs> </Tabs>
<WhiteSpace/> <WhiteSpace/>
</div> </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 redio'></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> </div>
); );
} }
......
src/components/detail/index.scss
...@@ -155,18 +155,22 @@ ...@@ -155,18 +155,22 @@
display: flex; display: flex;
position: relative; position: relative;
font-size: 12px; font-size: 12px;
.title { .title {
font-size: 14px; font-size: 14px;
margin-right: 12px; margin-right: 12px;
} }
.ranking-mess { .ranking-mess {
margin-right: 20px; margin-right: 20px;
img { img {
width: 22px; width: 22px;
height: 22px; height: 22px;
border-radius: 50%; border-radius: 50%;
vertical-align: middle; vertical-align: middle;
} }
i { i {
display: inline-block; display: inline-block;
margin-left: 5px; margin-left: 5px;
...@@ -174,17 +178,19 @@ ...@@ -174,17 +178,19 @@
font-style: normal; font-style: normal;
} }
} }
.ranking-ellipsis { .ranking-ellipsis {
width: 22px; width: 22px;
height: 22px; height: 22px;
border-radius: 50%; border-radius: 50%;
} }
.share { .share {
position: absolute; position: absolute;
right: 12px; right: 12px;
padding: 5px 6px; padding: 5px 6px;
border:1px solid $red; border: 1px solid $red;
border-radius:3px; border-radius: 3px;
color: $red; color: $red;
background-color: $bg_fff; background-color: $bg_fff;
} }
...@@ -249,6 +255,7 @@ ...@@ -249,6 +255,7 @@
padding-left: 10px; padding-left: 10px;
margin-top: 10px; margin-top: 10px;
margin-bottom: 5px; margin-bottom: 5px;
position: relative;
} }
.points { .points {
...@@ -261,6 +268,267 @@ ...@@ -261,6 +268,267 @@
.red { .red {
color: $color_FE2F2F; color: $color_FE2F2F;
} }
.icon-right-22 {
position: absolute;
right: 22px;
}
.iconiconfront-74 {
font-size: 19px;
}
.icondanseshixintubiao-23 {
display: inline-block;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: $bg_active;
color: $white;
text-align: center;
line-height: 22px;
font-size: 14px;
top: 6px;
margin-left: 5px;
}
.live {
color: $active;
font-size: 12px;
}
.btn-right-10 {
position: absolute;
right: 10px;
top: 6px;
display: inline-block;
min-width: 44px;
padding: 0 5px;
height: 22px;
line-height: 22px;
text-align: center;
color: $white;
font-size: 12px;
border-radius: 11px;
}
.audition {
background: linear-gradient(90deg, $bg_0078FF 0%, $bg_active 100%);
}
.singleset {
background-color: $bg_FE2F2F;
}
}
}
.popup-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 1;
.content {
width: 300px;
position: relative;
margin-left: -150px;
background-color: $white;
left: 50%;
padding-top: 20px;
border-radius: 3px;
}
.close {
position: absolute;
top: 380px;
color: #fff;
font-size: 22px;
left: 50%;
margin-left: -11px;
}
.btn {
position: absolute;
bottom: 24px;
left: 83px;
width: 135px;
height: 30px;
border-radius: 3px;
font-size: 16px;
color: $white;
text-align: center;
line-height: 30px;
}
.btn-18B4ED {
background-color: $bg_18B4ED;
}
.btn-FF4000 {
background-color: $bg_FF4000;
}
.header {
color: $active;
height: 24px;
line-height: 24px;
text-align: center;
i {
font-size: 24px;
}
span {
font-size: 18px;
margin-left: 10px;
vertical-align: text-bottom;
}
}
.audition-box {
height: 144px;
top: 212px;
text-align: center;
.audition-header {
font-size: 16px;
color: $color_333;
}
.audition-dec {
font-size: 14px;
color: $color_666;
margin-top: 10px;
}
}
.singleset-payment {
height: 305px;
top: 140px;
padding: 17px 20px;
.price-box {
padding-bottom: 15px;
border-bottom: 1px solid $sp_ddd;
span {
font-size: 12px;
color: $color_666;
}
p {
height: 22px;
line-height: 22px;
color: $color_FF4000;
font-size: 22px;
text-align: center;
margin-top: 5px;
}
}
.course-info {
font-size: 14px;
p {
height: 14px;
line-height: 14px;
margin-top: 10px;
color: $color_333;
span {
color: $color_666;
}
}
}
.payment-type {
margin-top: 20px;
label {
display: inline-block;
width: 100%;
border-bottom: 1px solid $sp_ddd;
color: $color_666;
font-size: 12px;
padding-bottom: 5px;
}
p {
height: 22px;
line-height: 22px;
margin-top: 10px;
position: relative;
.iconzhifubaox- {
font-size: 22px;
}
.iconweixinzhifu {
font-size: 22px;
}
span {
display: inline-block;
margin-left: 10px;
color: $color_333;
font-size: 14px;
vertical-align: text-bottom;
}
.redio {
position: absolute;
right: 0;
font-size: 20px;
}
}
}
}
.zero {
height: 147px;
top: 213px;
text-align: center;
.header {
color: $active;
height: 24px;
line-height: 24px;
i {
font-size: 24px;
}
span {
font-size: 18px;
margin-left: 10px;
vertical-align: text-bottom;
}
}
.dec {
height: 14px;
line-height: 14px;
color: $color_666;
font-size: 14px;
margin-top: 15px;
}
}
.payment-success {
height: 258px;
top: 143px;
padding: 20px 24px;
.dec {
height: 33px;
line-height: 20px;
color: $color_666;
font-size: 14px;
margin-top: 12px;
}
.btn-18B4ED {
bottom: 70px;
}
} }
} }
......
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