周年庆

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,6 +178,17 @@ class Invitation extends Component {
               })
             }
           </ul>
+        </div>
+        {
+          isShowGuide && <div className="guide" onClick={() => {
+            this.setState({
+              isShowGuide: false,
+            });
+          }}>
+            <i className={'indicator'}></i>
+            <div className="tip">点击右上角，分享给好友</div>
+          </div>
+        }
         <div className="op">
           {
             isMaster ?
@@ -204,19 +218,8 @@ class Invitation extends Component {
                               drawQuestions={this.drawQuestions} isAnswered={teamInfo.is_answer}/>
               </>
           }
-
-          </div>
         </div>
-        {
-          isShowGuide && <div className="guide" onClick={() => {
-            this.setState({
-              isShowGuide: false,
-            });
-          }}>
-            <i className={'indicator'}></i>
-            <div className="tip">点击右上角，分享给好友</div>
-          </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;