Skip to content

M
mr-julyedu
Commit 926738c7 by FE
Options

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

parents 7f7f8563 a6b931aa
Showing with 249 additions and 190 deletions
src/components/activity/newyear-2019/common/prizes/prizes.scss
......@@ -116,6 +116,12 @@
}
}
& li:last-child {
display: flex;
align-items: center;
justify-content: center;
}
.top-tag {
position: absolute;
top: 0;
......@@ -167,6 +173,7 @@
height: 2px;
background: #fff;
border-radius: 1px;
.progress {
position: absolute;
right: 0;
......@@ -188,3 +195,29 @@
}
}
}
.landing-treasure-rules {
width: 320px;
&.popup-container {
top: 50%;
transform: translate(-50%, -50%);
.title {
font-size: 18px;
color: #111111;
}
}
.content {
padding: 0 19px 15px;
margin-top: 22px;
color: #666666;
font-size: 14px;
li {
margin-bottom: 5px;
}
}
}
src/components/activity/newyear-2019/common/system-bullet-screen/index.js
......@@ -60,8 +60,12 @@ class SystemBulletScreen extends Component {
content.style.transform = `translate3d(${-(contentWidth - wrapperWidth) - 10}px,0,0)`
}, 1000)
} else {
const {bullets} = this.props
const len = bullets.length * 3
setTimeout(() => {
++this.count;
if (++this.count === len) {
this.sysNotice.style.height = `0px`
}
(swiper && !swiper.destroyed) && swiper.slideNext()
}, 3000)
}
......
src/components/activity/newyear-2019/landing/index.js
......@@ -17,8 +17,10 @@ class Landing extends Component {
closeIcon = 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/close-btn.png'
createTeamSuccessPopup = null
joinSuccessPopup = null
shareTipPopup = null
swiper = null
state = {
teamData: {
member: []
......@@ -42,8 +44,13 @@ class Landing extends Component {
}
}
componentWillUnmount() {
this.shareTipPopup && this.shareTipPopup.remove()
}
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
......@@ -58,6 +65,16 @@ class Landing extends Component {
activityEnd: data.status == 5
})
if (browser.isWeixin) {
wxShare({
title: `@${data.member[0].user_name} 邀您一起组队拿豪礼！`,
desc: `加入我的队伍，机械键盘，纸质书籍等超多奖品等你拿！`,
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`)
}
let searchParams = new URLSearchParams(window.location.search)
if (searchParams.get('origin') === '1' && !browser.isWeixin) {
searchParams.set('origin', '2')
......@@ -75,7 +92,7 @@ class Landing extends Component {
}
showSharePromptWithParam = () => {
if (sessionStorage.getItem('showShareTip')) {
if (sessionStorage.getItem('showShareTip') && !sessionStorage.getItem('closedRemind')) {
this.showShareTip()
}
}
......@@ -115,7 +132,8 @@ class Landing extends Component {
})
}
handleToMyTreasure = () => {
handleToMyTreasure = id => {
const {history} = this.props
this.joinSuccessPopup && this.joinSuccessPopup.remove()
if (getParam('version')) {
history.push(`/year/yearTreasure?id=${id}&version=${getParam('version')}`)
......@@ -125,7 +143,6 @@ class Landing extends Component {
}
joinSuccess = ({id, status, my_team: {team_num, lack_member, is_team, treasure_code}}) => {
const {history} = this.props
this.joinSuccessPopup = Popup({
title: <div className={'join-success'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/check-icon.png" alt=""/>
......@@ -145,9 +162,9 @@ class Landing extends Component {
{
status === 2
? <img style={{width: '150px', marginTop: '23px'}}
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/treasure-box.png"
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/treasure-split.gif"
alt=""
onClick={this.handleToMyTreasure}
onClick={this.handleToMyTreasure.bind(this, id)}
/>
: is_team
? <button type='button'
......@@ -177,14 +194,6 @@ class Landing extends Component {
}
SendMessageToApp("toShare", data)
}
if (browser.isWeixin) {
wxShare({
title: `@${user.data.username} 邀您一起组队拿豪礼！`,
desc: `加入我的队伍，机械键盘，纸质书籍等超多奖品等你拿！`,
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'
})
}
sessionStorage.setItem('showShareTip', '1')
history.replace(`${match.url}?treasure_code=${treasure_code}&origin=${1}`)
this.createTeamSuccessPopup && this.createTeamSuccessPopup.remove() && (this.createTeamSuccessPopup = null)
......@@ -278,6 +287,7 @@ class Landing extends Component {
</div>,
close: () => {
// history.replace(`${match.path}?treasure_code=${treasure_code}&origin=1`)
sessionStorage.setItem('closedRemind', '1')
this.fetchPageData({
treasure_code,
origin
......@@ -301,16 +311,7 @@ class Landing extends Component {
})
} else {
if (browser.isWeixin && getParam('origin') == 1) {
wxShare({
title: `@${user.data.username} 邀您一起组队拿豪礼！`,
desc: `加入我的队伍，机械键盘，纸质书籍等超多奖品等你拿！`,
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`)
}
Popup({
this.shareTipPopup = Popup({
title: <div>还差<span>{this.state.teamData.lack_member}</span>名队友即可获得宝箱 快分享给好友吧~</div>,
className: `landing-share-tip ${browser.isWeixin ? 'wechat' : ''}`,
closable: false,
......@@ -356,7 +357,11 @@ class Landing extends Component {
const {history, user} = 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.href + '&aa=bb')}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`)
} else {
history.push('/passport')
}
return true
}
}
......
src/components/activity/newyear-2019/landing/landing.scss
.sup {
position: absolute;
right: -10px;
top: -13px;
top: 0;
transform: translateY(-50%);
width: 30px;
height: 16px;
background: rgba(255, 227, 0, 1);
......@@ -108,6 +109,7 @@
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid #fff;
}
}
......
src/components/activity/newyear-2019/myTreasure/index.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { HeaderBar } from '@common';
import AddressPopup from '@common/addressPopup/index';
import BindPhone from '@common/bindPhone/index';
import ConfirmPhone from '@common/confirmPhone/index';
import CreateSuccess from './../common/createSuccess/index';
import TreasureTeam from './team';
import PrizeStatus from './prize';
import SplitSuccess from './../common/splitSuccess/index';
import { http, getParam, SendMessageToApp } from '@/utils';
import Mask from './mask';
import './index.scss';
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { HeaderBar } from '@common'
import AddressPopup from '@common/addressPopup/index'
import BindPhone from '@common/bindPhone/index'
import ConfirmPhone from '@common/confirmPhone/index'
import CreateSuccess from './../common/createSuccess/index'
import TreasureTeam from './team'
import PrizeStatus from './prize'
import SplitSuccess from './../common/splitSuccess/index'
import { http, getParam, SendMessageToApp, browser } from '@/utils'
import Mask from './mask'
import './index.scss'
@connect(({country, user}) => ({
country,
userInfo: user.data
}))
class MyTreasure extends Component {
popupInstance = null;
popupInstance = null
constructor(props) {
super(props);
super(props)
this.state = {
isEnd: false,
isEmpty: false,
......@@ -37,65 +37,65 @@ class MyTreasure extends Component {
createInfo: {},
prizeName: '', // 当前商品的名字
treasureTime: '', // 宝箱活动结束时间
};
}
}
componentDidMount() {
this.fetchMyTreasure();
this.fetchActivityStatus();
this.fetchMyTreasure()
this.fetchActivityStatus()
}
componentWillReceiveProps(nextProp) {
const { history } = this.props;
const { userInfo } = nextProp;
if(!userInfo.uid) {
history.push('/passport');
const {history} = this.props
const {userInfo} = nextProp
if (!userInfo.uid) {
history.push('/passport')
}
}
// 页面加载时，初始化当前需要绑定手机号的奖品名字
initPrizeName = (params) => {
const key = this.fetchCurrentTeamId(params);
const data = params.filter(item => item.id == key);
if(data.length > 0) {
const key = this.fetchCurrentTeamId(params)
const data = params.filter(item => item.id == key)
if (data.length > 0) {
this.setState({
prizeName: data[0]['prize_name']
});
})
}
}
// 页面加载时，是否需要拆宝箱
judgeIsHaveId = (data) => {
const id = getParam('id');
if(id) {
const newData = data.filter(item => item.id == id);
if(newData.length > 0) {
const id = getParam('id')
if (id) {
const newData = data.filter(item => item.id == id)
if (newData.length > 0) {
const params = {
team_num: newData[0]['team_num'],
owner_uid: newData[0]['captain_uid']
};
this.toSplitTreasure(params);
}
this.toSplitTreasure(params)
}
}
}
// 获取当前需要绑定手机的队伍id，当拆到需要绑定手机号/地址的宝箱时，如果不进行绑定则无法拆下一个
fetchCurrentTeamId = (data = []) => {
const arr = data.filter(item => item.is_open && (item.bind_phone || item.bind_address));
if(arr.length > 0) {
return arr[0]['id'];
}else {
return '';
const arr = data.filter(item => item.is_open && (item.bind_phone || item.bind_address))
if (arr.length > 0) {
return arr[0]['id']
} else {
return ''
}
}
// 页面加载时，是否是从选择区号页面过来的
// TODO,当同时展示拆宝箱成功弹窗和绑定手机号弹窗时，选择区号返回时未展示拆宝箱成功弹窗（和产品确认，后续优化）
isShowBindPhone = (data) => {
const { country } = this.props;
if(country.from) {
const id = this.fetchCurrentTeamId(data);
this.handleToBindPhone(id);
const {country} = this.props
if (country.from) {
const id = this.fetchCurrentTeamId(data)
this.handleToBindPhone(id)
}
}
......@@ -103,19 +103,19 @@ class MyTreasure extends Component {
handleToBindPhone = (id) => {
this.setState({
isPhone: true,
});
})
}
// 绑定手机号--确认
handleToConfirmPhone = (params, bindInfo) => {
this.handleToHideWindow('isPhone');
this.handleToHideWindow('isPhone')
this.setState({
confirmInfo: {
params,
bindInfo,
},
isConfirm: true,
});
})
}
// 绑定手机号--成功
......@@ -123,63 +123,63 @@ class MyTreasure extends Component {
this.setState({
isPhone: false,
isConfirm: false,
});
const{ teams, splitInfo } = this.state;
const teamId = this.fetchCurrentTeamId(teams);
})
const {teams, splitInfo} = this.state
const teamId = this.fetchCurrentTeamId(teams)
const data = teams.map(item => {
if(item.id == teamId) {
if(item.bind_address) {
this.handleToBindAddress();
if (item.id == teamId) {
if (item.bind_address) {
this.handleToBindAddress()
}
return Object.assign({}, item, {
bind_phone: false,
});
})
}
return item;
return item
})
this.setState({
teams: data,
splitInfo: Object.assign({}, splitInfo, {
bind_phone: false
})
});
})
}
// 拆宝箱--拆
toSplitTreasure = (params) => {
http.post(`${API.home}/sys/split_treasure`, params).then(res => {
const { code, data } = res.data;
if(code === 200) {
const {code, data} = res.data
if (code === 200) {
// 拆宝箱弹窗--成功
this.showSuccessSplit(data);
this.showSuccessSplit(data)
// 更新队伍状态
this.successSplitTreasure(data);
if(data.bind_phone) {
this.successSplitTreasure(data)
if (data.bind_phone) {
setTimeout(() => {
this.handleToBindPhone(data.id);
}, 500);
}else if(data.bind_address) {
this.handleToBindPhone(data.id)
}, 500)
} else if (data.bind_address) {
setTimeout(() => {
this.handleToBindAddress(data.id);
}, 500);
this.handleToBindAddress(data.id)
}, 500)
}
}else if(code === 12000) {
} else if (code === 12000) {
// 绑定手机号
this.handleToBindPhone();
}else if(code === 12001) {
this.handleToBindPhone()
} else if (code === 12001) {
// 绑定地址
this.handleToBindAddress();
this.handleToBindAddress()
}
});
})
}
// 拆宝箱--成功，更新数据
successSplitTreasure = (params) => {
const { userInfo } = this.props;
const { teams } = this.state;
const {userInfo} = this.props
const {teams} = this.state
const data = teams.map(item => {
if(item.id == params.id) {
if (item.id == params.id) {
return Object.assign({}, item, {
bind_phone: params.bind_phone,
bind_address: params.bind_address,
......@@ -187,25 +187,25 @@ class MyTreasure extends Component {
prize_type: params.prize_type,
prize_data: params.prize_data,
member: item.member.map(val => {
if(val.uid == userInfo.uid) {
if (val.uid == userInfo.uid) {
return Object.assign({}, val, {
is_open: true,
prize_name: params.prize_name
});
})
}
return val;
return val
})
})
});
}else {
return item;
} else {
return item
}
});
this.initNoSplitInfo(data);
})
this.initNoSplitInfo(data)
this.setState({
teams: data,
splitInfo: params,
prizeName: params.prize_name
});
})
}
// 拆宝箱--成功，展示弹窗
......@@ -213,15 +213,15 @@ class MyTreasure extends Component {
this.setState({
isSplit: true,
splitInfo: data
});
})
}
// 绑定地址--展示
handleToBindAddress = (id) => {
if(id) {
const { teams } = this.state;
const data = teams.filter(item => item.id == id);
if(data.length > 0) {
if (id) {
const {teams} = this.state
const data = teams.filter(item => item.id == id)
if (data.length > 0) {
this.setState({
prizeName: data[0]['prize_name']
})
......@@ -229,61 +229,61 @@ class MyTreasure extends Component {
}
this.setState({
isAddress: true
});
})
}
// 绑定地址--成功
successBindAddress = () => {
this.setState({
isAddress: false,
});
const{ teams, splitInfo } = this.state;
const teamId = this.fetchCurrentTeamId(teams);
})
const {teams, splitInfo} = this.state
const teamId = this.fetchCurrentTeamId(teams)
const data = teams.map(item => {
if(item.id == teamId) {
if (item.id == teamId) {
return Object.assign({}, item, {
bind_address: false,
});
})
}
return item;
return item
})
this.setState({
teams: data,
splitInfo: Object.assign({}, splitInfo, {
bind_address: false
})
});
})
}
// 获取我的宝箱信息
fetchMyTreasure = () => {
http.get(`${API.home}/sys/treasure/my`).then(res => {
const { code, data } = res.data;
const {code, data} = res.data
if (code === 200) {
this.setState({
rule: data.rule
});
})
if (Array.isArray(data.team) && data.team.length > 0) {
this.initNoSplitInfo(data.team);
this.judgeIsHaveId(data.team);
this.isShowBindPhone(data.team);
this.initPrizeName(data.team);
this.initNoSplitInfo(data.team)
this.judgeIsHaveId(data.team)
this.isShowBindPhone(data.team)
this.initPrizeName(data.team)
this.setState({
isEmpty: false,
teams: data.team,
});
})
} else {
this.setState({
isEmpty: true,
});
})
}
}
});
})
}
// 统计未拆的宝箱信息
initNoSplitInfo = (data = []) => {
if(data.length > 0) {
if (data.length > 0) {
this.setState({
ids: data.filter(item => !item.is_open && item.status === 2).map(val => {
return {
......@@ -291,136 +291,136 @@ class MyTreasure extends Component {
owner_uid: val.captain_uid
}
})
});
})
}
}
// 获取宝箱活动状态
fetchActivityStatus = () => {
http.get(`${API.home}/activity/stage`).then(res => {
const { code, data } = res.data;
const {code, data} = res.data
if (code === 200) {
// treasure_stage，宝箱阶段，0-不在活动时间，1-活动时间内
if(data.treasure_stage === 0) {
this.startCountDown();
if (data.treasure_stage === 0) {
this.startCountDown()
}
this.setState({
isEnd: data.treasure_stage === 0,
treasureTime: data.treasure_stop_date
});
})
}
});
})
}
// 活动结束--倒计时
startCountDown = () => {
const { history } = this.props;
let { seconds } = this.state;
const {history} = this.props
let {seconds} = this.state
if (this.timer) {
clearInterval(this.timer);
clearInterval(this.timer)
}
this.setState({
seconds: seconds--
});
})
this.timer = setInterval(() => {
this.setState({
seconds: seconds--
});
})
if (seconds === 0) {
this.setState({
seconds: 0
});
clearInterval(this.timer);
if(getParam('version')) {
history.push(`/year/yearIndex?version=${getParam('version')}`);
}else {
history.push('/year/yearIndex');
})
clearInterval(this.timer)
if (getParam('version')) {
history.push(`/year/yearIndex?version=${getParam('version')}`)
} else {
history.push('/year/yearIndex')
}
}
}, 1000);
}, 1000)
}
// 邀请好友
handleToInvite = (treasure_code) => {
const { history } = this.props;
if(getParam('version')){
history.push(`/activity/newyear-2019/landing?treasure_code=${treasure_code}&origin=1&version=${getParam('version')}`);
}else {
history.push(`/activity/newyear-2019/landing?treasure_code=${treasure_code}&origin=1`);
const {history} = this.props
if (getParam('version')) {
history.push(`/activity/newyear-2019/landing?treasure_code=${treasure_code}&origin=1&version=${getParam('version')}`)
} else {
history.push(`/activity/newyear-2019/landing?treasure_code=${treasure_code}&origin=1`)
}
}
// 组队开宝箱
toOrganizeTeam = () => {
const { history, userInfo: { uid = '' } } = this.props;
if(uid === '') {
const {history, userInfo: {uid = ''}} = this.props
if (uid === '') {
history.push('/passport')
}else {
} else {
http.get(`${API.home}/sys/treasure/createMyTeam`).then(res => {
const { code, data } = res.data;
if(code === 200) {
const teams = [];
teams[0] = data;
const {code, data} = res.data
if (code === 200) {
const teams = []
teams[0] = data
this.setState({
isEmpty: false,
teams,
isCreate: true,
createInfo: data
});
})
}
});
})
}
}
// 奖品，代金券碎片--合成
toComposeCoupon = () => {
const { history } = this.props;
if(getParam('version')) {
const {history} = this.props
if (getParam('version')) {
SendMessageToApp("toCoupon")
}else {
history.push('/coupons/my-patch');
} else {
history.push('/coupons/my-patch')
}
}
// 奖品，指定课程代金券--使用
toUseCoupon = (id) => {
const { history } = this.props;
if(getParam('version')) {
const {history} = this.props
if (getParam('version')) {
SendMessageToApp("toCourse", id)
}else {
history.push(`/detail?id=${id}`);
} else {
history.push(`/detail?id=${id}`)
}
}
// 第三：奖品，通用课程代金券--使用
toCourseList = () => {
const { history } = this.props;
if(getParam('version')) {
const {history} = this.props
if (getParam('version')) {
SendMessageToApp('toQualityCourse')
}else {
history.push('/classify');
} else {
history.push('/classify')
}
}
// 第三：奖品，现金红包--提现
toFecthMoney = () => {
const { history } = this.props;
if(getParam('version')) {
const {history} = this.props
if (getParam('version')) {
SendMessageToApp('toAccount')
}else {
history.push('/scholarship');
} else {
history.push('/scholarship')
}
}
// 弹窗--隐藏
handleToHideWindow = (key) => {
const param = {};
param[key] = false;
this.setState(param);
const param = {}
param[key] = false
this.setState(param)
}
render() {
const { history, userInfo, country } = this.props;
const {history, userInfo, country} = this.props
const {
isEnd,
isEmpty,
......@@ -441,14 +441,14 @@ class MyTreasure extends Component {
prizeName,
rule,
treasureTime,
} = this.state;
} = this.state
return (
<div data-skip="treasure">
<HeaderBar title="我的宝箱" arrow={true} />
{(!browser.isAndroidApp && !browser.isIOSApp) && <HeaderBar title="我的宝箱" arrow={true}/>}
{
isEnd &&
<p className="activity-end__desc">
活动已结束<br />
活动已结束<br/>
{seconds}s后将自动返回首页
</p>
}
......@@ -562,8 +562,8 @@ class MyTreasure extends Component {
<CreateSuccess
data={createInfo}
handleToInvite={() => {
this.handleToInvite(createInfo.treasure_code);
this.handleToHideWindow('isCreate');
this.handleToInvite(createInfo.treasure_code)
this.handleToHideWindow('isCreate')
}}
/>
</Mask>
......@@ -585,4 +585,4 @@ class MyTreasure extends Component {
}
}
export default MyTreasure;
\ No newline at end of file
export default MyTreasure
src/components/activity/newyear-2019/preheat/LiveRoom/index.js
......@@ -25,6 +25,13 @@ class LiveRoom extends Component {
componentDidMount() {
this.getLiveInfo();
}
shouldComponentUpdate(nextProps, nextState, nextContext) {
if (this.props.isAppUpdate !== nextProps.isAppUpdate) {
this.getLiveInfo();
return false
}
return true
}
getLiveInfo = () => {
http.get(`${API.home}/activity/get_live_info`).then(res => {
const { code, data, msg } = res.data;
......
src/components/activity/newyear-2019/preheat/index.js
......@@ -133,11 +133,11 @@ export default class index extends Component {
</div>
{/* 大咖直播 */}
<LiveRoom/>
<LiveRoom isAppUpdate={this.state.isAppUpdate}/>
{/* 组队开宝箱 */}
{
treasure_stage === 1 && <TreasureBox getRemovable={this.getRemovable}/>
treasure_stage === 1 && <TreasureBox isAppUpdate={this.state.isAppUpdate} getRemovable={this.getRemovable}/>
}
{/*课程*/}
......
src/components/activity/newyear-2019/treasure-box/index.js
......@@ -16,7 +16,7 @@ class TreasureBox extends Component {
<div style={{textAlign: 'center', fontSize: '12px', color: '#FFDC1E', marginTop: '10px'}}>邀请好友组队一起开宝箱，满5人后将随机获得以下奖品~</div>
<Prizes showSystemNotices={true}/>
<UserBulletScreen/>
<TeamInfo getRemovable={this.props.getRemovable} />
<TeamInfo isAppUpdate={this.props.isAppUpdate} getRemovable={this.props.getRemovable} />
<TreasureRank history={this.props.history} />
</CommonContainer>
)
......
src/components/activity/newyear-2019/treasure-box/team.js
......@@ -83,11 +83,20 @@ class TeamInfo extends Component {
}
}
shouldComponentUpdate(nextProps, nextState, nextContext) {
if (this.props.isAppUpdate !== nextProps.isAppUpdate) {
this.getTeamInfo();
return false
}
return true
}
// 邀请好友组队
createTeam = () => {
if(this.props.user.hasError) {
this.toLogin();
} else {
sessionStorage.setItem('showShareTip', '1')
const {is_my_team, my_team: {treasure_code}} = this.state;
if(is_my_team) { // 有自己的队伍
// 直接跳转
......
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