周年庆

src/components/activity/2020-717/activity/index.js

 import React, { Component } from 'react';
 import { debounce, groupBy, isEmpty } from "lodash";
-import { browser, http } from "@/utils"
+import { http } from "@/utils"
 import { Toast, Carousel } from "antd-mobile";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
@@ -30,6 +30,7 @@ class Anniversary2020 extends Component {
   4.每人只能当1次队员哦
   `
   drawTimer = null
+  countDownTimer = null
   hasMore = true
 
   state = {
@@ -81,6 +82,7 @@ class Anniversary2020 extends Component {
     rankList: [],
     isShowAllRankList: false,
     qrcode: undefined,
+    countDown: '',
     //弹框
     userAddress: {
       name: '',
@@ -130,17 +132,18 @@ class Anniversary2020 extends Component {
     document.removeEventListener('scroll', this.setNavActive)
     document.body.style.overflow = 'auto'
     clearInterval(this.drawTimer)
+    clearTimeout(this.countDownTimer)
   }
 
   getActivityStage = () => {
     http.get(`${API.home}/activity/anniversary/activityStage`)
       .then(res => {
         const {code, msg, data} = res.data
-
+        this.setupCountDown(data.count_down)
         if (code === 200) {
           this.setState({
             activityData: data,
-          }, this.bindNavAction);
+          }, this.bindNavAction())
         } else {
           Toast.info(msg)
         }
@@ -420,7 +423,7 @@ class Anniversary2020 extends Component {
   }
 
   draw = debounce((i) => {
-    if(this.isGotoLogin()){
+    if (this.isGotoLogin()) {
       return
     }
     const {activityData, prizeData, isDrawing} = this.state
@@ -528,6 +531,24 @@ class Anniversary2020 extends Component {
     }
   }
 
+  setupCountDown = (totalSeconds) => {
+    this.countDownTimer = setTimeout(() => {
+      totalSeconds--
+      const d = Math.floor(totalSeconds / 60 / 60 / 24)
+      const h = Math.floor(totalSeconds / 60 / 60) % 24
+      const m = Math.floor(totalSeconds / 60) % 60
+      this.setState({
+        countDown: `${d}天${h}时${m}分`,
+      }, () => {
+        if (totalSeconds > 0) {
+          this.setupCountDown(totalSeconds)
+        } else {
+          this.getActivityStage()
+        }
+      });
+    }, 1000 * 60)
+  }
+
   render() {
     const {
       navs,
@@ -555,6 +576,7 @@ class Anniversary2020 extends Component {
       isShowAllRankList,
       isShowFollow,
       qrcode,
+      countDown,
     } = this.state
     const {history, user} = this.props
 
@@ -565,7 +587,18 @@ class Anniversary2020 extends Component {
     return (
       <div className={'anniversary-2020'}>
         <div className="banner">
-          <img src="" alt=""/>
+          <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/banner.png" alt=""/>
+          {
+            countDown &&
+            <div className="count-down">{countDown} {
+              activityData.stage === 1
+                ? '后开始'
+                : activityData.stage === 2
+                ? '后结束'
+                : null
+            }
+            </div>
+          }
         </div>
         {
           !activityData.is_sign && <div className="sign" onClick={this.sign}></div>
@@ -777,9 +810,10 @@ class Anniversary2020 extends Component {
                   {
                     !!team.team_info && team.team_info.length && team.team_info.slice(0, 5).map((item, index) => {
                       return <li key={index}>
-                        <img
-                          src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/avatar_20191104.png"
-                          alt=""/>
+                        {
+                          item.head_img ? <img src={item.head_img} alt=""/>
+                            : <img src={item.avatar_file} alt=""/>
+                        }
                       </li>
                     })
                   }

src/components/activity/2020-717/activity/index.scss

@@ -3,12 +3,28 @@
   padding: 0 10px 75px;
 
   .banner {
+    position: relative;
     height: 220px;
 
     img {
       width: 100%;
       height: 100%;
     }
+
+    .count-down {
+      position: absolute;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 208px;
+      height: 30px;
+      background: linear-gradient(-90deg, rgba(145, 51, 199, 1) 0%, rgba(245, 47, 2, 1) 100%);
+      border-radius: 15px;
+      font-size: 16px;
+      color: #fff;
+      text-align: center;
+      line-height: 30px;
+    }
   }
 
   @mixin button {
@@ -864,7 +880,7 @@
       }
     }
 
-    a{
+    a {
       text-decoration: underline;
     }