Skip to content

M
mr-julyedu
Commit 5fcc8bf1 by xuzhenghua
Options

717-邀请好友组队答题

parent 307f4f0f
Showing with 320 additions and 224 deletions
src/components/activity/2020-717/invitation/index.js
...@@ -117,6 +117,12 @@ class Invitation extends Component { ...@@ -117,6 +117,12 @@ class Invitation extends Component {
}) })
} }
// 答题抽奖
drawQuestions=()=>{
const {history,user} = this.props
history.push(`/anniversary_2020/question/${user.data.uid}`)
}
render() { render() {
const {prizes, invitationInfo, isShowGuide, teamInfo, isMaster, isActivityEnd} = this.state const {prizes, invitationInfo, isShowGuide, teamInfo, isMaster, isActivityEnd} = this.state
const {location} = this.props const {location} = this.props
...@@ -186,7 +192,7 @@ class Invitation extends Component { ...@@ -186,7 +192,7 @@ class Invitation extends Component {
? <button className={'activity-end'}>活动结束</button> ? <button className={'activity-end'}>活动结束</button>
: teamInfo.status === 1 : teamInfo.status === 1
? <button className={'btn'} onClick={this.joinTeam}>加入队伍</button> ? <button className={'btn'} onClick={this.joinTeam}>加入队伍</button>
: <button className={'btn'}>答题抽奖</button> : <button className={'btn'} onClick={this.drawQuestions}>答题抽奖</button>
} }
</> </>
} }
......
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,
isTeamHead: this.props.match.params.assistId === undefined, isResultConfirm: false,
isActivityEnd: false, isTeamHead: this.props.match.params.assistId === undefined,
} isActivityEnd: false,
is_correct: '',
componentDidMount() { is_sign: '',
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
} }
if (this.props.cache.recommends.length === 0) { componentDidMount() {
this.getQuestion() 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
}
getQuestion = () => { if (this.props.cache.recommends.length === 0) {
const assistId = this.props.match.params.assistId this.getQuestion()
http.get(`${API.home}/activity/anniversary/get_question/${assistId ? 2 : 1}/${assistId ? assistId : 0}`)
.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) => { getQuestion = () => {
this.setState({ const assistId = this.props.match.params.assistId
selectedOptionId: id, http.get(`${API.home}/activity/anniversary/get_question/${assistId ? 2 : 1}/${assistId ? assistId : 0}`)
}); .then(res => {
} const {code, msg, data} = res.data
if (code === 200) {
this.props.addData({
type: ADD_QUESTION,
payload: data,
})
} else {
Toast.info(msg)
}
})
}
submit = () => { select = (id) => {
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({ this.setState({
isShowConfirm: false, selectedOptionId: id,
selectedOptionId: undefined,
});
this.props.addData({
payload: data,
type: ADD_RESULT,
}) })
} else { }
Toast.info(msg)
}
})
}
afterSubmitted = (result) => { submit = () => {
const {isTeamHead} = this.state 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)
}
})
}
if (isTeamHead) { resultFun = () => {
if (result.stage === 4) { const {history} = this.props
if (this.state.is_sign) {
history.push('/anniversary_2020')
} 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')
} else {
Toast.info(msg)
}
})
}
}
} else { afterSubmitted = (result) => {
result.is_correct ? Toast.info('回答正确 抽奖次数+1') : Toast.info('很遗憾 回答错误') const {isTeamHead} = this.state
}
} else {
} if (isTeamHead) {
} if (result.stage === 4) {
getRecommends = typeId => { } else {
http.post(`${API.home}/sys/get_commend_course`, { result.is_correct ? Toast.info('回答正确 抽奖次数+1') : Toast.info('很遗憾 回答错误')
type_id: typeId, }
}) } else {
.then(res => {
const {code, data} = res.data
if (code === 200) {
this.props.addData({
payload: data,
type: ADD_RECOMMENDS,
})
} }
}) }
}
getOptionLabel = (index) => { getRecommends = typeId => {
return String.fromCharCode(65 + index) http.post(`${API.home}/sys/get_commend_course`, {
} type_id: typeId,
})
.then(res => {
const {code, data} = res.data
if (code === 200) {
this.props.addData({
payload: data,
type: ADD_RECOMMENDS,
})
redo = () => { }
this.props.addData({ })
type: REDO, }
})
this.getQuestion()
}
render() { getOptionLabel = (index) => {
const { return String.fromCharCode(65 + index)
selectedOptionId, }
isShowConfirm,
isActivityEnd,
isTeamHead,
} = this.state
const { redo = () => {
cache: { this.props.addData({
question, type: REDO,
result, })
recommends, this.getQuestion()
}, }
} = this.props
render() {
const {
selectedOptionId,
isShowConfirm,
isActivityEnd,
isResultConfirm,
isTeamHead,
} = this.state
return ( const {
<div id={'question'}> cache: {
<div className="banner"></div> question,
<div className={'question'}> result,
{question.ques && <div className="topic" dangerouslySetInnerHTML={{__html: question.ques}}></div>} recommends,
<ul> },
{ } = this.props
question.options && !!question.options.length && question.options.map((item, index) => {
return <li key={item.id} className={classnames({
selected: selectedOptionId === item.id, return (
correct: result.right_id === item.id, <div id={'question'}>
wrong: !result.is_correct && parseInt(result.option_id) === item.id, <div className="banner"></div>
})} onClick={this.select.bind(this, item.id)}> <div className={'question'}>
<span>{this.getOptionLabel(index)}</span> {question.ques && <div className="topic" dangerouslySetInnerHTML={{__html: question.ques}}></div>}
{item.des} <ul>
</li> {
}) question.options && !!question.options.length && question.options.map((item, index) => {
} return <li key={item.id} className={classnames({
</ul> selected: selectedOptionId === item.id,
</div> correct: result.right_id === item.id,
{ wrong: !result.is_correct && parseInt(result.option_id) === item.id,
result.analysis && <div className="answered"> })} onClick={this.select.bind(this, item.id)}>
<div className="analysis"> <span>{this.getOptionLabel(index)}</span>
<div className="estimate"> {item.des}
您选择的是{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 ? '正确' : '错误 '} </li>
</div> })
<div className="analysis-content"> }
<div className="title"> </ul>
<i className={'icon'}></i>
解析
</div> </div>
<div className="content" dangerouslySetInnerHTML={{__html: result.analysis}}></div> {
</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> </div>
)
}
}
function ResultConfirm({resultFun, is_correct, is_sign}) {
return <div className="modal-cover">
<div className="modal">
{ {
!!recommends.length && <Recommends recommends={recommends}></Recommends> is_correct === 1 &&
<div className="title">回答正确，抽奖次数+1</div>
} }
</div> {
} is_correct === 0 &&
<div className="submit-bar"> <div className="rusult-title">很遗憾，回答错误 <p>快去抽奖提提神吧</p></div>
<BottomButton result={result} }
isTeamHead={isTeamHead}
submit={() => { <div className={'btm-button'}>
if (this.state.selectedOptionId) { <button onClick={resultFun}>{is_sign ? '去抽奖' : '签到领取抽奖机会'}</button>
this.setState({ </div>
isShowConfirm: true,
});
}
}}
redo={this.redo}
/>
</div> </div>
{ </div>
isShowConfirm &&
<Confirm submit={this.submit} cancel={() => {
this.setState({
isShowConfirm: false,
});
}}></Confirm>
}
</div>
);
}
} }
function Confirm({submit, cancel}) { 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 className="btns"> <div className="btns">
<button onClick={cancel}>取消</button> <button onClick={cancel}>取消</button>
<button onClick={submit}>确认提交</button> <button onClick={submit}>确认提交</button>
</div> </div>
</div>
</div> </div>
</div>
} }
function Result() { function Result() {
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> </div>
</div>
} }
function BottomButton({result, submit, isTeamHead, redo}) { function BottomButton({resultFun, result, submit, isTeamHead, redo}) {
if (result.stage === 4) { if (result.stage === 4) {
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 {
if (result.analysis) {
return !result.is_sign
? <button className={'lottery-related'} onClick={resultFun}>签到领取抽奖机会</button>
: <button className={'submit'} onClick={resultFun}>去抽奖</button>
}
return <button className={'submit'} onClick={submit}>提交</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 \ No newline at end of file
src/components/activity/2020-717/question/index.scss
...@@ -204,6 +204,40 @@ ...@@ -204,6 +204,40 @@
color: #525C65; color: #525C65;
} }
.rusult-title {
text-align: center;
padding-top: 20px;
color: #525C65;
font-size: 18px;
font-weight: 500;
margin-bottom: 20px;
p {
margin-top: 10px;
color: #525C65;
font-size: 15px;
font-weight: 400;
}
}
.btm-button {
width: 100%;
margin: 0 0 20px 0;
text-align: center;
button {
min-width: 128px;
height: 33px;
background: rgba(250, 228, 77, 1);
border-radius: 4px;
border: none;
color: #2034F5;
font-size: 16px;
font-weight: 500;
padding: 0 17px;
}
}
.btns { .btns {
border-top: 1px solid #DDD; border-top: 1px solid #DDD;
height: 44px; height: 44px;
......
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