Skip to content

M
mr-julyedu
Commit 081884cc by zhanghaozhe
Options

Merge branch '2020-717-formal' into dev

parents 483c6307 c16eaff9
Showing with 171 additions and 48 deletions
src/components/activity/2020-717/activity/index.js
...@@ -139,8 +139,8 @@ class Anniversary2020 extends Component { ...@@ -139,8 +139,8 @@ class Anniversary2020 extends Component {
http.get(`${API.home}/activity/anniversary/activityStage`) http.get(`${API.home}/activity/anniversary/activityStage`)
.then(res => { .then(res => {
const {code, msg, data} = res.data const {code, msg, data} = res.data
this.setupCountDown(data.count_down)
if (code === 200) { if (code === 200) {
this.setupCountDown(data.count_down)
this.setState({ this.setState({
activityData: data, activityData: data,
}, this.bindNavAction()) }, this.bindNavAction())
...@@ -267,7 +267,7 @@ class Anniversary2020 extends Component { ...@@ -267,7 +267,7 @@ class Anniversary2020 extends Component {
const _records = Array.isArray(data) ? data : [] const _records = Array.isArray(data) ? data : []
this.setState(state => { this.setState(state => {
return { return {
prizeRecords: _records, prizeRecords: state.prizeRecords.concat(_records),
prizeRecordsPagination: state.prizeRecordsPagination + 1, prizeRecordsPagination: state.prizeRecordsPagination + 1,
} }
}, () => { }, () => {
...@@ -716,6 +716,34 @@ class Anniversary2020 extends Component { ...@@ -716,6 +716,34 @@ class Anniversary2020 extends Component {
</Carousel> </Carousel>
} }
<div className="prize-wrapper"> <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={'h-bar'}></div> <div className={'h-bar'}></div>
<div className={'v-bar'}></div> <div className={'v-bar'}></div>
...@@ -728,7 +756,7 @@ class Anniversary2020 extends Component { ...@@ -728,7 +756,7 @@ class Anniversary2020 extends Component {
{ {
active: drawingItemId === item.id, active: drawingItemId === item.id,
available: index === 4 && (user.hasError || prizeData.odd_times), 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)}> ])} onClick={this.draw.bind(this, index)}>
{ {
...@@ -1084,10 +1112,16 @@ class Anniversary2020 extends Component { ...@@ -1084,10 +1112,16 @@ class Anniversary2020 extends Component {
Button = <button className={'unavailable'}>活动已结束</button> Button = <button className={'unavailable'}>活动已结束</button>
} }
} }
return <li className={'course'} key={index}> return <li className={'course'} key={index} onClick={(e) => {
const nodeName = e.target.nodeName.toLowerCase()
if (nodeName !== 'a') {
history.push(`/detail?id=${item.course_id}`)
}
}
}>
<div className="cover"> <div className="cover">
{ {
item.save && <span>立省{item.save}元</span> !!item.save && <span>立省{item.save}元</span>
} }
<img src={item.image_name} <img src={item.image_name}
alt=""/> alt=""/>
...@@ -1099,8 +1133,8 @@ class Anniversary2020 extends Component { ...@@ -1099,8 +1133,8 @@ class Anniversary2020 extends Component {
item.type === 1 item.type === 1
? <div className="purchased">已购买</div> ? <div className="purchased">已购买</div>
: <div className="prices"> : <div className="prices">
<span>¥{item.price0}</span>
<span>¥{item.price1}</span> <span>¥{item.price1}</span>
<span>¥{item.price0}</span>
</div> </div>
} }
<div className="btn"> <div className="btn">
......
src/components/activity/2020-717/activity/index.scss
...@@ -223,7 +223,7 @@ ...@@ -223,7 +223,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.title{ .title {
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
} }
...@@ -387,6 +387,81 @@ ...@@ -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 { .prizes {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
......
src/components/activity/2020-717/index.js
import React, { Component } from 'react'; import React, {Component} from 'react';
import { Switch, Route } from "react-router-dom"; import {Switch, Route} from "react-router-dom";
import Anniversary2020 from "@components/activity/2020-717/activity" import Anniversary2020 from "@components/activity/2020-717/activity"
import Question from "@components/activity/2020-717/question" import Question from "@components/activity/2020-717/question"
import Invitation from "@components/activity/2020-717/invitation" import Invitation from "@components/activity/2020-717/invitation"
class Anniversary2020Entry extends Component { class Anniversary2020Entry extends Component {
componentDidMount() {
document.title = '7.17 五周年庆，AI好课1分起购，答题、购课100%有奖！华为P40 Pro+，课程免单等你来！--七月在线'
}
render() { render() {
const match = this.props.match const match = this.props.match
return ( return (
......
src/components/activity/2020-717/invitation/index.js
...@@ -78,6 +78,9 @@ class Invitation extends Component { ...@@ -78,6 +78,9 @@ class Invitation extends Component {
teamInfo: data, teamInfo: data,
isMaster: data.is_captain || !getParam('team_code'), isMaster: data.is_captain || !getParam('team_code'),
}); });
if(data.is_captain){
this.getInvitationInfo()
}
} else { } else {
Toast.info(msg) Toast.info(msg)
} }
...@@ -90,7 +93,7 @@ class Invitation extends Component { ...@@ -90,7 +93,7 @@ class Invitation extends Component {
const {user, history} = this.props const {user, history} = this.props
if (user.hasError) { if (user.hasError) {
if (browser.isWeixin) { 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" window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" + encodeURIComponent(window.location.href + "&aa=bb").toLowerCase() + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
} else { } else {
history.push('/passport') history.push('/passport')
} }
...@@ -175,37 +178,6 @@ class Invitation extends Component { ...@@ -175,37 +178,6 @@ class Invitation extends Component {
}) })
} }
</ul> </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> </div>
{ {
isShowGuide && <div className="guide" onClick={() => { isShowGuide && <div className="guide" onClick={() => {
...@@ -217,6 +189,37 @@ class Invitation extends Component { ...@@ -217,6 +189,37 @@ class Invitation extends Component {
<div className="tip">点击右上角，分享给好友</div> <div className="tip">点击右上角，分享给好友</div>
</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> </div>
); );
} }
...@@ -236,7 +239,6 @@ function BottomButton({status, isActivityEnd, isAnswered, joinTeam, drawQuestion ...@@ -236,7 +239,6 @@ function BottomButton({status, isActivityEnd, isAnswered, joinTeam, drawQuestion
} }
export default compose( export default compose(
WithFullSize,
connect( connect(
({user}) => ({user}), ({user}) => ({user}),
null, null,
......
src/components/activity/2020-717/invitation/index.scss
html, body, #root {
min-height: 100%;
}
#invitation { #invitation {
height: 100%; min-height: 100%;
padding-bottom: 60px;
background: #2E00DC; background: #2E00DC;
.banner { .banner {
...@@ -12,9 +18,8 @@ ...@@ -12,9 +18,8 @@
.prize-container { .prize-container {
position: relative; position: relative;
padding: 15px; padding: 15px;
margin: 0 auto 8px; margin: 0 auto;
width: 355px; width: 355px;
height: 219px;
background: rgba(39, 27, 211, 1); background: rgba(39, 27, 211, 1);
border: 4px solid; border: 4px solid;
border-image: linear-gradient(0deg, rgba(33, 32, 244, 1), rgba(94, 167, 248, 1)) 10 10; border-image: linear-gradient(0deg, rgba(33, 32, 244, 1), rgba(94, 167, 248, 1)) 10 10;
...@@ -136,9 +141,10 @@ ...@@ -136,9 +141,10 @@
} }
.op { .op {
position: fixed; //position: fixed;
bottom: 40px; //bottom: 40px;
left: 0; //left: 0;
margin-top: 163px;
width: 100%; width: 100%;
text-align: center; 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