Skip to content

M
mr-julyedu
Commit 89ff55f8 by zhanghaozhe
Options

Merge branch 'closable-popup' into 11-11 

# Conflicts:
#	src/components/blessingPreheat/index.js
parents 7b4a11ae 2b3e9680
Showing with 444 additions and 386 deletions
src/common/closable-popup/index.js
import React, { Component } from 'react' import React from 'react'
import ReactDOM from 'react-dom'
import './index.scss' import './index.scss'
import classnames from 'classnames' import classnames from 'classnames'
import propTypes from 'prop-types'
class ClosablePopup extends Component { function ClosablePopup({
title, content, className, closable = true, close = function () {
state = {
visible: this.props.visible
} }
} = {}) {
close = () => { function unmountComponent() {
const {close} = this.props ReactDOM.unmountComponentAtNode(div)
close ? close() : this.setState({visible: false}) if (div && div.parentNode) {
div.parentNode.removeChild(div)
}
} }
componentDidUpdate(prevProps, prevState) { function _close() {
const {visible} = this.props let _c = close()
if (prevState.visible !== this.props.visible) { if (_c && _c.then) {
this.setState({ _c.then(() => {
visible unmountComponent()
}) })
} else {
unmountComponent()
} }
} }
render() { const closablePopup = (
const {title, className, children, closable = true} = this.props <div className={'closable-popup-mask'}>
return ( <div className={classnames(['popup-container', className])}>
this.state.visible <div className="title">{title}</div>
? <div className="content">
<div className={'closable-popup-mask'}> {content}
<div className={classnames(['popup-container', className])}>
<div className="title">{title}</div>
<div className="content">
{children}
</div>
{
closable && <i className={'close iconfont iconiconfront-2'} onClick={this.close}/>
}
</div>
</div> </div>
: null {
) closable && <i className={'close iconfont iconiconfront-2'} onClick={_close}/>
} }
} </div>
</div>
)
const div = document.createElement('div')
document.body.appendChild(div)
ClosablePopup.propTypes = { ReactDOM.render(closablePopup, div)
title: propTypes.string.isRequired,
visible: propTypes.bool,
closable: propTypes.string,
close: propTypes.func
} }
export default ClosablePopup export default ClosablePopup
src/components/blessingPreheat/index.js
import React, {Component} from 'react' import React, { Component } from 'react'
import QRCode from 'qrcode' import QRCode from 'qrcode'
import {http, SendMessageToApp, wxShare, is_weixin, getParam} from '@/utils'; import { http, SendMessageToApp, wxShare, is_weixin, getParam } from '@/utils'
import {Link} from 'react-router-dom' import { Link } from 'react-router-dom'
import {throttle, findIndex, debounce} from 'lodash' import { throttle, findIndex, debounce } from 'lodash'
import RulePopup from './rulePopup/index' import RulePopup from './rulePopup/index'
import CoursePopup from './coursePopup/index' import CoursePopup from './coursePopup/index'
import RecordPopup from './recordPopup/index' import RecordPopup from './recordPopup/index'
...@@ -15,16 +15,16 @@ import ListHeader from './listHeader/index' ...@@ -15,16 +15,16 @@ import ListHeader from './listHeader/index'
import LevelTest from './levelTest/index' import LevelTest from './levelTest/index'
import RankList from './rankList/index' import RankList from './rankList/index'
import './index.scss' import './index.scss'
import {Popup} from '@/common' import { Popup } from '@/common'
import {CopyToClipboard} from 'react-copy-to-clipboard' import { CopyToClipboard } from 'react-copy-to-clipboard'
import {Toast} from "antd-mobile" import { Toast } from "antd-mobile"
import Live from './live' import Live from './live'
import Banner from './banner' import Banner from './banner'
import cookie from "js-cookie"; import cookie from "js-cookie"
import {setCurrentUser, startFetchUser} from "@/store/userAction" 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"
class BlessingPreheat extends Component { class BlessingPreheat extends Component {
...@@ -85,34 +85,88 @@ class BlessingPreheat extends Component { ...@@ -85,34 +85,88 @@ class BlessingPreheat extends Component {
isApp: false isApp: false
} }
} }
constructor(props) {
super(props)
this.navTop = 183
this.prevY = 0
this.state = {
userInfoList: [],
// userInfoList: [{
// token:'fcfef221e60ab7a2-92a80d5d30196999',
// uid:'545292',
// uname:'xzhtest2',
// avatar_file:''
// }],
isRule: false,
isCourse: false,
inviteVisible: false,
joinLotteryVisible: false,
timelineShareVisible: false,
showRecordList: false,
isFormal: false, // 1正式 0 预热
shareMark: false,
userInfo: {},
isSign: false,
navs: [
{
text: '积福气',
id: 'lucky-value'
},
{
text: '幸运大抽奖',
id: 'lucky-draw'
},
{
text: '预付定金',
id: 'deposit'
},
{
text: '精品特惠',
id: 'best-courses'
},
{
text: 'AI测试',
id: 'ai-test'
},
{
text: '大咖直播',
id: 'live'
},
],
index: 0,
userHasError: props.user.hasError
}
}
componentDidMount() {
this.fetchUserBlessing()
this.setInitialNavActiveStatus()
window.addEventListener('scroll', throttle(this.calcNavActive, 100))
if (is_weixin()) {
wxShare({
title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线',
link: window.location.href,
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/index-share-img.png',
})
}
componentDidMount() { // 获取App登录信息
this.fetchUserBlessing(); window['loginInfo'] = result => {
this.setInitialNavActiveStatus() this.loginInfo(result)
window.addEventListener('scroll', throttle(this.calcNavActive, 100)); }
if (is_weixin()) {
wxShare({
title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线',
link: window.location.href,
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/index-share-img.png',
})
}
// 获取App登录信息
window['loginInfo'] = result => {
this.loginInfo(result)
}
window['getNewData'] = result => { window['getNewData'] = result => {
this.fetchUserBlessing(); this.fetchUserBlessing()
} }
window['QQWXWBshare'] = result => { window['QQWXWBshare'] = result => {
this.handleToAddBlessing(result); this.handleToAddBlessing(result)
} }
} }
}
// 获取app登录数据 // 获取app登录数据
loginInfo = (result) => { loginInfo = (result) => {
...@@ -150,70 +204,68 @@ class BlessingPreheat extends Component { ...@@ -150,70 +204,68 @@ class BlessingPreheat extends Component {
transformUser = res => { transformUser = res => {
let payload let payload
res.map((item, index) => { res.map((item, index) => {
payload = { payload = {
hasError: false, hasError: false,
data: { data: {
username: item.uname, username: item.uname,
avatar: item.avatar_file, avatar: item.avatar_file,
token: item.token, token: item.token,
uid: item.uid uid: item.uid
}, },
isFetching: false isFetching: false
} }
}) })
return payload return payload
} }
getActiveIndex = (arr, n) => {
for (let i = 0, len = arr.length; i < len; i++) {
getActiveIndex = (arr, n) => { if (arr[i] > n) {
for (let i = 0, len = arr.length; i < len; i++) { if (!i) {
if (arr[i] > n) { return i
if (!i) { } else {
return i if (Math.abs(n - arr[i]) < Math.abs(n - arr[i - 1])) {
} else { return i
if (Math.abs(n - arr[i]) < Math.abs(n - arr[i - 1])) { } else {
return i return i - 1
} else { }
return i - 1
}
}
}
} }
return arr.length - 1 }
}
setInitialNavActiveStatus = () => {
const observer = new MutationObserver(debounce((list, observer) => {
const navs = this.state.navs.map(item => document.querySelector(`#${item.id}`))
if (navs.every(item => item)) {
const navsTop = navs.map(item => item.offsetTop)
const index = this.getActiveIndex(navsTop, window.pageYOffset)
this.setState({index, navsTop}, () => {
this.calcNavActive()
observer.disconnect()
})
}
}, 30))
observer.observe(document.querySelector('#blessing-preheat'), {childList: true, subtree: true})
} }
return arr.length - 1
initNav = (isFormal) => { }
const {navs} = this.state
if (isFormal) { setInitialNavActiveStatus = () => {
this.setState({ const observer = new MutationObserver(debounce((list, observer) => {
navs: navs.filter(item => item.id !== 'deposit') const navs = this.state.navs.map(item => document.querySelector(`#${item.id}`))
}) if (navs.every(item => item)) {
} const navsTop = navs.map(item => item.offsetTop)
const index = this.getActiveIndex(navsTop, window.pageYOffset)
this.setState({index, navsTop}, () => {
this.calcNavActive()
observer.disconnect()
})
}
}, 30))
observer.observe(document.querySelector('#blessing-preheat'), {childList: true, subtree: true})
}
initNav = (isFormal) => {
const {navs} = this.state
if (isFormal) {
this.setState({
navs: navs.filter(item => item.id !== 'deposit')
})
} }
}
fetchMoudleId = (str) => { fetchMoudleId = (str) => {
const {navs} = this.state const {navs} = this.state
return findIndex(navs, item => item.id === str) return findIndex(navs, item => item.id === str)
} }
fetchUserBlessing() { fetchUserBlessing() {
const {userInfo} = this.state; const {userInfo} = this.state;
...@@ -240,44 +292,44 @@ class BlessingPreheat extends Component { ...@@ -240,44 +292,44 @@ class BlessingPreheat extends Component {
} }
handleToAddBlessing = (key) => { handleToAddBlessing = (key) => {
http.post(`${API.home}/sys/add/blessing`, { http.post(`${API.home}/sys/add/blessing`, {
share_platform: key, // 1 朋友圈 2 微博 3 qq share_platform: key, // 1 朋友圈 2 微博 3 qq
type: 3 // 1：签到；3：分享；4：浏览课程； type: 3 // 1：签到；3：分享；4：浏览课程；
}).then(res => { }).then(res => {
const {code } = res.data; const {code} = res.data
if (code === 200) { if (code === 200) {
Toast.info('+2点福气值~', 2, null, false); Toast.info('+2点福气值~', 2, null, false)
} }
}); })
} }
handleToSign = () => { handleToSign = () => {
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 => {
const {code} = res.data const {code} = res.data
if (code === 200) { if (code === 200) {
this.setState({
isSign: true,
})
Toast.info('+5点福气值~', 2, null, false)
}
})
}
handleToHide = (key) => {
let obj = {}
obj[key] = false
this.setState({ this.setState({
...obj isSign: true,
}) })
} Toast.info('+5点福气值~', 2, null, false)
}
handleToShow = (key, isLogin = false) => { })
// 需要用户登录 并且用户未登录 }
const isLoginnew = !this.props.user.hasError
handleToHide = (key) => {
let obj = {}
obj[key] = false
this.setState({
...obj
})
}
handleToShow = (key, isLogin = false) => {
// 需要用户登录 并且用户未登录
const isLoginnew = !this.props.user.hasError
if (isLogin && !isLoginnew) { if (isLogin && !isLoginnew) {
this.toLogin() this.toLogin()
...@@ -290,127 +342,137 @@ class BlessingPreheat extends Component { ...@@ -290,127 +342,137 @@ class BlessingPreheat extends Component {
} }
} }
// 邀请好友注册 // 邀请好友注册
handleToShowInvite = () => { handleToShowInvite = () => {
const isLogin = !this.props.user.hasError const isLogin = !this.props.user.hasError
if (isLogin) { if (isLogin) {
if (!getParam('version')) { if (!getParam('version')) {
QRCode.toDataURL(`${API.m}/invite`, { QRCode.toDataURL(`${API.m}/invite`, {
width: 120, width: 120,
height: 120, height: 120,
margin: 1 margin: 1
})
.then(url => {
this.setState({
inviteUrl: url,
inviteVisible: true
})
})
.catch(err => {
console.error(err)
})
} else {
let data = {
title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线',
link: 'https://m.julyedu.com/blessingPreheat',
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/index-share-img.png',
}
SendMessageToApp("toShare", data)
}
} else {
this.toLogin();
}
}
handleToShowNotice = () => {
http.get(`${API['base-api']}/sys/activity/create_blessing_qrcode`).then(res => {
const {errno, data} = res.data
if (errno === 200) {
QRCode.toDataURL(data.url, {
width: 120,
height: 120,
margin: 1
}).then(url => {
this.setState({
isServer: true,
serverUrl: url,
})
})
.catch(err => {
console.error(err)
})
} else if (errno === 4030 || errno === 4040) {
this.toLogin()
}
}) })
} .then(url => {
const content = (
toLogin = () => { <>
const {history} = this.props <img src={url} alt="barcode" className="qr-code"/>
if (!getParam('version')) { <CopyToClipboard text={`${API.m}/invite"`} onCopy={this.onCopy}>
history.push('/passport') <button>一键复制网址</button>
} else { </CopyToClipboard>
SendMessageToApp("toLogin") </>
)
Popup({
title: '扫码邀请好友注册+10点福气值',
content,
className: 'invite-popup'
})
})
.catch(err => {
console.error(err)
})
} else {
let data = {
title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线',
link: 'https://m.julyedu.com/blessingPreheat',
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/index-share-img.png',
} }
SendMessageToApp("toShare", data)
}
} else {
this.toLogin()
} }
}
onCopy = () => {
Toast.info('复制成功', 2, null, false) handleToShowNotice = () => {
} http.get(`${API['base-api']}/sys/activity/create_blessing_qrcode`).then(res => {
const {errno, data} = res.data
toSection = (i, e) => { if (errno === 200) {
const {navs} = this.state QRCode.toDataURL(data.url, {
e.preventDefault() width: 120,
let top = document.querySelector(`#${navs[i].id}`).offsetTop height: 120,
this.setState({ margin: 1
index: i }).then(url => {
}) Popup({
window.scrollTo({ title: '',
top: top - 60, content: <img src={url} alt="barcode" className="qr-code"/>,
left: 0 className: 'invite-popup'
})
}) })
.catch(err => {
console.error(err)
})
} else if (errno === 4030 || errno === 4040) {
this.toLogin()
}
})
}
toLogin = () => {
const {history} = this.props
if (!getParam('version')) {
history.push('/passport')
} else {
SendMessageToApp("toLogin")
} }
}
calcNavActive = () => {
const {navs, index} = this.state onCopy = () => {
const y = window.scrollY Toast.info('复制成功', 2, null, false)
let swipeDirection = y > this.prevY ? 'up' : 'down' }
let _index
if (swipeDirection === 'up') { toSection = (i, e) => {
_index = (index + 1) >= navs.length ? index : index + 1 const {navs} = this.state
e.preventDefault()
} else { let top = document.querySelector(`#${navs[i].id}`).offsetTop
_index = (index - 1) <= 0 ? 0 : index - 1 this.setState({
index: i
})
window.scrollTo({
top: top - 60,
left: 0
})
}
calcNavActive = () => {
const {navs, index} = this.state
const y = window.scrollY
let swipeDirection = y > this.prevY ? 'up' : 'down'
let _index
if (swipeDirection === 'up') {
_index = (index + 1) >= navs.length ? index : index + 1
} else {
_index = (index - 1) <= 0 ? 0 : index - 1
}
let el = document.querySelector(`#${navs[_index].id}`)
let nav = document.querySelector('#main-nav')
if (el) {
let top = el.offsetTop
if (y <= this.navTop) {
nav.classList.remove('fixed')
} else {
!nav.classList.contains('fixed') && nav.classList.add('fixed')
}
if (swipeDirection === 'up') {
if (y + 30 + 30 >= top) {
this.setState({
index: _index
})
} }
let el = document.querySelector(`#${navs[_index].id}`) } else {
let nav = document.querySelector('#main-nav') if (y + 30 + 20 <= top) {
if (el) { this.setState({
index: _index
let top = el.offsetTop })
if (y <= this.navTop) {
nav.classList.remove('fixed')
} else {
!nav.classList.contains('fixed') && nav.classList.add('fixed')
}
if (swipeDirection === 'up') {
if (y + 30 + 30 >= top) {
this.setState({
index: _index
})
}
} else {
if (y + 30 + 20 <= top) {
this.setState({
index: _index
})
}
}
this.prevY = y
} }
}
this.prevY = y
} }
}
render() { render() {
const { const {
...@@ -439,32 +501,54 @@ class BlessingPreheat extends Component { ...@@ -439,32 +501,54 @@ class BlessingPreheat extends Component {
toSection={this.toSection} toSection={this.toSection}
index={index} index={index}
/> />
render() {
{/* 积福气 */} const {
<ListHeader id={'lucky-value'} text="积福气，享受更多福利" styles={{margin: '60px 0 15px'}}/> navs,
<Link className="luck-draw__button" to="/blessingRank">福气排行榜></Link> userInfo,
isRule,
isCourse,
<CollectBlessing isFormal,
isSign={isSign} isSign,
userInfo={userInfo} showRecordList,
isLogin={isLogin} shareMark,
history={this.props.history} index
toSection={(e) => this.toSection(this.fetchMoudleId('best-courses'), e)} } = this.state
handleToShowList={() => this.handleToShow('isCourse')} const {history} = this.props
handleToShowInvite={this.handleToShowInvite} const isLogin = !this.props.user.hasError
handleToShowNotice={this.handleToShowNotice} return (
handleToShow={this.handleToShow} <div id={'blessing-preheat'}>
toLogin={this.toLogin} <Banner
handleToShowShare={() => this.handleToShow('shareMark')} isFormal={isFormal}
handleToHideShare={() => this.handleToHide('shareMark')} navs={navs}
/> toSection={this.toSection}
index={index}
{/* 幸运大抽奖--预热 */} />
<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> <ListHeader id={'lucky-value'} text="积福气，享受更多福利" styles={{margin: '60px 0 15px'}}/>
<LuckDraw/> <Link className="luck-draw__button" to="/blessingRank">福气排行榜></Link>
<CollectBlessing
isSign={isSign}
userInfo={userInfo}
isLogin={isLogin}
history={this.props.history}
toSection={(e) => this.toSection(this.fetchMoudleId('best-courses'), e)}
handleToShowList={() => this.handleToShow('isCourse')}
handleToShowInvite={this.handleToShowInvite}
handleToShowNotice={this.handleToShowNotice}
handleToShow={this.handleToShow}
toLogin={this.toLogin}
handleToShowShare={() => this.handleToShow('shareMark')}
handleToHideShare={() => this.handleToHide('shareMark')}
/>
{/* 幸运大抽奖--预热 */}
<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/>
{/*定金--只在预热期间显示*/} {/*定金--只在预热期间显示*/}
{ {
...@@ -485,40 +569,25 @@ class BlessingPreheat extends Component { ...@@ -485,40 +569,25 @@ class BlessingPreheat extends Component {
toLogin={this.toLogin} toLogin={this.toLogin}
/> />
{ {
isRule && isRule &&
<RulePopup handleToHide={() => this.handleToHide('isRule')}/> <RulePopup handleToHide={() => this.handleToHide('isRule')}/>
} }
{ {
isCourse && isCourse &&
<CoursePopup toLogin={this.toLogin} history={history} isLogin={isLogin} <CoursePopup toLogin={this.toLogin} history={history} isLogin={isLogin}
handleToHide={() => this.handleToHide('isCourse')}/> handleToHide={() => this.handleToHide('isCourse')}/>
} }
{ {
showRecordList && showRecordList &&
<RecordPopup handleToHide={() => this.handleToHide('showRecordList')}/> <RecordPopup handleToHide={() => this.handleToHide('showRecordList')}/>
} }
{ {
shareMark && shareMark &&
<SharePopup/> <SharePopup/>
} }
<Popup {/*
visible={inviteVisible}
title={'扫码邀请好友注册+10点福气值'}
className={'invite-popup'}
>
<img src={inviteUrl} alt="barcode" className="qr-code"/>
<CopyToClipboard text={`${API.m}/invite"`} onCopy={this.onCopy}>
<button>一键复制网址</button>
</CopyToClipboard>
</Popup>
<Popup
visible={isServer}
title="扫码关注“七月在线”服务号"
className={'invite-popup'}
>
<img src={serverUrl} alt="barcode" className="qr-code"/>
</Popup>
<Popup visible={this.state.joinLotteryVisible} <Popup visible={this.state.joinLotteryVisible}
title={'你已成功参与本时段抽奖'} title={'你已成功参与本时段抽奖'}
...@@ -543,28 +612,28 @@ class BlessingPreheat extends Component { ...@@ -543,28 +612,28 @@ class BlessingPreheat extends Component {
> >
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt="" <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt=""
className="qr-code"/> className="qr-code"/>
</Popup> </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)}>
测试记录> 测试记录>
</div> </div>
<LevelTest history={history} isLogin={isLogin} toLogin={this.toLogin}></LevelTest> <LevelTest history={history} isLogin={isLogin} toLogin={this.toLogin}></LevelTest>
<RankList></RankList> <RankList></RankList>
<Live isFormal={isFormal}></Live> <Live isFormal={isFormal}></Live>
</div> </div>
) )
} }
} }
export default compose( export default compose(
connect( connect(
state => ({user: state.user}), state => ({user: state.user}),
{setCurrentUser, startFetchUser} {setCurrentUser, startFetchUser}
) )
)(BlessingPreheat) )(BlessingPreheat)
\ No newline at end of file
src/components/blessingPreheat/live/index.js
...@@ -16,8 +16,6 @@ class Live extends Component { ...@@ -16,8 +16,6 @@ class Live extends Component {
tabs: [], tabs: [],
lives: {}, lives: {},
preheatLives: [], preheatLives: [],
visible: false,
qrcode: '',
today: '', today: '',
isApp: getParam('version') isApp: getParam('version')
} }
...@@ -80,9 +78,9 @@ class Live extends Component { ...@@ -80,9 +78,9 @@ class Live extends Component {
const {data} = res const {data} = res
if (data.code == 200) { if (data.code == 200) {
QRCode.toDataURL(data.data.url, (err, url) => { QRCode.toDataURL(data.data.url, (err, url) => {
this.setState({ Popup({
qrcode: url, title: '扫码关注“七月在线”服务号即可预约',
visible: true content: <img id={'live-qr-code'} src={url} alt=""/>
}) })
}) })
} else { } else {
...@@ -92,14 +90,9 @@ class Live extends Component { ...@@ -92,14 +90,9 @@ class Live extends Component {
} }
render() { render() {
const {tabs, lives, visible, qrcode, preheatLives, today} = this.state const {tabs, lives, preheatLives, today} = this.state
return ( return (
<div id={'live'}> <div id={'live'}>
<Popup title={'扫码关注“七月在线”服务号即可预约'}
visible={visible}
>
<img id={'live-qr-code'} src={qrcode} alt=""/>
</Popup>
<div className="title"> <div className="title">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/title-decorate-left.png" alt=""/> <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/title-decorate-left.png" alt=""/>
<span>大咖直播</span> <span>大咖直播</span>
......
src/components/blessingPreheat/live/index.scss
#live { #live {
margin-top: 30px; margin-top: 30px;
.title { .title {
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -175,22 +176,6 @@ ...@@ -175,22 +176,6 @@
} }
.popup-container {
.title {
color: #525C65;
}
.content {
display: flex;
justify-content: center;
img {
width: 120px;
height: 120px;
}
}
}
.am-tabs { .am-tabs {
width: 330px; width: 330px;
margin: 0 auto; margin: 0 auto;
...@@ -234,3 +219,20 @@ ...@@ -234,3 +219,20 @@
} }
} }
.popup-container {
.title {
color: #525C65;
}
.content {
display: flex;
justify-content: center;
img {
width: 120px;
height: 120px;
}
}
}
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