Skip to content

M
mr-julyedu
Commit 82069eb8 by zhanghaozhe
Options

正式抽奖

parent fab80c82
Showing with 283 additions and 123 deletions
src/components/blessingPreheat/formal-draw/index.scss
#formal-draw { #formal-draw {
position: relative; position: relative;
width: 355px; width: 355px;
height: 646px;
background: rgba(57, 0, 201, 1); background: rgba(57, 0, 201, 1);
border: 1px solid rgba(89, 112, 255, 1); border: 1px solid rgba(89, 112, 255, 1);
border-radius: 5px; border-radius: 5px;
...@@ -32,6 +31,8 @@ ...@@ -32,6 +31,8 @@
} }
.am-tabs { .am-tabs {
position: relative;
z-index: 10;
width: 330px; width: 330px;
margin: 0 auto; margin: 0 auto;
color: #fff; color: #fff;
...@@ -69,7 +70,7 @@ ...@@ -69,7 +70,7 @@
.am-tabs-default-bar-tab-active { .am-tabs-default-bar-tab-active {
background: #FFF604; background: #FFF604;
border-radius: 0 0 6px 6px; border-radius: 0 0 5px 5px;
} }
} }
...@@ -88,6 +89,23 @@ ...@@ -88,6 +89,23 @@
.hot-value { .hot-value {
margin: 0 12px; margin: 0 12px;
a {
display: inline-block;
width: 34px;
height: 18px;
padding: 0;
background: linear-gradient(0deg, rgba(255, 132, 0, 1), rgba(255, 67, 2, 1));
border-radius: 3px;
font-size: 11px;
color: #fff;
font-weight: 400;
color: rgba(255, 255, 255, 1);
border: none;
-webkit-appearance: none;
outline: none;
line-height: 18px;
}
} }
.grade { .grade {
...@@ -111,7 +129,7 @@ ...@@ -111,7 +129,7 @@
margin-bottom: 20px; margin-bottom: 20px;
.progress { .progress {
width: 152px; width: 0;
height: 5px; height: 5px;
background: linear-gradient(270deg, rgba(255, 76, 5, 1) 0%, rgba(255, 215, 108, 1) 100%); background: linear-gradient(270deg, rgba(255, 76, 5, 1) 0%, rgba(255, 215, 108, 1) 100%);
border-radius: 2px; border-radius: 2px;
...@@ -120,23 +138,43 @@ ...@@ -120,23 +138,43 @@
.locator { .locator {
position: absolute; position: absolute;
top: -16px; top: -16px;
left: 146px; left: 0;
width: 11px; width: 11px;
height: 14px; height: 14px;
} }
} }
.time-ranges { .time-ranges {
overflow: hidden;
& > li {
&::after {
content: '';
display: block;
height: 10px;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/formal-draw-divider.png") no-repeat;
background-size: contain;
margin: 10px 0;
}
}
& > li:last-child {
margin-bottom: 30px;
&::after {
display: none;
}
}
} }
.status-bar { .status-bar {
position: relative;
display: flex; display: flex;
width: 330px; width: 330px;
height: 44px; height: 44px;
text-align: center; text-align: center;
border-radius: 2px; border-radius: 2px;
background: #fff; background: #fff;
.time { .time {
position: relative; position: relative;
width: 220px; width: 220px;
...@@ -144,12 +182,38 @@ ...@@ -144,12 +182,38 @@
font-size: 18px; font-size: 18px;
padding-left: 45px; padding-left: 45px;
line-height: 44px; line-height: 44px;
text-align: left;
} }
.status { .status {
position: relative;
width: 110px; width: 110px;
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
border-radius: 0 2px 2px 0;
&::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
display: none;
color: transparent;
margin-left: -6px;
border-style: solid;
border-width: 5px 6px 0;
border-top-color: #CCC;
}
}
.icon-clock {
position: absolute;
top: 50%;
left: 20px;
margin-top: -9px;
width: 16px;
height: 18px;
z-index: 10;
} }
} }
...@@ -158,14 +222,197 @@ ...@@ -158,14 +222,197 @@
display: flex; display: flex;
flex-flow: column; flex-flow: column;
justify-content: center; justify-content: center;
align-items: center;
background: linear-gradient(-90deg, rgba(204, 204, 204, 1) 0%, rgba(221, 221, 221, 1) 100%); background: linear-gradient(-90deg, rgba(204, 204, 204, 1) 0%, rgba(221, 221, 221, 1) 100%);
a{
a {
font-size: 10px; font-size: 10px;
color: #5327FA; color: #5327FA;
text-decoration: underline; text-decoration: underline;
} }
} }
&.active{
.status::after{
display: block;
border-top-color: #DDDDDD;
}
}
}
.status-3 {
.time {
color: #5327FA;
}
.status {
display: flex;
justify-content: center;
flex-direction: column;
background: linear-gradient(to right, #ff3b05 0%, #ff6905 100%);
}
&.active {
.status::after {
display: block;
border-top-color: #ff6905;
}
}
}
.status-1, .status-2 {
.status {
background: linear-gradient(-90deg, rgba(7, 240, 255, 1) 0%, rgba(0, 153, 255, 1) 100%);
font-size: 15px;
color: #fff;
text-align: center;
line-height: 44px;
}
&.active .status {
&::after {
display: block;
border-top-color: #07F0FF;
}
}
}
.prizes {
margin-top: 15px;
li {
position: relative;
width: 100px;
margin-right: 6px;
.tip {
position: absolute;
top: -20px;
left: 50%;
z-index: 10;
margin-left: -37px;
width: 74px;
height: 20px;
background: rgba(255, 246, 4, 1);
border-radius: 2px;
font-size: 11px;
color: #3900C9;
&::after {
position: absolute;
bottom: -4px;
content: '';
display: block;
border-style: solid;
border-width: 4px 6px 0;
border-top-color: rgba(255, 246, 4, 1);
}
}
}
img {
width: 100px;
height: 78px;
background: rgba(255, 255, 255, 1);
border: 2px solid;
border-image: linear-gradient(-40deg, rgba(255, 75, 240, 1), rgba(120, 0, 255, 1)) 10 10;
border-radius: 4px;
}
.prize-name {
width: 99px;
& > div:first-child {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
& > div:last-child {
text-align: center;
}
}
}
}
.closable-popup-mask{
.popup-container.join-lottery {
background: #5327FA;
text-align: center;
.title {
color: #fff;
margin-bottom: 15px;
}
.text {
width: 275px;
height: 248px;
padding: 36px 30px 0;
margin-bottom: 10px;
text-align: center;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/join-lottery-bg.png");
background-size: contain;
font-size: 14px;
.code {
color: #FF0000;
margin-bottom: 8px;
}
.time, .hint {
font-size: 12px;
color: #525C65;
}
.time {
margin-bottom: 20px;
}
.hint{
color: rgba(82, 92, 101, .8);
margin-bottom: 10px;
text-align: left;
}
.qr-code {
width: 90px;
height: 90px;
margin-top: 0;
}
}
button {
width: 133px;
height: 30px;
background: #fff;
border-radius: 15px;
font-size: 14px;
color: #5327FA;
-webkit-appearance: none;
outline: none;
border: none;
}
} }
}
.closable-popup-mask {
.subscribe{
height: 215px;
padding-bottom: 30px;
.title{
margin-bottom: 20px;
}
.content{
text-align: center;
.qr-code{
width: 120px;
height: 120px;
}
}
}
} }
src/components/blessingPreheat/index.js
...@@ -236,7 +236,9 @@ class BlessingPreheat extends Component { ...@@ -236,7 +236,9 @@ class BlessingPreheat extends Component {
if (code === 200) { if (code === 200) {
this.setState({ this.setState({
isSign: !!data.today_signed, isSign: !!data.today_signed,
isFormal: data.is_activity, // isFormal: data.is_activity,
//todo 去掉假数据
isFormal: 1,
testSum: parseInt(data.user_test_total, 10) || 0, testSum: parseInt(data.user_test_total, 10) || 0,
userInfo: Object.assign({}, userInfo, { userInfo: Object.assign({}, userInfo, {
isFollow: data.subscribed, isFollow: data.subscribed,
...@@ -268,7 +270,7 @@ class BlessingPreheat extends Component { ...@@ -268,7 +270,7 @@ class BlessingPreheat extends Component {
handleToSign = () => { handleToSign = () => {
const { userInfo } = this.state; const {userInfo} = this.state
http.post(`${API.home}/sys/add/blessing`, { http.post(`${API.home}/sys/add/blessing`, {
type: 1 // 1：签到；3：分享；4：浏览课程； type: 1 // 1：签到；3：分享；4：浏览课程；
}).then(res => { }).then(res => {
...@@ -279,7 +281,7 @@ class BlessingPreheat extends Component { ...@@ -279,7 +281,7 @@ class BlessingPreheat extends Component {
userInfo: Object.assign({}, userInfo, { userInfo: Object.assign({}, userInfo, {
blessingVal: userInfo.blessingVal + 5 blessingVal: userInfo.blessingVal + 5
}) })
}); })
Toast.info('+5点福气值~', 2, null, false) Toast.info('+5点福气值~', 2, null, false)
} }
...@@ -301,15 +303,15 @@ class BlessingPreheat extends Component { ...@@ -301,15 +303,15 @@ class BlessingPreheat extends Component {
if (isLogin && !isLoginnew) { if (isLogin && !isLoginnew) {
this.toLogin() this.toLogin()
} else { } else {
if(key === 'shareMark') { if (key === 'shareMark') {
this.setState({ this.setState({
isClose: false isClose: false
}); })
setTimeout(() => { setTimeout(() => {
this.setState({ this.setState({
isClose: true isClose: true
}); })
}, 5000); }, 5000)
} }
let obj = {} let obj = {}
obj[key] = true obj[key] = true
...@@ -321,7 +323,7 @@ class BlessingPreheat extends Component { ...@@ -321,7 +323,7 @@ class BlessingPreheat extends Component {
handleToShowNotice = () => { handleToShowNotice = () => {
http.get(`${API['base-api']}/sys/activity/create_blessing_qrcode`).then(res => { http.get(`${API['base-api']}/sys/activity/create_blessing_qrcode`).then(res => {
const {errno, data, msg} = res.data; const {errno, data, msg} = res.data
if (errno === 200) { if (errno === 200) {
QRCode.toDataURL(data.url, { QRCode.toDataURL(data.url, {
width: 120, width: 120,
...@@ -339,8 +341,8 @@ class BlessingPreheat extends Component { ...@@ -339,8 +341,8 @@ class BlessingPreheat extends Component {
}) })
} else if (errno === 4030 || errno === 4040) { } else if (errno === 4030 || errno === 4040) {
this.toLogin() this.toLogin()
}else { } else {
Toast.info(msg, 2, null, false); Toast.info(msg, 2, null, false)
} }
}) })
} }
...@@ -425,7 +427,7 @@ class BlessingPreheat extends Component { ...@@ -425,7 +427,7 @@ class BlessingPreheat extends Component {
isApp, isApp,
isClose, isClose,
testSum testSum
} = this.state; } = this.state
const {history} = this.props const {history} = this.props
const isLogin = !this.props.user.hasError const isLogin = !this.props.user.hasError
return ( return (
...@@ -455,9 +457,23 @@ class BlessingPreheat extends Component { ...@@ -455,9 +457,23 @@ class BlessingPreheat extends Component {
{/* 幸运大抽奖--预热 */} {/* 幸运大抽奖--预热 */}
<ListHeader id={'lucky-draw'} text="幸运大抽奖" styles={{margin: '30px 0 10px'}}/> <ListHeader id={'lucky-draw'} text="幸运大抽奖" styles={{margin: '30px 0 10px'}}/>
<p className="luck-draw__tip">- 将于11月11日10点开启 -</p>
<button className="luck-draw__button" onClick={() => this.handleToShow('isRule')}>活动规则></button> {
<LuckDraw/> isFormal === 0 &&
<>
<p className="luck-draw__tip">- 将于11月11日10点开启 -</p>
<button className="luck-draw__button" onClick={() => this.handleToShow('isRule')}>活动规则></button>
<LuckDraw/>
</>
}
{/* 抽奖--正式 */}
{
isFormal === 1 &&
<FormalDraw/>
}
{/*定金--只在预热期间显示*/} {/*定金--只在预热期间显示*/}
{ {
...@@ -495,35 +511,6 @@ class BlessingPreheat extends Component { ...@@ -495,35 +511,6 @@ class BlessingPreheat extends Component {
shareMark && shareMark &&
<SharePopup isClose={isClose} toClose={() => this.handleToHide('shareMark')}/> <SharePopup isClose={isClose} toClose={() => this.handleToHide('shareMark')}/>
} }
{/*
<Popup visible={this.state.joinLotteryVisible}
title={'你已成功参与本时段抽奖'}
className={'join-lottery'}
>
<div className="text">
<div className="code">抽奖码为：99999999</div>
<div className="time">本时段的中奖结果将在xx:xx公布</div>
<div className="hint">你可关注‘七月在线’服务号第一时间获得中奖信息。</div>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png"
className='qr-code' alt=""/>
</div>
<button onClick={() => {
this.setState({joinLottery: false})
}}>知道了
</button>
</Popup>
<Popup title={'微信扫码分享到微信朋友圈'}
visible={this.state.timelineShareVisible}
className={'timeline-share'}
>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt=""
className="qr-code"/>
</Popup>*/}
<ListHeader id={'ai-test'} text="全国AI工程师水平测试" styles={{margin: '30px 0 15px'}}/> <ListHeader id={'ai-test'} text="全国AI工程师水平测试" styles={{margin: '30px 0 15px'}}/>
<div className="test__record" onClick={() => this.handleToShow('showRecordList', true)}> <div className="test__record" onClick={() => this.handleToShow('showRecordList', true)}>
...@@ -539,7 +526,7 @@ class BlessingPreheat extends Component { ...@@ -539,7 +526,7 @@ class BlessingPreheat extends Component {
<RankList></RankList> <RankList></RankList>
<Live isFormal={isFormal} isLogin={isLogin}></Live> {/*<Live isFormal={isFormal} isLogin={isLogin}></Live>*/}
</div> </div>
) )
} }
......
src/components/blessingPreheat/index.scss
#blessing-preheat { #blessing-preheat {
background: #5327FA; background: #5327FA;
} }
.timeline-share{
height: 215px;
padding-bottom: 30px;
.title{
margin-bottom: 20px;
}
.content{
text-align: center;
.qr-code{
width: 120px;
height: 120px;
}
}
}
.test__record { .test__record {
width: 106px; width: 106px;
height: 26px; height: 26px;
...@@ -38,64 +22,6 @@ ...@@ -38,64 +22,6 @@
text-align-last: center; text-align-last: center;
} }
.join-lottery {
background: #5327FA;
text-align: center;
.title {
color: #fff;
margin-bottom: 15px;
}
.text {
width: 275px;
height: 248px;
padding: 36px 30px 0;
margin-bottom: 10px;
text-align: center;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/join-lottery-bg.png");
background-size: contain;
font-size: 14px;
.code {
color: #FF0000;
margin-bottom: 8px;
}
.time, .hint {
font-size: 12px;
color: #525C65;
}
.time {
margin-bottom: 20px;
}
.hint{
color: rgba(82, 92, 101, .8);
margin-bottom: 10px;
text-align: left;
}
.qr-code {
width: 90px;
height: 90px;
}
}
button {
width: 133px;
height: 30px;
background: #fff;
border-radius: 15px;
font-size: 14px;
color: #5327FA;
-webkit-appearance: none;
outline: none;
border: none;
}
}
.invite-popup { .invite-popup {
.content { .content {
display: flex; display: flex;
......
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