Skip to content

M
mr-julyedu
Commit 9aa5cf89 by zhanghaozhe
Options

限时免费

parent 2fb04c06
Showing with 85 additions and 27 deletions
src/components/classify/courselist.js
......@@ -203,17 +203,14 @@ class Classify extends Component {
<p className='contact text-overflow-2'>{item.desc}</p>
<div className='des'>
{
!item.is_buy ?
item.is_restricted ?
<div className="limit-free">
<span>限时免费</span>
<span>¥{item.price0}</span>
</div>
<LimitFree course={item}/>
: item.is_buy
? <span className="isbuy">已购买</span>
: <p className="course-price">
<span className="new">¥{item.price1}</span>
<span className="old">¥{item.price0}</span>
</p>
: <span className="isbuy">已购买</span>
}
</div>
</div>
......@@ -286,4 +283,37 @@ function ClassCourse(props) {
)
}
function LimitFreeStatus({course}) {
/*
* limit-free-status: 0-未领取 1-已领取 2-已过期
*
* */
switch (course.limit_free_status) {
case 0:
return <div className="limit-free">
<span>限时免费</span>
<span>¥{course.price0}</span>
</div>
case 1:
return <div>已领取</div>
case 2:
return <p className="course-price">
<span className="new">¥{course.price1}</span>
<span className="old">¥{course.price0}</span>
</p>
}
}
function LimitFree({course}) {
if (course.is_buy) {
if (course.limit_free_status === 1) {
return <div className={'isbuy'}>已领取</div>
} else {
return <div className={'isbuy'}>已购买</div>
}
} else {
return <LimitFreeStatus course={course}/>
}
}
export default Classify;
src/components/classify/courselist.scss
html,body,#root {
html, body, #root {
height: 100%;
}
.class-child {
position: relative;
height: 100%;
.preferential{
.preferential {
width: 100%;
height: 44px;
position: fixed;
......@@ -20,7 +21,7 @@ html,body,#root {
// padding: 88px 12px 0;
position: relative;
.custom-render-bar{
.custom-render-bar {
position: fixed;
top: 43px;
left: 0;
......@@ -51,6 +52,7 @@ html,body,#root {
background-color: rgba(224, 46, 36, 0.6);
}
.return_cash {
position: absolute;
width: 31px;
......@@ -103,23 +105,19 @@ html,body,#root {
.isbuy {
display: inline-block;
width: 61px;
height: 18px;
background-color: $bg_active;
border-radius: 9px;
color: $white;
font-size: 12px;
color: #09f;
font-size: 15px;
text-align: center;
line-height: 18px;
}
.limit-free{
span:first-child{
.limit-free {
span:first-child {
color: #FF2121;
font-size: 15px;
margin-right: 10px;
}
span:last-child{
span:last-child {
color: #999;
font-size: 11px;
text-decoration: line-through;
......@@ -133,6 +131,7 @@ html,body,#root {
display: flex;
margin-top: 10px;
margin-bottom: 50px;
ul {
width: 100%;
}
......@@ -149,6 +148,7 @@ html,body,#root {
background-color: $bg_fff;
color: $color_666;
}
.am-tabs-tab-bar-wrap {
padding-right: 20px;
}
......@@ -229,6 +229,7 @@ html,body,#root {
margin-bottom: -5px;
font-size: 12px;
}
.active-label {
display: inline-block;
width: 30.5%;
......@@ -247,8 +248,9 @@ html,body,#root {
}
}
}
.am-tabs-default-bar-top .am-tabs-default-bar-tab::after {
background-color: $bg_fff!important;
background-color: $bg_fff !important;
}
}
src/components/limit-free/index.js
......@@ -188,7 +188,7 @@ class LimitFree extends Component {
<span>{d}天{h}时{m}分后过期</span>
</div>
bottom = <div className={'bottom'}>
<span>已领取</span>
<span className={'purchased'}>已领取</span>
<StudyButton id={item.course_id}/>
</div>
break
......@@ -204,12 +204,12 @@ class LimitFree extends Component {
</div>
break
case 3:
des = <div className={'purchased'}>
des = <div className={'learner'}>
<i className='iconfont iconRectangleCopy4'/>
<span>{item.play_times}人学习</span>
</div>
bottom = <div className="bottom">
<span>已购买</span>
<span className={'purchased'}>已购买</span>
<StudyButton id={item.course_id}/>
</div>
}
......
src/components/limit-free/index.scss
......@@ -52,7 +52,7 @@
display: none;
}
& li:nth-last-child(1){
& li:nth-last-child(1) {
margin-right: 0;
}
}
......@@ -123,12 +123,27 @@
}
.info {
width: 50%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
flex-direction: column;
flex: auto;
font-size: 12px;
color: #999;
.title {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-family: "NotoSansHans-Medium", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.learner, .remain-time, {
margin-top: -30px;
}
.red {
color: #FF2121;
font-size: 15px;
......@@ -169,6 +184,10 @@
span {
font-size: 12px;
}
.purchased {
color: #09f;
}
}
}
......
src/components/video/index.js
......@@ -106,7 +106,8 @@ class Video extends Component {
limitFreeNoPromptChecked: false,//是否勾选"不再显示此弹框"选项
showLimitFreePopup: false,
limitFreePopup: {},
isShowNeverShowPopupOption: false //限时免费课程 播放结束后是否显示"不再显示此弹框"选项
isShowNeverShowPopupOption: false, //限时免费课程 播放结束后是否显示"不再显示此弹框"选项
limitFreePopupVideos: JSON.parse(localStorage.getItem('limit-free-popup-videos'))
}
......@@ -744,8 +745,10 @@ class Video extends Component {
const {code, msg, data} = res.data
if (code === 200) {
const {courseId, limitFreePopupVideos} = this.state
this.setState({
limitFreePopup: data
limitFreePopup: data,
isShowNeverShowPopupOption: limitFreePopupVideos ? limitFreePopupVideos.includes(courseId) : false
})
} else {
......@@ -954,6 +957,10 @@ class Video extends Component {
showLimitFreePopup: false,
isShowNeverShowPopupOption: true
})
const {courseId, limitFreePopupVideos} = this.state
localStorage.setItem('limit-free-popup-videos', JSON.stringify(
limitFreePopupVideos ? [...limitFreePopupVideos, courseId] : [courseId]
))
this.checkNeverShowLimitFreePopup()
}}/>
</div>
......
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