Commit 55bcc051 by zhanghaozhe

中间页

parent 467eb0d9
...@@ -12,9 +12,11 @@ function ClosablePopup({ ...@@ -12,9 +12,11 @@ function ClosablePopup({
closable = true, closable = true,
close = function () { close = function () {
}, },
clickMaskClose = true,
closeIcon = 'iconiconfront-2' closeIcon = 'iconiconfront-2'
} = {}) { } = {}) {
function unmountComponent() { function unmountComponent() {
ReactDOM.unmountComponentAtNode(div) ReactDOM.unmountComponentAtNode(div)
if (div && div.parentNode) { if (div && div.parentNode) {
...@@ -33,9 +35,18 @@ function ClosablePopup({ ...@@ -33,9 +35,18 @@ function ClosablePopup({
} }
} }
function clickMask() {
if(closable){
return
}
if(!clickMaskClose){
return
}
_close()
}
const closablePopup = ( const closablePopup = (
<div className={'closable-popup-mask'}> <div className={'closable-popup-mask'} onClick={clickMask}>
<div className={classnames(['popup-container', className])}> <div className={classnames(['popup-container', className])}>
<div className="title">{title}</div> <div className="title">{title}</div>
<div className="content"> <div className="content">
...@@ -43,9 +54,9 @@ function ClosablePopup({ ...@@ -43,9 +54,9 @@ function ClosablePopup({
</div> </div>
{ {
closable && closable &&
re.test(closeIcon) (re.test(closeIcon)
? <img src={closeIcon} alt="" className={'close-icon'} onClick={_close}/> ? <img src={closeIcon} alt="" className={'close-icon'} onClick={_close}/>
: <i className={`close iconfont ${closeIcon}`} onClick={_close}/> : <i className={`close iconfont ${closeIcon}`} onClick={_close}/>)
} }
</div> </div>
</div> </div>
......
...@@ -2,9 +2,10 @@ import React, { Component } from 'react' ...@@ -2,9 +2,10 @@ import React, { Component } from 'react'
import BoxContainer from '../box-container/container' import BoxContainer from '../box-container/container'
import { Toast } from "antd-mobile" import { Toast } from "antd-mobile"
import { Popup } from "@common/index" import { Popup } from "@common/index"
import cls from 'classnames'
import './landing.scss' import './landing.scss'
import { http } from "@/utils" import { browser, getParam, http } from "@/utils"
class Landing extends Component { class Landing extends Component {
...@@ -121,9 +122,13 @@ class Landing extends Component { ...@@ -121,9 +122,13 @@ class Landing extends Component {
] ]
}, },
origin: getParam('origin'),
treasure_code: getParam('treasure_code'),
activityEnd: false
} }
componentDidMount() { componentDidMount() {
const {origin, treasure_code} = this.state
http.get(`${API.home}/sys/prize_data`) http.get(`${API.home}/sys/prize_data`)
.then(res => { .then(res => {
const {data, code, msg} = res.data const {data, code, msg} = res.data
...@@ -133,8 +138,9 @@ class Landing extends Component { ...@@ -133,8 +138,9 @@ class Landing extends Component {
Toast.info(msg, 2, null, false) Toast.info(msg, 2, null, false)
} }
}) })
/*http.post(`${API.home}/sys/treasure/team`, { http.post(`${API.home}/sys/treasure/team`, {
treasure_code,
origin
}) })
.then(res => { .then(res => {
const {data, code, msg} = res.data const {data, code, msg} = res.data
...@@ -143,13 +149,49 @@ class Landing extends Component { ...@@ -143,13 +149,49 @@ class Landing extends Component {
this.setState({ this.setState({
teamData: data teamData: data
}) })
// console.log(data)
let searchParams = new URLSearchParams(window.location.search)
if (searchParams.get('origin') === '1') {
searchParams.set('origin', '2')
window.history.replaceState(null, '', `landing?${searchParams.toString()}`)
}
} else if (code === 12005) {
this.setState({
activityEnd: true
})
} else { } else {
Toast.info(msg, 2, null, false) Toast.info(msg, 2, null, false)
} }
})*/ })
this.joinSuccess()
}
joinTeam = () => {
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) {
switch (data.status) {
case 1:
case 2:
this.joinSuccess(data)
break
default:
alert('aaa')
}
} else {
Toast.info(msg, 2, null, false)
}
})
} }
showRules = () => { showRules = () => {
...@@ -189,7 +231,7 @@ class Landing extends Component { ...@@ -189,7 +231,7 @@ class Landing extends Component {
} }
joinSuccess = (isFull = false) => { joinSuccess = ({status, team_num, lack_member, is_team}) => {
Popup({ Popup({
title: <div className={'join-success'}> title: <div className={'join-success'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/check-icon.png" alt=""/> <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/check-icon.png" alt=""/>
...@@ -199,28 +241,30 @@ class Landing extends Component { ...@@ -199,28 +241,30 @@ class Landing extends Component {
content: <div> content: <div>
<div className={'tip'}> <div className={'tip'}>
{ {
isFull status === 2
? '组队成功,恭喜你获得一个宝箱!' ? '组队成功,恭喜你获得一个宝箱!'
: is_team
? `您的${<span>{team_num}</span>}号队伍还差${<span>{lack_member}</span>}人即可获得宝箱`
: '自己当队长,宝箱内有专属奖品哦~' : '自己当队长,宝箱内有专属奖品哦~'
} }
</div> </div>
{ {
isFull status === 2
? <img style={{width: '150px', marginTop: '23px'}} ? <img style={{width: '150px', marginTop: '23px'}}
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png" alt=""/> src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png" alt=""/>
: <button type="button">创建我的队伍</button> : <button type="button">{is_team ? '继续组队' : '创建我的队伍'}</button>
} }
</div>, </div>,
closeIcon: this.closeIcon closeIcon: this.closeIcon
}) })
} }
createTeamSuccess = () => { createTeamSuccess = ({head_img, team_num, lack_member, treasure_code}) => {
Popup({ Popup({
title: '创建成功', title: '创建成功',
className: 'landing-create-success', className: 'landing-create-success',
content: <div> content: <div>
<div className="tip">*号队伍 还差*名队员即可获得宝箱哦~</div> <div className="tip">{<span>{team_num}</span>}号队伍 还差{<span>{lack_member}</span>}名队员即可获得宝箱哦~</div>
<img className={'treasure-box'} <img className={'treasure-box'}
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png" alt=""/> src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png" alt=""/>
<ul className='members'> <ul className='members'>
...@@ -287,9 +331,49 @@ class Landing extends Component { ...@@ -287,9 +331,49 @@ class Landing extends Component {
}) })
} }
showShareTip = () => {
Popup({
title: <div>还差<span>{this.state.teamData.lack_member}</span>名队友即可获得宝箱 快分享给好友吧~</div>,
className: `landing-share-tip ${browser.isWeixin ? 'wechat' : ''}`,
closable: false,
})
}
showOpenInBrowserTip = () => {
Popup({
title: <div>点击右上角,选择“在浏览器打开”</div>,
className: 'landing-open-in-browser-tip',
closable: false,
})
}
createMyTeam = () => {
http.get(`${API.home}/sys/treasure/createMyTeam`)
.then(res => {
const {data, code, msg} = res.data
if (code == 200) {
this.createTeamSuccess(data)
} else {
Toast.info(msg, 2, null, false)
}
})
}
render() { render() {
const {teamData} = this.state const {
teamData: {
head_img,
member,
status,
lack_member,
team_num,
prize_info,
is_team
}
} = this.state
return ( return (
<div id={'landing'}> <div id={'landing'}>
<div id="to-square"> <div id="to-square">
...@@ -298,8 +382,13 @@ class Landing extends Component { ...@@ -298,8 +382,13 @@ class Landing extends Component {
<BoxContainer> <BoxContainer>
<i className="snow-deco"/> <i className="snow-deco"/>
<img className='main-avatar' <img className='main-avatar'
src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/default/robot.png" alt=""/> src={head_img} alt=""/>
<div className="des">邀请好友加入队伍,开宝箱领取丰厚奖品~</div> {
status === 1 && <div className="des">邀请好友加入队伍,开宝箱领取丰厚奖品~</div>
}
{
status === 2 || status === 3 && <div className="des">加入我的<span>{team_num}</span>号队伍,一起开宝箱领取丰厚奖品~</div>
}
<div className={'prizes-box'} ref={el => this.prizeBox = el}> <div className={'prizes-box'} ref={el => this.prizeBox = el}>
<a href="javascript:;" className='rule-btn' onClick={this.showRules}>活动规则 > </a> <a href="javascript:;" className='rule-btn' onClick={this.showRules}>活动规则 > </a>
<div className={`bg`} ref={el => this.bg = el}/> <div className={`bg`} ref={el => this.bg = el}/>
...@@ -329,22 +418,22 @@ class Landing extends Component { ...@@ -329,22 +418,22 @@ class Landing extends Component {
</div> </div>
} }
</div> </div>
<div className="fake"></div>
</div> </div>
<div className="group"> <div className="group">
<ul className={'member'}> <ul className={'member'}>
{ {
member && member.length &&
new Array(5).fill('a').map((item, index) => { new Array(5).fill('a').map((item, index) => {
const member = teamData.member[index] const _member = member[index]
return ( return (
member _member
? <li key={index}> ? <li key={index}>
<div className='avatar-wrapper'> <div className='avatar-wrapper'>
{ {
member.is_captain ? <sup>队长</sup> : null _member.is_captain ? <sup>队长</sup> : null
} }
<img <img
src={member.head_img} src={_member.head_img}
alt="" alt=""
className="avatar"/> className="avatar"/>
</div> </div>
...@@ -364,19 +453,51 @@ class Landing extends Component { ...@@ -364,19 +453,51 @@ class Landing extends Component {
</ul> </ul>
<ul className={'bars'}> <ul className={'bars'}>
{ {
member && member.length &&
new Array(5).fill('a').map((item, index) => { new Array(5).fill('a').map((item, index) => {
return ( return (
<li key={index} className={`${index + 1 < teamData.member.length ? 'active' : ''}`}/> <li key={index} className={`${index < member.length ? 'active' : ''}`}/>
) )
}) })
} }
</ul> </ul>
<div className="group-des"> {
还差 {'*'} 名队员即可获得当前宝箱哦~ status === 1 && <div className="group-des">
</div> 还差 {lack_member} 名队员即可获得当前宝箱哦~
<button type='button' className={'invite-btn'}> </div>
邀请好友加入队伍 }
</button> {
status === 3 && <div className="group-des">
<p>已加入当前队伍</p>
{
is_team
? <p>您的{team_num}号队伍还差{lack_member}人即可获得宝箱~</p>
: <p>自己当队长,宝箱内有专属奖品哦~</p>
}
</div>
}
{
status === 1 &&
<button type='button' className={'invite-btn'} onClick={this.showShareTip}>
邀请好友加入队伍
</button>
}
{
status === 2 && < button type='button' className={'invite-btn'} onClick={this.joinTeam}>
同意加入队伍
</button>
}
{
status === 3 && < button type='button' className={'invite-btn'} onClick={this.createMyTeam}>
创建我的队伍
</button>
}
{
status === 2 && prize_info && <div className="certainly-prompt">
{prize_info.stage_no}次必中 {prize_info.name}
</div>
}
</div> </div>
</BoxContainer> </BoxContainer>
</div> </div>
......
...@@ -46,14 +46,25 @@ ...@@ -46,14 +46,25 @@
.main-avatar { .main-avatar {
width: 49px; width: 49px;
height: 49px;
border-radius: 50%; border-radius: 50%;
margin-bottom: 5px; margin-bottom: 5px;
margin-top: 37.5px; margin-top: 37.5px;
object-fit: cover;
} }
.des { .des {
font-size: 14px; font-size: 14px;
color: #FFDC1E; color: #FFDC1E;
span{
display: inline-block;
width: 15px;
height: 15px;
line-height: 16px;
color: #327443;
border-radius: 50%;
background: #FFDC1E;
}
} }
.trans-height { .trans-height {
...@@ -163,16 +174,6 @@ ...@@ -163,16 +174,6 @@
} }
} }
} }
/*.fake{
position: absolute;
bottom: 8px;
left: 10%;
width: 20px;
height: 54px;
background: red;
z-index: 200;
}*/
} }
.group { .group {
...@@ -263,6 +264,13 @@ ...@@ -263,6 +264,13 @@
border-radius: 3px; border-radius: 3px;
font-family: "HiraginoSansGB-W6", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; font-family: "HiraginoSansGB-W6", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
} }
.certainly-prompt{
margin-top: -43px;
padding-bottom: 16px;
font-size: 14px;
color: #FFE300;
}
} }
} }
...@@ -273,6 +281,10 @@ ...@@ -273,6 +281,10 @@
line-height: 37px; line-height: 37px;
color: #666; color: #666;
text-align: center; text-align: center;
span{
color: #FF2121;
}
} }
} }
...@@ -434,7 +446,7 @@ ...@@ -434,7 +446,7 @@
} }
} }
.prize-name{ .prize-name {
font-size: 15px; font-size: 15px;
color: #FF232D; color: #FF232D;
margin-bottom: 5px; margin-bottom: 5px;
...@@ -446,7 +458,7 @@ ...@@ -446,7 +458,7 @@
padding: 12px; padding: 12px;
margin-top: 12px; margin-top: 12px;
li:nth-last-child(1){ li:nth-last-child(1) {
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -493,3 +505,41 @@ ...@@ -493,3 +505,41 @@
@extend .popup-button; @extend .popup-button;
} }
} }
.landing-open-in-browser-tip, .landing-share-tip {
font-size: 17px;
color: #111;
&.popup-container {
width: 270px;
text-align: center;
top: 114px;
padding: 20px 33px;
}
span {
color: #FF2121;
}
}
.landing-open-in-browser-tip.wechat, .landing-share-tip.wechat{
&.popup-container{
&::after {
content: '';
display: block;
position: absolute;
top: -50px;
right: -18px;
width: 50px;
height: 38px;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/share-indicator.png") no-repeat;
background-size: contain;
}
}
}
.landing-open-in-browser-tip{
&.popup-container{
width: 312px;
}
}
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