Skip to content

M
mr-julyedu
Commit c16eaff9 by zhanghaozhe
Options

周年庆

parent fe5f04dd
Showing with 153 additions and 42 deletions
src/components/activity/2020-717/activity/index.js
......@@ -139,8 +139,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 +267,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 +716,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 +756,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)}>
{
......
src/components/activity/2020-717/activity/index.scss
......@@ -223,7 +223,7 @@
text-overflow: ellipsis;
}
.title{
.title {
font-size: 15px;
font-weight: bold;
}
......@@ -387,6 +387,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;
......
src/components/activity/2020-717/invitation/index.js
......@@ -78,6 +78,9 @@ class Invitation extends Component {
teamInfo: data,
isMaster: data.is_captain || !getParam('team_code'),
});
if(data.is_captain){
this.getInvitationInfo()
}
} else {
Toast.info(msg)
}
......@@ -175,37 +178,6 @@ class Invitation extends Component {
})
}
</ul>
<div className="op">
{
isMaster ?
<>
<div className="tip">再有{invitationInfo.invite_num}位队员答对即可获得{invitationInfo.draw_chance}次抽奖机会</div>
{
browser.isWeixin
? <button className={'btn'} onClick={this.setupWechatShare}>立即邀请</button>
: <CopyToClipboard
text={`${API.m}${location.pathname}?team_code=${invitationInfo.team_code || getParam('team_code')}`}
onCopy={() => {
Toast.info('链接已复制，快去粘贴发给好友吧')
}}>
<button className={'btn'}>立即邀请</button>
</CopyToClipboard>
}
</>
: <>
{
teamInfo.status !== 1 && <div className={'tip'}>
{
teamInfo.status === 2 ? '已加入当前队伍' : teamInfo.status === 3 ? '已加入其他队伍' : null
}
</div>
}
<BottomButton isActivityEnd={isActivityEnd} joinTeam={this.joinTeam} status={teamInfo.status}
drawQuestions={this.drawQuestions} isAnswered={teamInfo.is_answer}/>
</>
}
</div>
</div>
{
isShowGuide && <div className="guide" onClick={() => {
......@@ -217,6 +189,37 @@ class Invitation extends Component {
<div className="tip">点击右上角，分享给好友</div>
</div>
}
<div className="op">
{
isMaster ?
<>
<div className="tip">再有{invitationInfo.invite_num}位队员答对即可获得{invitationInfo.draw_chance}次抽奖机会</div>
{
browser.isWeixin
? <button className={'btn'} onClick={this.setupWechatShare}>立即邀请</button>
: <CopyToClipboard
text={`${API.m}${location.pathname}?team_code=${invitationInfo.team_code || getParam('team_code')}`}
onCopy={() => {
Toast.info('链接已复制，快去粘贴发给好友吧')
}}>
<button className={'btn'}>立即邀请</button>
</CopyToClipboard>
}
</>
: <>
{
teamInfo.status !== 1 && <div className={'tip'}>
{
teamInfo.status === 2 ? '已加入当前队伍' : teamInfo.status === 3 ? '已加入其他队伍' : null
}
</div>
}
<BottomButton isActivityEnd={isActivityEnd} joinTeam={this.joinTeam} status={teamInfo.status}
drawQuestions={this.drawQuestions} isAnswered={teamInfo.is_answer}/>
</>
}
</div>
</div>
);
}
......@@ -236,7 +239,6 @@ function BottomButton({status, isActivityEnd, isAnswered, joinTeam, drawQuestion
}
export default compose(
WithFullSize,
connect(
({user}) => ({user}),
null,
......
src/components/activity/2020-717/invitation/index.scss
html, body, #root {
min-height: 100%;
}
#invitation {
height: 100%;
min-height: 100%;
padding-bottom: 60px;
background: #2E00DC;
.banner {
......@@ -12,9 +18,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 +141,10 @@
}
.op {
position: fixed;
bottom: 40px;
left: 0;
//position: fixed;
//bottom: 40px;
//left: 0;
margin-top: 163px;
width: 100%;
text-align: center;
......
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