Skip to content

M
mr-julyedu
Commit 55bcc051 by zhanghaozhe
Options

中间页

parent 467eb0d9
Showing with 224 additions and 42 deletions
src/common/closable-popup/index.js
......@@ -12,9 +12,11 @@ function ClosablePopup({
closable = true,
close = function () {
},
clickMaskClose = true,
closeIcon = 'iconiconfront-2'
} = {}) {
function unmountComponent() {
ReactDOM.unmountComponentAtNode(div)
if (div && div.parentNode) {
......@@ -33,9 +35,18 @@ function ClosablePopup({
}
}
function clickMask() {
if(closable){
return
}
if(!clickMaskClose){
return
}
_close()
}
const closablePopup = (
<div className={'closable-popup-mask'}>
<div className={'closable-popup-mask'} onClick={clickMask}>
<div className={classnames(['popup-container', className])}>
<div className="title">{title}</div>
<div className="content">
......@@ -43,9 +54,9 @@ function ClosablePopup({
</div>
{
closable &&
re.test(closeIcon)
(re.test(closeIcon)
? <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>
......
src/components/activity/newyear-2019/landing/index.js
......@@ -2,9 +2,10 @@ import React, { Component } from 'react'
import BoxContainer from '../box-container/container'
import { Toast } from "antd-mobile"
import { Popup } from "@common/index"
import cls from 'classnames'
import './landing.scss'
import { http } from "@/utils"
import { browser, getParam, http } from "@/utils"
class Landing extends Component {
......@@ -121,9 +122,13 @@ class Landing extends Component {
]
},
origin: getParam('origin'),
treasure_code: getParam('treasure_code'),
activityEnd: false
}
componentDidMount() {
const {origin, treasure_code} = this.state
http.get(`${API.home}/sys/prize_data`)
.then(res => {
const {data, code, msg} = res.data
......@@ -133,8 +138,9 @@ class Landing extends Component {
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 => {
const {data, code, msg} = res.data
......@@ -143,13 +149,49 @@ class Landing extends Component {
this.setState({
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 {
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 = () => {
......@@ -189,7 +231,7 @@ class Landing extends Component {
}
joinSuccess = (isFull = false) => {
joinSuccess = ({status, team_num, lack_member, is_team}) => {
Popup({
title: <div className={'join-success'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/check-icon.png" alt=""/>
......@@ -199,28 +241,30 @@ class Landing extends Component {
content: <div>
<div className={'tip'}>
{
isFull
status === 2
? '组队成功，恭喜你获得一个宝箱！'
: is_team
? `您的${<span>{team_num}</span>}号队伍还差${<span>{lack_member}</span>}人即可获得宝箱`
: '自己当队长，宝箱内有专属奖品哦~'
}
</div>
{
isFull
status === 2
? <img style={{width: '150px', marginTop: '23px'}}
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>,
closeIcon: this.closeIcon
})
}
createTeamSuccess = () => {
createTeamSuccess = ({head_img, team_num, lack_member, treasure_code}) => {
Popup({
title: '创建成功',
className: 'landing-create-success',
content: <div>
<div className="tip">*号队伍 还差*名队员即可获得宝箱哦~</div>
<div className="tip">{<span>{team_num}</span>}号队伍 还差{<span>{lack_member}</span>}名队员即可获得宝箱哦~</div>
<img className={'treasure-box'}
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png" alt=""/>
<ul className='members'>
......@@ -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() {
const {teamData} = this.state
const {
teamData: {
head_img,
member,
status,
lack_member,
team_num,
prize_info,
is_team
}
} = this.state
return (
<div id={'landing'}>
<div id="to-square">
......@@ -298,8 +382,13 @@ class Landing extends Component {
<BoxContainer>
<i className="snow-deco"/>
<img className='main-avatar'
src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/default/robot.png" alt=""/>
<div className="des">邀请好友加入队伍，开宝箱领取丰厚奖品~</div>
src={head_img} alt=""/>
{
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}>
<a href="javascript:;" className='rule-btn' onClick={this.showRules}>活动规则 > </a>
<div className={`bg`} ref={el => this.bg = el}/>
......@@ -329,22 +418,22 @@ class Landing extends Component {
</div>
}
</div>
<div className="fake"></div>
</div>
<div className="group">
<ul className={'member'}>
{
member && member.length &&
new Array(5).fill('a').map((item, index) => {
const member = teamData.member[index]
const _member = member[index]
return (
member
_member
? <li key={index}>
<div className='avatar-wrapper'>
{
member.is_captain ? <sup>队长</sup> : null
_member.is_captain ? <sup>队长</sup> : null
}
<img
src={member.head_img}
src={_member.head_img}
alt=""
className="avatar"/>
</div>
......@@ -364,19 +453,51 @@ class Landing extends Component {
</ul>
<ul className={'bars'}>
{
member && member.length &&
new Array(5).fill('a').map((item, index) => {
return (
<li key={index} className={`${index + 1 < teamData.member.length ? 'active' : ''}`}/>
<li key={index} className={`${index < member.length ? 'active' : ''}`}/>
)
})
}
</ul>
<div className="group-des">
还差 {'*'} 名队员即可获得当前宝箱哦~
</div>
<button type='button' className={'invite-btn'}>
邀请好友加入队伍
</button>
{
status === 1 && <div className="group-des">
还差 {lack_member} 名队员即可获得当前宝箱哦~
</div>
}
{
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>
</BoxContainer>
</div>
......
src/components/activity/newyear-2019/landing/landing.scss
......@@ -46,14 +46,25 @@
.main-avatar {
width: 49px;
height: 49px;
border-radius: 50%;
margin-bottom: 5px;
margin-top: 37.5px;
object-fit: cover;
}
.des {
font-size: 14px;
color: #FFDC1E;
span{
display: inline-block;
width: 15px;
height: 15px;
line-height: 16px;
color: #327443;
border-radius: 50%;
background: #FFDC1E;
}
}
.trans-height {
......@@ -163,16 +174,6 @@
}
}
}
/*.fake{
position: absolute;
bottom: 8px;
left: 10%;
width: 20px;
height: 54px;
background: red;
z-index: 200;
}*/
}
.group {
......@@ -263,6 +264,13 @@
border-radius: 3px;
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 @@
line-height: 37px;
color: #666;
text-align: center;
span{
color: #FF2121;
}
}
}
......@@ -434,7 +446,7 @@
}
}
.prize-name{
.prize-name {
font-size: 15px;
color: #FF232D;
margin-bottom: 5px;
......@@ -446,7 +458,7 @@
padding: 12px;
margin-top: 12px;
li:nth-last-child(1){
li:nth-last-child(1) {
margin-bottom: 0;
}
......@@ -493,3 +505,41 @@
@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