Merge branch '2020-717-formal'

src/App.js

@@ -28,7 +28,8 @@ class App extends Component {
     super(props)
     this.state = {
       isShowActivityEntry: 0,
-      isShowChannel: 0,
+      jumpUrl: '',
+      entryImage: '',
     }
   }
 
@@ -108,16 +109,14 @@ class App extends Component {
   // 获取宝箱阶段
   getStage = () => {
     let ccode = cookie.get('ccode')
-    http.get(`${API.home}/activity/stage?ccode=${ccode}`).then(res => {
+    http.get(`${API.home}/sys/anniversary/floating?ccode=${ccode}`).then(res => {
       const {code, data, msg} = res.data
       if (code === 200) {
-        // treasure_stage，宝箱阶段，0-不在活动时间，1-活动时间内
         this.setState({
-          isShowActivityEntry: data.treasure_stage,
-          isShowChannel: data.is_show_site_window_by_channel,
+          isShowActivityEntry: data.is_show,
+          jumpUrl: data.jump_url,
+          entryImage: data.image_path,
         })
-
-        window.sessionStorage.setItem('isShowSiteWindowByChannel', data.is_show_site_window_by_channel)
       } else {
         Toast.info(msg, 2)
       }
@@ -328,16 +327,16 @@ class App extends Component {
   }
 
   render() {
+    const {isShowActivityEntry, entryImage, jumpUrl} = this.state
     return <>
       <Routes/>
       {
-        !!this.state.isShowActivityEntry && !!this.state.isShowChannel &&
+        isShowActivityEntry &&
         <div className="year19-index">
           <i className={'iconfont iconiconfront-2'} onClick={this.closeGlobalEntry}></i>
-          <Link to={'/box/boxActive'}>
-            <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/treasure-active/m/global-entry.png"
-                 alt=""/>
-          </Link>
+          <a href={jumpUrl}>
+            <img src={entryImage} alt=""/>
+          </a>
         </div>
       }
     </>

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

@@ -9,6 +9,7 @@ import { Popup } from "@common/index"
 import classnames from 'classnames'
 import tweenFunctions from 'tween-functions'
 import storage from 'store2'
+import { REDO, addData } from "@components/activity/2020-717/question/store/reducer"
 
 
 class Anniversary2020 extends Component {
@@ -116,6 +117,7 @@ class Anniversary2020 extends Component {
     this.getBulletScreenData()
     this.getRankList()
     this.getStageCourses('zero')
+    this.props.addData({type: REDO})
     if (this.store.session.get('toInvitation') && !this.props.user.hasError) {
       this.getFollowStaus()
       this.store.session.remove('toInvitation')
@@ -139,8 +141,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 +269,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 +718,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 +758,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)}>
                       {
@@ -987,6 +1017,7 @@ class Anniversary2020 extends Component {
         <section id={'audition'} className={'audition'}>
           <div className="block-title"
                style={{background: `url(${titleImages[3]}) no-repeat`, backgroundSize: 'contain'}}></div>
+          <h4>报名集训营/就业班有豪礼相送，不止AirPods，送完即止</h4>
           <ul className="course-container">
             {
               !!_auditions.length && _auditions.map((item, index) => {
@@ -1188,6 +1219,7 @@ class Anniversary2020 extends Component {
                   this.setState({
                     isShowPrizesRecords: false,
                     prizeRecordsPagination: 0,
+                    prizeRecords: [],
                   });
                 }}></i>
               </div>
@@ -1223,7 +1255,6 @@ class Anniversary2020 extends Component {
                   isShowFollow: false,
                 });
               }}></i>
-
             </div>
           </div>
         }
@@ -1237,7 +1268,7 @@ function WinPrize({name, close, info}) {
     <div className="modal win-prize">
       <div className="title">恭喜您</div>
       <div className="des">抽中了XXX<span className={'name'}>{name}</span></div>
-      <div className="contact">{/*{info}*/}请添加客服微信号：********请添加客服微信号：</div>
+      <div className="contact">{info}</div>
       <button onClick={close}>我知道了</button>
     </div>
   </div>
@@ -1273,5 +1304,7 @@ function TeamMember({members, close, uid}) {
 
 export default connect(
   ({user}) => ({user}),
-  null,
+  dispatch => ({
+    addData: data => dispatch(addData(data)),
+  }),
 )(Anniversary2020);
\ No newline at end of file

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

@@ -2,9 +2,13 @@
   background-color: #2E00DC;
   padding: 0 10px 75px;
 
+  & + .year19-index {
+    display: none;
+  }
+
   .banner {
     position: relative;
-    height: 220px;
+    height: 300px;
 
     img {
       width: 100%;
@@ -223,7 +227,7 @@
       text-overflow: ellipsis;
     }
 
-    .title{
+    .title {
       font-size: 15px;
       font-weight: bold;
     }
@@ -387,6 +391,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;
@@ -754,6 +833,12 @@
   .audition {
     margin-bottom: 20px;
 
+    h4 {
+      color: #fff;
+      font-size: 12px;
+      margin: 10px 0 15px;
+    }
+
     .block-title {
       width: 197px;
       height: 32px;
@@ -1119,6 +1204,11 @@
 }
 
 .members {
+  ul {
+    max-height: 230px;
+    overflow: auto;
+  }
+
   li {
     display: flex;
     align-items: center;

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

 import React, { Component } from 'react';
 import './index.scss'
-import { WithFullSize } from "@/HOCs"
 import { connect } from "react-redux";
 import { compose } from "redux";
 import { HeaderBar } from "@common/index"
@@ -8,10 +7,12 @@ import { getParam, http, browser, wxShare } from "@/utils"
 import { Toast } from "antd-mobile";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { Link } from 'react-router-dom'
+import storage from 'store2'
+import { CaptchaAli } from "@common/index"
 
 
 class Invitation extends Component {
-
+  store = storage.namespace('anniversary2020')
   state = {
     prizes: [],
     invitationInfo: {},
@@ -21,12 +22,15 @@ class Invitation extends Component {
     isTeamHead: true,
     isMaster: !getParam('team_code'),
     isActivityEnd: false,
+    instance: null,
+    isShowCaptcha: false,
   }
 
   componentDidMount() {
     this.getPrizesInfo()
     if (getParam('team_code')) {
       this.getTeamInfo()
+      this.store.session.set('team_code', getParam('team_code'))
     } else {
       this.getInvitationInfo()
     }
@@ -78,6 +82,9 @@ class Invitation extends Component {
             teamInfo: data,
             isMaster: data.is_captain || !getParam('team_code'),
           });
+          if (data.is_captain) {
+            this.getInvitationInfo()
+          }
         } else {
           Toast.info(msg)
         }
@@ -86,7 +93,7 @@ class Invitation extends Component {
     })
   }
 
-  joinTeam = () => {
+  joinTeam = data => {
     const {user, history} = this.props
     if (user.hasError) {
       if (browser.isWeixin) {
@@ -96,19 +103,29 @@ class Invitation extends Component {
       }
       return
     }
-    http.post(`${API.home}/activity/anniversary/joinTeam`, {
-      team_code: getParam('team_code'),
-    })
+    if (this.state.teamInfo.is_check && !this.state.isShowCaptcha) {
+      this.setState({
+        isShowCaptcha: true,
+      });
+      return
+    }
+    let _data = {team_code: getParam('team_code')}
+    if (data) {
+      _data = {..._data, ...data}
+    }
+    http.post(`${API.home}/activity/anniversary/joinTeam`, _data)
       .then(res => {
         const {code, msg} = res.data
         if (code === 200) {
           Toast.info('加入成功', 2, null, false)
           this.setState((state, props) => {
             return {
-              teamInfo: {...state.teamInfo, ...{status: 2}},
+              teamInfo: {...state.teamInfo, ...{status: 2, is_check: false}},
+              isShowCaptcha: false
             }
           });
-
+        } else if (code === 5002) {
+          this.state.instance && this.state.instance.reset()
         } else if (code === 25015) {
           this.setState({
             isActivityEnd: true,
@@ -138,11 +155,22 @@ class Invitation extends Component {
   }
 
   render() {
-    const {prizes, invitationInfo, isShowGuide, teamInfo, isMaster, isActivityEnd} = this.state
+    const {prizes, invitationInfo, isShowGuide, teamInfo, isMaster, isActivityEnd, isShowCaptcha} = this.state
     const {location} = this.props
 
     return (
-      <div id={'invitation'}>
+      isShowCaptcha
+        ? <div className={'captcha-container'}>
+          <CaptchaAli
+            getInstance={instance => {
+              this.setState({
+                instance,
+              });
+            }}
+            onVerify={data => this.joinTeam(data)}
+          />
+        </div>
+        : <div id={'invitation'}>
           <HeaderBar title={'答题抽奖'} arrow={true} goBack={() => {
             this.props.history.push('/anniversary_2020')
           }}/>
@@ -175,6 +203,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 +243,7 @@ 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 +263,6 @@ function BottomButton({status, isActivityEnd, isAnswered, joinTeam, drawQuestion
 }
 
 export default compose(
-  WithFullSize,
   connect(
     ({user}) => ({user}),
     null,

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

-#invitation {
+html, body, #root {
   height: 100%;
+}
+
+
+#invitation {
+  min-height: 100%;
+  padding-bottom: 60px;
   background: #2E00DC;
 
+  & + .year19-index {
+    display: none;
+  }
+
+
   .banner {
     height: 67px;
     margin: 20px 0;
@@ -12,9 +23,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 +146,7 @@
   }
 
   .op {
-    position: fixed;
-    bottom: 40px;
-    left: 0;
+    margin-top: 9vh;
     width: 100%;
     text-align: center;
 

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

@@ -8,9 +8,10 @@ import { Link } from "react-router-dom"
 import { compose } from 'redux'
 import { connect } from 'react-redux'
 import { addData, ADD_RECOMMENDS, ADD_QUESTION, ADD_RESULT, REDO } from './store/reducer'
+import storage from 'store2'
 
 class Question extends Component {
-
+  store = storage.namespace('anniversary2020')
   state = {
     question: {},
     result: {},
@@ -40,6 +41,14 @@ class Question extends Component {
             type: ADD_QUESTION,
             payload: data,
           })
+        } else if (code === 25004) {
+          const {history} = this.props
+          let teamCode = this.store.session.get('team_code')
+          if (teamCode) {
+            history.push(`/anniversary_2020/invitation?team_code=${teamCode}`)
+          } else {
+            history.push(`/anniversary_2020`)
+          }
         } else {
           Toast.info(msg)
         }
@@ -81,9 +90,11 @@ class Question extends Component {
     })
   }
 
-  resultFun = () => {
+  resultFun = (e) => {
     const {history} = this.props
-    if (this.state.is_sign) {
+    let notNeedSign = e.target.getAttribute('data-sign') == 0
+    console.log(notNeedSign)
+    if (this.state.is_sign || notNeedSign) {
       history.push('/anniversary_2020#lottery')
     } else {
       http.get(`${API.home}/activity/anniversary/sign`)
@@ -130,7 +141,7 @@ class Question extends Component {
   }
 
   getOptionLabel = (index) => {
-    return String.fromCharCode(65 + index)
+    return index >= 0 ? String.fromCharCode(65 + index) : '空'
   }
 
   redo = () => {
@@ -203,11 +214,9 @@ class Question extends Component {
                         isTeamHead={isTeamHead}
                         isActivityEnd={isActivityEnd}
                         submit={() => {
-                          if (this.state.selectedOptionId) {
                           this.setState({
                             isShowConfirm: true,
-                            })
-                          }
+                          });
                         }}
                         redo={this.redo}
           />
@@ -222,15 +231,20 @@ class Question extends Component {
         }
         {
           isResultConfirm &&
-          <ResultConfirm resultFun={this.resultFun} is_correct={this.state.is_correct}
-                         is_sign={this.state.is_sign}></ResultConfirm>
+          <ResultConfirm resultFun={this.resultFun}
+                         is_correct={this.state.is_correct}
+                         is_sign={this.state.is_sign}
+                         close={() => {
+                           this.setState({isResultConfirm: false});
+                         }}>
+          </ResultConfirm>
         }
       </div>
     )
   }
 }
 
-function ResultConfirm({resultFun, is_correct, is_sign}) {
+function ResultConfirm({resultFun, is_correct, is_sign, close}) {
   return <div className="modal-cover">
     <div className="modal">
       {
@@ -243,8 +257,13 @@ function ResultConfirm({resultFun, is_correct, is_sign}) {
       }
 
       <div className={'btm-button'}>
-        <button onClick={resultFun}>{is_sign ? '去抽奖' : '签到领取抽奖机会'}</button>
+        <button onClick={resultFun} data-sign={(is_correct || is_sign) && 0}>
+          {
+            is_correct ? '去抽奖' : is_sign ? '去抽奖' : '签到领取抽奖机会'
+          }
+        </button>
       </div>
+      <i className="close iconiconfront-2 iconfont" onClick={close}></i>
     </div>
   </div>
 }
@@ -277,7 +296,7 @@ function BottomButton({resultFun, result, submit, isTeamHead, redo, isActivityEn
     if (result.analysis) {
       return !result.is_sign
         ? <button className={'lottery-related'} onClick={resultFun}>签到领取抽奖机会</button>
-        : <button className={'submit'} onClick={resultFun}>去抽奖</button>
+        : <button className={'submit'} onClick={resultFun} data-sign={'0'}>去抽奖</button>
     }
     return <button className={'submit'} onClick={submit}>提交</button>
   }

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

@@ -3,6 +3,11 @@
   min-height: 100%;
   padding-bottom: 55px;
 
+  & + .year19-index {
+    display: none;
+  }
+
+
   .banner {
     height: 94px;
     background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/question-banner.png");
@@ -185,6 +190,15 @@
     background-color: rgba(0, 0, 0, .6);
     z-index: 200;
 
+    .close {
+      position: absolute;
+      bottom: -54px;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 24px;
+      color: #fff;
+    }
+
     .modal {
       position: absolute;
       top: 50%;
@@ -193,7 +207,6 @@
       width: 300px;
       background: #fff;
       border-radius: 5px;
-      overflow: hidden;
     }
 
     .title {
@@ -263,3 +276,8 @@
     }
   }
 }
+
+
+.captcha-container {
+  padding: 40vh 30px;
+}
\ No newline at end of file