Skip to content

M
mr-julyedu
Commit 5250d1cc by zhanghaozhe
Options

Merge branch '2020-717-formal'

parents a2a5e971 72db7bfb
Showing with 290 additions and 95 deletions
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,43 +155,65 @@ 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'}>
<HeaderBar title={'答题抽奖'} arrow={true} goBack={() => {
this.props.history.push('/anniversary_2020')
}}/>
{
isMaster
? <div className="banner"></div>
: <div className="team-head">
<img src={teamInfo.avatar_file} alt=""/>
<div className="username">{teamInfo.user_name}</div>
<div>加入我的队伍，一起答题抽大奖</div>
</div>
}
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')
}}/>
{
isMaster
? <div className="banner"></div>
: <div className="team-head">
<img src={teamInfo.avatar_file} alt=""/>
<div className="username">{teamInfo.user_name}</div>
<div>加入我的队伍，一起答题抽大奖</div>
</div>
}
<div className="prize-container">
<div className={'h-bar'}></div>
<div className={'h-bar'}></div>
<div className={'v-bar'}></div>
<div className={'v-bar'}></div>
<ul className="prizes">
{
!!prizes.length && prizes.map((item, index) => {
return <li key={index}
className={index === 4 ? 'empty' : ''}>
{
index === 4
? <div>答题抽奖</div>
: <div className={'prize'}><img src={item.img_name} alt=""/></div>
}
</li>
})
}
</ul>
<div className="prize-container">
<div className={'h-bar'}></div>
<div className={'h-bar'}></div>
<div className={'v-bar'}></div>
<div className={'v-bar'}></div>
<ul className="prizes">
{
!!prizes.length && prizes.map((item, index) => {
return <li key={index}
className={index === 4 ? 'empty' : ''}>
{
index === 4
? <div>答题抽奖</div>
: <div className={'prize'}><img src={item.img_name} alt=""/></div>
}
</li>
})
}
</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,20 +243,8 @@ 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,
})
}
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 {
......@@ -262,4 +275,9 @@
}
}
}
}
.captcha-container {
padding: 40vh 30px;
}
\ No newline at end of file
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