Commit 96625758 by wangshuo

Merge branch '00' of gitlab.julyedu.com:baiguangyao/mr-julyedu into 00

parents 973d325a 9b900dca
.closable-popup-mask { .closable-popup-mask {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
...@@ -12,26 +8,39 @@ ...@@ -12,26 +8,39 @@
z-index: 999; z-index: 999;
.popup-container { .popup-container {
position: absolute;
top: 165px;
left: 50%;
transform: translateX(-50%);
width: 300px;
padding: 20px 10px; padding: 20px 10px;
border-radius: 10px; border-radius: 10px;
background-color: #fff; background: #fff;
.title { .title {
font-size: 16px; font-size: 16px;
color: #525C65; color: #525C65;
text-align: center; text-align: center;
} }
}
.close { .close {
font-size: 36px; position: absolute;
color: #fff; bottom: -74px;
} left: 50%;
transform: translateX(-50%);
font-size: 36px;
color: #fff;
}
.close-icon { .close-icon {
width: 33px; position: absolute;
height: 33px; bottom: -66px;
font-size: 36px; left: 50%;
color: #fff; width: 33px;
height: 33px;
transform: translateX(-50%);
font-size: 36px;
color: #fff;
}
} }
} }
...@@ -2,6 +2,8 @@ import React, { Component } from 'react' ...@@ -2,6 +2,8 @@ import React, { Component } from 'react'
import { http } from "@/utils" import { http } from "@/utils"
import './prizes.scss' import './prizes.scss'
import { Popup } from "@common/index" import { Popup } from "@common/index"
import { Toast } from "antd-mobile"
import Loadable from '@loadable/component' import Loadable from '@loadable/component'
...@@ -13,6 +15,7 @@ class Prizes extends Component { ...@@ -13,6 +15,7 @@ class Prizes extends Component {
prizeList prizeList
bg bg
innerBox innerBox
closeIcon = 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/close-btn.png'
state = { state = {
prizes: [], prizes: [],
......
...@@ -153,7 +153,7 @@ ...@@ -153,7 +153,7 @@
.progress-bar { .progress-bar {
position: relative; position: relative;
flex: 0 1 50px; flex: 0 1 45px;
height: 2px; height: 2px;
background: #fff; background: #fff;
...@@ -170,3 +170,11 @@ ...@@ -170,3 +170,11 @@
} }
} }
} }
.common_container {
.container_content {
.prizes-box {
margin: 0 -20px;
}
}
}
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
padding-left: 2px; padding-left: 2px;
display: flex; display: flex;
align-items: center; align-items: center;
transition: height .3s ease-in-out; transition: height .1s ease-out;
.sys-bullet-screen-swiper-container{ .sys-bullet-screen-swiper-container{
height: 100%; height: 100%;
......
import React, { Component } from 'react' import React, { Component } from 'react'
import BoxContainer from '../box-container/container' import BoxContainer from '../box-container/container'
import { Toast } from "antd-mobile" import { Toast, WhiteSpace } from "antd-mobile"
import { Popup } from "@common/index" import { Popup } from "@common/index"
import { connect } from "react-redux" import { connect } from "react-redux"
import Prizes from "@components/activity/newyear-2019/common/prizes" import Prizes from "@components/activity/newyear-2019/common/prizes"
import BulletScreen from "@components/activity/newyear-2019/common/user-bullet-screen" import BulletScreen from "@components/activity/newyear-2019/common/user-bullet-screen"
import './landing.scss' import './landing.scss'
import { browser, getParam, http } from "@/utils" import { browser, getParam, http, wxShare } from "@/utils"
import { Link } from "react-router-dom"
import QRCode from "qrcode"
import YearCourse from '../preheat/YearCourse'
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'
createTeamSuccessPopupInstance = null createTeamSuccessPopup = null
joinSuccessPopup = null
swiper = null swiper = null
state = { state = {
teamData: { teamData: {
member: [ member: []
{
head_img: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/default/robot.png',
is_captain: 1
},
{
head_img: 'http://img2.imgtn.bdimg.com/it/u=2138045196,3587715336&fm=26&gp=0.jpg',
is_captain: 0
},
]
}, },
origin: getParam('origin'), origin: getParam('origin'),
treasure_code: getParam('treasure_code'), treasure_code: getParam('treasure_code'),
...@@ -55,7 +50,7 @@ class Landing extends Component { ...@@ -55,7 +50,7 @@ class Landing extends Component {
}) })
let searchParams = new URLSearchParams(window.location.search) let searchParams = new URLSearchParams(window.location.search)
if (searchParams.get('origin') === '1') { if (searchParams.get('origin') === '1' && !browser.isWeixin) {
searchParams.set('origin', '2') searchParams.set('origin', '2')
window.history.replaceState(null, '', `landing?${searchParams.toString()}`) window.history.replaceState(null, '', `landing?${searchParams.toString()}`)
} }
...@@ -116,8 +111,9 @@ class Landing extends Component { ...@@ -116,8 +111,9 @@ class Landing extends Component {
}) })
} }
joinSuccess = ({status, team_num, lack_member, is_team}) => { joinSuccess = ({id, status, my_team: {team_num, lack_member, is_team}}) => {
Popup({ const {history} = this.props
this.joinSuccessPopup = 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=""/>
<div>成功加入队伍</div> <div>成功加入队伍</div>
...@@ -136,7 +132,12 @@ class Landing extends Component { ...@@ -136,7 +132,12 @@ class Landing extends Component {
{ {
status === 2 status === 2
? <img style={{width: '150px', marginTop: '23px'}} ? <img style={{width: '150px', marginTop: '23px'}}
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/treasure-box.png" alt=""/> src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/treasure-box.png"
alt=""
onClick={() => {
history.push(`/year/yearTreasure?id=${id}`)
}}
/>
: is_team : is_team
? <button type='button' ? <button type='button'
onClick={this.inviteMembers.bind(this, this.state.teamData['my_team']['treasure_code'])}>继续组队</button> onClick={this.inviteMembers.bind(this, this.state.teamData['my_team']['treasure_code'])}>继续组队</button>
...@@ -151,15 +152,24 @@ class Landing extends Component { ...@@ -151,15 +152,24 @@ class Landing extends Component {
} }
inviteMembers = (treasure_code) => { inviteMembers = (treasure_code) => {
const {history, match} = this.props const {history, match, user, location} = this.props
if (browser.isWeixin) {
wxShare({
title: `@${user.data.username} 邀您一起组队拿豪礼!`,
desc: `加我我的队伍,机械键盘,纸质书籍等超多奖品等你拿!`,
link: encodeURIComponent(`${window.location.origin}/${location.pathname}?treasure_code=${treasure_code}&origin=2`),
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newIndex/community/tou5_bj.png'
})
}
sessionStorage.setItem('showShareTip', '1') sessionStorage.setItem('showShareTip', '1')
history.replace(`${match.path}?treasure_code=${treasure_code}&origin=${1}`) history.replace(`${match.path}?treasure_code=${treasure_code}&origin=${1}`)
this.createTeamSuccessPopupInstance && this.createTeamSuccessPopupInstance.remove() this.createTeamSuccessPopup && this.createTeamSuccessPopup.remove() && (this.createTeamSuccessPopup = null)
this.fetchPageData({treasure_code, origin: 1}) this.fetchPageData({treasure_code, origin: 1})
} }
createTeamSuccess = ({member, team_num, lack_member, treasure_code}) => { createTeamSuccess = (member, team_num, lack_member, treasure_code) => {
let isFollow = false let isFollow = false
this.joinSuccessPopup && this.joinSuccessPopup.remove() && (this.joinSuccessPopup = null)
http.get(`${API.home}/sys/user/isFollowWeChat`) http.get(`${API.home}/sys/user/isFollowWeChat`)
.then(res => { .then(res => {
const {errno, status} = res.data const {errno, status} = res.data
...@@ -167,7 +177,7 @@ class Landing extends Component { ...@@ -167,7 +177,7 @@ class Landing extends Component {
isFollow = true isFollow = true
} }
}) })
this.createTeamSuccessPopupInstance = Popup({ this.createTeamSuccessPopup = Popup({
title: '创建成功', title: '创建成功',
className: 'landing-create-success', className: 'landing-create-success',
content: <div> content: <div>
...@@ -204,25 +214,32 @@ class Landing extends Component { ...@@ -204,25 +214,32 @@ class Landing extends Component {
} }
remind = (type = 'create', treasure_code) => { remind = (type = 'create', treasure_code) => {
const {match, history} = this.props const {match, history, user} = this.props
Popup({ http.get(`${API["base-api"]}/wx/user_temporary_qrcode/${user.data.uid}`)
title: '提醒服务', .then(res => {
className: 'landing-remind', const {data} = res.data
closeIcon: this.closeIcon, return data.url
content: <div> })
<div className="des">{type === 'create' ? '有好友加入队伍后第一时间通知我~' : '获得宝箱时第一时间通知我~'}</div> QRCode.toDataURL('http://m.julyedu.com')
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt=""/> .then(url => {
<div className="des">长按识别/扫码 关注【七月在线】服务号即可预约</div> Popup({
</div>, title: '提醒服务',
close: () => new Promise(resolve => { className: 'landing-remind',
history.replace(`${match.path}?treasure_code=${treasure_code}&origin=1`) closeIcon: this.closeIcon,
this.fetchPageData({ content: <div>
treasure_code, <div className="des">{type === 'create' ? '有好友加入队伍后第一时间通知我~' : '获得宝箱时第一时间通知我~'}</div>
origin: '1' <img src={url} alt=""/>
<div className="des">长按识别/扫码 关注【七月在线】服务号即可预约</div>
</div>,
close: () => {
history.replace(`${match.path}?treasure_code=${treasure_code}&origin=1`)
this.fetchPageData({
treasure_code,
origin: '1'
})
}
}) })
resolve()
}) })
})
} }
unpackTreasureBox = () => { unpackTreasureBox = () => {
...@@ -266,6 +283,7 @@ class Landing extends Component { ...@@ -266,6 +283,7 @@ class Landing extends Component {
closable: false, closable: false,
close: () => { close: () => {
sessionStorage.removeItem('showShareTip') sessionStorage.removeItem('showShareTip')
this.remind()
} }
}) })
} }
...@@ -330,7 +348,7 @@ class Landing extends Component { ...@@ -330,7 +348,7 @@ class Landing extends Component {
return ( return (
<div id={'landing'}> <div id={'landing'}>
<div id="to-square"> <div id="to-square">
前往活动会场,享更多福利! >> <Link to='/year/yearindex'>前往活动会场,享更多福利! >></Link>
</div> </div>
<BoxContainer> <BoxContainer>
<i className="snow-deco"/> <i className="snow-deco"/>
...@@ -339,10 +357,8 @@ class Landing extends Component { ...@@ -339,10 +357,8 @@ class Landing extends Component {
{ {
status === 1 && <div className="des">邀请好友加入队伍,开宝箱领取丰厚奖品~</div> status === 1 && <div className="des">邀请好友加入队伍,开宝箱领取丰厚奖品~</div>
} }
{ <div className="des">加入我的<span>{team_num}</span>号队伍,一起开宝箱领取丰厚奖品~</div>
status === 2 || status === 3 && <div className="des">加入我的<span>{team_num}</span>号队伍,一起开宝箱领取丰厚奖品~</div> <Prizes showSystemNotices={false}/>
}
<Prizes showSystemNotices={true}/>
<BulletScreen/> <BulletScreen/>
<div className="group"> <div className="group">
<ul className={'member'}> <ul className={'member'}>
...@@ -464,6 +480,8 @@ class Landing extends Component { ...@@ -464,6 +480,8 @@ class Landing extends Component {
} }
</div> </div>
</BoxContainer> </BoxContainer>
<WhiteSpace size={'xl'}/>
<YearCourse></YearCourse>
</div> </div>
) )
} }
......
...@@ -69,8 +69,6 @@ ...@@ -69,8 +69,6 @@
} }
.group { .group {
ul.member { ul.member {
display: flex; display: flex;
...@@ -168,30 +166,37 @@ ...@@ -168,30 +166,37 @@
} }
} }
.activity-end{ .activity-end {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
align-items: center; align-items: center;
margin-top: 26px; margin-top: 26px;
font-size: 14px; font-size: 14px;
color: #FFE300; color: #FFE300;
div:first-child{
div:first-child {
margin-bottom: 5px; margin-bottom: 5px;
} }
div:nth-child(2){
div:nth-child(2) {
margin-bottom: 19px; margin-bottom: 19px;
} }
img{
img {
width: 120px; width: 120px;
height: 120px; height: 120px;
margin-bottom: 12px; margin-bottom: 12px;
} }
div:last-child{
div:last-child {
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
} }
} }
.am-whitespace.am-whitespace-xl {
height: 35px;
}
} }
.popup-container { .popup-container {
...@@ -342,6 +347,10 @@ ...@@ -342,6 +347,10 @@
font-size: 14px; font-size: 14px;
color: #666; color: #666;
} }
button {
}
} }
.landing-unpack-treasure-box { .landing-unpack-treasure-box {
...@@ -436,6 +445,7 @@ ...@@ -436,6 +445,7 @@
color: #111; color: #111;
&.popup-container { &.popup-container {
position: absolute;
width: 270px; width: 270px;
text-align: center; text-align: center;
top: 114px; top: 114px;
......
...@@ -2,11 +2,16 @@ import React, { Component } from 'react'; ...@@ -2,11 +2,16 @@ import React, { Component } from 'react';
import CommonContainer from './../common/commonContainer/index'; import CommonContainer from './../common/commonContainer/index';
import TreasureRank from './rank'; import TreasureRank from './rank';
import TeamInfo from './team' import TeamInfo from './team'
import Prizes from "@components/activity/newyear-2019/common/prizes"
import UserBulletScreen from "@components/activity/newyear-2019/common/user-bullet-screen"
class TreasureBox extends Component { class TreasureBox extends Component {
render() { render() {
return ( return (
<CommonContainer id="year-treasure"> <CommonContainer id="year-treasure" title={'组队开宝箱'}>
<div style={{textAlign: 'center', fontSize: '12px', color: '#FFDC1E', marginTop: '10px'}}>邀请好友组队一起开宝箱,满5人后将随机获得以下奖品~</div>
<Prizes showSystemNotices={true}/>
<UserBulletScreen/>
<TeamInfo /> <TeamInfo />
<TreasureRank /> <TreasureRank />
</CommonContainer> </CommonContainer>
...@@ -14,4 +19,4 @@ class TreasureBox extends Component { ...@@ -14,4 +19,4 @@ class TreasureBox extends Component {
} }
} }
export default TreasureBox; export default TreasureBox;
\ No newline at end of file
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