ai course

src/components/activity/newyear-2019/preheat/YearCourse/index.scss

@@ -137,6 +137,10 @@
         transform: skewX(-20deg);
         z-index: -1;
       }
+
+      .tag[data-color="green"]:before {
+        background-color: #357345;
+      }
     }
 
     .price {
@@ -146,6 +150,10 @@
       color: #FF0002;
       font-size: 12px;
 
+      &.price-group {
+        height: 30px;
+      }
+
       .new-price {
         font-size: 18px;
       }
@@ -157,11 +165,47 @@
       }
     }
 
+    
+
+    .price-label {
+      position: relative;
+      width: 49px;
+      height: 14px;
+      margin: 5px 0 0 19px;
+      line-height: 14px;
+      background-color: #357345;
+
+      span {
+        font-size: 12px;
+        color: #fff;
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -14px;
+        border: 7px solid;
+        border-color: transparent #357345 #357345 transparent;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: -14px;
+        border: 7px solid;
+        border-color: #357345 transparent transparent #357345;
+      }
+    }
+
     .status {
-      text-align: left;
-      padding-left: 5px;
       position: absolute;
+      left: 0;
       bottom: 10px;
+      right: 0;
+      padding: 0 5px;
+      text-align: left;
 
       .status-btn {
         display: inline-block;
@@ -178,6 +222,30 @@
         background-color: #FF8080;
       }
 
+      .to-group {
+        display: block;
+        width: 100%;
+        height: 22px;
+        border-radius: 11px;
+        box-sizing: border-box;
+        font-size: 14px;
+        color: #fff;
+        text-align: center;
+        line-height: 22px;
+        background: linear-gradient(-90deg,rgba(235,22,18,1) 0%,rgba(255,0,2,1) 100%);
+
+        &[data-status="study"] {
+          background: #0099FF;
+        }
+
+        &[data-status="done"] {
+          border: 1px solid #090F08;
+          font-size: 12px;
+          color: #090F08;
+          background: #FEE41D;
+        }
+      }
+
       .add-wish, .add-wish-success {
         width: 88px;
         margin-left: 5px;
@@ -214,6 +282,41 @@
   .groupcourse .course-container {
     height: 195px;
   }
+  .groupcourse[data-stage="2"] .course-container {
+    height: 215px;
+  }
+  
+
+  .progree-and-sale {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 5px;
+  }
+
+  .progress {
+    width: 90px;
+    height: 8px;
+    border-radius: 4px;
+    background-color: #E6E6E6;
+  }
+
+  .progress_bar {
+    display: block;
+    width: 10%;
+    height: 100%;
+    border-radius: 4px 0 0 4px;
+    background-color: #FF0002;
+  }
+
+  .sale-sum {
+    flex: 1;
+    margin: 0;
+    font-size: 12px;
+    color: #333;
+    text-align: center;
+    line-height: 1;
+  }
 
   .ai-course__subtitle {
     width: 73px;

src/components/activity/newyear-2019/preheat/index.js

@@ -24,7 +24,7 @@ export default class index extends Component {
         removable: 0, // 未拆宝箱的数量
         currentOpenId: 0, // 当前要拆的宝箱的队伍的ID
         treasure_stage: 0, // 宝箱的活动阶段
-        active_stage: 0, // 整个活动的阶段
+        activity_stage: 0, // 整个活动的阶段
         userInfoList: [],
         userInfo: {},
         isAppUpdate: false,
@@ -112,6 +112,7 @@ export default class index extends Component {
             if (code === 200) {
                 // treasure_stage，宝箱阶段，0-不在活动时间，1-活动时间内
                 this.setState({
+                    activity_stage: data.activity_stage,
                     treasure_stage: data.treasure_stage
                 })
             } else {
@@ -121,7 +122,11 @@ export default class index extends Component {
     }
 
     render() {
-        const {banner, removable, treasure_stage, currentOpenId} = this.state
+        const {
+            banner, 
+            activity_stage, 
+            treasure_stage,
+        } = this.state
         return (
             <div className={'year-index'}>
                 <div className="banner-treasure">
@@ -142,7 +147,7 @@ export default class index extends Component {
                 }
 
                 {/*课程*/}
-                <YearCourse currentOpenId={currentOpenId}  removable={removable} isAppUpdate={this.state.isAppUpdate} />
+                <YearCourse stage={activity_stage} isAppUpdate={this.state.isAppUpdate} />
 
                 {/*好友加入队伍提醒；获得宝箱提醒；开售提醒弹窗，需要自取，注意修改文案*/}
                 {

src/components/blessingPreheat/courseItem/index.js

@@ -2,11 +2,42 @@ import React, { Component } from 'react';
 import './index.scss';
 
 class CourseItem extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      countdown: ''
+    }
+  }
+
+  componentDidMount() {
+    const { time } = this.props;
+    if(time) {
+    let date = time * 1000,
+      hours = 0,
+      minutes = 0,
+      seconds = 0;
+      setInterval(() => {
+          date -= 1000
+          hours = `${parseInt(date / (60 * 60 * 1000))}`.padStart(2, 0);
+          minutes = `${parseInt((date - hours * 3600000) / 60000)}`.padStart(2, 0);
+          seconds = `${parseInt((date - hours * 3600000 - minutes * 60000) / 1000)}`.padStart(2, 0);
+          this.setState({
+            countdown: `${hours}时${minutes}分${seconds}秒后结束`
+          });
+      }, 1000);
+    }
+  }
+
   render() {
-    const { image,toCourse,id} = this.props;
+    const { image, toCourse, id} = this.props;
+    const { countdown } = this.state;
     return (
       <div className="course-container">
         <div className="course__cover">
+          {
+            countdown &&
+            <p className="course__time">{countdown}</p>
+          }
           <img src={image} alt="cover" onClick={() => toCourse(id)}/>
         </div>
         {this.props.children}

src/components/blessingPreheat/courseItem/index.scss

@@ -7,6 +7,7 @@
 }
 
 .course__cover {
+  position: relative;
   height: 108px;
   padding: 4px 4px 0;
   overflow: hidden;
@@ -18,3 +19,17 @@
     height: 100%;
   }
 }
+
+.course__time {
+  position: absolute;
+  left: 4px;
+  top: 10px;
+  margin: 0;
+  height: 18px;
+  padding: 0 8px;
+  border-radius: 0 9px 9px 0;
+  font-size: 12px;
+  color: #fff;
+  line-height: 18px;
+  background-color: #F01D0E;
+}
\ No newline at end of file