周年庆

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

@@ -139,8 +139,8 @@ class Anniversary2020 extends Component {
     http.get(`${API.home}/activity/anniversary/activityStage`)
       .then(res => {
         const {code, msg, data} = res.data
-        this.setupCountDown(data.count_down)
         if (code === 200) {
+          this.setupCountDown(data.count_down)
           this.setState({
             activityData: data,
           }, this.bindNavAction())
@@ -267,7 +267,7 @@ class Anniversary2020 extends Component {
             const _records = Array.isArray(data) ? data : []
             this.setState(state => {
               return {
-                prizeRecords: _records,
+                prizeRecords: state.prizeRecords.concat(_records),
                 prizeRecordsPagination: state.prizeRecordsPagination + 1,
               }
             }, () => {
@@ -716,6 +716,34 @@ class Anniversary2020 extends Component {
               </Carousel>
             }
             <div className="prize-wrapper">
+              {/*<ul className={'h--bar bar'}>
+                {
+                  Array(11).fill('a').map((item, index) => {
+                    return <li key={index}></li>
+                  })
+                }
+              </ul>
+              <ul className={'h--bar bar'}>
+                {
+                  Array(11).fill('a').map((item, index) => {
+                    return <li key={index}></li>
+                  })
+                }
+              </ul>
+              <ul className={'bar v--bar'}>
+                {
+                  Array(8).fill('a').map((item, index) => {
+                    return <li key={index}></li>
+                  })
+                }
+              </ul>
+              <ul className={'bar v--bar'}>
+                {
+                  Array(8).fill('a').map((item, index) => {
+                    return <li key={index}></li>
+                  })
+                }
+              </ul>*/}
               <div className={'h-bar'}></div>
               <div className={'h-bar'}></div>
               <div className={'v-bar'}></div>
@@ -728,7 +756,7 @@ class Anniversary2020 extends Component {
                                  {
                                    active: drawingItemId === item.id,
                                    available: index === 4 && (user.hasError || prizeData.odd_times),
-                                   unavailable: index === 4 && (activityData.stage === 1 || !prizeData.odd_times),
+                                   unavailable: index === 4 && !user.hasError && (activityData.stage === 1 || !prizeData.odd_times),
                                  },
                                ])} onClick={this.draw.bind(this, index)}>
                       {

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

@@ -223,7 +223,7 @@
       text-overflow: ellipsis;
     }
 
-    .title{
+    .title {
       font-size: 15px;
       font-weight: bold;
     }
@@ -387,6 +387,81 @@
       }
     }
 
+    $dot_size: 5px;
+    $twinkle_duration: 1s;
+
+    .bar {
+      position: absolute;
+      display: flex;
+
+      li {
+        flex: 0 0 auto;
+        width: $dot_size;
+        height: $dot_size;
+        border-radius: 50%;
+        background: #fff;
+      }
+    }
+
+    .h--bar {
+      left: 50%;
+      top: 0;
+      transform: translateX(-50%);
+      justify-content: space-between;
+      width: 280px;
+      height: $dot_size;
+
+      li {
+        animation: $twinkle_duration ease-in-out infinite twinkle;
+
+        &:nth-child(even) {
+          animation-delay: $twinkle_duration / 2;
+        }
+      }
+
+      & + .h--bar {
+        top: initial;
+        bottom: 0;
+      }
+    }
+
+
+    .v--bar {
+      top: 3px;
+      left: 5px;
+      flex-direction: column;
+      justify-content: space-between;
+      width: $dot_size;
+      height: 198px;
+
+      li {
+        animation: $twinkle_duration ease-in-out $twinkle_duration / 2 infinite twinkle;
+
+        &:nth-child(even) {
+          animation-delay: $twinkle_duration  / 4;
+        }
+      }
+
+
+      & + .v--bar {
+        left: initial;
+        right: 5px;
+      }
+    }
+
+    @keyframes twinkle {
+      from {
+        background: #fff;
+      }
+      50% {
+        background: #FFDA09;
+
+      }
+      to {
+        background: #fff;
+      }
+    }
+
     .prizes {
       display: flex;
       justify-content: space-around;

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

@@ -78,6 +78,9 @@ class Invitation extends Component {
             teamInfo: data,
             isMaster: data.is_captain || !getParam('team_code'),
           });
+          if(data.is_captain){
+            this.getInvitationInfo()
+          }
         } else {
           Toast.info(msg)
         }
@@ -175,37 +178,6 @@ class Invitation extends Component {
               })
             }
           </ul>
-          <div className="op">
-            {
-              isMaster ?
-                <>
-                  <div className="tip">再有{invitationInfo.invite_num}位队员答对即可获得{invitationInfo.draw_chance}次抽奖机会</div>
-                  {
-                    browser.isWeixin
-                      ? <button className={'btn'} onClick={this.setupWechatShare}>立即邀请</button>
-                      : <CopyToClipboard
-                        text={`${API.m}${location.pathname}?team_code=${invitationInfo.team_code || getParam('team_code')}`}
-                        onCopy={() => {
-                          Toast.info('链接已复制，快去粘贴发给好友吧')
-                        }}>
-                        <button className={'btn'}>立即邀请</button>
-                      </CopyToClipboard>
-                  }
-                </>
-                : <>
-                  {
-                    teamInfo.status !== 1 && <div className={'tip'}>
-                      {
-                        teamInfo.status === 2 ? '已加入当前队伍' : teamInfo.status === 3 ? '已加入其他队伍' : null
-                      }
-                    </div>
-                  }
-                  <BottomButton isActivityEnd={isActivityEnd} joinTeam={this.joinTeam} status={teamInfo.status}
-                                drawQuestions={this.drawQuestions} isAnswered={teamInfo.is_answer}/>
-                </>
-            }
-
-          </div>
         </div>
         {
           isShowGuide && <div className="guide" onClick={() => {
@@ -217,6 +189,37 @@ class Invitation extends Component {
             <div className="tip">点击右上角，分享给好友</div>
           </div>
         }
+        <div className="op">
+          {
+            isMaster ?
+              <>
+                <div className="tip">再有{invitationInfo.invite_num}位队员答对即可获得{invitationInfo.draw_chance}次抽奖机会</div>
+                {
+                  browser.isWeixin
+                    ? <button className={'btn'} onClick={this.setupWechatShare}>立即邀请</button>
+                    : <CopyToClipboard
+                      text={`${API.m}${location.pathname}?team_code=${invitationInfo.team_code || getParam('team_code')}`}
+                      onCopy={() => {
+                        Toast.info('链接已复制，快去粘贴发给好友吧')
+                      }}>
+                      <button className={'btn'}>立即邀请</button>
+                    </CopyToClipboard>
+                }
+              </>
+              : <>
+                {
+                  teamInfo.status !== 1 && <div className={'tip'}>
+                    {
+                      teamInfo.status === 2 ? '已加入当前队伍' : teamInfo.status === 3 ? '已加入其他队伍' : null
+                    }
+                  </div>
+                }
+                <BottomButton isActivityEnd={isActivityEnd} joinTeam={this.joinTeam} status={teamInfo.status}
+                              drawQuestions={this.drawQuestions} isAnswered={teamInfo.is_answer}/>
+              </>
+          }
+        </div>
+
       </div>
     );
   }
@@ -236,7 +239,6 @@ function BottomButton({status, isActivityEnd, isAnswered, joinTeam, drawQuestion
 }
 
 export default compose(
-  WithFullSize,
   connect(
     ({user}) => ({user}),
     null,

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

+html, body, #root {
+  min-height: 100%;
+}
+
+
 #invitation {
-  height: 100%;
+  min-height: 100%;
+  padding-bottom: 60px;
   background: #2E00DC;
 
   .banner {
@@ -12,9 +18,8 @@
   .prize-container {
     position: relative;
     padding: 15px;
-    margin: 0 auto 8px;
+    margin: 0 auto;
     width: 355px;
-    height: 219px;
     background: rgba(39, 27, 211, 1);
     border: 4px solid;
     border-image: linear-gradient(0deg, rgba(33, 32, 244, 1), rgba(94, 167, 248, 1)) 10 10;
@@ -136,9 +141,10 @@
   }
 
   .op {
-    position: fixed;
-    bottom: 40px;
-    left: 0;
+    //position: fixed;
+    //bottom: 40px;
+    //left: 0;
+    margin-top: 163px;
     width: 100%;
     text-align: center;