Skip to content

M
mr-julyedu
Commit a9a2aec1 by xuzhenghua
Options

PULL

parents ec889db6 e51d147a
Showing with 547 additions and 547 deletions
src/components/activity/newyear-2019/landing/index.js
...@@ -15,603 +15,603 @@ import { FadeLoader } from "react-spinners" ...@@ -15,603 +15,603 @@ import { FadeLoader } from "react-spinners"
class Landing extends Component { class Landing extends Component {
closeIcon = 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/close-btn.png' closeIcon = 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/close-btn.png'
createTeamSuccessPopup = null createTeamSuccessPopup = null
joinSuccessPopup = null joinSuccessPopup = null
shareTipPopup = null shareTipPopup = null
swiper = null swiper = null
shareTitle = '' shareTitle = ''
shareDesc = '' shareDesc = ''
state = { state = {
teamData: { teamData: {
member: [] member: []
}, },
origin: sessionStorage.getItem('isCaptain') ? 1 : getParam('origin'), origin: sessionStorage.getItem('isCaptain') ? 1 : getParam('origin'),
treasure_code: getParam('treasure_code'), treasure_code: getParam('treasure_code'),
activityEnd: false, activityEnd: false,
notices: [], notices: [],
rule: '', rule: '',
isCaptain: getParam('origin') == 1, isCaptain: getParam('origin') == 1,
isLoading: this.props.user.isFetching isLoading: this.props.user.isFetching
}
componentDidMount() {
this.fetchPageData()
window.showFollowAlert = this.remind.bind(this, 'create')
document.title = '七月在线年终大回馈，幸运宝箱随你开，100%有奖！'
const landing = document.querySelector('#landing')
const boxContainer = document.querySelector('.box-container')
if (boxContainer.offsetHeight < window.innerHeight) {
landing.style.minHeight = `${window.innerHeight}px`
boxContainer.style.minHeight = `${window.innerHeight}px`
} }
}
componentDidUpdate(prevProps) { componentDidMount() {
if (prevProps.user.hasError !== this.props.user.hasError && !this.props.user.hasError) { this.fetchPageData()
this.fetchPageData() window.showFollowAlert = this.remind.bind(this, 'create')
} document.title = '七月在线年终大回馈，幸运宝箱随你开，100%有奖！'
if(prevProps.user.isFetching !== this.props.user.isFetching && !this.props.user.isFetching){ const landing = document.querySelector('#landing')
this.setState({ const boxContainer = document.querySelector('.box-container')
isLoading: this.props.user.isFetching if (boxContainer.offsetHeight < window.innerHeight) {
}) landing.style.minHeight = `${window.innerHeight}px`
boxContainer.style.minHeight = `${window.innerHeight}px`
}
} }
}
componentWillUnmount() {
this.shareTipPopup && this.shareTipPopup.remove()
}
createMeta = (title, dec, imgname) => {
let meta = document.createElement('meta')
meta.setAttribute('name', 'description')
meta.setAttribute('itemprop', 'description')
meta.setAttribute('content', dec)
let meta2 = document.createElement('meta')
meta2.setAttribute('itemprop', 'name')
meta2.setAttribute('content', title)
let meta3 = document.createElement('meta')
meta3.setAttribute('itemprop', 'image')
meta3.setAttribute('content', imgname)
let head = document.getElementsByTagName('head')[0]
head.appendChild(meta)
head.appendChild(meta2)
head.appendChild(meta3)
}
fetchPageData = ({origin = this.state.origin, treasure_code = this.state.treasure_code} = {}) => {
const {location} = this.props
http.post(`${API.home}/sys/treasure/team`, {
treasure_code,
origin
})
.then(res => {
const {data, code, msg} = res.data
if (code == 200) {
componentDidUpdate(prevProps) {
if (prevProps.user.hasError !== this.props.user.hasError && !this.props.user.hasError) {
this.fetchPageData()
}
if(prevProps.user.isFetching !== this.props.user.isFetching && !this.props.user.isFetching){
this.setState({ this.setState({
teamData: data, isLoading: this.props.user.isFetching
isCaptain: sessionStorage.getItem('isCaptain') ? sessionStorage.getItem('isCaptain') : getParam('origin') == 1,
activityEnd: data.status == 5
}) })
}
}
this.setupWxShareConfig(data.member) componentWillUnmount() {
this.shareTipPopup && this.shareTipPopup.remove()
}
if (browser.isWeixin) { createMeta = (title, dec, imgname) => {
wxShare({ let meta = document.createElement('meta')
title: this.shareTitle, meta.setAttribute('name', 'description')
desc: this.shareDesc, meta.setAttribute('itemprop', 'description')
link: `${window.location.origin}${location.pathname}?treasure_code=${getParam('treasure_code')}&origin=2`, meta.setAttribute('content', dec)
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png'
})
// history.replace(`${match.url}?treasure_code=${getParam('treasure_code')}&origin=2`)
} else {
this.createMeta(this.shareTitle, this.shareDesc, 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png')
}
let searchParams = new URLSearchParams(window.location.search) let meta2 = document.createElement('meta')
if (searchParams.get('origin') === '1' && !browser.isWeixin) { meta2.setAttribute('itemprop', 'name')
searchParams.set('origin', '2') meta2.setAttribute('content', title)
sessionStorage.setItem('isCaptain', '1')
window.history.replaceState(null, '', `landing?${searchParams.toString()}`)
}
this.showSharePromptWithParam() let meta3 = document.createElement('meta')
meta3.setAttribute('itemprop', 'image')
meta3.setAttribute('content', imgname)
let head = document.getElementsByTagName('head')[0]
head.appendChild(meta)
head.appendChild(meta2)
head.appendChild(meta3)
}
} else { fetchPageData = ({origin = this.state.origin, treasure_code = this.state.treasure_code} = {}) => {
Toast.info(msg, 2, null, false) const {location} = this.props
} http.post(`${API.home}/sys/treasure/team`, {
treasure_code,
origin
}) })
} .then(res => {
const {data, code, msg} = res.data
setupWxShareConfig = member => { if (code == 200) {
const len = member.length
let count = 5 - len <= 0 ? 4 : 5 - len this.setState({
this.shareTitle = `还差${count}人即可开宝箱，100%有奖！` teamData: data,
this.shareDesc = '加入我的队伍，机械键盘，纸质书籍等超多奖品等你拿！--七月在线' isCaptain: sessionStorage.getItem('isCaptain') ? sessionStorage.getItem('isCaptain') : getParam('origin') == 1,
} activityEnd: data.status == 5
})
showSharePromptWithParam = () => {
if (sessionStorage.getItem('showShareTip') && !sessionStorage.getItem('closedRemind')) { this.setupWxShareConfig(data.member)
this.showShareTip()
if (browser.isWeixin) {
wxShare({
title: this.shareTitle,
desc: this.shareDesc,
link: `${window.location.origin}${location.pathname}?treasure_code=${getParam('treasure_code')}&origin=2`,
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png'
})
// history.replace(`${match.url}?treasure_code=${getParam('treasure_code')}&origin=2`)
} else {
this.createMeta(this.shareTitle, this.shareDesc, 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png')
}
let searchParams = new URLSearchParams(window.location.search)
if (searchParams.get('origin') === '1' && !browser.isWeixin) {
searchParams.set('origin', '2')
sessionStorage.setItem('isCaptain', '1')
window.history.replaceState(null, '', `landing?${searchParams.toString()}`)
}
this.showSharePromptWithParam()
} else {
Toast.info(msg, 2, null, false)
}
})
} }
}
joinTeam = () => { setupWxShareConfig = member => {
if (this.requiredLogin()) { const len = member.length
return let count = 5 - len <= 0 ? 4 : 5 - len
this.shareTitle = `还差${count}人即可开宝箱，100%有奖！`
this.shareDesc = '加入我的队伍，机械键盘，纸质书籍等超多奖品等你拿！--七月在线'
} }
const {treasure_code} = this.state
http.post(`${API.home}/sys/treasure/joinTeam`, {
treasure_code
})
.then(res => {
const {data, code, msg} = res.data
if (code === 200) {
/*
* status
* 1-成功加入
* 2-成功加入组队成功
* 3-已加入当前队伍
* 4-已加入其他队伍
* */
switch (data.status) {
case 1:
case 2:
this.joinSuccess(data)
break
default:
Toast.info(msg, 2, null, false)
}
} else { showSharePromptWithParam = () => {
Toast.info(msg, 2, null, false) if (sessionStorage.getItem('showShareTip') && !sessionStorage.getItem('closedRemind')) {
} this.showShareTip()
}) }
}
handleToMyTreasure = id => {
const {history} = this.props
this.joinSuccessPopup && this.joinSuccessPopup.remove()
if (getParam('version')) {
window.location.assign(`https://m.julyedu.com/year/yearTreasure?id=${id}&version=${getParam('version')}`)
} else {
window.location.assign(`https://m.julyedu.com/year/yearTreasure?id=${id}`)
} }
}
joinTeam = () => {
joinSuccess = ({id, status, my_team: {team_num, lack_member, is_team, treasure_code}}) => { if (this.requiredLogin()) {
this.joinSuccessPopup = Popup({ return
title: <div className={'join-success'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/check-icon.png" alt=""/>
<div>成功加入队伍</div>
</div>,
className: 'landing-join-success-wrapper',
content: <div>
<div className={'tip'}>
{
status === 2
? '组队成功，恭喜你获得一个宝箱！'
: is_team
? <>您的{<span>{team_num}</span>}号队伍还差{<span>{lack_member}</span>}人即可获得宝箱</>
: '自己当队长，宝箱内有专属奖品哦~'
}
</div>
{
status === 2
? <img style={{width: '150px', marginTop: '23px'}}
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/treasure-split.gif"
alt=""
onClick={this.handleToMyTreasure.bind(this, id)}
/>
: is_team
? <button type='button'
onClick={this.inviteMembers.bind(this, treasure_code)}>继续组队</button>
: <button type="button" onClick={this.createMyTeam}>创建我的队伍</button>
} }
</div>, const {treasure_code} = this.state
closeIcon: this.closeIcon, http.post(`${API.home}/sys/treasure/joinTeam`, {
close: () => { treasure_code
this.fetchPageData() })
this.getFollowStatus() .then(res => {
.then(isFollow => { const {data, code, msg} = res.data
!isFollow && this.remind('join', this.state.treasure_code, 2) if (code === 200) {
/*
* status
* 1-成功加入
* 2-成功加入组队成功
* 3-已加入当前队伍
* 4-已加入其他队伍
* */
switch (data.status) {
case 1:
case 2:
this.joinSuccess(data)
break
default:
Toast.info(msg, 2, null, false)
}
} else {
Toast.info(msg, 2, null, false)
}
}) })
}
})
}
inviteMembers = treasure_code => {
const {history, match, user, location} = this.props
if (getParam('version')) {
let data = {
title: this.shareTitle,
desc: this.shareDesc,
link: `${window.location.origin}${location.pathname}?treasure_code=${treasure_code}&origin=2`,
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png'
}
SendMessageToApp("toShare", data)
} }
sessionStorage.setItem('showShareTip', '1')
history.replace(`${match.url}?treasure_code=${treasure_code}&origin=${1}`) handleToMyTreasure = id => {
this.createTeamSuccessPopup && this.createTeamSuccessPopup.remove() && (this.createTeamSuccessPopup = null) const {history} = this.props
this.joinSuccessPopup && this.joinSuccessPopup.remove() && (this.joinSuccessPopup = null) this.joinSuccessPopup && this.joinSuccessPopup.remove()
this.fetchPageData({treasure_code, origin: 1}) if (getParam('version')) {
this.setState({ window.location.assign(`https://m.julyedu.com/year/yearTreasure?id=${id}&version=${getParam('version')}`)
isCaptain: true } else {
}) window.location.assign(`https://m.julyedu.com/year/yearTreasure?id=${id}`)
} }
}
getFollowStatus = () => http.get(`${API.home}/sys/user/isFollowWeChat`)
.then(res => { joinSuccess = ({id, status, my_team: {team_num, lack_member, is_team, treasure_code}}) => {
const {code, data} = res.data this.joinSuccessPopup = Popup({
return code === 200 && data['is_follow'] title: <div className={'join-success'}>
}) <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/check-icon.png" alt=""/>
<div>成功加入队伍</div>
createTeamSuccess = ({member, team_num, lack_member, treasure_code}) => { </div>,
this.joinSuccessPopup && this.joinSuccessPopup.remove() && (this.joinSuccessPopup = null) className: 'landing-join-success-wrapper',
this.getFollowStatus()
.then(isFollow => {
this.createTeamSuccessPopup = Popup({
title: '创建成功',
className: 'landing-create-success',
content: <div> content: <div>
<div className="tip">{<span>{team_num}</span>}号队伍 还差{<span>{lack_member}</span>}名队员即可获得宝箱哦~</div> <div className={'tip'}>
<img className={'treasure-box'} {
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png" alt=""/> status === 2
<ul className='members'> ? '组队成功，恭喜你获得一个宝箱！'
: is_team
? <>您的{<span>{team_num}</span>}号队伍还差{<span>{lack_member}</span>}人即可获得宝箱</>
: '自己当队长，宝箱内有专属奖品哦~'
}
</div>
{ {
new Array(5).fill('a').map((item, index) => { status === 2
const _member = member[index] ? <img style={{width: '150px', marginTop: '23px'}}
return <li key={index}> src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/treasure-split.gif"
{_member && _member['is_captain'] && <sup>队长</sup>} alt=""
<img onClick={this.handleToMyTreasure.bind(this, id)}
className={'avatar'} />
src={ : is_team
_member ? <button type='button'
? _member['head_img'] onClick={this.inviteMembers.bind(this, treasure_code)}>继续组队</button>
: "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/not-joined-placeholder.png" : <button type="button" onClick={this.createMyTeam}>创建我的队伍</button>
}
alt=""/>
</li>
})
} }
</ul>
<button type={'button'} onClick={this.inviteMembers.bind(this, treasure_code)}>邀请好友加入队伍</button>
</div>, </div>,
closeIcon: this.closeIcon, closeIcon: this.closeIcon,
afterClose: () => { close: () => {
if (!isFollow) { this.fetchPageData()
this.remind('create', treasure_code) this.getFollowStatus()
} .then(isFollow => {
!isFollow && this.remind('join', this.state.treasure_code, 2)
})
} }
})
}) })
}
// 安卓手机保存二维码
saveImage = url => {
let version = getParam('version')
version = typeof version === 'string' ? version.replace('.', '').replace('.', '').slice(0, 3) : ''
if (version && parseInt(version) < 451) {
Toast.info('当前不支持此功能，升级到最新版本app可以点击保存二维码！', 3, null, false)
} else {
SendMessageToApp('generateQRCode', url)
} }
}
inviteMembers = treasure_code => {
const {history, match, user, location} = this.props
if (getParam('version')) {
let data = {
title: this.shareTitle,
desc: this.shareDesc,
link: `${window.location.origin}${location.pathname}?treasure_code=${treasure_code}&origin=2`,
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png'
}
SendMessageToApp("toShare", data)
}
sessionStorage.setItem('showShareTip', '1')
history.replace(`${match.url}?treasure_code=${treasure_code}&origin=${1}`)
this.createTeamSuccessPopup && this.createTeamSuccessPopup.remove() && (this.createTeamSuccessPopup = null)
this.joinSuccessPopup && this.joinSuccessPopup.remove() && (this.joinSuccessPopup = null)
this.fetchPageData({treasure_code, origin: 1})
this.setState({
isCaptain: true
})
}
remind = (type = 'create', treasure_code, origin = 1) => { getFollowStatus = () => http.get(`${API.home}/sys/user/isFollowWeChat`)
const {user} = this.props
http.get(`${API["base-api"]}/wx/user_temporary_qrcode/${user.data.uid}`)
.then(res => { .then(res => {
const {data} = res.data const {code, data} = res.data
return data.url return code === 200 && data['is_follow']
}).then(text => { })
QRCode.toDataURL(text)
.then(url => { createTeamSuccess = ({member, team_num, lack_member, treasure_code}) => {
Popup({ this.joinSuccessPopup && this.joinSuccessPopup.remove() && (this.joinSuccessPopup = null)
title: '提醒服务', this.getFollowStatus()
className: 'landing-remind', .then(isFollow => {
closeIcon: this.closeIcon, this.createTeamSuccessPopup = Popup({
content: <div> title: '创建成功',
<div className="des">{type === 'create' ? '有好友加入队伍后第一时间通知我~' : '获得宝箱时第一时间通知我~'}</div> className: 'landing-create-success',
<img src={url} alt=""/> content: <div>
{browser.isAndroidApp ? <div> <div className="tip">{<span>{team_num}</span>}号队伍 还差{<span>{lack_member}</span>}名队员即可获得宝箱哦~</div>
<button className={'android-qr-code-btn'} onClick={this.saveImage.bind(this, text)}>保存二维码</button> <img className={'treasure-box'}
</div> : null} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png" alt=""/>
<div className="des">长按识别/扫码 关注【七月在线】服务号即可预约</div> <ul className='members'>
</div>, {
close: () => { new Array(5).fill('a').map((item, index) => {
// history.replace(`${match.path}?treasure_code=${treasure_code}&origin=1`) const _member = member[index]
sessionStorage.setItem('closedRemind', '1') return <li key={index}>
this.fetchPageData({ {_member && _member['is_captain'] && <sup>队长</sup>}
treasure_code, <img
origin className={'avatar'}
src={
_member
? _member['head_img']
: "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/not-joined-placeholder.png"
}
alt=""/>
</li>
})
}
</ul>
<button type={'button'} onClick={this.inviteMembers.bind(this, treasure_code)}>邀请好友加入队伍</button>
</div>,
closeIcon: this.closeIcon,
afterClose: () => {
if (!isFollow) {
this.remind('create', treasure_code)
}
}
}) })
}
}) })
}) }
})
// 安卓手机保存二维码
} saveImage = url => {
let version = getParam('version')
showShareTip = () => { version = typeof version === 'string' ? version.replace('.', '').replace('.', '').slice(0, 3) : ''
const {user, location} = this.props if (version && parseInt(version) < 451) {
if (browser.isAndroidApp || browser.isIOSApp) { Toast.info('当前不支持此功能，升级到最新版本app可以点击保存二维码！', 3, null, false)
} else {
SendMessageToApp('toShare', { SendMessageToApp('generateQRCode', url)
title: this.shareTitle,
desc: this.shareDesc,
link: `${window.location.origin}${location.pathname}?treasure_code=${getParam('treasure_code')}&origin=2`,
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png'
})
} else {
this.shareTipPopup = Popup({
title: <div>还差<span>{this.state.teamData.lack_member}</span>名队友即可获得宝箱 快分享给好友吧~</div>,
className: `landing-share-tip ${browser.isWeixin ? 'wechat' : ''}`,
closable: false,
close: () => {
sessionStorage.removeItem('showShareTip')
if (!user.hasError) {
this.getFollowStatus()
.then(isFollow => {
!isFollow && this.remind('create', getParam('treasure_code'), 1)
})
}
} }
})
} }
}
showOpenInBrowserTip = () => { remind = (type = 'create', treasure_code, origin = 1) => {
Popup({ const {user} = this.props
title: <div>点击右上角，选择“在浏览器打开”</div>, http.get(`${API["base-api"]}/wx/user_temporary_qrcode/${user.data.uid}`)
className: 'landing-open-in-browser-tip', .then(res => {
closable: false, const {data} = res.data
}) return data.url
} }).then(text => {
QRCode.toDataURL(text)
createMyTeam = () => { .then(url => {
if (this.requiredLogin()) { Popup({
return title: '提醒服务',
className: 'landing-remind',
closeIcon: this.closeIcon,
content: <div>
<div className="des">{type === 'create' ? '有好友加入队伍后第一时间通知我~' : '获得宝箱时第一时间通知我~'}</div>
<img src={url} alt=""/>
{browser.isAndroidApp ? <div>
<button className={'android-qr-code-btn'} onClick={this.saveImage.bind(this, text)}>保存二维码</button>
</div> : null}
<div className="des">长按识别/扫码 关注【七月在线】服务号即可预约</div>
</div>,
close: () => {
// history.replace(`${match.path}?treasure_code=${treasure_code}&origin=1`)
sessionStorage.setItem('closedRemind', '1')
this.fetchPageData({
treasure_code,
origin
})
}
})
})
})
} }
http.get(`${API.home}/sys/treasure/createMyTeam`)
.then(res => {
const {data, code, msg} = res.data
if (code == 200) {
this.createTeamSuccess(data) showShareTip = () => {
const {user, location} = this.props
if (browser.isAndroidApp || browser.isIOSApp) {
SendMessageToApp('toShare', {
title: this.shareTitle,
desc: this.shareDesc,
link: `${window.location.origin}${location.pathname}?treasure_code=${getParam('treasure_code')}&origin=2`,
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png'
})
} else {
this.shareTipPopup = Popup({
title: <div>还差<span>{this.state.teamData.lack_member}</span>名队友即可获得宝箱 快分享给好友吧~</div>,
className: `landing-share-tip ${browser.isWeixin ? 'wechat' : ''}`,
closable: false,
close: () => {
sessionStorage.removeItem('showShareTip')
if (!user.hasError) {
this.getFollowStatus()
.then(isFollow => {
!isFollow && this.remind('create', getParam('treasure_code'), 1)
})
}
}
})
}
}
} else { showOpenInBrowserTip = () => {
Toast.info(msg, 2, null, false) Popup({
} title: <div>点击右上角，选择“在浏览器打开”</div>,
className: 'landing-open-in-browser-tip',
closable: false,
}) })
}
requiredLogin = () => {
const {history, user, location} = this.props
if (user.hasError) {
if (browser.isWeixin) {
window.location.assign(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=${encodeURIComponent(`${window.location.origin}${location.pathname}?treasure_code=${getParam('treasure_code')}&origin=${getParam('origin')}&aa=bb`)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`)
} else {
history.push('/passport')
}
return true
} }
}
createMyTeam = () => {
toSquare = () => { if (this.requiredLogin()) {
const {history} = this.props return
if (!getParam('version')) { }
window.location.assign('https://m.julyedu.com/year/yearindex') http.get(`${API.home}/sys/treasure/createMyTeam`)
} else { .then(res => {
window.location.assign('https://m.julyedu.com/year/yearindex?version=' + getParam('version')) const {data, code, msg} = res.data
if (code == 200) {
this.createTeamSuccess(data)
} else {
Toast.info(msg, 2, null, false)
}
})
} }
}
requiredLogin = () => {
render() { const {history, user, location} = this.props
const { if (user.hasError) {
teamData: { if (browser.isWeixin) {
head_img, window.location.assign(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=${encodeURIComponent(`${window.location.origin}${location.pathname}?treasure_code=${getParam('treasure_code')}&origin=${getParam('origin')}&aa=bb`)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`)
member, } else {
status, history.push('/passport')
lack_member,
team_num,
prize_info,
my_team,
standby_plan
},
activityEnd,
isCaptain,
isLoading
} = this.state
/*
* status
* 1-自己的队伍
* 2-未加入队伍
* 3-已加入当前队伍
* 4-已加入别的队伍
* */
return (
<div id={'landing'}>
{
!(standby_plan && browser.isWeixin) &&
<div id="to-square">
<a href='javascript:' onClick={this.toSquare}>前往活动会场，享更多福利！ >></a>
</div>
}
<BoxContainer>
<i className={`snow-deco ${standby_plan && browser.isWeixin ? 'standby' : ''}`}/>
{
standby_plan && browser.isWeixin &&
<>
<WhiteSpace className={'standby-space'}/>
<div className={'standby-tip'}>点击右上角，选择“在浏览器打开”</div>
</>
}
<img className='main-avatar'
src={head_img} alt=""/>
{
status === 1
? <div className="des">邀请好友加入队伍，开宝箱领取丰厚奖品~</div>
: <div className="des">加入我的<span>{team_num}</span>号队伍，一起开宝箱领取丰厚奖品~</div>
} }
<Prizes showSystemNotices={false}/> return true
<BulletScreen/> }
<div className="group"> }
<ul className={'member'}>
{ toSquare = () => {
member && member.length && const {history} = this.props
new Array(5).fill('a').map((item, index) => { if (!getParam('version')) {
const _member = member[index] window.location.assign('https://m.julyedu.com/year/yearindex')
return ( } else {
_member window.location.assign('https://m.julyedu.com/year/yearindex?version=' + getParam('version'))
? <li key={index}> }
<div className='avatar-wrapper'> }
{
_member.is_captain ? <sup>队长</sup> : null render() {
} const {
<img teamData: {
src={_member.head_img} head_img,
alt="" member,
className="avatar"/> status,
</div> lack_member,
</li> team_num,
: prize_info,
<li key={index}> my_team,
<div className="avatar-wrapper"> standby_plan
<img },
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/default-member-avatar.png" activityEnd,
alt="" isCaptain,
className="avatar"/> isLoading
</div> } = this.state
</li> /*
) * status
}) * 1-自己的队伍
} * 2-未加入队伍
</ul> * 3-已加入当前队伍
<ul className={'bars'}> * 4-已加入别的队伍
* */
return (
<div id={'landing'}>
{ {
member && member.length &&
new Array(5).fill('a').map((item, index) => {
return (
<li key={index} className={`${index < member.length ? 'active' : ''}`}/>
)
})
}
</ul>
{
status === 1 && !activityEnd &&
<>
<div className="group-des">
还差 {lack_member} 名队员即可获得当前宝箱哦~
</div>
{
!(standby_plan && browser.isWeixin) && !(standby_plan && browser.isWeixin) &&
<button type='button' className={'invite-btn'} onClick={this.showShareTip}> <div id="to-square">
邀请好友加入队伍 <a href='javascript:' onClick={this.toSquare}>前往活动会场，享更多福利！ >></a>
</button> </div>
} }
</> <BoxContainer>
} <i className={`snow-deco ${standby_plan && browser.isWeixin ? 'standby' : ''}`}/>
{
status === 3 && !activityEnd &&
<>
<div className="group-des">
<p>已加入当前队伍</p>
{ {
my_team['is_team'] standby_plan && browser.isWeixin &&
? <p>您的{my_team['team_num']}号队伍还差{my_team['lack_member']}人即可获得宝箱~</p> <>
: <p>自己当队长，宝箱内有专属奖品哦~</p> <WhiteSpace className={'standby-space'}/>
<div className={'standby-tip'}>点击右上角，选择“在浏览器打开”</div>
</>
} }
</div> <img className='main-avatar'
{ src={head_img} alt=""/>
!(standby_plan && browser.isWeixin) && (my_team['is_team'] ?
<button type='button' className={'invite-btn'}
onClick={this.inviteMembers.bind(this, my_team['treasure_code'])}>
继续组队
</button>
: <button type='button' className={'invite-btn'} onClick={this.createMyTeam}>
创建我的队伍
</button>)
}
</>
}
{
status === 4 && !activityEnd &&
<>
<div className="group-des">
<p>已加入其他队伍</p>
{ {
my_team['is_team'] status === 1
? <p>您的{my_team['team_num']}号队伍还差{my_team['lack_member']}人即可获得宝箱~</p> ? <div className="des">邀请好友加入队伍，开宝箱领取丰厚奖品~</div>
: <p>自己当队长，宝箱内有专属奖品哦~</p> : <div className="des">加入我的<span>{team_num}</span>号队伍，一起开宝箱领取丰厚奖品~</div>
} }
</div> <Prizes showSystemNotices={false}/>
{ <BulletScreen/>
!(standby_plan && browser.isWeixin) && (my_team['is_team'] ? <div className="group">
<button type='button' className={'invite-btn'} <ul className={'member'}>
onClick={this.inviteMembers.bind(this, my_team['treasure_code'])}> {
继续组队 member && member.length &&
</button> new Array(5).fill('a').map((item, index) => {
: <button type='button' className={'invite-btn'} onClick={this.createMyTeam}> const _member = member[index]
创建我的队伍 return (
</button>) _member
} ? <li key={index}>
</> <div className='avatar-wrapper'>
} {
{ _member.is_captain ? <sup>队长</sup> : null
!(standby_plan && browser.isWeixin) && status === 2 && !activityEnd && }
< button type='button' className={'invite-btn'} onClick={this.joinTeam}> <img
同意加入队伍 src={_member.head_img}
</button> alt=""
} className="avatar"/>
{ </div>
prize_info && prize_info.length !== 0 && !activityEnd && !isCaptain && <div className="certainly-prompt"> </li>
第{prize_info[0].stage_no}个宝箱必中 {prize_info[0].name} :
</div> <li key={index}>
} <div className="avatar-wrapper">
{ <img
activityEnd && src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/default-member-avatar.png"
<div className='activity-end'> alt=""
<div>活动已结束</div> className="avatar"/>
<div>关注【七月在线】服务号了解更多活动信息</div> </div>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt=""/> </li>
<div>长按识别 / 微信扫码</div> )
</div> })
} }
</div> </ul>
</BoxContainer> <ul className={'bars'}>
{ {
!isCaptain && member && member.length &&
<> new Array(5).fill('a').map((item, index) => {
<WhiteSpace size={'xl'}/> return (
<YearCourse getSum={() => { <li key={index} className={`${index < member.length ? 'active' : ''}`}/>
}}/> )
</> })
} }
{ </ul>
isLoading && <div className="loading" style={{width: window.innerWidth + 'px', height: window.innerHeight + 'px'}}> {
<FadeLoader status === 1 && !activityEnd &&
color={'#fff'} <>
loading={isLoading} <div className="group-des">
/> 还差 {lack_member} 名队员即可获得当前宝箱哦~
</div>
{
!(standby_plan && browser.isWeixin) &&
<button type='button' className={'invite-btn'} onClick={this.showShareTip}>
邀请好友加入队伍
</button>
}
</>
}
{
status === 3 && !activityEnd &&
<>
<div className="group-des">
<p>已加入当前队伍</p>
{
my_team['is_team']
? <p>您的{my_team['team_num']}号队伍还差{my_team['lack_member']}人即可获得宝箱~</p>
: <p>自己当队长，宝箱内有专属奖品哦~</p>
}
</div>
{
!(standby_plan && browser.isWeixin) && (my_team['is_team'] ?
<button type='button' className={'invite-btn'}
onClick={this.inviteMembers.bind(this, my_team['treasure_code'])}>
继续组队
</button>
: <button type='button' className={'invite-btn'} onClick={this.createMyTeam}>
创建我的队伍
</button>)
}
</>
}
{
status === 4 && !activityEnd &&
<>
<div className="group-des">
<p>已加入其他队伍</p>
{
my_team['is_team']
? <p>您的{my_team['team_num']}号队伍还差{my_team['lack_member']}人即可获得宝箱~</p>
: <p>自己当队长，宝箱内有专属奖品哦~</p>
}
</div>
{
!(standby_plan && browser.isWeixin) && (my_team['is_team'] ?
<button type='button' className={'invite-btn'}
onClick={this.inviteMembers.bind(this, my_team['treasure_code'])}>
继续组队
</button>
: <button type='button' className={'invite-btn'} onClick={this.createMyTeam}>
创建我的队伍
</button>)
}
</>
}
{
!(standby_plan && browser.isWeixin) && status === 2 && !activityEnd &&
< button type='button' className={'invite-btn'} onClick={this.joinTeam}>
同意加入队伍
</button>
}
{
prize_info && prize_info.length !== 0 && !activityEnd && !isCaptain && <div className="certainly-prompt">
第{prize_info[0].stage_no}个宝箱必中 {prize_info[0].name}
</div>
}
{
activityEnd &&
<div className='activity-end'>
<div>活动已结束</div>
<div>关注【七月在线】服务号了解更多活动信息</div>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt=""/>
<div>长按识别 / 微信扫码</div>
</div>
}
</div>
</BoxContainer>
{
!isCaptain &&
<>
<WhiteSpace size={'xl'}/>
<YearCourse getSum={() => {
}}/>
</>
}
{
isLoading && <div className="loading" style={{width: window.innerWidth + 'px', height: window.innerHeight + 'px'}}>
<FadeLoader
color={'#fff'}
loading={isLoading}
/>
</div>
}
</div> </div>
} )
</div> }
)
}
} }
export default connect( export default connect(
......
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