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'
import { connect } from 'react-redux'
@connect(state => ({user: state.user}))
class FormalDraw extends Component {
swiper = null
popupInstance = null
subscribePopupInstance = null
state = {
prizes: [],
currentDisplayPrizes: [],
tabs: [],
today: '',
initialPageIndex: 0,
list: [],
activeTimeRangeIndex: 0,
userValue: {},
}
componentDidMount() {
this.getPrizeData()
}
shouldComponentUpdate(nextProps, nextState, nextContext) {
if (this.props.isApp !== nextProps.isApp) {
this.getPrizeData()
return false
}
return true
}
getPrizeData = () => {
http.get(`${API.home}/sys/activity/prize_data`)
.then(res => {
const {data, code, msg} = res.data
if (code == 200) {
let oneDay = data.list.find(item => item.date === data.value.today) || data.list[0]
const today = oneDay.date
const activeIndex = oneDay['son'].findIndex(item => item.status == 3)
this.setState({
tabs: data.list.map(item => ({title: item.date})),
today,
initialPageIndex: data.list.findIndex(item => item.date == today) || 0,
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 => {
let {surplus, is_prize, hot_value} = this.state.userValue
if (hot_value < 50) {
Toast.info('你的福气值未达到参与抽奖所需福气值分数，快去积攒福气值吧', 2, null, false)
} else if (is_prize == 1) {
Toast.info('你已参与当前时段抽奖', 2, () => {
this.requestDraw(id, true)
}, false)
} else if (surplus < 1) {
Toast.info('你的抽奖次数已用光，快去积攒福气值可获得更多抽奖机会', 2, null, false)
} else {
this.requestDraw(id)
}
}
requestDraw = (id, isDrawn) => {
let {surplus} = this.state.userValue
http.post(`${API.home}/sys/activity/prize`, {
id
}).then(res => {
const {code, msg, data} = res.data
if (code == 200) {
var _czc = _czc || []
_czc.push(["_trackEvent", '点击抽奖', 'm端双十一正式活动-点击抽奖'])
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: isDrawn ? surplus : --surplus}, ...{is_prize: 1}}
})
})
} else {
Toast.info(msg, 2, null, false)
}
})
}
lotteryFunc = (status, id) => {
const {hasError} = this.props.user
if (hasError && status != 4) {
this.props.toLogin()
return
}
if (status == 3) {
this.draw(id)
} else if (status == 2) {
this.subscribe(id)
} else if (status == 4) {
location.href = `/prize-winner-list?tid=${id}`
}
}
subscribe = (id) => {
var _czc = _czc || []
_czc.push(["_trackEvent", '预约抽奖', 'm端双十一正式页-立即预约'])
if (this.subscribePopupInstance) {
return
}
if (!this.state.userValue['is_pre']) {
http.get(`${API["base-api"]}/sys/activity/create_pre_qrcode`, {params: {id}})
.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)
}
})
} else {
http.get(`${API["base-api"]}/activity_pre/${id}`)
.then(res => {
const {code} = res.data
if (code == 200) {
Toast.info('预约成功', 2, null, false)
}
})
.catch(err => {
console.log(err)
})
}
}
render() {
const {tabs, today, initialPageIndex, list, activeTimeRangeIndex, userValue} = this.state
const {hasError} = this.props.user
const isLogin = !hasError
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 ${(isLogin && today === userValue.today) ? 'current' : ''}`} key={index}>
{
(isLogin && (today === userValue.today))
?
<div className="prize_number_con">
当日剩余抽奖次数：
<span className={'prize__number'}>{userValue.surplus}次</span>
</div>
: ""
}
<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 5:
statusContent = '已预约'
break
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 &&
item.status === 3 &&
<div className="tip">
满10000人释放
</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)