Skip to content

M
mr-julyedu
Commit ca2138e2 by zhanghaozhe
Options

Merge branch 'formal-draw' into 11-11-formal

parents 61c7023f fd83c9cb
Showing with 1096 additions and 129 deletions
src/components/activity/prize-winner-list/index.scss
#prize-winner-list { #prize-winner-list {
height: 100%;
background: #5327fa; background: #5327fa;
padding-bottom: 10px;
.banner { .banner {
width: 100%; width: 100%;
...@@ -31,7 +31,6 @@ ...@@ -31,7 +31,6 @@
ul { ul {
width: 355px; width: 355px;
height: 316px;
margin: 0 auto; margin: 0 auto;
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);
......
src/components/blessingPreheat/formal-draw/index.js 0 → 100644
import React, { Component } from 'react'
import { http } from "@/utils"
import { Toast, Tabs } from 'antd-mobile'
import './index.scss'
import 'swiper/dist/css/swiper.min.css'
import { Link, withRouter } from 'react-router-dom'
import classnames from 'classnames'
import Swiper from 'swiper'
import { Popup } from "@common/index"
import QRCode from 'qrcode'
class FormalDraw extends Component {
swiper = null
popupInstance = null
subscribePopupInstance = null
state = {
prizes: [],
currentDisplayPrizes: [],
tabs: [],
today: '',
initialPageIndex: 0,
isLogin: false,
list: [],
activeTimeRangeIndex: 0,
userValue: {},
}
componentDidMount() {
http.get(`${API.home}/sys/activity/prize_data`)
.then(res => {
const {data, code, msg} = res.data
const oneDay = data.list.filter(item => item.date === data.value.today)
const activeIndex = oneDay[0]['son'].findIndex(item => item.status == 3)
if (code == 200) {
const {is_login, today} = data.value
this.setState({
tabs: data.list.map(item => ({title: item.date})),
today,
initialPageIndex: data.list.findIndex(item => item.date == today) || 0,
isLogin: is_login,
list: data.list,
userValue: data.value,
activeTimeRangeIndex: activeIndex < 0 ? 0 : activeIndex
}, () => {
this.initializeSwiper()
})
} else {
Toast.info(msg, 2, null, false)
}
})
}
initializeSwiper = () => {
new Swiper(this.swiper, {
slidesPerView: 'auto',
scrollbar: {
el: '.swiper-scrollbar',
draggable: true
}
})
}
changeTab = (tab) => {
const {list} = this.state
const data = list.filter(item => item.date === tab.title)
let index = data[0]['son'].findIndex(item => item.status == 3)
this.setState({
today: tab.title,
activeTimeRangeIndex: index < 0 ? 0 : index
}, () => {
this.initializeSwiper()
})
}
draw = id => {
var _czc = _czc || []
_czc.push(["_trackEvent", '点击抽奖', 'm端双十一正式活动-点击抽奖'])
let {surplus, is_prize} = this.state.userValue
if (is_prize || this.popupInstance || surplus <= 0) {
return
}
http.post(`${API.home}/sys/activity/prize`, {
id
}).then(res => {
const {code, msg, data} = res.data
if (code == 200) {
QRCode.toDataURL(data.url, (err, url) => {
this.popupInstance = Popup({
title: '你已成功参与本时段抽奖',
className: 'join-lottery',
content: (
<>
<div className="text">
<div className="code">抽奖码为：{data.code}</div>
<div className="time">本时段的中奖结果将在{data.date}公布</div>
<div className="hint">你可关注‘七月在线’服务号第一时间获得中奖信息。</div>
<img src={url} className='qr-code' alt=""/>
</div>
<button onClick={() => {
this.popupInstance.close()
}}>知道了
</button>
</>
)
})
this.setState({
userValue: {...this.state.userValue, ...{surplus: --surplus}}
})
})
} else {
Toast.info(msg, 2, null, false)
}
})
}
lotteryFunc = (status, id) => {
if (!this.state.isLogin) {
this.props.history.push('/passport')
return
}
if (status == 3) {
this.draw(id)
} else if (status == 2) {
this.subscribe()
}
}
subscribe = () => {
var _czc = _czc || []
_czc.push(["_trackEvent", '预约抽奖', 'm端双十一正式页-立即预约'])
if (this.subscribePopupInstance) {
return
}
http.get(`${API["base-api"]}/sys/activity/create_pre_qrcode`)
.then(res => {
const {code, data, msg} = res.data
if (code == 200) {
this.subscribePopupInstance = QRCode.toDataURL(data.url, (err, url) => {
Popup({
title: '微信扫码“七月在线”服务号即可预约',
className: 'subscribe',
content: <img src={url} alt="" className="qr-code"/>,
close: () => new Promise(resolve => {
this.subscribePopupInstance = null
resolve()
})
})
})
} else {
Toast.info(msg, 2, null, false)
}
})
}
render() {
const {tabs, today, initialPageIndex, isLogin, list, activeTimeRangeIndex, userValue} = this.state
const schedule = userValue.schedule <= 2 ? 2 : userValue.schedule
return (
list.length > 0 ?
<div id={'formal-draw'}>
{
list.length &&
<Tabs
tabs={tabs}
initialPage={initialPageIndex}
tabBarBackgroundColor={'transparent'}
tabBarActiveTextColor={'#5600DF'}
tabBarInactiveTextColor={'#FFF604'}
tabBarUnderlineStyle={{display: 'none'}}
onTabClick={this.changeTab}
swipeable={false}
>
{
list.map((listItem, index) => {
return (
<div className="content" key={index}>
<div className="title">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/title-decorate-left.png"
alt=""/>
{
isLogin
?
<div className="hot-value">中奖概率值：<span className={'grade'}>{userValue['hot_value']}分</span>
</div>
: <div className="hot-value">中奖概率值：<Link to={'/passport'}>登录</Link></div>
}
<img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/title-decorate-right.png"
alt=""/>
</div>
{
isLogin ?
<div className="progress-bar">
<img className={'locator'}
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/locator.png"
alt=""
style={{
left: `${schedule - (11 / 330 - (6 / 330)) * 100}%`
}}
/>
<div className="progress" style={{
width: `${schedule}%`
}}></div>
</div>
: null
}
<ul className="time-ranges">
{
listItem.son && listItem.son.map((item, i) => {
let statusContent
switch (item.status) {
case 4:
statusContent = (
<>
<span>已结束</span>
<Link to={`/prize-winner-list?tid=${item.id}`}>查看中奖记录</Link>
</>
)
break
case 3:
statusContent = (
<>
<div>参与抽奖</div>
<div>{item.num}人正在参与</div>
</>
)
break
case 2:
statusContent = '立即预约'
break
default:
statusContent = '即将开启'
}
return (
<li key={i}
className={classnames(`status-${item.status}`, {active: activeTimeRangeIndex === i})}>
<div className={'status-bar'} onClick={() => {
this.setState({activeTimeRangeIndex: i}, () => {
this.initializeSwiper()
})
}}>
<img className={'icon-clock'}
src={
item.status == 3
? 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/m-icon-clock-purple.png'
: "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/m-icon-clock.png"
}
alt=""/>
<div className="time">
<span>{item.time}</span>
</div>
<div className="status"
onClick={this.lotteryFunc.bind(this, item.status, item.id)}>{statusContent}</div>
</div>
{
activeTimeRangeIndex === i &&
listItem.date === today &&
<div className="swiper-container" ref={el => this.swiper = el}>
<ul className={'prizes swiper-wrapper'}>
{
item.data.map((prize, index) => {
return (
<li key={index} className={'swiper-slide'}>
{
prize.level === 1 &&
<div className="tip">
满{prize.people_limit}人释放
</div>
}
<img src={prize.img} alt=""/>
<div className='prize-name'>
<div>{prize.name}</div>
<div>*{prize.num}</div>
</div>
</li>
)
})
}
<li className='swiper-scrollbar'></li>
</ul>
</div>
}
</li>
)
})
}
</ul>
</div>
)
})
}
</Tabs>
}
</div>
: null
)
}
}
export default withRouter(FormalDraw)
src/components/blessingPreheat/formal-draw/index.scss 0 → 100644
#formal-draw {
position: relative;
width: 355px;
background: rgba(57, 0, 201, 1);
border: 1px solid rgba(89, 112, 255, 1);
border-radius: 5px;
margin: 0 auto;
&::before {
content: '';
display: block;
width: 233px;
height: 90px;
position: absolute;
top: 0;
left: 0;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/body-top-bg.png") no-repeat;
background-size: contain;
}
&::after {
content: '';
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 250px;
height: 57px;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/body-bottom-bg.png") no-repeat;
background-size: contain;
}
.am-tabs {
position: relative;
z-index: 10;
width: 330px;
margin: 0 auto;
color: #fff;
& .am-tabs-default-bar-tab:nth-of-type(3) {
&::after {
display: none;
}
}
&.am-tabs-horizontal {
.am-tabs-pane-wrap {
&-inactive {
padding: 0 1px;
}
}
}
.am-tabs-tab-bar-wrap {
height: 33px;
border: 1px solid rgba(255, 246, 4, 1);
border-radius: 0 0 6px 6px;
}
.am-tabs-default-bar-tab {
height: auto;
line-height: 1;
&::after {
content: '';
display: block;
position: absolute;
right: 0;
left: unset;
top: 50%;
margin-top: -7px;
width: 1px;
height: 14px;
background: #FFF604;
transform: none;
}
}
.am-tabs-default-bar-tab-active {
background: #FFF604;
border-radius: 0 0 5px 5px;
}
}
.content {
.title {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 16px;
color: #FFF3F0;
margin: 20px 0 28px;
line-height: 1;
.hot-value {
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 {
color: #FFF604;
}
img {
width: 24px;
height: 11px;
}
}
}
.progress-bar {
position: relative;
width: 330px;
height: 5px;
background: linear-gradient(-90deg, rgba(211, 211, 210, 1) 0%, rgba(255, 255, 255, 1) 100%);
border-radius: 2px;
margin-bottom: 20px;
.progress {
width: 0;
height: 5px;
background: linear-gradient(270deg, rgba(255, 76, 5, 1) 0%, rgba(255, 215, 108, 1) 100%);
border-radius: 2px;
}
.locator {
position: absolute;
top: -16px;
left: 0;
width: 11px;
height: 14px;
}
}
.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 {
position: relative;
display: flex;
width: 330px;
height: 44px;
text-align: center;
border-radius: 2px;
background: #fff;
.time {
position: relative;
width: 220px;
color: #999;
font-size: 18px;
padding-left: 45px;
line-height: 44px;
text-align: left;
}
.status {
position: relative;
width: 110px;
color: #fff;
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;
}
}
.status-4 {
.status {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
background: linear-gradient(-90deg, rgba(204, 204, 204, 1) 0%, rgba(221, 221, 221, 1) 100%);
a {
font-size: 10px;
color: #5327FA;
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: -32px;
left: 50%;
z-index: 10;
margin-left: -50px;
padding: 5px 8px;
white-space: nowrap;
background: rgba(255, 246, 4, 1);
border-radius: 2px;
font-size: 11px;
color: #3900C9;
transform: scale(.8);
&::after {
position: absolute;
left: 50%;
bottom: -3px;
margin-left: -6px;
content: '';
display: block;
border-style: solid;
border-width: 4px 6px 0;
border-color: transparent;
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;
}
}
}
.swiper-container {
overflow: visible;
}
}
.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
...@@ -24,10 +24,13 @@ import { setCurrentUser, startFetchUser } from "@/store/userAction" ...@@ -24,10 +24,13 @@ import { setCurrentUser, startFetchUser } from "@/store/userAction"
import { addDays } from "date-fns" import { addDays } from "date-fns"
import { compose } from "redux" import { compose } from "redux"
import { connect } from "react-redux" import { connect } from "react-redux"
import FormalDraw from "./formal-draw"
class BlessingPreheat extends Component { class BlessingPreheat extends Component {
recordInstance = null
constructor(props) { constructor(props) {
super(props) super(props)
this.navTop = 183 this.navTop = 183
...@@ -84,6 +87,12 @@ class BlessingPreheat extends Component { ...@@ -84,6 +87,12 @@ class BlessingPreheat extends Component {
isApp: false, isApp: false,
isClose: false, isClose: false,
testSum: 0, testSum: 0,
address: {
name: '',
phone: '',
address: ''
},
addressPopupVisible: false
} }
} }
...@@ -235,7 +244,9 @@ class BlessingPreheat extends Component { ...@@ -235,7 +244,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,
...@@ -267,7 +278,7 @@ class BlessingPreheat extends Component { ...@@ -267,7 +278,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 => {
...@@ -278,7 +289,7 @@ class BlessingPreheat extends Component { ...@@ -278,7 +289,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)
} }
...@@ -300,15 +311,15 @@ class BlessingPreheat extends Component { ...@@ -300,15 +311,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
...@@ -320,7 +331,7 @@ class BlessingPreheat extends Component { ...@@ -320,7 +331,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,
...@@ -338,8 +349,8 @@ class BlessingPreheat extends Component { ...@@ -338,8 +349,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)
} }
}) })
} }
...@@ -410,6 +421,97 @@ class BlessingPreheat extends Component { ...@@ -410,6 +421,97 @@ class BlessingPreheat extends Component {
} }
} }
getMyPrizeRecord = () => {
http.get(`${API.home}/sys/activity/my_lotteries`)
.then(res => {
const {code, data, msg} = res.data
if (code == 200) {
this.recordInstance = Popup({
title: '我的中奖纪录',
className: 'prize-record-popup',
content: (
<div className={'record-container'}>
<div className="list-title">
<div>时间</div>
<div>奖品名称</div>
</div>
<ul>
{
data.map((item, index) => {
return (
<li key={index}>
<div className="time">{item.time}</div>
<div className="name" onClick={this.showAddressPopup.bind(this, item['is_virtual'],item.prize)}>{item.prize}</div>
</li>
)
})
}
</ul>
</div>
)
})
} else {
Toast.info(msg, 2, null, false)
}
})
}
submitAddress = debounce(() => {
http.post(`${API.home}/sys/collect_info`, {
...this.state.address
})
.then(res => {
const {data, code, msg} = res.data
if (code == 200) {
this.setState({
addressPopupVisible: false
})
} else {
Toast.info(msg, 2, null, false)
}
})
}, 500)
setAddressState = e => {
const value = e.target.value
const name = e.target.name
this.setState({
address: {
...this.state.address, ...{
[name]: value
}
}
})
}
showAddressPopup = (isVirtual, prize) => {
if(!isVirtual){
Toast.info(`恭喜你抽中${prize}，奖品已存放到你的账户`, 2, null, false)
return
}
http.get(`${API.home}/sys/user_address_info`)
.then(res => {
const {data, code, msg} = res.data
if (code == 200) {
this.recordInstance && this.recordInstance.close()
this.setState({
address: {
...this.state.address, ...{
name: data.name,
phone: Number(data.phone),
address: data.address
}
},
addressPopupVisible: true
})
} else {
Toast.info(msg, 2, null, false)
}
})
}
render() { render() {
const { const {
navs, navs,
...@@ -423,8 +525,10 @@ class BlessingPreheat extends Component { ...@@ -423,8 +525,10 @@ class BlessingPreheat extends Component {
index, index,
isApp, isApp,
isClose, isClose,
testSum testSum,
} = this.state; address,
addressPopupVisible,
} = this.state
const {history} = this.props const {history} = this.props
const isLogin = !this.props.user.hasError const isLogin = !this.props.user.hasError
return ( return (
...@@ -454,9 +558,30 @@ class BlessingPreheat extends Component { ...@@ -454,9 +558,30 @@ 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 &&
<>
<div className="formal-draw-btns">
<button className="luck-draw__button" onClick={() => this.handleToShow('isRule')}>活动规则></button>
<button className='prize-record' onClick={this.getMyPrizeRecord}>中奖记录></button>
</div>
<FormalDraw/>
</>
}
{/*定金--只在预热期间显示*/} {/*定金--只在预热期间显示*/}
{ {
...@@ -497,35 +622,6 @@ class BlessingPreheat extends Component { ...@@ -497,35 +622,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)}>
...@@ -541,7 +637,52 @@ class BlessingPreheat extends Component { ...@@ -541,7 +637,52 @@ class BlessingPreheat extends Component {
<RankList></RankList> <RankList></RankList>
<Live isFormal={isFormal} isLogin={isLogin}></Live> {/*<Live isFormal={isFormal} isLogin={isLogin}></Live>*/}
{
addressPopupVisible &&
<div className="address-mask">
<div className="address-popup">
<div className="title">收货信息</div>
<div className="address-info-container">
<div className="tip">请及时填写收货信息，获得实物奖品后将第一时间为您邮寄</div>
<input type="text"
placeholder={'收件人'}
name={'name'}
onChange={e => {
this.setAddressState(e)
}}
value={address.name}
/>
<input type="tel"
placeholder={'联系方式'}
name={'tel'}
onChange={e => {
this.setAddressState(e)
}}
value={address.phone}
/>
<input type="text"
placeholder={'收货地址'}
name={'address'}
onChange={e => {
this.setAddressState(e)
}}
value={address.address}
/>
<button type='button'
className={(address.name != '' && address.phone != '' && address.address != '') ? 'active' : ''}
onClick={this.submitAddress}
>提交
</button>
<i className={'iconfont iconiconfront-2'} onClick={() => {
this.setState({
addressPopupVisible: false
})
}}/>
</div>
</div>
</div>
}
</div> </div>
) )
} }
......
src/components/blessingPreheat/index.scss
...@@ -2,100 +2,28 @@ ...@@ -2,100 +2,28 @@
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;
border:1px solid rgba(255,246,4,1); border: 1px solid rgba(255, 246, 4, 1);
border-radius:13px; border-radius: 13px;
font-size:14px; font-size: 14px;
font-weight:400; font-weight: 400;
color:rgba(255,246,4,1); color: rgba(255, 246, 4, 1);
margin: 10px auto 14px; margin: 10px auto 14px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.sort__rules { .sort__rules {
font-size:12px; font-size: 12px;
font-weight:400; font-weight: 400;
color:rgba(255,255,255,1); color: rgba(255, 255, 255, 1);
text-align: center; text-align: center;
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;
...@@ -131,7 +59,7 @@ ...@@ -131,7 +59,7 @@
text-align: center; text-align: center;
} }
.luck-draw__button { .luck-draw__button, .prize-record {
display: block; display: block;
width: 106px; width: 106px;
height: 26px; height: 26px;
...@@ -149,3 +77,158 @@ ...@@ -149,3 +77,158 @@
outline: none; outline: none;
} }
.formal-draw-btns {
display: flex;
justify-content: center;
margin: 15px 0;
button {
margin: 0;
}
& button:first-child {
margin-right: 27px;
}
}
.prize-record-popup {
.title {
margin-bottom: 11px;
}
.record-container {
width: 250px;
.list-title {
display: flex;
border-radius: 2px 2px 0 0;
div {
width: 50%;
height: 33px;
line-height: 33px;
background: #edeeef;
text-align: center;
font-size: 12px;
color: #525C65;
}
}
ul {
border: 1px solid #CFDBE5;
border-bottom: 0;
li {
border-bottom: 1px solid #CFDBE5;
display: flex;
height: 33px;
line-height: 33px;
font-size: 12px;
& > div {
width: 50%;
text-align: center;
}
.time {
color: #525C65;
}
.name {
color: #09f;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: underline;
}
}
}
}
}
.address-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
z-index: 100;
.address-popup {
position: absolute;
top: 179px;
left: 50%;
margin-left: -150px;
width: 300px;
height: 309px;
padding: 18px 25px;
background: #fff;
border-radius: 5px;
font-size: 12px;
.address-info-container {
position: relative;
padding-bottom: 24px;
text-align: center;
}
.title {
font-size: 16px;
color: #525C65;
text-align: center;
margin-bottom: 11px;
}
.tip {
color: #999;
margin-bottom: 15px;
}
input {
width: 250px;
height: 40px;
border: 1px solid rgba(221, 221, 221, 1);
-webkit-appearance: none;
outline: none;
margin-bottom: 10px;
padding-left: 10px;
&::placeholder {
color: #999;
}
}
button {
width: 141px;
height: 33px;
margin-top: 13px;
text-align: center;
line-height: 33px;
background: #ccced0;
color: #fff;
-webkit-appearance: none;
outline: none;
border: none;
border-radius: 16px;
font-size: 15px;
&.active{
background: #09f;
}
}
}
.iconfont{
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
font-size: 33px;
color: #fff;
}
}
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