Skip to content

M
mr-julyedu
Commit 58085a3d by xuzhenghua
Options

pull

parents 77423452 71b4f546
Showing with 745 additions and 236 deletions
src/common/addressPopup/index.js
......@@ -40,11 +40,14 @@ class AddressPopup extends Component {
}
handleToSubmit = (params = {}) => {
const { handleToHide } = this.props;
http.post(`${API.home}/sys/collect_info`, params).then(res => {
const { successBindAddress } = this.props;
http.post(`${API.home}/sys/update_address`, {
act_type: 'treasure',
...params
}).then(res => {
const {code, msg} = res.data;
if (code === 200) {
handleToHide();
successBindAddress();
} else {
Toast.info(msg, 2, null, false);
}
......@@ -84,6 +87,7 @@ class AddressPopup extends Component {
}}
render={({errors}) => (
<Form className="address-form" data-skip={skip}>
<h2 className="address-form__title">收货信息</h2>
{
prize ? (
<p className='address__prize'>您抽中了{prize}<span style={{'color': '#FF4000'}}>实物奖品</span></p>
......
src/common/addressPopup/index.scss
......@@ -22,6 +22,14 @@
[data-skip="year"] {
.address-form__title {
margin: 10px 0 0;
font-size: 18px;
color: #111;
text-align: center;
line-height: 1;
}
.address-form__subtitle {
margin: 0 15px;
}
......
src/common/bindPhone/index.js
......@@ -39,7 +39,7 @@ class BindPhone extends Component {
toFetchCountryNum = () => {
const { history, hideBindPhone } = this.props;
hideBindPhone();
history.push('/country');
history.push('/country?from=bind');
}
getCaptchaInstance = instance => {
......@@ -135,8 +135,8 @@ class BindPhone extends Component {
is_valid: 1, // is_valid 是否验证 1:验证（默认）,0不验证
}
).then(res => {
const { errno, data, msg } = res.data;
if(errno === 200 ) {
const { code, data, msg } = res.data;
if(code === 200 ) {
if(data.tip_info) {
handleToConfirmPhone(params, data.tip_info);
}else {
......@@ -180,6 +180,7 @@ class BindPhone extends Component {
}}
render={({values: {tel, code}, errors}) => (
<Form className="popup-form" data-skip={skip}>
<h2 className="popup-form__title">绑定手机号</h2>
{
desc &&
<div className="poup-form__desc">{desc}</div>
......
src/common/bindPhone/index.scss
......@@ -41,10 +41,17 @@
}
[data-skip="year"] {
.popup-form__title {
margin: 10px 0 0;
font-size: 18px;
color: #111;
text-align: center;
line-height: 1;
}
.popup-form__item {
width: 269px;
height: 40px;
}
.popup-form__button--num {
......@@ -60,6 +67,7 @@
.popup-form__button--bundle {
width: 270px;
height: 44px;
margin-bottom: 14px;
border-radius: 5px;
font-size: 16px;
}
......@@ -77,6 +85,7 @@
.captcha-container {
width: 269px;
height: 40px;
margin: 0 auto 15px;
}
......
src/common/confirmPhone/index.js
import React, { Component } from 'react';
import { Toast } from 'antd-mobile';
import { http } from '@/utils';
import './index.scss';
class ConfirmPhone extends Component {
......@@ -12,8 +14,8 @@ class ConfirmPhone extends Component {
is_valid: 0, // is_valid 是否验证 1:验证（默认）,0不验证
}
).then(res => {
const { errno, msg } = res.data;
if(errno === 200 ) {
const { code, msg } = res.data;
if(code === 200 ) {
successBindPhone();
}else {
Toast.info(msg, 2, null, false);
......@@ -22,9 +24,15 @@ class ConfirmPhone extends Component {
}
render() {
const { bindInfo = { }, desc, skip = 'year' } = this.props;
const {
bindInfo = { },
desc,
skip = 'year',
handleToCancle
} = this.props;
return (
<div className="popup-bind" data-skip={skip}>
<h2 className="popup-bind__title">绑定手机号</h2>
{
desc
? <div className="popup-bind__desc">{desc}</div>
......@@ -71,7 +79,7 @@ class ConfirmPhone extends Component {
<div className="popup-bind__footer">
<button
className="popup-bind__button popup-bind__button--cancle"
onClick={() => this.handleToClose(false)}>取消</button>
onClick={handleToCancle}>取消</button>
<button
className="popup-bind__button popup-bind__button--confirm"
onClick={this.continueBindPhone}>继续绑定</button>
......
src/common/confirmPhone/index.scss
......@@ -45,6 +45,14 @@
}
[data-skip="year"] {
.popup-bind__title {
margin: 10px 0 0;
font-size: 18px;
color: #111;
line-height: 1;
text-align: center;
}
.popup-bind__desc {
width: 269px;
font-size: 12px;
......@@ -69,6 +77,7 @@
.popup-bind__footer {
padding: 0 15px;
margin-bottom: 14px;
}
.popup-bind__button {
......
src/components/activity/newyear-2019/common/createSuccess/index.js 0 → 100644
import React from 'react';
import './index.scss';
export default (props) => {
console.log(props);
const {
data: {
team_num = 1,
lack_member = 4,
member = [],
},
handleToInvite
} = props;
const members = new Array(5).fill({});
return (
<div className="team-success">
<h2 className="team-success__title">创建成功</h2>
<p className="team-success__tip">
{<span>{team_num}</span>}号队伍 还差{<span>{lack_member}</span>}名队员即可获得宝箱哦~
</p>
<i className="team-success__icon"></i>
<ul className='team-success__member members'>
{
members.map((item, index) => {
const _member = member[index]
return (
<li className="member-item" key={index}>
{
_member && _member['is_captain'] && <sup className="member-item__captain">队长</sup>
}
<img
className="member-item__avatar"
src={
_member
? _member['head_img']
: "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/not-joined-placeholder.png"
}
alt=""/>
</li>
);
})
}
</ul>
<button type={'button'} className="team-success__button" onClick={handleToInvite}>邀请好友加入队伍</button>
</div>
)
}
\ No newline at end of file
src/components/activity/newyear-2019/common/createSuccess/index.scss 0 → 100644
.team-success__title {
margin: 10px 0 0;
font-size: 18px;
color: #111;
text-align: center;
line-height: 1;
}
.team-success__tip {
margin: 12px 0 0;
font-size: 15px;
color: #666;
text-align: center;
line-height: 1;
span {
color: #FF2121;
}
}
.team-success__icon {
display: block;
width: 120px;
height: 72px;
margin: 20px auto;
background-size: cover;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png');
}
.team-success__member {
display: flex;
padding: 0 12px;
.member-item {
position: relative;
margin: 0 8px;
}
.member-item__captain {
position: absolute;
top: -13px;
right: -10px;
width: 30px;
height: 16px;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 8px 8px 8px 0;
color: #0E7442;
font-size: 10px;
text-align: center;
line-height: 16px;
background: rgba(255, 227, 0, 1);
}
.member-item__avatar {
width: 44px;
height: 44px;
border-radius: 50%;
}
}
.team-success__button {
display: block;
width: 270px;
height: 44px;
margin: 20px auto;
padding: 0;
border: 1px solid #090909;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
color: #090909;
line-height: 44px;
background-color: #FFE319;
}
\ No newline at end of file
src/components/activity/newyear-2019/common/prizes/index.js
......@@ -115,6 +115,9 @@ class Prizes extends Component {
)
})
}
<li>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/prize-placeholder.png" alt=""/>
</li>
</ul>
</div>
<div className="show-more" onClick={this.showMore}>
......
src/components/activity/newyear-2019/common/splitSuccess/index.js
import React, { Component } from 'react';
import { http } from '@/utils';
import './index.scss';
class SplitSuccess extends Component {
......@@ -15,7 +16,17 @@ class SplitSuccess extends Component {
http.post(`${API.home}/sys/split_treasure`, params).then(res => {
const { code, data } = res.data;
if(code === 200) {
successSplitTreasure();
debugger;
successSplitTreasure(data);
if(data.bind_phone) {
setTimeout(() => {
handleToBindPhone(data.id);
}, 500);
}else if(data.bind_address) {
setTimeout(() => {
handleToBindAddress(data.id);
}, 500);
}
}else if(code === 12000) {
// 请先绑定手机号再拆宝箱
handleToBindPhone();
......@@ -23,7 +34,7 @@ class SplitSuccess extends Component {
// 请先填写收货地址再拆宝箱
handleToBindAddress();
}
})
});
}
render() {
......@@ -39,6 +50,7 @@ class SplitSuccess extends Component {
} = this.props;
return (
<div data-skip="split">
<h2 className="split-success__title">恭喜你获得</h2>
<div className="split-success__image">
<img src={prize_img} alt=""/>
</div>
......
src/components/activity/newyear-2019/common/splitSuccess/index.scss
[data-skip="split"] {
text-align: center;
.split-success__title {
margin: 10px 0 0;
font-size: 18px;
color: #111;
line-height: 1;
}
.split-success__image {
width: 130px;
height: 103px;
margin: 10px auto 0;
margin: 12px auto 0;
border: 2px solid #CDCDCD;
box-sizing: border-box;
overflow: hidden;
img {
display: block;
......@@ -37,7 +45,7 @@
}
.split-success__member {
margin: 18px 0 0;
margin: 18px 18px 0;
padding: 4px 12px;
border-radius: 6px;
background-color: #EFEFEF;
......@@ -82,7 +90,7 @@
.split-success__jump {
width: 270px;
height: 44px;
margin: 18px 0 0;
margin: 18px 25px 8px;
border: 1px solid #090909;
border-radius: 5px;
box-sizing: border-box;
......
src/components/activity/newyear-2019/common/user-bullet-screen/bullet-screen.scss
......@@ -28,6 +28,9 @@
span {
font-size: 12px;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
#user-bullet-screen {
......
src/components/activity/newyear-2019/common/user-bullet-screen/index.js
......@@ -51,8 +51,7 @@ class UserBulletScreen extends Component {
return `
<li class="swiper-slide">
<img class="avatar" src="${item.avatar_file}" alt="">
<span>${item.user_name}</span>
<span>${item.msg}</span>
<span>${item.user_name} ${item.msg}</span>
</li>
`
})
......@@ -87,8 +86,7 @@ class UserBulletScreen extends Component {
<li className='swiper-slide' key={index}>
<img src={item['avatar_file']}
alt="" className="avatar"/>
<span>{item.user_name}</span>
<span>{item.msg}</span>
<span>{item.user_name} {item.msg}</span>
</li>
)
})
......
src/components/activity/newyear-2019/landing/index.js
......@@ -24,17 +24,24 @@ class Landing extends Component {
teamData: {
member: []
},
origin: getParam('origin'),
origin: sessionStorage.getItem('isCaptain') ? 1 : getParam('origin'),
treasure_code: getParam('treasure_code'),
activityEnd: false,
notices: [],
rule: ''
rule: '',
isCaptain: getParam('origin') == 1
}
componentDidMount() {
this.fetchPageData()
}
componentDidUpdate(prevProps) {
if (prevProps.user.hasError !== this.props.user.hasError && !this.props.user.hasError) {
this.fetchPageData()
}
}
fetchPageData = ({origin = this.state.origin, treasure_code = this.state.treasure_code} = {}) => {
http.post(`${API.home}/sys/treasure/team`, {
......@@ -46,12 +53,14 @@ class Landing extends Component {
if (code == 200) {
this.setState({
teamData: data
teamData: data,
isCaptain: sessionStorage.getItem('isCaptain') ? sessionStorage.getItem('isCaptain') : getParam('origin') == 1
})
let searchParams = new URLSearchParams(window.location.search)
if (searchParams.get('origin') === '1' && !browser.isWeixin) {
searchParams.set('origin', '2')
sessionStorage.setItem('isCaptain', '1')
window.history.replaceState(null, '', `landing?${searchParams.toString()}`)
}
......@@ -111,7 +120,7 @@ class Landing extends Component {
})
}
joinSuccess = ({id, status, my_team: {team_num, lack_member, is_team}}) => {
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'}>
......@@ -125,7 +134,7 @@ class Landing extends Component {
status === 2
? '组队成功，恭喜你获得一个宝箱！'
: is_team
? `您的${<span>{team_num}</span>}号队伍还差${<span>{lack_member}</span>}人即可获得宝箱`
? <>您的{<span>{team_num}</span>}号队伍还差{<span>{lack_member}</span>}人即可获得宝箱</>
: '自己当队长，宝箱内有专属奖品哦~'
}
</div>
......@@ -140,77 +149,87 @@ class Landing extends Component {
/>
: is_team
? <button type='button'
onClick={this.inviteMembers.bind(this, this.state.teamData['my_team']['treasure_code'])}>继续组队</button>
onClick={this.inviteMembers.bind(this, treasure_code)}>继续组队</button>
: <button type="button" onClick={this.createMyTeam}>创建我的队伍</button>
}
</div>,
closeIcon: this.closeIcon,
close: () => {
this.fetchPageData()
this.getFollowStatus()
.then(isFollow => {
!isFollow && this.remind('join', getParam('treasure_code'))
})
}
})
}
inviteMembers = (treasure_code) => {
inviteMembers = treasure_code => {
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`),
link: `${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')
history.replace(`${match.path}?treasure_code=${treasure_code}&origin=${1}`)
this.createTeamSuccessPopup && this.createTeamSuccessPopup.remove() && (this.createTeamSuccessPopup = null)
this.joinSuccessPopup && this.joinSuccessPopup.remove() && (this.joinSuccessPopup = null)
this.fetchPageData({treasure_code, origin: 1})
this.setState({
isCaptain: true
})
}
getFollowStatus = () => http.get(`${API.home}/sys/user/isFollowWeChat`)
.then(res => {
const {code, data} = res.data
return code === 200 && data['is_follow']
})
createTeamSuccess = (member, team_num, lack_member, treasure_code) => {
let isFollow = false
this.joinSuccessPopup && this.joinSuccessPopup.remove() && (this.joinSuccessPopup = null)
http.get(`${API.home}/sys/user/isFollowWeChat`)
.then(res => {
const {errno, status} = res.data
if (errno === 0 && status === 1) {
isFollow = true
}
})
this.createTeamSuccessPopup = Popup({
title: '创建成功',
className: 'landing-create-success',
content: <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'>
{
new Array(5).fill('a').map((item, index) => {
const _member = member[index]
return <li key={index}>
{_member && _member['is_captain'] && <sup>队长</sup>}
<img
className={'avatar'}
src={
_member
? _member['head_img']
: "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/not-joined-placeholder.png"
}
alt=""/>
</li>
})
this.getFollowStatus()
.then(isFollow => {
this.createTeamSuccessPopup = Popup({
title: '创建成功',
className: 'landing-create-success',
content: <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'>
{
new Array(5).fill('a').map((item, index) => {
const _member = member[index]
return <li key={index}>
{_member && _member['is_captain'] && <sup>队长</sup>}
<img
className={'avatar'}
src={
_member
? _member['head_img']
: "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/not-joined-placeholder.png"
}
alt=""/>
</li>
})
}
</ul>
<button type={'button'} onClick={this.inviteMembers.bind(this, treasure_code)}>邀请好友加入队伍</button>
</div>,
closeIcon: this.closeIcon,
afterClose: () => {
if (!isFollow) {
this.remind('create', treasure_code)
}
}
</ul>
<button type={'button'} onClick={this.inviteMembers.bind(this, treasure_code)}>邀请好友加入队伍</button>
</div>,
closeIcon: this.closeIcon,
afterClose: () => {
if (!isFollow) {
this.remind('create', treasure_code)
}
}
})
})
})
}
remind = (type = 'create', treasure_code) => {
......@@ -232,7 +251,7 @@ class Landing extends Component {
<div className="des">长按识别/扫码 关注【七月在线】服务号即可预约</div>
</div>,
close: () => {
history.replace(`${match.path}?treasure_code=${treasure_code}&origin=1`)
// history.replace(`${match.path}?treasure_code=${treasure_code}&origin=1`)
this.fetchPageData({
treasure_code,
origin: '1'
......@@ -283,7 +302,10 @@ class Landing extends Component {
closable: false,
close: () => {
sessionStorage.removeItem('showShareTip')
this.remind()
this.getFollowStatus()
.then(isFollow => {
!isFollow && this.remind('create', getParam('treasure_code'))
})
}
})
}
......@@ -334,9 +356,9 @@ class Landing extends Component {
prize_info,
my_team
},
activityEnd
activityEnd,
isCaptain
} = this.state
/*
* status
* 1-自己的队伍
......@@ -355,9 +377,10 @@ class Landing extends Component {
<img className='main-avatar'
src={head_img} alt=""/>
{
status === 1 && <div className="des">邀请好友加入队伍，开宝箱领取丰厚奖品~</div>
status === 1
? <div className="des">邀请好友加入队伍，开宝箱领取丰厚奖品~</div>
: <div className="des">加入我的<span>{team_num}</span>号队伍，一起开宝箱领取丰厚奖品~</div>
}
<div className="des">加入我的<span>{team_num}</span>号队伍，一起开宝箱领取丰厚奖品~</div>
<Prizes showSystemNotices={false}/>
<BulletScreen/>
<div className="group">
......@@ -465,8 +488,8 @@ class Landing extends Component {
</button>
}
{
prize_info && !activityEnd && <div className="certainly-prompt">
第{prize_info.stage_no}次必中 {prize_info.name}
prize_info && prize_info.length !== 0 && !activityEnd && !isCaptain && <div className="certainly-prompt">
第{prize_info[0].stage_no}次必中 {prize_info[0].name}
</div>
}
{
......@@ -480,8 +503,14 @@ class Landing extends Component {
}
</div>
</BoxContainer>
<WhiteSpace size={'xl'}/>
<YearCourse></YearCourse>
{
!isCaptain &&
<>
<WhiteSpace size={'xl'}/>
<YearCourse getSum={() => {
}}/>
</>
}
</div>
)
}
......
src/components/activity/newyear-2019/myTreasure/index.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { HeaderBar, Popup } from '@common';
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 } from '@/utils';
import Mask from './mask';
import './index.scss';
import { split } from 'react-ace';
@connect(({country, user}) => ({
country,
......@@ -26,11 +29,19 @@ class MyTreasure extends Component {
teams: [],
ids: [], // 未拆宝箱统计
bindInfo: {}, // 绑定手机号冲突信息
isPhone: false,
isAddress: false,
isConfirm: false,
confirmInfo: {},
isSplit: false,
isCreate: false,
createInfo: {},
prizeName: '', // 当前商品的名字
};
}
componentDidMount() {
const { isEnd, bindInfo } = this.state;
const { isEnd } = this.state;
if (isEnd) {
this.startCountDown();
}
......@@ -38,18 +49,14 @@ class MyTreasure extends Component {
this.fetchActivityStatus();
}
componentWillUnmount() {
if(this.phoneInstance) {
this.phoneInstance.close();
}
if(this.confrimInstance) {
this.confrimInstance.close();
}
if(this.splitInstance) {
this.splitInstance.close();
}
if(this.addressInstance) {
this.addressInstance.close();
// 页面加载时，初始化当前需要绑定手机号的奖品名字
initPrizeName = (params) => {
const key = this.fetchCurrentTeamId(params);
const data = params.filter(item => item.id == key);
if(data.length > 0) {
this.setState({
prizeName: data[0]['prize_name']
});
}
}
......@@ -68,59 +75,55 @@ class MyTreasure extends Component {
}
}
// 绑定手机号--展示
handleToBindPhone = (id) => {
const { history, country } = this.props;
this.phoneInstance = Popup({
title: '绑定手机号',
content: <BindPhone
history={history}
country={country}
hideBindPhone={this.hideBindPhone.bind(this)}
handleToConfirmPhone={this.handleToConfirmPhone}
successBindPhone={() => this.successBindPhone(id)}
desc={
<>
<p className="phone-treasure__desc">恭喜您获得 奖品名称（现金）</p>
<p className="phone-treasure__notice">为了您的账户安全，请于2019年12月31日前绑定手机号，过期将失效</p>
</>
}
/>,
close: () => new Promise(resolve => {
this.phoneInstance = null;
resolve()
})
});
// 获取当前需要绑定手机的队伍id，当拆到需要绑定手机号/地址的宝箱时，如果不进行绑定则无法拆下一个
fetchCurrentTeamId = (data = []) => {
const arr = data.filter(item => item.is_open && (item.bind_address || item.bind_address));
if(arr.length > 0) {
return arr[0]['id'];
}else {
return '';
}
}
// 绑定手机号--隐藏
hideBindPhone() {
if (this.phoneInstance) {
this.phoneInstance.close();
// 页面加载时，是否是从选择区号页面过来的
// TODO,当同时展示拆宝箱成功弹窗和绑定手机号弹窗时，选择区号返回时未展示拆宝箱成功弹窗（和产品确认，后续优化）
isShowBindPhone = (data) => {
const { country } = this.props;
if(country.from) {
const id = this.fetchCurrentTeamId(data);
this.handleToBindPhone(id);
}
}
// 绑定手机号--展示
handleToBindPhone = (id) => {
this.setState({
isPhone: true,
});
}
// 绑定手机号--确认
handleToConfirmPhone = (params, bindInfo) => {
this.confrimInstance = Popup({
title: '绑定确认',
content: <ConfirmPhone
data={params}
bindInfo={bindInfo}
successBindPhone={this.successBindPhone}
/>,
close: () => new Promise(resolve => {
this.confrimInstance = null;
resolve()
})
this.handleToHideWindow('isPhone');
this.setState({
confirmInfo: {
params,
bindInfo,
},
isConfirm: true,
});
}
// 绑定手机号--成功
successBindPhone = (id) => {
const { teams } = this.state;
successBindPhone = () => {
this.setState({
isPhone: false,
isConfirm: false,
});
const{ teams, splitInfo } = this.state;
const teamId = this.fetchCurrentTeamId(teams);
const data = teams.map(item => {
if(item.id == id) {
if(item.id == teamId) {
if(item.bind_address) {
this.handleToBindAddress();
}
......@@ -131,51 +134,31 @@ class MyTreasure extends Component {
return item;
})
this.setState({
teams: data
teams: data,
splitInfo: Object.assign({}, splitInfo, {
bind_phone: false
})
});
}
// 拆宝箱--拆
toSplitTreasure = (params) => {
const { ids } = this.state;
http.post(`${API.home}/sys/split_treasure`, params).then(res => {
const { code, data } = res.data;
if(code === 200) {
// 拆宝箱弹窗--成功
this.splitInstance = Popup({
title: '恭喜你获得',
skip: 'year',
content: <SplitSuccess
ids={ids}
data={data}
handleToInvite={this.handleToInvite}
successSplitTreasure={() => this.successSplitTreasure(data)}
>
<PrizeStatus
data={data}
handleToBindPhone={this.handleToBindPhone}
handleToBindAddress={this.handleToBindAddress}
toComposeCoupon={this.toComposeCoupon}
toUseCoupon={this.toUseCoupon}
toCourseList={this.toCourseList}
toFecthMoney={this.toFecthMoney}
/>
</SplitSuccess>,
close: () => new Promise(resolve => {
this.splitInstance = null;
resolve()
})
});
this.showSuccessSplit(data);
// 跟新队伍状态
// 更新队伍状态
this.successSplitTreasure(data);
if(data.bind_phone) {
setTimeout(() => {
this.handleToBindPhone();
this.handleToBindPhone(data.id);
}, 500);
}else if(data.bind_address) {
setTimeout(() => {
this.handleToBindAddress();
this.handleToBindAddress(data.id);
}, 500);
}
}else if(code === 12000) {
......@@ -188,7 +171,7 @@ class MyTreasure extends Component {
});
}
// 拆宝箱--成功
// 拆宝箱--成功，更新数据
successSplitTreasure = (params) => {
const { userInfo } = this.props;
const { teams } = this.state;
......@@ -198,6 +181,8 @@ class MyTreasure extends Component {
bind_phone: params.bind_phone,
bind_address: params.bind_address,
is_open: true,
prize_type: params.prize_type,
prize_data: params.prize_data,
member: item.member.map(val => {
if(val.uid == userInfo.uid) {
return Object.assign({}, val, {
......@@ -214,28 +199,46 @@ class MyTreasure extends Component {
});
this.initNoSplitInfo(data);
this.setState({
teams: data
teams: data,
splitInfo: params,
prizeName: params.prize_name
});
}
// 拆宝箱--成功，展示弹窗
showSuccessSplit = (data) => {
this.setState({
isSplit: true,
splitInfo: data
});
}
// 绑定地址--展示
handleToBindAddress = () => {
this.addressInstance = Popup({
title: '收货信息',
skip: 'year',
content: <AddressPopup
skip="year"
tip={
<>
<p className="address-treasure__desc">恭喜您获得 奖品名称奖品名称奖品名称</p>
<p className="address-treasure__notice">请及时填写/确认收货信息，活动结束后统一邮寄</p>
</>
}
handleToHide={() => this.addressInstance.close()}
/>,
close: () => new Promise(resolve => {
this.addressInstance = null;
resolve()
handleToBindAddress = (id) => {
this.setState({
isAddress: true
});
}
// 绑定地址--成功
successBindAddress = () => {
this.setState({
isAddress: false,
});
const{ teams, splitInfo } = this.state;
const teamId = this.fetchCurrentTeamId(teams);
const data = teams.map(item => {
if(item.id == teamId) {
return Object.assign({}, item, {
bind_address: false,
});
}
return item;
})
this.setState({
teams: data,
splitInfo: Object.assign({}, splitInfo, {
bind_address: false
})
});
}
......@@ -249,6 +252,8 @@ class MyTreasure extends Component {
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.setState({
isEmpty: false,
teams: data.team,
......@@ -294,6 +299,7 @@ class MyTreasure extends Component {
});
}
// 活动结束--倒计时
startCountDown = () => {
const { history } = this.props;
let { seconds } = this.state;
......@@ -317,17 +323,31 @@ class MyTreasure extends Component {
}, 1000);
}
updatedTreasureStatus = (id) => {
console.log(id);
}
// 邀请好友
handleToInvite = () => {
handleToInvite = (treasure_code) => {
const { history } = this.props;
const { team } = this.state;
history.push(`/activity/newyear-2019/landing?treasure_code=${team.treasure_code}&origin=1`);
if(this.splitInstance) {
this.splitInstance.close();
history.push(`/activity/newyear-2019/landing?treasure_code=${treasure_code}&origin=1`);
}
// 组队开宝箱
toOrganizeTeam = () => {
const { history, userInfo: { uid = '' } } = this.props;
if(uid === '') {
history.push('/passport')
}else {
http.get(`${API.home}/sys/treasure/createMyTeam`).then(res => {
const { code, data } = res.data;
if(code === 200) {
const teams = [];
teams[0] = data;
this.setState({
isEmpty: false,
teams,
isCreate: true,
createInfo: data
});
}
});
}
}
......@@ -338,9 +358,9 @@ class MyTreasure extends Component {
}
// 奖品，指定课程代金券--使用
toUseCoupon = () => {
toUseCoupon = (id) => {
const { history } = this.props;
history.push(`/detail?id=${coupon['limit_course']}`);
history.push(`/detail?id=${id}`);
}
// 第三：奖品，通用课程代金券--使用
......@@ -355,9 +375,34 @@ class MyTreasure extends Component {
history.push('/scholarship');
}
// 弹窗--隐藏
handleToHideWindow = (key) => {
const param = {};
param[key] = false;
this.setState(param);
}
render() {
const { history, userInfo } = this.props;
const { isEnd, isEmpty, seconds, teams, ids } = this.state;
const { history, userInfo, country } = this.props;
const {
isEnd,
isEmpty,
seconds,
teams,
ids,
isPhone,
isAddress,
isConfirm,
isSplit,
splitInfo = {},
confirmInfo: {
params = {},
bindInfo = {}
},
isCreate,
createInfo,
prizeName,
} = this.state;
return (
<div data-skip="treasure">
<HeaderBar title="我的宝箱" arrow={true} />
......@@ -374,11 +419,11 @@ class MyTreasure extends Component {
<i className="team-empty__icon"></i>
<p className="team-empty__desc">您当前还没有宝箱哦~</p>
<p className="team-empty__desc">快去组队邀请好友一起开宝箱吧！</p>
<button className="team-empty__button">组队开宝箱</button>
<button className="team-empty__button" onClick={this.toOrganizeTeam}>组队开宝箱</button>
</>
}
{
(!isEnd && !isEmpty) &&
(!isEnd && !isEmpty && userInfo.uid) &&
<div className="treasure-content">
{
teams.map((item, index) => (
......@@ -402,13 +447,87 @@ class MyTreasure extends Component {
handleToBindPhone={this.handleToBindPhone}
handleToBindAddress={this.handleToBindAddress}
toComposeCoupon={this.toComposeCoupon}
toUseCoupon={this.toUseCoupon}
toUseCoupon={() => this.toUseCoupon(item.prize_data)}
toCourseList={this.toCourseList}
toFecthMoney={this.toFecthMoney}
/>
</TreasureTeam>
))
}
{/* 拆宝箱--弹窗，成功 */}
<Mask visible={isSplit} handleToHide={() => this.handleToHideWindow('isSplit')}>
<SplitSuccess
ids={ids}
data={splitInfo}
handleToInvite={this.handleToInvite}
handleToBindPhone={this.handleToBindPhone}
handleToBindAddress={this.handleToBindAddress}
successSplitTreasure={this.successSplitTreasure}
>
<PrizeStatus
data={splitInfo}
handleToBindPhone={this.handleToBindPhone}
handleToBindAddress={this.handleToBindAddress}
toComposeCoupon={this.toComposeCoupon}
toUseCoupon={() => this.toUseCoupon(splitInfo.prize_data)}
toCourseList={this.toCourseList}
toFecthMoney={this.toFecthMoney}
/>
</SplitSuccess>
</Mask>
{/*绑定手机号--弹窗 */}
<Mask visible={isPhone} handleToHide={() => this.handleToHideWindow('isPhone')}>
<BindPhone
history={history}
country={country}
hideBindPhone={() => this.handleToHideWindow('isPhone')}
handleToConfirmPhone={this.handleToConfirmPhone}
successBindPhone={this.successBindPhone}
desc={
<>
<p className="phone-treasure__desc">恭喜您获得 奖品名称（{prizeName}）</p>
<p className="phone-treasure__notice">为了您的账户安全，请于2019年12月31日前绑定手机号，过期将失效</p>
</>
}
/>
</Mask>
{/* 绑定手机号--弹窗，确认 */}
<Mask visible={isConfirm} handleToHide={() => this.handleToHideWindow('isConfirm')}>
<ConfirmPhone
data={params}
bindInfo={bindInfo}
handleToCancle={() => this.handleToHideWindow('isConfirm')}
successBindPhone={this.successBindPhone}
/>
</Mask>
{/* 绑定地址--弹窗 */}
<Mask visible={isAddress} handleToHide={() => this.handleToHideWindow('isAddress')}>
<AddressPopup
skip="year"
tip={
<>
<p className="address-treasure__desc">恭喜您获得 奖品名称奖品名称奖品名称</p>
<p className="address-treasure__notice">请及时填写/确认收货信息，活动结束后统一邮寄</p>
</>
}
successBindAddress={this.successBindAddress}
/>
</Mask>
{/* 组队成功 */}
<Mask visible={isCreate} handleToHide={() => this.handleToHideWindow('isCreate')}>
<CreateSuccess
data={createInfo}
handleToInvite={() => {
this.handleToInvite(createInfo.treasure_code);
this.handleToHideWindow('isCreate');
}}
/>
</Mask>
</div>
}
</div>
......
src/components/activity/newyear-2019/myTreasure/index.scss
......@@ -49,9 +49,24 @@
}
}
// 所有弹窗
.popup-container {
&.year {
.close-icon {
position: absolute;
bottom: 80px;
left: 0;
right: 0;
margin: 0 auto;
}
}
}
// 地址弹窗--宝箱
.address-treasure__desc {
margin: 10px 0 0;
margin: 12px 0 0;
font-size: 14px;
color: #666;
line-height: 1;
......@@ -67,7 +82,7 @@
// 绑定手机弹窗--宝箱
.phone-treasure__desc {
width: 269px;
margin: 10px 15px 0;
margin: 10px 25px 0;
font-size: 14px;
color: #666;
line-height: 1;
......@@ -75,7 +90,7 @@
.phone-treasure__notice {
width: 269px;
margin: 9px 15px 15px;
margin: 9px 25px 15px;
font-size: 12px;
color: #FF2121;
line-height: 18px;
......
src/components/activity/newyear-2019/myTreasure/mask.js 0 → 100644
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './mask.scss';
const Root = document.querySelector('body');
class Mask extends Component {
constructor(props) {
super(props);
if(!this.el) {
this.el = document.createElement('div');
}
}
componentDidMount() {
Root.appendChild(this.el);
}
componentWillUnmount() {
Root.removeChild(this.el);
}
render() {
const { visible, handleToHide } = this.props;
if(visible) {
return ReactDOM.createPortal(
(
<div className="mask">
<div className="mask-content">
{this.props.children}
</div>
<div className="mask-footer">
<i className="mask-button__close" onClick={handleToHide}></i>
</div>
</div>
),
this.el
);
}else {
return null;
}
}
}
export default Mask;
\ No newline at end of file
src/components/activity/newyear-2019/myTreasure/mask.scss 0 → 100644
.mask {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
color:#fff;
background-color: rgba(0, 0, 0, .5);
}
.mask-content {
min-width: 200px;
min-height: 100px;
padding: 10px 0;
border-radius: 5px;
box-sizing: border-box;
background-color: #fff;
}
.mask-footer {
margin-top: 33px;
}
.mask-button__close {
display: inline-block;
width: 33px;
height: 33px;
background-size: cover;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/close-btn.png');
}
\ No newline at end of file
src/components/activity/newyear-2019/myTreasure/prize.js
......@@ -33,6 +33,14 @@ export default (props) => {
</a>
}
{/* 第三：奖品，实物 */}
{
(!bind_phone && !bind_address && prize_type === 1) &&
<a className="team-result" onClick={handleToBindAddress}>
<span>查看/修改收货信息</span>
</a>
}
{/* 第三：奖品，代金券碎片 */}
{
(!bind_phone && !bind_address && prize_type === 6) &&
......
src/components/activity/newyear-2019/myTreasure/team.js
......@@ -36,7 +36,7 @@ class TreasureTeam extends Component {
team: Object.assign({}, arr, {
member
}),
currentMember: member.filter(item => item.uid == userInfo.uid)[0]
currentMember: userInfo.uid? member.filter(item => item.uid == userInfo.uid)[0] : {}
});
}
......@@ -83,6 +83,7 @@ class TreasureTeam extends Component {
} = this.state;
const {
toSplitTreasure,
userInfo,
children
} = this.props;
return (
......@@ -157,8 +158,16 @@ class TreasureTeam extends Component {
{
(status === 2 && is_open) &&
<>
<p className="team-prize">{currentMember.prize_name}</p>
{children}
{
currentMember.prize_name
? <p className="team-prize">{currentMember.prize_name}</p>
: <p className="team-prize">尚未拆开宝箱</p>
}
{
currentMember.uid == userInfo.uid
? children
: null
}
</>
}
</div>
......
src/components/activity/newyear-2019/preheat/YearCourse/index.js
......@@ -404,7 +404,7 @@ class YearCourse extends Component {
<div className="coupon-course__footer">
{
item.is_buy == 1 &&
<a toCourse={this.toCourse} className="btn to-study">开始学习</a>
<a onClick={() => this.toCourse(item.course_id)} className="btn to-study">开始学习</a>
}
{
item.is_buy == 0 &&
......@@ -440,7 +440,7 @@ class YearCourse extends Component {
<div className="coupon-course__footer">
{
item.is_buy == 1 &&
<a toCourse={this.toCourse} className="btn to-study">开始学习</a>
<a onClick={() => this.toCourse(item.course_id)} className="btn to-study">开始学习</a>
}
{
item.is_buy == 0 &&
......
src/components/activity/newyear-2019/preheat/index.js
......@@ -7,9 +7,10 @@ import TreasureNav from './nav'
import CommonPopup from './../common/commonPopup/index'
import cookie from "js-cookie"
import {setCurrentUser, startFetchUser} from "@/store/userAction"
import {SendMessageToApp, getParam} from '@/utils'
import {SendMessageToApp, getParam, http} from '@/utils'
import {addDays} from "date-fns"
import {connect} from "react-redux"
import { Toast } from 'antd-mobile';
@connect(state => ({
user: state.user
......@@ -17,6 +18,10 @@ import {connect} from "react-redux"
export default class index extends Component {
state = {
removable: 0, // 未拆宝箱的数量
currentOpenId: 0, // 当前要拆的宝箱的队伍的ID
treasure_stage: 0, // 宝箱的活动阶段
active_stage: 0, // 整个活动的阶段
userInfoList: [],
userInfo: {},
isAppUpdate: false,
......@@ -30,6 +35,8 @@ export default class index extends Component {
window['loginInfo'] = result => {
_this.loginInfo(result)
}
_this.getStage();
}
// 获取app登录数据
......@@ -90,6 +97,47 @@ export default class index extends Component {
})
}
// 获取未拆宝箱数量
getRemovable = (removable, currentOpenId) => {
this.setState({
removable,
currentOpenId,
})
}
// 跳转到我的宝箱列表页
toBoxList = () => {
const isLogin = !this.props.user.hasError
const {currentOpenId} = this.state;
let search = '';
if(currentOpenId) {
search = `?id=${currentOpenId}`;
}
if (isLogin) {
this.props.history.push(`/year/yearTreasure${search}`)
} else {
if (!getParam('version')) {
this.props.history.push('/passport/login')
} else {
SendMessageToApp("toLogin")
}
}
}
// 获取活动以及宝箱的阶段
getStage = () => {
http.get(`${API.home}/activity/stage`).then(res => {
const { code, data, msg } = res.data;
if(code === 200) {
// treasure_stage，宝箱阶段，0-不在活动时间，1-活动时间内
this.setState({
treasure_stage: data.treasure_stage
})
}else{
Toast.info(msg, 2);
}
});
}
toYearWish = () => {
const isLogin = !this.props.user.hasError
if (isLogin) {
......@@ -111,33 +159,41 @@ export default class index extends Component {
}
render() {
const {banner} = this.state
const {banner, removable, treasure_stage} = this.state
return (
<div className={'year-index'}>
<div className="banner-treasure">
<div id="banner" className="banner-treasure__header"
style={{backgroundImage: `url(${banner})`}}></div>
<div className="banner-treasure__nav">
<TreasureNav id="banner"/>
<TreasureNav id="banner" treasure_stage={treasure_stage}/>
</div>
<div className="banner-treasure__decorate"></div>
</div>
{/*浮框*/}
<div className='nav-right'>
<a href="" className='nav-right__link'>
<span onClick={this.toBoxList} className='nav-right__link'>
未拆宝箱
<i className="nav-right__number">2</i>
</a>
{
removable > 0 &&
<i className="nav-right__number">{removable}</i>
}
</span>
<a onClick={() => this.toYearWish()} className='nav-right__link'>
心愿单
<i className="nav-right__number">{this.state.txt1}</i>
{
this.state.txt1 > 0 &&
<i className="nav-right__number">{this.state.txt1}</i>
}
</a>
</div>
{/* 大咖直播 */}
<LiveRoom/>
{/* 组队开宝箱 */}
<TreasureBox/>
{
treasure_stage === 1 && <TreasureBox getRemovable={this.getRemovable} />
}
{/*课程*/}
<YearCourse isAppUpdate={this.state.isAppUpdate} getSum={this.sonToPar.bind(this)}/>
......
src/components/activity/newyear-2019/preheat/nav.js
......@@ -25,22 +25,21 @@ class TreasureNav extends Component {
},
{
id: 'year-free',
name: '免费专区'
name: '免费学'
},
{
id: 'year-group',
name: '一元拼团'
name: '1分拼团'
},
{
id: 'year-discount',
name: '一折专区'
name: '抄低专区'
},
]
};
}
componentDidMount() {
this.initNav();
window.addEventListener('scroll', this.calcNavActive)
}
......@@ -48,24 +47,22 @@ class TreasureNav extends Component {
window.removeEventListener('scroll', this.calcNavActive);
}
initNav = () => {
const { navs } = this.state;
http.get(`${API.home}/activity/stage`).then(res => {
const { code, data } = res.data;
if(code === 200) {
componentWillReceiveProps(nextProps) {
this.initNav(nextProps.treasure_stage);
}
// treasure_stage，宝箱阶段，0-不在活动时间，1-活动时间内
if(data.treasure_stage === 0) {
this.setState({
formatNavs: navs.filter(item => item.id !== 'year-treasure')
});
}else {
this.setState({
formatNavs: navs
})
}
}
});
initNav = (treasure_stage) => {
let {navs} = this.state;
// treasure_stage，宝箱阶段，0-不在活动时间，1-活动时间内
if(treasure_stage === 0) {
this.setState({
formatNavs: navs.filter(item => item.id !== 'year-treasure')
});
}else {
this.setState({
formatNavs: navs
})
}
}
calcNavActive = () => {
......
src/components/activity/newyear-2019/treasure-box/index.js
......@@ -6,13 +6,16 @@ import Prizes from "@components/activity/newyear-2019/common/prizes"
import UserBulletScreen from "@components/activity/newyear-2019/common/user-bullet-screen"
class TreasureBox extends Component {
constructor(props) {
super(props);
}
render() {
return (
<CommonContainer id="year-treasure" title={'组队开宝箱'}>
<div style={{textAlign: 'center', fontSize: '12px', color: '#FFDC1E', marginTop: '10px'}}>邀请好友组队一起开宝箱，满5人后将随机获得以下奖品~</div>
<Prizes showSystemNotices={true}/>
<UserBulletScreen/>
<TeamInfo />
<TeamInfo getRemovable={this.props.getRemovable} />
<TreasureRank />
</CommonContainer>
)
......
src/components/activity/newyear-2019/treasure-box/team.js
......@@ -40,6 +40,11 @@ class TeamInfo extends Component {
removable_data,
my_team
})
let currentId = null;
if(info.removable > 0) {
currentId = removable_data[0].id;
}
this.props.getRemovable(info.removable, currentId);
} else {
Toast.info(msg);
}
......
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