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)