浏览课程加福气值

src/components/blessingPreheat/coursePopup/index.js

@@ -48,7 +48,7 @@ class CoursePopup extends Component {
             {
               courseList.map(item => (
                 <Link 
-                  to={`/detail?id=${item.course_id}`} 
+                  to={`/detail?id=${item.course_id}&ac=11`} 
                   className="course-popup__item" 
                   key={item.course_id}
                 >

src/components/detail/index.js

@@ -48,7 +48,9 @@ class Detail extends Component {
             nowPrice: 0,
             laterPrice: 0,
             isPdd: 0, // 是否是拼团课程 控制首次单集购买后的 全集购买 接口： 拼团课程走拼团接口，否则直接走购买接口
-            isRedPacket: true
+            isRedPacket: true,
+
+            countDownTime: '20s',
         }
     }
 
@@ -73,6 +75,51 @@ class Detail extends Component {
                 isRedPacket: true
             });
         }
+
+        if(getParam('ac') && Number(getParam('ac')) === 11) {
+            this.getBorwerCourse();
+        }
+        
+    }
+
+    getBorwerCourse = () => {
+        http.get(`${API.home}/sys/user/blessing`, {type: 4, course_id: getParam('id')}).then(res => {
+            let {code, data: {today_browsed_courses}} = res.data;
+            if(code === 200) {
+                let currentCourseId = getParam('id');
+                if(today_browsed_courses.includes(Number(currentCourseId))) {
+                    this.setState({
+                        countDownTime: '任务完成'
+                    });
+                }else{
+                    this.startActivity();
+                }
+            }
+        })
+    }
+
+    startActivity = () => {
+        let _this = this;
+        let countDownInterval = setInterval(function() {
+            let countDown = parseInt(_this.state.countDownTime);
+            countDown--;
+            if(countDown > 0) {
+                _this.setState({
+                    countDownTime: countDown + 's'
+                });
+            } else if(countDown === 0) {
+                clearInterval(countDownInterval);
+                countDownInterval = null;
+                http.post(`${API.home}/sys/add/blessing`, {type: 4, course_id: getParam('id')}).then(res => {
+                    let {code} = res.data;
+                    if(code === 200) {
+                        _this.setState({
+                            countDownTime: '任务完成'
+                        });
+                    }
+                })
+            }
+        }, 1000)
     }
 
     // 判断时候未红包课程
@@ -443,7 +490,7 @@ class Detail extends Component {
     }
 
     render() {
-        const {course: {course_info = {}}, barInfo, singleBox, singleType, isRedPacket} = this.state;
+        const {course: {course_info = {}}, barInfo, singleBox, singleType, isRedPacket, countDownTime} = this.state;
 
         let courseInfo = '',
             service = '',
@@ -471,6 +518,14 @@ class Detail extends Component {
         let isCent = course_info.pdd_group_info && course_info.pdd_group_info.price != '0.01';
         return (
             <div>
+                {
+                    Number(getParam('ac')) === 11 ? (
+                        <div className='activity__blessing'>
+                            <img src='https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/count_donw.png' />
+                            <span className='count__down__time'>{`${countDownTime}`}</span>
+                        </div>
+                    ) : (null)
+                }
                 <div className='detail-box'>
                     <HeaderBar
                         title='课程详情'

src/components/detail/index.scss

@@ -229,4 +229,27 @@
     font-weight: 500;
     width: 215px;
   }
+}
+
+.activity__blessing {
+  position: fixed;
+  bottom: 170px;
+  right: 4px;
+  width: 76px;
+  height: 64px;
+  z-index: 999;
+
+  .count__down__time {
+    width: 62px;
+    height: 20px;
+    font-size: 12px;
+    font-weight: 600;
+    color:rgba(36,0,119,1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    bottom: 4px;
+    left: 8px;
+  }
 }
\ No newline at end of file