限时免费

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>