Merge branch '2020-717-formal' into dev

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

@@ -423,7 +423,7 @@ class Anniversary2020 extends Component {
   }
 
   draw = debounce((i) => {
-    if (this.isGotoLogin()) {
+    if (this.state.activityData.stage === 1 || this.isGotoLogin()) {
       return
     }
     const {activityData, prizeData, isDrawing} = this.state
@@ -722,9 +722,10 @@ class Anniversary2020 extends Component {
                   prizeData.prizes && !!prizeData.prizes.length && prizeData.prizes.map((item, index) => {
                     return <li key={index}
                                className={classnames([
-                                 index === 4 ? (user.hasError || prizeData.odd_times ? 'available' : 'unavailable') : '',
                                  {
                                    active: drawingItemId === item.id,
+                                   available: index === 4 && (user.hasError || prizeData.odd_times),
+                                   unavailable: index === 4 && (activityData.stage === 1 || !prizeData.odd_times),
                                  },
                                ])} onClick={this.draw.bind(this, index)}>
                       {
@@ -733,7 +734,12 @@ class Anniversary2020 extends Component {
                             <img src={item.img_name} alt=""/>
                           </div>
                           : activityData.stage === 1
-                          ? <div className={'draw'} style={{lineHeight: '350%'}}>7月15日开始</div>
+                          ? <div className={'draw pre'}>
+                            <div>7月15日开始</div>
+                            {
+                              prizeData.odd_times !== undefined && <div>剩余{prizeData.odd_times || 0}次机会</div>
+                            }
+                          </div>
                           : user.hasError
                             ? <div className="draw" style={{
                               height: '100%',
@@ -830,7 +836,7 @@ class Anniversary2020 extends Component {
                 </ul>
                 <div className="invite">
                   {
-                    activityData.stage === 1 ? <button className={'invite'}>7月15日开始</button> :
+                    activityData.stage === 1 ? <button className={'invite unavailable'}>7月15日开始</button> :
                       <Link to={'/anniversary_2020/invitation'} onClick={(e) => {
                         if (user.hasError) {
                           e.preventDefault()
@@ -860,7 +866,7 @@ class Anniversary2020 extends Component {
               <div className="func">
                 {
                   activityData.stage === 1
-                    ? <div className="btn">
+                    ? <div className="btn no-chance">
                       <button>7月15日开始</button>
                     </div>
                     : <>
@@ -963,7 +969,7 @@ class Anniversary2020 extends Component {
                 </table>
               }
               {
-                !isShowAllRankList && <div className="btn">
+                !!_rankList.length && !isShowAllRankList && <div className="btn">
                   <button onClick={() => {
                     this.setState({
                       isShowAllRankList: true,

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

@@ -427,6 +427,18 @@
         div:nth-child(2) {
           font-size: 12px;
         }
+
+        &.pre {
+          display: flex;
+          align-items: center;
+          flex-wrap: wrap;
+          justify-content: center;
+          height: 100%;
+
+          div:nth-child(1) {
+            font-size: 14px;
+          }
+        }
       }
 
       .prize {
@@ -585,6 +597,11 @@
       .invite {
         text-align: center;
 
+        &.unavailable {
+          background: #999;
+          color: #fff;
+        }
+
         button {
           @include button;
           width: 160px;
@@ -812,7 +829,7 @@
         width: 100%;
 
         button {
-          padding: 0 5%;
+          padding: 0 3%;
           font-size: 13px;
           border-radius: 2px;
           margin-right: 0;