Skip to content

M
mr-julyedu
Commit bf513c26 by zhanghaozhe
Options

周年庆

parent 5fcc8bf1
Showing with 481 additions and 328 deletions
src/components/activity/2020-717/activity/index.js
...@@ -6,13 +6,15 @@ import { Link } from "react-router-dom"; ...@@ -6,13 +6,15 @@ import { Link } from "react-router-dom";
import { connect } from "react-redux"; import { connect } from "react-redux";
import './index.scss' import './index.scss'
import { Popup } from "@common/index" import { Popup } from "@common/index"
import PrizeWinnerList from "@components/activity/1111/prize-winner-list"
import classnames from 'classnames' import classnames from 'classnames'
import tweenFunctions from 'tween-functions'
import storage from 'store2'
class Anniversary2020 extends Component { class Anniversary2020 extends Component {
nav = null nav = null
store = storage.namespace('anniversary2020')
stages = { stages = {
1: '基础', 1: '基础',
2: '进阶', 2: '进阶',
...@@ -75,6 +77,9 @@ class Anniversary2020 extends Component { ...@@ -75,6 +77,9 @@ class Anniversary2020 extends Component {
stageCourses: [], stageCourses: [],
activityData: {}, activityData: {},
team: {}, team: {},
rankList: [],
isShowAllRankList: false,
qrcode: undefined,
//弹框 //弹框
userAddress: { userAddress: {
name: '', name: '',
...@@ -85,6 +90,7 @@ class Anniversary2020 extends Component { ...@@ -85,6 +90,7 @@ class Anniversary2020 extends Component {
isShowPrizesRecords: false, isShowPrizesRecords: false,
isWinPrize: false, //抽中奖品弹框 isWinPrize: false, //抽中奖品弹框
isShowTeamMember: false, isShowTeamMember: false,
isShowFollow: false,
//抽奖 //抽奖
prizeData: {}, prizeData: {},
drawOrder: [0, 1, 2, 5, 8, 7, 6, 3], drawOrder: [0, 1, 2, 5, 8, 7, 6, 3],
...@@ -102,12 +108,18 @@ class Anniversary2020 extends Component { ...@@ -102,12 +108,18 @@ class Anniversary2020 extends Component {
this.getTeam() this.getTeam()
this.getUserAddress() this.getUserAddress()
this.getPrizeData() this.getPrizeData()
this.getPrizeRecords()
this.getAuditionCourses() this.getAuditionCourses()
this.getGroupCourses() this.getGroupCourses()
this.getBulletScreenData() this.getBulletScreenData()
this.getRankList()
this.getStageCourses('zero') 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) { componentDidUpdate(prevProps, prevState) {
...@@ -209,6 +221,20 @@ class Anniversary2020 extends Component { ...@@ -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 = () => { getTeam = () => {
http.get(`${API.home}/activity/anniversary/teamInfo`) http.get(`${API.home}/activity/anniversary/teamInfo`)
.then(res => { .then(res => {
...@@ -310,10 +336,45 @@ class Anniversary2020 extends Component { ...@@ -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) 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(() => { setNavActive = debounce(() => {
const {navActive, sectionsPosition} = this.state const {navActive, sectionsPosition} = this.state
const pageY = window.pageYOffset const pageY = window.pageYOffset
...@@ -414,13 +475,7 @@ class Anniversary2020 extends Component { ...@@ -414,13 +475,7 @@ class Anniversary2020 extends Component {
} }
sign = () => { sign = () => {
const {user, history} = this.props if (this.isGotoLogin()) {
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')
}
return return
} }
http.get(`${API.home}/activity/anniversary/sign`) http.get(`${API.home}/activity/anniversary/sign`)
...@@ -440,20 +495,42 @@ class Anniversary2020 extends Component { ...@@ -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 = () => { getBulletScreenData = () => {
http.get(`${API.home}/activity/anniversary/barrages`) http.get(`${API.home}/activity/anniversary/barrages`)
.then(res => { .then(res => {
const {code, msg, data} = res.data const {code, msg, data} = res.data
if (code === 200) { if (code === 200) {
this.setState({ this.setState((state, props) => {
bulletScreenList: data, return {
bulletScreenList: state.bulletScreenList.concat(data),
}
}); });
} else { } else {
Toast.info(msg) Toast.info(msg)
} }
}) })
} }
handleBulletScreenChange = (from, to) => {
if (to >= this.state.bulletScreenList.length - 5) {
this.getBulletScreenData()
}
}
render() { render() {
const { const {
navs, navs,
...@@ -477,11 +554,16 @@ class Anniversary2020 extends Component { ...@@ -477,11 +554,16 @@ class Anniversary2020 extends Component {
drawResult, drawResult,
isShowTeamMember, isShowTeamMember,
bulletScreenList, bulletScreenList,
rankList,
isShowAllRankList,
isShowFollow,
qrcode,
} = this.state } = this.state
const {history} = this.props const {history, user} = this.props
const _auditions = auditionShowAll && auditions.length ? auditions : auditions.slice(0, 4) const _auditions = auditionShowAll && auditions.length ? auditions : auditions.slice(0, 4)
const _group = groupShowAll && group.length ? group : group.slice(0, 4) const _group = groupShowAll && group.length ? group : group.slice(0, 4)
const _rankList = isShowAllRankList ? rankList : rankList.slice(0, 10)
return ( return (
<div className={'anniversary-2020'}> <div className={'anniversary-2020'}>
...@@ -585,10 +667,13 @@ class Anniversary2020 extends Component { ...@@ -585,10 +667,13 @@ class Anniversary2020 extends Component {
dragging={false} dragging={false}
swiping={false} swiping={false}
dots={false} dots={false}
speed={2000} speed={200}
autoplayInterval={3000}
easing={tweenFunctions.easeOutCubic}
vertical vertical
autoplay autoplay
infinite infinite
beforeChange={this.handleBulletScreenChange}
> >
{ {
bulletScreenList.map((item, index) => { bulletScreenList.map((item, index) => {
...@@ -637,6 +722,9 @@ class Anniversary2020 extends Component { ...@@ -637,6 +722,9 @@ class Anniversary2020 extends Component {
}) })
}}>收货信息</a> }}>收货信息</a>
<a href="javascript:void(0);" onClick={() => { <a href="javascript:void(0);" onClick={() => {
if (this.isGotoLogin()) {
return
}
document.body.style.overflow = 'hidden' document.body.style.overflow = 'hidden'
this.setState({ this.setState({
isShowPrizesRecords: true, isShowPrizesRecords: true,
...@@ -697,7 +785,9 @@ class Anniversary2020 extends Component { ...@@ -697,7 +785,9 @@ class Anniversary2020 extends Component {
<div className="invite"> <div className="invite">
{ {
activityData.stage === 1 ? <button className={'invite'}>7月15日开始</button> : 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> <button className={'invite'}>邀请好友加入队伍</button>
</Link> </Link>
} }
...@@ -725,7 +815,7 @@ class Anniversary2020 extends Component { ...@@ -725,7 +815,7 @@ class Anniversary2020 extends Component {
: <> : <>
{ {
activityData.practice_num activityData.practice_num
? <Link to={'/anniversary_2020/question'}> ? <Link to={'/anniversary_2020/question/1'}>
<div className="btn"> <div className="btn">
<button><i></i>开始练习</button> <button><i></i>开始练习</button>
</div> </div>
...@@ -790,7 +880,7 @@ class Anniversary2020 extends Component { ...@@ -790,7 +880,7 @@ class Anniversary2020 extends Component {
</thead> </thead>
<tbody> <tbody>
{ {
Array(5).fill('a').map((item, index) => { !!_rankList.length && _rankList.map((item, index) => {
return <tr key={index}> return <tr key={index}>
<td> <td>
{ {
...@@ -799,21 +889,31 @@ class Anniversary2020 extends Component { ...@@ -799,21 +889,31 @@ class Anniversary2020 extends Component {
</td> </td>
<td> <td>
<img <img
src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/avatar_20191104.png" src={item.avatar}
alt="" className={'avatar'}/> alt="" className={'avatar'}/>
限制宽度比例限制宽度比例 _{item.username}
</td> </td>
<td>723</td> <td>{item.member_num}</td>
<td>最多就显示这么多几个字吧</td> {
item.prize_url ? <td><a href={item.prize_url}>{item.prize}</a></td>
: <td>{item.prize}</td>
}
</tr> </tr>
}) })
} }
</tbody> </tbody>
</table> </table>
} }
<div className="btn"> {
<button>查看更多</button> !isShowAllRankList && <div className="btn">
</div> <button onClick={() => {
this.setState({
isShowAllRankList: true,
});
}}>查看更多
</button>
</div>
}
</div> </div>
</div> </div>
</section> </section>
...@@ -1015,7 +1115,7 @@ class Anniversary2020 extends Component { ...@@ -1015,7 +1115,7 @@ class Anniversary2020 extends Component {
</div> </div>
} }
{ {
isWinPrize && <WinPrize name={drawResult.prize_name} info={drawResult.info} close={() => { isWinPrize && <WinPrize name={drawResult.prize_name} info={drawResult.prize_info} close={() => {
this.setState({ this.setState({
isWinPrize: false, isWinPrize: false,
drawResult: {}, drawResult: {},
...@@ -1029,6 +1129,24 @@ class Anniversary2020 extends Component { ...@@ -1029,6 +1129,24 @@ class Anniversary2020 extends Component {
}); });
}}></TeamMember> }}></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> </div>
); );
} }
......
src/components/activity/2020-717/activity/index.scss
...@@ -872,7 +872,8 @@ ...@@ -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; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -1116,4 +1117,20 @@ ...@@ -1116,4 +1117,20 @@
} }
} }
} }
}
.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 { ...@@ -10,7 +10,7 @@ class Anniversary2020Entry extends Component {
const match = this.props.match const match = this.props.match
return ( return (
<Switch> <Switch>
<Route path={`${match.path}/question/:assistId?`} <Route path={`${match.path}/question/:isPractice?`}
render={routeProps => (<Question {...routeProps}></Question>)}></Route> render={routeProps => (<Question {...routeProps}></Question>)}></Route>
<Route path={`${match.path}/invitation`} render={routeProps => (<Invitation {...routeProps}/>)}></Route> <Route path={`${match.path}/invitation`} render={routeProps => (<Invitation {...routeProps}/>)}></Route>
<Route path={'/anniversary_2020'} <Route path={'/anniversary_2020'}
......
src/components/activity/2020-717/invitation/index.js
...@@ -4,9 +4,10 @@ import { WithFullSize } from "@/HOCs" ...@@ -4,9 +4,10 @@ import { WithFullSize } from "@/HOCs"
import { connect } from "react-redux"; import { connect } from "react-redux";
import { compose } from "redux"; import { compose } from "redux";
import { HeaderBar } from "@common/index" import { HeaderBar } from "@common/index"
import { getParam, http, browser } from "@/utils" import { getParam, http, browser, wxShare } from "@/utils"
import { Toast } from "antd-mobile"; import { Toast } from "antd-mobile";
import { CopyToClipboard } from "react-copy-to-clipboard"; import { CopyToClipboard } from "react-copy-to-clipboard";
import { Link } from 'react-router-dom'
class Invitation extends Component { class Invitation extends Component {
...@@ -75,6 +76,7 @@ class Invitation extends Component { ...@@ -75,6 +76,7 @@ class Invitation extends Component {
if (code === 200) { if (code === 200) {
this.setState({ this.setState({
teamInfo: data, teamInfo: data,
isMaster: data.is_captain || !getParam('team_code'),
}); });
} else { } else {
Toast.info(msg) Toast.info(msg)
...@@ -100,7 +102,7 @@ class Invitation extends Component { ...@@ -100,7 +102,7 @@ class Invitation extends Component {
.then(res => { .then(res => {
const {code, msg} = res.data const {code, msg} = res.data
if (code === 200) { if (code === 200) {
Toast.info('加入成功') Toast.info('加入成功', 2, null, false)
this.setState((state, props) => { this.setState((state, props) => {
return { return {
teamInfo: {...state.teamInfo, ...{status: 2}}, teamInfo: {...state.teamInfo, ...{status: 2}},
...@@ -117,11 +119,23 @@ class Invitation extends Component { ...@@ -117,11 +119,23 @@ 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=()=>{ drawQuestions = () => {
const {history,user} = this.props const {history} = this.props
history.push(`/anniversary_2020/question/${user.data.uid}`) history.push(`/anniversary_2020/question/${0}`)
} }
render() { render() {
const {prizes, invitationInfo, isShowGuide, teamInfo, isMaster, isActivityEnd} = this.state const {prizes, invitationInfo, isShowGuide, teamInfo, isMaster, isActivityEnd} = this.state
...@@ -129,7 +143,9 @@ class Invitation extends Component { ...@@ -129,7 +143,9 @@ class Invitation extends Component {
return ( return (
<div id={'invitation'}> <div id={'invitation'}>
<HeaderBar title={'答题抽奖'} arrow={true}/> <HeaderBar title={'答题抽奖'} arrow={true} goBack={() => {
this.props.history.push('/anniversary_2020')
}}/>
{ {
isMaster isMaster
? <div className="banner"></div> ? <div className="banner"></div>
...@@ -166,15 +182,12 @@ class Invitation extends Component { ...@@ -166,15 +182,12 @@ class Invitation extends Component {
<div className="tip">再有{invitationInfo.invite_num}位队员答对即可获得{invitationInfo.draw_chance}次抽奖机会</div> <div className="tip">再有{invitationInfo.invite_num}位队员答对即可获得{invitationInfo.draw_chance}次抽奖机会</div>
{ {
browser.isWeixin browser.isWeixin
? <button className={'btn'} onClick={() => { ? <button className={'btn'} onClick={this.setupWechatShare}>立即邀请</button>
this.setState({ : <CopyToClipboard
isShowGuide: true, text={`${API.m}${location.pathname}?team_code=${invitationInfo.team_code || getParam('team_code')}`}
}); onCopy={() => {
}}>立即邀请</button> Toast.info('链接已复制，快去粘贴发给好友吧')
: <CopyToClipboard text={`${API.m}${location.pathname}?team_code=${invitationInfo.team_code}`} }}>
onCopy={() => {
Toast.info('链接已复制，快去粘贴发给好友吧')
}}>
<button className={'btn'}>立即邀请</button> <button className={'btn'}>立即邀请</button>
</CopyToClipboard> </CopyToClipboard>
} }
...@@ -183,17 +196,12 @@ class Invitation extends Component { ...@@ -183,17 +196,12 @@ class Invitation extends Component {
{ {
teamInfo.status !== 1 && <div className={'tip'}> teamInfo.status !== 1 && <div className={'tip'}>
{ {
teamInfo.status === 2 ? '已加入当前队伍' : teamInfo === 3 ? '已加入其他队伍' : null teamInfo.status === 2 ? '已加入当前队伍' : teamInfo.status === 3 ? '已加入其他队伍' : null
} }
</div> </div>
} }
{ <BottomButton isActivityEnd={isActivityEnd} joinTeam={this.joinTeam} status={teamInfo.status}
isActivityEnd drawQuestions={this.drawQuestions} isAnswered={teamInfo.is_answer}/>
? <button className={'activity-end'}>活动结束</button>
: teamInfo.status === 1
? <button className={'btn'} onClick={this.joinTeam}>加入队伍</button>
: <button className={'btn'} onClick={this.drawQuestions}>答题抽奖</button>
}
</> </>
} }
...@@ -214,6 +222,19 @@ class Invitation extends Component { ...@@ -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( export default compose(
WithFullSize, WithFullSize,
connect( connect(
......
src/components/activity/2020-717/question/index.js
import React, {Component} from 'react' import React, { Component } from 'react'
import './index.scss' import './index.scss'
import {Toast} from "antd-mobile" import { Toast } from "antd-mobile"
import classnames from 'classnames' import classnames from 'classnames'
import {browser, http} from "@/utils" import { browser, http } from "@/utils"
import {WithFullSize} from "@/HOCs" import { WithFullSize } from "@/HOCs"
import {Link} from "react-router-dom" import { Link } from "react-router-dom"
import {compose} from 'redux' import { compose } from 'redux'
import {connect} from 'react-redux' import { connect } from 'react-redux'
import {addData, ADD_RECOMMENDS, ADD_QUESTION, ADD_RESULT, REDO} from './store/reducer' import { addData, ADD_RECOMMENDS, ADD_QUESTION, ADD_RESULT, REDO } from './store/reducer'
class Question extends Component { class Question extends Component {
state = { state = {
question: {}, question: {},
result: {}, result: {},
recommends: [], recommends: [],
selectedOptionId: 0, selectedOptionId: 0,
isShowConfirm: false, isShowConfirm: false,
isResultConfirm: false, isResultConfirm: false,
isTeamHead: this.props.match.params.assistId === undefined, isTeamHead: this.props.match.params.isPractice == 1,
isActivityEnd: false, isActivityEnd: false,
is_correct: '', is_correct: '',
is_sign: '', is_sign: '',
}
componentDidMount() {
const {history, user} = 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')
}
return
} }
componentDidMount() { if (this.props.cache.recommends.length === 0) {
const {history, user} = this.props this.getQuestion()
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')
}
return
}
if (this.props.cache.recommends.length === 0) { getQuestion = () => {
this.getQuestion() 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) {
this.props.addData({
type: ADD_QUESTION,
payload: data,
})
} else {
Toast.info(msg)
} }
} })
}
getQuestion = () => { select = (id) => {
const assistId = this.props.match.params.assistId this.setState({
http.get(`${API.home}/activity/anniversary/get_question/${assistId ? 2 : 1}/${assistId ? assistId : 0}`) selectedOptionId: id,
.then(res => { })
const {code, msg, data} = res.data }
if (code === 200) {
this.props.addData({
type: ADD_QUESTION,
payload: data,
})
} else {
Toast.info(msg)
}
})
}
select = (id) => { submit = () => {
const isPractice = this.props.match.params.isPractice
const {selectedOptionId} = this.state
http.post(`${API.home}/activity/anniversary/submit`, {
type: isPractice == 1 ? 1 : 2,
option_id: selectedOptionId,
id: this.props.cache.question.id,
}).then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.getRecommends(data.type_id)
this.afterSubmitted(data)
this.setState({ this.setState({
selectedOptionId: id, isShowConfirm: false,
isResultConfirm: isPractice != 1,
selectedOptionId: undefined,
is_correct: data.is_correct,
is_sign: data.is_sign,
}) })
} this.props.addData({
payload: data,
submit = () => { type: ADD_RESULT,
const assistId = this.props.match.params.assistId
const {selectedOptionId} = this.state
http.post(`${API.home}/activity/anniversary/submit`, {
type: assistId ? 2 : 1,
option_id: selectedOptionId,
id: this.props.cache.question.id,
}).then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.getRecommends(data.type_id)
this.afterSubmitted(data)
this.setState({
isShowConfirm: false,
isResultConfirm: true,
selectedOptionId: undefined,
is_correct: data.is_correct,
is_sign: data.is_sign
})
this.props.addData({
payload: data,
type: ADD_RESULT,
})
} else {
Toast.info(msg)
}
}) })
} } else {
Toast.info(msg)
}
})
}
resultFun = () => { resultFun = () => {
const {history} = this.props const {history} = this.props
if (this.state.is_sign) { if (this.state.is_sign) {
history.push('/anniversary_2020#lottery')
} else {
http.get(`${API.home}/activity/anniversary/sign`)
.then(res => {
const {code, msg} = res.data
if (code === 200) {
Toast.info('签到成功 抽奖次数+1')
history.push('/anniversary_2020') history.push('/anniversary_2020')
} else { } else {
http.get(`${API.home}/activity/anniversary/sign`) Toast.info(msg)
.then(res => { }
const {code, msg} = res.data })
if (code === 200) {
Toast.info('签到成功 抽奖次数+1')
history.push('/anniversary_2020')
} else {
Toast.info(msg)
}
})
}
} }
}
afterSubmitted = (result) => { afterSubmitted = (result) => {
const {isTeamHead} = this.state const {isTeamHead} = this.state
if (isTeamHead) { if (isTeamHead) {
if (result.stage === 4) { if (result.stage === 4) {
this.setState({
} else { isActivityEnd: true,
result.is_correct ? Toast.info('回答正确 抽奖次数+1') : Toast.info('很遗憾 回答错误') });
} } else {
} else { result.is_correct ? Toast.info('回答正确 抽奖次数+1') : Toast.info('很遗憾 回答错误')
}
}
} }
}
getRecommends = typeId => { getRecommends = typeId => {
http.post(`${API.home}/sys/get_commend_course`, { http.post(`${API.home}/sys/get_commend_course`, {
type_id: typeId, type_id: typeId,
}) })
.then(res => { .then(res => {
const {code, data} = res.data const {code, data} = res.data
if (code === 200) { if (code === 200) {
this.props.addData({ this.props.addData({
payload: data, payload: data,
type: ADD_RECOMMENDS, type: ADD_RECOMMENDS,
}) })
} }
}) })
} }
getOptionLabel = (index) => { getOptionLabel = (index) => {
return String.fromCharCode(65 + index) return String.fromCharCode(65 + index)
} }
redo = () => { redo = () => {
this.props.addData({ this.props.addData({
type: REDO, type: REDO,
}) })
this.getQuestion() this.getQuestion()
} }
render() { render() {
const { const {
selectedOptionId, selectedOptionId,
isShowConfirm, isShowConfirm,
isActivityEnd, isActivityEnd,
isResultConfirm, isResultConfirm,
isTeamHead, isTeamHead,
} = this.state } = this.state
const { const {
cache: { cache: {
question, question,
result, result,
recommends, recommends,
}, },
} = this.props } = this.props
return ( return (
<div id={'question'}> <div id={'question'}>
<div className="banner"></div> <div className="banner"></div>
<div className={'question'}> <div className={'question'}>
{question.ques && <div className="topic" dangerouslySetInnerHTML={{__html: question.ques}}></div>} {question.ques && <div className="topic" dangerouslySetInnerHTML={{__html: question.ques}}></div>}
<ul> <ul>
{
question.options && !!question.options.length && question.options.map((item, index) => {
return <li key={item.id} className={classnames({
selected: selectedOptionId === item.id,
correct: result.right_id === item.id,
wrong: !result.is_correct && parseInt(result.option_id) === item.id,
})} onClick={this.select.bind(this, item.id)}>
<span>{this.getOptionLabel(index)}</span>
{item.des}
</li>
})
}
</ul>
</div>
{
result.analysis && <div className="answered">
<div className="analysis">
<div className="estimate">
您选择的是{this.getOptionLabel(question.options.findIndex(item => item.id == result.option_id))}，正确答案是{this.getOptionLabel(question.options.findIndex(item => item.id === result.right_id))} 回答{result.right_id == result.option_id ? '正确' : '错误 '}
</div>
<div className="analysis-content">
<div className="title">
<i className={'icon'}></i>
解析
</div>
<div className="content" dangerouslySetInnerHTML={{__html: result.analysis}}></div>
</div>
</div>
{
!!recommends.length && <Recommends recommends={recommends}></Recommends>
}
</div>
}
<div className="submit-bar">
<BottomButton result={result}
resultFun={this.resultFun}
isTeamHead={isTeamHead}
submit={() => {
if (this.state.selectedOptionId) {
this.setState({
isShowConfirm: true,
})
}
}}
redo={this.redo}
/>
</div>
{
isShowConfirm &&
<Confirm submit={this.submit} cancel={() => {
this.setState({
isShowConfirm: false,
})
}}></Confirm>
}
{
isResultConfirm &&
<ResultConfirm resultFun={this.resultFun} is_correct={this.state.is_correct}
is_sign={this.state.is_sign}></ResultConfirm>
}
</div>
)
}
}
function ResultConfirm({resultFun, is_correct, is_sign}) {
return <div className="modal-cover">
<div className="modal">
{ {
is_correct === 1 && question.options && !!question.options.length && question.options.map((item, index) => {
<div className="title">回答正确，抽奖次数+1</div> return <li key={item.id} className={classnames({
selected: selectedOptionId === item.id,
correct: result.right_id === item.id,
wrong: !result.is_correct && parseInt(result.option_id) === item.id,
})} onClick={this.select.bind(this, item.id)}>
<span>{this.getOptionLabel(index)}</span>
{item.des}
</li>
})
} }
</ul>
</div>
{
result.analysis && <div className="answered">
<div className="analysis">
<div className="estimate">
您选择的是{this.getOptionLabel(question.options.findIndex(item => item.id == result.option_id))}，正确答案是{this.getOptionLabel(question.options.findIndex(item => item.id === result.right_id))} 回答{result.right_id == result.option_id ? '正确' : '错误 '}
</div>
<div className="analysis-content">
<div className="title">
<i className={'icon'}></i>
解析
</div>
<div className="content" dangerouslySetInnerHTML={{__html: result.analysis}}></div>
</div>
</div>
{ {
is_correct === 0 && !!recommends.length && <Recommends recommends={recommends}></Recommends>
<div className="rusult-title">很遗憾，回答错误 <p>快去抽奖提提神吧</p></div>
} }
</div>
<div className={'btm-button'}> }
<button onClick={resultFun}>{is_sign ? '去抽奖' : '签到领取抽奖机会'}</button> <div className="submit-bar">
</div> <BottomButton result={result}
resultFun={this.resultFun}
isTeamHead={isTeamHead}
isActivityEnd={isActivityEnd}
submit={() => {
if (this.state.selectedOptionId) {
this.setState({
isShowConfirm: true,
})
}
}}
redo={this.redo}
/>
</div> </div>
</div> {
isShowConfirm &&
<Confirm submit={this.submit} cancel={() => {
this.setState({
isShowConfirm: false,
})
}}></Confirm>
}
{
isResultConfirm &&
<ResultConfirm resultFun={this.resultFun} is_correct={this.state.is_correct}
is_sign={this.state.is_sign}></ResultConfirm>
}
</div>
)
}
} }
function Confirm({submit, cancel}) { function ResultConfirm({resultFun, is_correct, is_sign}) {
return <div className="modal-cover"> return <div className="modal-cover">
<div className="modal"> <div className="modal">
<div className="title">提交确认</div> {
<div className="btns"> is_correct === 1 &&
<button onClick={cancel}>取消</button> <div className="title">回答正确，抽奖次数+1</div>
<button onClick={submit}>确认提交</button> }
</div> {
</div> is_correct === 0 &&
<div className="rusult-title">很遗憾，回答错误 <p>快去抽奖提提神吧</p></div>
}
<div className={'btm-button'}>
<button onClick={resultFun}>{is_sign ? '去抽奖' : '签到领取抽奖机会'}</button>
</div>
</div> </div>
</div>
} }
function Result() { function Confirm({submit, cancel}) {
return <div className={'modal-cover'}> return <div className="modal-cover">
<div className="modal"> <div className="modal">
<div className="title"></div> <div className="title">提交确认</div>
</div> <div className="btns">
<button onClick={cancel}>取消</button>
<button onClick={submit}>确认提交</button>
</div>
</div> </div>
</div>
} }
function BottomButton({resultFun, result, submit, isTeamHead, redo}) { function BottomButton({resultFun, result, submit, isTeamHead, redo, isActivityEnd}) {
if (result.stage === 4) { if (result.stage === 4 || isActivityEnd) {
return <button className={'activity-end'}>活动已结束</button> return <button className={'activity-end'}>活动已结束</button>
} }
if (isTeamHead) { if (isTeamHead) {
if (result.analysis) { if (result.analysis) {
return result.practiceNum === 0 return result.practiceNum === 0
? <button className={'lottery-related'}><Link to={`/anniversary_2020/invitation`}>组队答题抽奖</Link></button> ? <button className={'lottery-related'}><Link to={`/anniversary_2020/invitation`}>组队答题抽奖</Link></button>
: <button className={'submit'} onClick={redo}>继续答题</button> : <button className={'submit'} onClick={redo}>继续答题</button>
}
} else { } else {
if (result.analysis) { return <button className={'submit'} onClick={submit}>提交</button>
return !result.is_sign }
? <button className={'lottery-related'} onClick={resultFun}>签到领取抽奖机会</button> } else {
: <button className={'submit'} onClick={resultFun}>去抽奖</button> if (result.analysis) {
} return !result.is_sign
return <button className={'submit'} onClick={submit}>提交</button> ? <button className={'lottery-related'} onClick={resultFun}>签到领取抽奖机会</button>
: <button className={'submit'} onClick={resultFun}>去抽奖</button>
} }
return <button className={'submit'} onClick={submit}>提交</button>
}
} }
function Recommends({recommends}) { function Recommends({recommends}) {
return <div className="recommends"> return <div className="recommends">
<div className="title">相关课程</div> <div className="title">相关课程</div>
<ul> <ul>
{ {
recommends && !!recommends.length && recommends.map(item => { recommends && !!recommends.length && recommends.map(item => {
return <li key={item.course_id}> return <li key={item.course_id}>
<Link to={`/detail?id=${item.course_id}`}> <Link to={`/detail?id=${item.course_id}`}>
<img src={item.image_name} alt=""/> <img src={item.image_name} alt=""/>
</Link> </Link>
</li> </li>
}) })
} }
</ul> </ul>
</div> </div>
} }
export default compose( export default compose(
WithFullSize, WithFullSize,
connect( connect(
({anniversary2020Question, user}) => ({cache: anniversary2020Question, user}), ({anniversary2020Question, user}) => ({cache: anniversary2020Question, user}),
dispatch => ({ dispatch => ({
addData: data => dispatch(addData(data)), addData: data => dispatch(addData(data)),
}), }),
), ),
)(Question) )(Question)
\ No newline at end of file
src/utils/index.js
...@@ -145,7 +145,7 @@ export { ...@@ -145,7 +145,7 @@ export {
browser, browser,
isLogin, isLogin,
dateCountDown, dateCountDown,
isValidUrl isValidUrl,
} }
export { export {
default as SendMessageToApp, default as SendMessageToApp,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment