周年庆

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

@@ -6,13 +6,15 @@ import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 import './index.scss'
 import { Popup } from "@common/index"
-import PrizeWinnerList from "@components/activity/1111/prize-winner-list"
 import classnames from 'classnames'
+import tweenFunctions from 'tween-functions'
+import storage from 'store2'
 
 
 class Anniversary2020 extends Component {
 
   nav = null
+  store = storage.namespace('anniversary2020')
   stages = {
     1: '基础',
     2: '进阶',
@@ -75,6 +77,9 @@ class Anniversary2020 extends Component {
     stageCourses: [],
     activityData: {},
     team: {},
+    rankList: [],
+    isShowAllRankList: false,
+    qrcode: undefined,
     //弹框
     userAddress: {
       name: '',
@@ -85,6 +90,7 @@ class Anniversary2020 extends Component {
     isShowPrizesRecords: false,
     isWinPrize: false, //抽中奖品弹框
     isShowTeamMember: false,
+    isShowFollow: false,
     //抽奖
     prizeData: {},
     drawOrder: [0, 1, 2, 5, 8, 7, 6, 3],
@@ -102,12 +108,18 @@ class Anniversary2020 extends Component {
     this.getTeam()
     this.getUserAddress()
     this.getPrizeData()
-    this.getPrizeRecords()
     this.getAuditionCourses()
     this.getGroupCourses()
     this.getBulletScreenData()
+    this.getRankList()
     this.getStageCourses('zero')
-
+    if (!this.props.user.hasError) {
+      this.getPrizeRecords()
+    }
+    if (this.store.session.get('toInvitation') && !this.props.user.hasError) {
+      this.getFollowStaus()
+      this.store.session.remove('toInvitation')
+    }
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -209,6 +221,20 @@ class Anniversary2020 extends Component {
       })
   }
 
+  getRankList = () => {
+    http.get(`${API.home}/activity/anniversary/team_ranks`)
+      .then(res => {
+        const {code, msg, data} = res.data
+        if (code === 200) {
+          this.setState({
+            rankList: data,
+          });
+        } else {
+          Toast.info(msg)
+        }
+      })
+  }
+
   getTeam = () => {
     http.get(`${API.home}/activity/anniversary/teamInfo`)
       .then(res => {
@@ -310,10 +336,45 @@ class Anniversary2020 extends Component {
         }
       }),
     }, () => {
+      const {hash} = this.props.location
+      if (hash) {
+        const index = this.state.navs.findIndex(item => item.id === hash)
+        window.scrollTo(0, this.state.sectionsPosition[index].top)
+      }
+      document.removeEventListener('scroll', this.setNavActive)
       document.addEventListener('scroll', this.setNavActive)
     })
   }
 
+  getFollowStaus = () => {
+    http.get(`${API.home}/sys/user/isFollowWeChat`)
+      .then(res => {
+        const {code, data} = res.data
+        if (code === 200) {
+          if (!data.is_follow) {
+            this.getQRCode()
+          }
+          this.setState({
+            isShowFollow: !data.is_follow,
+          });
+        }
+      })
+  }
+
+  getQRCode = () => {
+    http.get(`${API["base-api"]}/wx/user_temporary_qrcode/${this.props.user.data.uid}`)
+      .then(res => {
+        const {code, msg, data} = res.data
+        if (code === 200) {
+          this.setState({
+            qrcode: data.qr_image,
+          });
+        } else {
+          Toast.info(msg)
+        }
+      })
+  }
+
   setNavActive = debounce(() => {
     const {navActive, sectionsPosition} = this.state
     const pageY = window.pageYOffset
@@ -414,13 +475,7 @@ class Anniversary2020 extends Component {
   }
 
   sign = () => {
-    const {user, history} = this.props
-    if (user.hasError) {
-      if (browser.isWeixin) {
-        window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" + encodeURIComponent(url + "&aa=bb").toLowerCase() + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
-      } else {
-        history.push('/passport')
-      }
+    if (this.isGotoLogin()) {
       return
     }
     http.get(`${API.home}/activity/anniversary/sign`)
@@ -440,20 +495,42 @@ class Anniversary2020 extends Component {
       })
   }
 
+  isGotoLogin = () => {
+    const {user, history} = this.props
+    if (user.hasError) {
+      if (browser.isWeixin) {
+        window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" + encodeURIComponent(window.location.href + "?aa=bb") + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
+      } else {
+        history.push('/passport')
+      }
+      return true
+    }
+    return false
+  }
+
   getBulletScreenData = () => {
     http.get(`${API.home}/activity/anniversary/barrages`)
       .then(res => {
         const {code, msg, data} = res.data
         if (code === 200) {
-          this.setState({
-            bulletScreenList: data,
+          this.setState((state, props) => {
+            return {
+              bulletScreenList: state.bulletScreenList.concat(data),
+            }
           });
+
         } else {
           Toast.info(msg)
         }
       })
   }
 
+  handleBulletScreenChange = (from, to) => {
+    if (to >= this.state.bulletScreenList.length - 5) {
+      this.getBulletScreenData()
+    }
+  }
+
   render() {
     const {
       navs,
@@ -477,11 +554,16 @@ class Anniversary2020 extends Component {
       drawResult,
       isShowTeamMember,
       bulletScreenList,
+      rankList,
+      isShowAllRankList,
+      isShowFollow,
+      qrcode,
     } = this.state
-    const {history} = this.props
+    const {history, user} = this.props
 
     const _auditions = auditionShowAll && auditions.length ? auditions : auditions.slice(0, 4)
     const _group = groupShowAll && group.length ? group : group.slice(0, 4)
+    const _rankList = isShowAllRankList ? rankList : rankList.slice(0, 10)
 
     return (
       <div className={'anniversary-2020'}>
@@ -585,10 +667,13 @@ class Anniversary2020 extends Component {
                 dragging={false}
                 swiping={false}
                 dots={false}
-                speed={2000}
+                speed={200}
+                autoplayInterval={3000}
+                easing={tweenFunctions.easeOutCubic}
                 vertical
                 autoplay
                 infinite
+                beforeChange={this.handleBulletScreenChange}
               >
                 {
                   bulletScreenList.map((item, index) => {
@@ -637,6 +722,9 @@ class Anniversary2020 extends Component {
                 })
               }}>收货信息</a>
               <a href="javascript:void(0);" onClick={() => {
+                if (this.isGotoLogin()) {
+                  return
+                }
                 document.body.style.overflow = 'hidden'
                 this.setState({
                   isShowPrizesRecords: true,
@@ -697,7 +785,9 @@ class Anniversary2020 extends Component {
                 <div className="invite">
                   {
                     activityData.stage === 1 ? <button className={'invite'}>7月15日开始</button> :
-                      <Link to={'/anniversary_2020/invitation'}>
+                      <Link to={'/anniversary_2020/invitation'} onClick={() => {
+                        this.store.session.set('toInvitation', '1')
+                      }}>
                         <button className={'invite'}>邀请好友加入队伍</button>
                       </Link>
                   }
@@ -725,7 +815,7 @@ class Anniversary2020 extends Component {
                     : <>
                       {
                         activityData.practice_num
-                          ? <Link to={'/anniversary_2020/question'}>
+                          ? <Link to={'/anniversary_2020/question/1'}>
                             <div className="btn">
                               <button><i></i>开始练习</button>
                             </div>
@@ -790,7 +880,7 @@ class Anniversary2020 extends Component {
                   </thead>
                   <tbody>
                   {
-                    Array(5).fill('a').map((item, index) => {
+                    !!_rankList.length && _rankList.map((item, index) => {
                       return <tr key={index}>
                         <td>
                           {
@@ -799,21 +889,31 @@ class Anniversary2020 extends Component {
                         </td>
                         <td>
                           <img
-                            src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/avatar_20191104.png"
+                            src={item.avatar}
                             alt="" className={'avatar'}/>
-                          限制宽度比例限制宽度比例
+                          _{item.username}
                         </td>
-                        <td>723</td>
-                        <td>最多就显示这么多几个字吧</td>
+                        <td>{item.member_num}</td>
+                        {
+                          item.prize_url ? <td><a href={item.prize_url}>{item.prize}</a></td>
+                            : <td>{item.prize}</td>
+                        }
                       </tr>
                     })
                   }
                   </tbody>
                 </table>
               }
-              <div className="btn">
-                <button>查看更多</button>
+              {
+                !isShowAllRankList && <div className="btn">
+                  <button onClick={() => {
+                    this.setState({
+                      isShowAllRankList: true,
+                    });
+                  }}>查看更多
+                  </button>
                 </div>
+              }
             </div>
           </div>
         </section>
@@ -1015,7 +1115,7 @@ class Anniversary2020 extends Component {
           </div>
         }
         {
-          isWinPrize && <WinPrize name={drawResult.prize_name} info={drawResult.info} close={() => {
+          isWinPrize && <WinPrize name={drawResult.prize_name} info={drawResult.prize_info} close={() => {
             this.setState({
               isWinPrize: false,
               drawResult: {},
@@ -1029,6 +1129,24 @@ class Anniversary2020 extends Component {
             });
           }}></TeamMember>
         }
+        {
+          isShowFollow && <div className={'modal-cover follow'}>
+            <div className="modal">
+              <div className="title">邀请好友/进度提醒</div>
+              <div className="tip">邀请好友加入队伍，获得更多抽奖机会</div>
+              <div className="qrcode">
+                <img src={qrcode} alt=""/>
+                <div>长按识别/扫码，分享给好友</div>
+              </div>
+              <i className={'iconfont iconiconfront-2 close'} onClick={() => {
+                this.setState({
+                  isShowFollow: false,
+                });
+              }}></i>
+
+            </div>
+          </div>
+        }
       </div>
     );
   }

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

@@ -872,7 +872,8 @@
       }
     }
 
-    td:nth-of-type(2) {
+    td:nth-of-type(2), td:nth-of-type(4) {
+      text-align: left;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -1117,3 +1118,19 @@
     }
   }
 }
+
+.follow {
+  .tip {
+    margin-bottom: 15px;
+  }
+
+  .qrcode {
+    text-align: center;
+  }
+
+  img {
+    width: 120px;
+    height: 120px;
+    margin-bottom: 10px;
+  }
+}
\ No newline at end of file

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

@@ -10,7 +10,7 @@ class Anniversary2020Entry extends Component {
     const match = this.props.match
     return (
       <Switch>
-        <Route path={`${match.path}/question/:assistId?`}
+        <Route path={`${match.path}/question/:isPractice?`}
                render={routeProps => (<Question {...routeProps}></Question>)}></Route>
         <Route path={`${match.path}/invitation`} render={routeProps => (<Invitation {...routeProps}/>)}></Route>
         <Route path={'/anniversary_2020'}

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

@@ -4,9 +4,10 @@ import { WithFullSize } from "@/HOCs"
 import { connect } from "react-redux";
 import { compose } from "redux";
 import { HeaderBar } from "@common/index"
-import { getParam, http, browser } from "@/utils"
+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'
 
 
 class Invitation extends Component {
@@ -75,6 +76,7 @@ class Invitation extends Component {
         if (code === 200) {
           this.setState({
             teamInfo: data,
+            isMaster: data.is_captain || !getParam('team_code'),
           });
         } else {
           Toast.info(msg)
@@ -100,7 +102,7 @@ class Invitation extends Component {
       .then(res => {
         const {code, msg} = res.data
         if (code === 200) {
-          Toast.info('加入成功')
+          Toast.info('加入成功', 2, null, false)
           this.setState((state, props) => {
             return {
               teamInfo: {...state.teamInfo, ...{status: 2}},
@@ -117,10 +119,22 @@ class Invitation extends Component {
       })
   }
 
+  setupWechatShare = () => {
+    wxShare({
+      title: '答题抽华为P40 Pro+',
+      desc: '这道题你会吗？答题抽奖，100%有奖的，能不能拿华为P40 Pro+，看你自己了--七月在线',
+      link: `${API.m}${location.pathname}?team_code=${this.state.invitationInfo.team_code || getParam('team_code')}`,
+      imgUrl: '',
+    })
+    this.setState({
+      isShowGuide: true,
+    });
+  }
+
   // 答题抽奖
-    drawQuestions=()=>{
-        const {history,user} = this.props
-        history.push(`/anniversary_2020/question/${user.data.uid}`)
+  drawQuestions = () => {
+    const {history} = this.props
+    history.push(`/anniversary_2020/question/${0}`)
   }
 
   render() {
@@ -129,7 +143,9 @@ class Invitation extends Component {
 
     return (
       <div id={'invitation'}>
-        <HeaderBar title={'答题抽奖'} arrow={true}/>
+        <HeaderBar title={'答题抽奖'} arrow={true} goBack={() => {
+          this.props.history.push('/anniversary_2020')
+        }}/>
         {
           isMaster
             ? <div className="banner"></div>
@@ -166,12 +182,9 @@ class Invitation extends Component {
                   <div className="tip">再有{invitationInfo.invite_num}位队员答对即可获得{invitationInfo.draw_chance}次抽奖机会</div>
                   {
                     browser.isWeixin
-                      ? <button className={'btn'} onClick={() => {
-                        this.setState({
-                          isShowGuide: true,
-                        });
-                      }}>立即邀请</button>
-                      : <CopyToClipboard text={`${API.m}${location.pathname}?team_code=${invitationInfo.team_code}`}
+                      ? <button className={'btn'} onClick={this.setupWechatShare}>立即邀请</button>
+                      : <CopyToClipboard
+                        text={`${API.m}${location.pathname}?team_code=${invitationInfo.team_code || getParam('team_code')}`}
                         onCopy={() => {
                           Toast.info('链接已复制，快去粘贴发给好友吧')
                         }}>
@@ -183,17 +196,12 @@ class Invitation extends Component {
                   {
                     teamInfo.status !== 1 && <div className={'tip'}>
                       {
-                        teamInfo.status === 2 ? '已加入当前队伍' : teamInfo === 3 ? '已加入其他队伍' : null
+                        teamInfo.status === 2 ? '已加入当前队伍' : teamInfo.status === 3 ? '已加入其他队伍' : null
                       }
                     </div>
                   }
-                  {
-                    isActivityEnd
-                      ? <button className={'activity-end'}>活动结束</button>
-                      : teamInfo.status === 1
-                      ? <button className={'btn'} onClick={this.joinTeam}>加入队伍</button>
-                      : <button className={'btn'} onClick={this.drawQuestions}>答题抽奖</button>
-                  }
+                  <BottomButton isActivityEnd={isActivityEnd} joinTeam={this.joinTeam} status={teamInfo.status}
+                                drawQuestions={this.drawQuestions} isAnswered={teamInfo.is_answer}/>
                 </>
             }
 
@@ -214,6 +222,19 @@ class Invitation extends Component {
   }
 }
 
+function BottomButton({status, isActivityEnd, isAnswered, joinTeam, drawQuestions}) {
+  if (isActivityEnd) {
+    return <button className={'activity-end'}>活动结束</button>
+  }
+  if (isAnswered) {
+    return <Link to={`/anniversary_2020#lottery`}>
+      <button className={'btn'}>去抽奖</button>
+    </Link>
+  }
+  return status === 1 ? <button className={'btn'} onClick={joinTeam}>加入队伍</button> :
+    <button className={'btn'} onClick={drawQuestions}>答题抽奖</button>
+}
+
 export default compose(
   WithFullSize,
   connect(

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

-import React, {Component} from 'react'
+import React, { Component } from 'react'
 import './index.scss'
-import {Toast} from "antd-mobile"
+import { Toast } from "antd-mobile"
 import classnames from 'classnames'
-import {browser, http} from "@/utils"
-import {WithFullSize} from "@/HOCs"
-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 { browser, http } from "@/utils"
+import { WithFullSize } from "@/HOCs"
+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'
 
 class Question extends Component {
 
@@ -18,7 +18,7 @@ class Question extends Component {
     selectedOptionId: 0,
     isShowConfirm: false,
     isResultConfirm: false,
-        isTeamHead: this.props.match.params.assistId === undefined,
+    isTeamHead: this.props.match.params.isPractice == 1,
     isActivityEnd: false,
     is_correct: '',
     is_sign: '',
@@ -41,8 +41,8 @@ class Question extends Component {
   }
 
   getQuestion = () => {
-        const assistId = this.props.match.params.assistId
-        http.get(`${API.home}/activity/anniversary/get_question/${assistId ? 2 : 1}/${assistId ? assistId : 0}`)
+    const isPractice = this.props.match.params.isPractice
+    http.get(`${API.home}/activity/anniversary/get_question/${isPractice == 1 ? 1 : 2}`)
       .then(res => {
         const {code, msg, data} = res.data
         if (code === 200) {
@@ -63,10 +63,10 @@ class Question extends Component {
   }
 
   submit = () => {
-        const assistId = this.props.match.params.assistId
+    const isPractice = this.props.match.params.isPractice
     const {selectedOptionId} = this.state
     http.post(`${API.home}/activity/anniversary/submit`, {
-            type: assistId ? 2 : 1,
+      type: isPractice == 1 ? 1 : 2,
       option_id: selectedOptionId,
       id: this.props.cache.question.id,
     }).then(res => {
@@ -76,10 +76,10 @@ class Question extends Component {
         this.afterSubmitted(data)
         this.setState({
           isShowConfirm: false,
-                    isResultConfirm: true,
+          isResultConfirm: isPractice != 1,
           selectedOptionId: undefined,
           is_correct: data.is_correct,
-                    is_sign: data.is_sign
+          is_sign: data.is_sign,
         })
         this.props.addData({
           payload: data,
@@ -94,7 +94,7 @@ class Question extends Component {
   resultFun = () => {
     const {history} = this.props
     if (this.state.is_sign) {
-            history.push('/anniversary_2020')
+      history.push('/anniversary_2020#lottery')
     } else {
       http.get(`${API.home}/activity/anniversary/sign`)
         .then(res => {
@@ -114,12 +114,12 @@ class Question extends Component {
 
     if (isTeamHead) {
       if (result.stage === 4) {
-
+        this.setState({
+          isActivityEnd: true,
+        });
       } else {
         result.is_correct ? Toast.info('回答正确 抽奖次数+1') : Toast.info('很遗憾 回答错误')
       }
-        } else {
-
     }
   }
 
@@ -211,6 +211,7 @@ class Question extends Component {
           <BottomButton result={result}
                         resultFun={this.resultFun}
                         isTeamHead={isTeamHead}
+                        isActivityEnd={isActivityEnd}
                         submit={() => {
                           if (this.state.selectedOptionId) {
                             this.setState({
@@ -270,16 +271,8 @@ function Confirm({submit, cancel}) {
   </div>
 }
 
-function Result() {
-    return <div className={'modal-cover'}>
-        <div className="modal">
-            <div className="title"></div>
-        </div>
-    </div>
-}
-
-function BottomButton({resultFun, result, submit, isTeamHead, redo}) {
-    if (result.stage === 4) {
+function BottomButton({resultFun, result, submit, isTeamHead, redo, isActivityEnd}) {
+  if (result.stage === 4 || isActivityEnd) {
     return <button className={'activity-end'}>活动已结束</button>
   }
   if (isTeamHead) {
@@ -287,6 +280,8 @@ function BottomButton({resultFun, result, submit, isTeamHead, redo}) {
       return result.practiceNum === 0
         ? <button className={'lottery-related'}><Link to={`/anniversary_2020/invitation`}>组队答题抽奖</Link></button>
         : <button className={'submit'} onClick={redo}>继续答题</button>
+    } else {
+      return <button className={'submit'} onClick={submit}>提交</button>
     }
   } else {
     if (result.analysis) {

src/utils/index.js

@@ -145,7 +145,7 @@ export {
   browser,
   isLogin,
   dateCountDown,
-  isValidUrl
+  isValidUrl,
 }
 export {
   default as SendMessageToApp,