Skip to content

M
mr-julyedu
Commit 4976342b by FE
Options

split first step success

parent 844f037b
Showing with 257 additions and 198 deletions
src/common/bindPhone/index.js
......@@ -7,11 +7,12 @@ import { http, getParam } from '@/utils';
import './index.scss';
class BindPhone extends Component {
captchaInstance = null;
constructor(props) {
super(props),
this.state = {
validate: '',
captchaInstance: null,
seconds: 60,
isFirst: true,
timer: null,
......@@ -24,12 +25,27 @@ class BindPhone extends Component {
}
}
getCaptchaInstance = instance => {
componentDidMount() {
this.initCountryInfo();
}
initCountryInfo = () => {
const { country } = this.props;
this.setState({
captchaInstance: instance
country
});
}
toFetchCountryNum = () => {
const { history, hideBindPhone } = this.props;
hideBindPhone();
history.push('/country');
}
getCaptchaInstance = instance => {
this.captchaInstance = instance;
}
onVerify = (err, data) => {
if (err) {
console.log(err);
......@@ -40,12 +56,13 @@ class BindPhone extends Component {
}
}
// 获取手机号验证码
handleToSend = ({tel, code}) => {
let { validate, seconds, isFirst, isTimer, captchaInstance, country: {num = '86'} } = this.state;
let { validate, seconds, isFirst, isTimer, country: {num = '86'} } = this.state;
if(validate) {
if (!isFirst) {
Toast.info('请重新进行滑块验证', 2, null, false);
captchaInstance.refresh();
this.captchaInstance.refresh();
this.setState({
isFirst: true
});
......@@ -55,7 +72,6 @@ class BindPhone extends Component {
if (!tel) {
Toast.info('手机号码不能为空', 2, null, false);
}else if(!/^\d+$/.test(tel)) {
// }else if (!validateTel(tel)) {
Toast.info('请输入正确格式的手机号码', 2, null, false);
}else {
......@@ -102,32 +118,29 @@ class BindPhone extends Component {
}
// 绑定手机
toContinueBind = (isValid = 1) => {
const { accountInfo: { tel, code}, country: {num = '86'} } = this.state;
// is_valid 是否验证 1:验证（默认）,0不验证
http.post(
`${API['passport-api']}/m/personal/bindPhone`,
{
toBindPhone = () => {
const { accountInfo: { tel, code }, country: {num = '86'} } = this.state;
const { handleToConfirmPhone, successBindPhone } = this.props;
const params = {
area_code: `00${num}`,
phone_num: tel,
mobile: tel,
code: code,
type: 1,
is_valid: isValid
act_type: 'treasure', // 宝箱
};
http.post(
`${API.home}/sys/v2/user/bindMobile`,
{
...params,
type: 1, // 1：绑定，2：修改绑定
is_valid: 1, // is_valid 是否验证 1:验证（默认）,0不验证
}
).then(res => {
const { errno, data, msg } = res.data;
if(errno === 200 ) {
if(isValid) {
if(data.tip_info) {
this.setState({
type: 10,
bindInfo: data.tip_info
})
}else {
this.receviceAfterBind();
}
handleToConfirmPhone(params, data.tip_info);
}else {
this.receviceAfterBind();
successBindPhone();
}
}else {
Toast.info(msg, 2, null, false);
......@@ -137,7 +150,7 @@ class BindPhone extends Component {
render() {
const { desc, skip = 'year' } = this.props;
const { country, validate, isTimer } = this.state;
const { country, validate, isTimer, seconds } = this.state;
return (
<Formik
initialValues={{
......@@ -163,7 +176,7 @@ class BindPhone extends Component {
...values
}
});
this.toContinueBind();
this.toBindPhone();
}}
render={({values: {tel, code}, errors}) => (
<Form className="popup-form" data-skip={skip}>
......@@ -172,9 +185,7 @@ class BindPhone extends Component {
<div className="poup-form__desc">{desc}</div>
}
<div className="popup-form__item">
<a
className="popup-form__button--num"
to={`/country?id=${getParam('id')}&share_code`}>
<a className="popup-form__button--num" onClick={this.toFetchCountryNum}>
+{country.num}
<i className="iconfont iconiconfront-69"/>
</a>
......
src/common/confirmPhone/index.js
......@@ -2,6 +2,25 @@ import React, { Component } from 'react';
import './index.scss';
class ConfirmPhone extends Component {
continueBindPhone = () => {
const { data, successBindPhone } = this.props;
http.post(
`${API.home}/sys/v2/user/bindMobile`,
{
...data,
type: 1, // 1：绑定，2：修改绑定
is_valid: 0, // is_valid 是否验证 1:验证（默认）,0不验证
}
).then(res => {
const { errno, msg } = res.data;
if(errno === 200 ) {
successBindPhone();
}else {
Toast.info(msg, 2, null, false);
}
});
}
render() {
const { bindInfo = { }, desc, skip = 'year' } = this.props;
return (
......@@ -55,7 +74,7 @@ class ConfirmPhone extends Component {
onClick={() => this.handleToClose(false)}>取消</button>
<button
className="popup-bind__button popup-bind__button--confirm"
onClick={() => this.toContinueBind(0)}>继续绑定</button>
onClick={this.continueBindPhone}>继续绑定</button>
</div>
</div>
)
......
src/components/activity/newyear-2019/common/splitSuccess/index.js
......@@ -2,44 +2,73 @@ import React, { Component } from 'react';
import './index.scss';
class SplitSuccess extends Component {
computedBg = (val) => {
return val? {
backgroundImage: `url(${val})`
} : {};
}
continueSplitTreasure = () => {
const { ids, successSplitTreasure, handleToBindPhone, handleToBindAddress } = this.props;
const params = ids[0];
http.post(`${API.home}/sys/split_treasure`, params).then(res => {
const { code, data } = res.data;
if(code === 200) {
successSplitTreasure();
}else if(code === 12000) {
// 请先绑定手机号再拆宝箱
handleToBindPhone();
}else if(code === 12001) {
// 请先填写收货地址再拆宝箱
handleToBindAddress();
}
})
}
render() {
const { handleToInvite } = this.props;
const {
ids,
data: {
member = [],
prize_img,
prize_name,
},
handleToInvite,
children,
} = this.props;
return (
<div data-skip="split">
<div className="split-success__image">
<img src="" alt=""/>
<img src={prize_img} alt=""/>
</div>
<p className="split-success__prize">AI100题纸质书</p>
<a href="" className="split-success__link">
<span>查看/修改收货信息</span>
</a>
<p className="split-success__prize">{prize_name}</p>
{children}
<div className="split-success__member">
<div className="member-item">
<span className="member-item__avatar">
<i className="member-item__captain">队长</i>
</span>
<span className="member-item__prize">AI100题纸质书</span>
</div>
<div className="member-item">
<span className="member-item__avatar">
<i className="member-item__captain">队长</i>
</span>
<span className="member-item__prize">AI100题纸质书</span>
</div>
<div className="member-item">
<span className="member-item__avatar">
<i className="member-item__captain">队长</i>
</span>
<span className="member-item__prize">AI100题纸质书</span>
</div>
<div className="member-item">
<span className="member-item__avatar">
<i className="member-item__captain">队长</i>
{
member.map((item, index) => (
<div className="member-item" key={index}>
<span className="member-item__avatar" style={this.computedBg(item.avatar)}>
{
item.is_captain && <i className="member-item__captain">队长</i>
}
</span>
<span className="member-item__prize">AI100题纸质书</span>
{
item.prize
? <span className="member-item__prize">{item.prize}</span>
: <span className="member-item__prize">尚未拆开宝箱</span>
}
</div>
))
}
</div>
<button className="split-success__jump" onClick={handleToInvite}>继续组队开宝箱</button>
{
ids.length > 0
? <button className="split-success__jump" onClick={this.continueSplitTreasure}>继续开宝箱</button>
: <button className="split-success__jump" onClick={handleToInvite}>继续组队开宝箱</button>
}
</div>
);
}
......
src/components/activity/newyear-2019/common/splitSuccess/index.scss
......@@ -23,7 +23,7 @@
line-height: 1;
}
.split-success__link {
.team-result {
display: inline-block;
margin: 8px 0 0;
font-size: 12px;
......
src/components/activity/newyear-2019/myTreasure/prize.js 0 → 100644
import React from 'react';
import './prize.scss';
export default (props) => {
const {
data: {
bind_phone,
bind_address,
prize_type,
},
handleToBindPhone,
handleToBindAddress,
toComposeCoupon,
toUseCoupon,
toCourseList,
toFecthMoney,
} = props;
return (
<>
{/* 第一：是否需要绑定手机号 */}
{
bind_phone &&
<a className="team-result" onClick={handleToBindPhone}>
<span>绑定手机号</span>
</a>
}
{/* 第二：是否需要填写地址 */}
{
(!bind_phone && bind_address) &&
<a className="team-result" onClick={handleToBindAddress}>
<span>查看/修改收货信息</span>
</a>
}
{/* 第三：奖品，代金券碎片 */}
{
(!bind_phone && !bind_address && prize_type === 6) &&
<a className="team-result" onClick={toComposeCoupon}>
可合成代金券在购课时使用，
<span>去合成</span>
</a>
}
{/* 第三：奖品，指定课程代金券 */}
{
(!bind_phone && !bind_address && prize_type === 3) &&
<a className="team-result" onClick={toUseCoupon}>
已发放至您的账户，
<span>去使用</span>
</a>
}
{/* 第三：奖品，通用课程代金券 */}
{
(!bind_phone && !bind_address && prize_type === 4) &&
<a className="team-result" onClick={toCourseList}>
已发放至您的账户，
<span>去使用</span>
</a>
}
{/* 第三：奖品，现金红包 */}
{
(!bind_phone && !bind_address && prize_type === 7) &&
<a className="team-result" onClick={toFecthMoney}>
已存入您的账户，
<span>去提现</span>
</a>
}
{/* 第三：奖品，线上课程 */}
{
(!bind_phone && !bind_address && prize_type === 2) &&
<a className="team-result">已发放至您的账户</a>
}
</>
)
}
\ No newline at end of file
src/components/activity/newyear-2019/myTreasure/prize.scss 0 → 100644
.team-result {
display: inline-block;
margin: 8px 0 0;
font-size: 12px;
color: #666;
text-align: center;
line-height: 1;
span {
text-decoration: underline;
}
}
\ No newline at end of file
src/components/activity/newyear-2019/myTreasure/team.js
import React, { Component } from 'react';
import classnames from 'classnames';
import { withRouter, Link } from 'react-router-dom';
import { http } from '@/utils';
import { Popup } from '@common';
import SplitSuccess from './../common/splitSuccess/index';
import { Link } from 'react-router-dom';
import './team.scss';
class TreasureTeam extends Component {
......@@ -19,26 +16,27 @@ class TreasureTeam extends Component {
this.initMemberInfo();
}
handleToInvite = () => {
const { history } = this.props;
history.push('/activity/newyear-2019/landing');
if(this.splitInstance) {
this.splitInstance.close();
componentWillReceiveProps(nextProps) {
const { data: oldData } = this.props;
const { data: newData } = nextProps;
if(newData.is_open != oldData.is_open) {
this.initMemberInfo(newData);
}
}
initMemberInfo = () => {
const { data } = this.props;
let members = data.members;
let len = members.length - 5;
initMemberInfo = (params = {}) => {
const { data, userInfo } = this.props;
const arr = JSON.stringify(params) !== '{}'? params: data;
let member = arr.member;
let len = member.length - 5;
for(; len < 0; len++) {
members.push({});
member.push({});
}
this.setState({
team: Object.assign({}, data, {
members
team: Object.assign({}, arr, {
member
}),
currentMember: members[0]
currentMember: member.filter(item => item.uid == userInfo.uid)[0]
});
}
......@@ -61,58 +59,32 @@ class TreasureTeam extends Component {
// 查看队友的奖品，条件：宝箱已拆
toCheckPrize = (id) => {
const { team: { is_open, members = []} } = this.state;
const { team: { is_open, member = []} } = this.state;
if(is_open) {
const data = members.filter(item => item.uid === id);
const data = member.filter(item => item.uid === id);
this.setState({
currentMember: data[0]
});
}
}
toSplitTreasure = () => {
const { handleToBindPhone, handleToBindAddress } = this.props;
const { team: {captain_uid, team_num} } = this.state;
http.post(`${API.home}/sys/split_treasure`, {
team_num: team_num,
owner_uid: captain_uid
}).then(res => {
const { code, data } = res.data;
if(code === 200) {
// 拆宝箱弹窗--成功
this.splitInstance = Popup({
title: '恭喜你获得',
skip: 'year',
content: <SplitSuccess handleToInvite={this.handleToInvite} />
});
}else if(code === 12000) {
// 绑定手机号
handleToBindPhone();
}else if(code === 12001) {
// 绑定地址
handleToBindAddress();
}
});
}
render() {
const {
team: {
id,
is_captain,
status,
team_num,
lack_member,
is_open,
members = [],
prize_type,
bing_phone,
bing_address,
treasure_code,
member = [],
},
currentMember: {
prize_name
}
currentMember
} = this.state;
const {
toSplitTreasure,
children
} = this.props;
return (
<div className="team-container" data-skip="team">
{
......@@ -143,11 +115,11 @@ class TreasureTeam extends Component {
}
<div className="team-member">
{
members.map((item, index) => (
member.map((item, index) => (
<div
className={this.computedClass(item.uid)}
onClick={() => this.toCheckPrize(item.uid)}
key={item.id}
key={index}
style={this.computedBg(item.head_img)}
>
{
......@@ -165,8 +137,8 @@ class TreasureTeam extends Component {
<>
{
is_captain
? <Link className="team-button" to="/activity/newyear-2019/landing">继续邀请队友</Link>
: <Link className="team-button" to="/activity/newyear-2019/landing">帮好友完成组队</Link>
? <Link className="team-button" to={`/activity/newyear-2019/landing?treasure_code=${treasure_code}&origin=1`}>继续邀请队友</Link>
: <Link className="team-button" to={`/activity/newyear-2019/landing?treasure_code=${treasure_code}&origin=2`}>帮好友完成组队</Link>
}
</>
}
......@@ -176,7 +148,7 @@ class TreasureTeam extends Component {
(status === 2 && !is_open) &&
<>
<span className="team-icon" data-direction="left"></span>
<span className="team-button--split" onClick={this.toSplitTreasure}></span>
<span className="team-button--split" onClick={toSplitTreasure}></span>
<span className="team-icon" data-direction="right"></span>
</>
}
......@@ -185,85 +157,8 @@ class TreasureTeam extends Component {
{
(status === 2 && is_open) &&
<>
<p className="team-prize">{prize_name}</p>
{/* 第一：是否需要绑定手机号 */}
{
bing_phone &&
<a className="treamsure-team__result" onClick="$emit('to-bind-phone', data.bing_address)">
<span>绑定手机号</span>
</a>
}
{/* 第二：是否需要填写地址 */}
{
(!bing_phone && bing_address) &&
<a className="treamsure-team__result" onClick="$emit('to-bind-address')">
<span>查看/修改收货信息</span>
</a>
}
{/* 第三：奖品，代金券碎片 */}
{
(!bing_phone && !bing_address && prize_type === 6) &&
<a
href="/my/coupon"
target="_blank"
className="treamsure-team__result"
>
可合成代金券在购课时使用，
<span>去合成</span>
</a>
}
{/* 第三：奖品，指定课程代金券 */}
{
(!bing_phone && !bing_address && prize_type === 3) &&
<a
href="/my/coupon"
target="_blank"
className="treamsure-team__result"
>
已发放至您的账户，
<span>去使用</span>
</a>
}
{/* 第三：奖品，通用课程代金券 */}
{
(!bing_phone && !bing_address && prize_type === 4) &&
<a
href="/my/coupon"
target="_blank"
className="treamsure-team__result"
>
已发放至您的账户，
<span>去使用</span>
</a>
}
{/* 第三：奖品，现金红包 */}
{
(!bing_phone && !bing_address && prize_type === 7) &&
<a
href="/my/coupon"
target="_blank"
className="treamsure-team__result"
>
已存入您的账户，
<span>去提现</span>
</a>
}
{/* 第三：奖品，线上课程 */}
{
(!bing_phone && !bing_address && prize_type === 2) &&
<a
href="/my/coupon"
target="_blank"
className="treamsure-team__result"
>已发放至您的账户</a>
}
<p className="team-prize">{currentMember.prize_name}</p>
{children}
</>
}
</div>
......@@ -272,4 +167,4 @@ class TreasureTeam extends Component {
}
}
export default withRouter(TreasureTeam);
\ No newline at end of file
export default TreasureTeam;
\ No newline at end of file
src/components/activity/newyear-2019/myTreasure/team.scss
......@@ -179,4 +179,15 @@
color: #303030;
line-height: 1;
}
.team-result {
margin: 8px 0 0;
font-size: 12px;
color: #666;
line-height: 1;
span {
text-decoration: underline;
}
}
}
\ 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