Skip to content

M
mr-julyedu
Commit b1e87b6f by zhanghaozhe
Options

我的宝箱页面app去掉头部

parent a8644801
Showing with 190 additions and 164 deletions
src/components/activity/newyear-2019/common/prizes/prizes.scss
......@@ -116,7 +116,7 @@
}
}
& li:last-child{
& li:last-child {
display: flex;
align-items: center;
justify-content: center;
......@@ -173,6 +173,7 @@
height: 2px;
background: #fff;
border-radius: 1px;
.progress {
position: absolute;
right: 0;
......@@ -194,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/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>
}
......@@ -526,7 +526,7 @@ class MyTreasure extends Component {
successBindPhone={this.successBindPhone}
desc={
<>
<p className="phone-treasure__desc">恭喜您获得 {prizeName}</p>
<p className="phone-treasure__desc">恭喜您获得 {prizeName}</p>
<p className="phone-treasure__notice">为了您的账户安全，请于{treasureTime}前绑定手机号，过期将失效</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
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