Commit 8c56fbd9 by FE

bind phone popup

parent dece6848
.captcha-container { .captcha-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: 40px; // height: 40px;
} }
.captcha-animation { .captcha-animation {
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Formik, Form, Field } from 'formik'; import { Formik, Form, Field } from 'formik';
import { withRouter, Link } from 'react-router-dom'; import { Toast } from 'antd-mobile';
import { isEmpty } from 'lodash';
import Captcha from '@/common/Captcha'; import Captcha from '@/common/Captcha';
import { getParam } from '@/utils'; import { http, getParam } from '@/utils';
import './index.scss'; import './index.scss';
class BindPhone extends Component { class BindPhone extends Component {
constructor(props) { constructor(props) {
super(props), super(props),
this.state = { this.state = {
// 弹窗类型:0: 无弹出,1:非微信,2:微信
type: 0,
isCopy: false,
validate: '', validate: '',
captchaInstance: null, captchaInstance: null,
seconds: 60, seconds: 60,
isFirst: true, isFirst: true,
timer: null, timer: null,
isTimer: false, // 是否开始倒计时 isTimer: false, // 是否开始倒计时
shareInfo: {
url: '',
share_code: '',
command: '【七月在线送你一个红包】https://www.julyedu.com/'
},
doneInfo: { //领取后的状态,1:领取成功,2:领取超时
status: 2,
txt: '手机号绑定超时,红包已失效!',
desc: ''
},
money: '', // 红包金额,
endTime: 10, // 手机绑定时限
countdownTimer: null,
countdown: '00分00秒', // 绑定时间
accountInfo: {}, accountInfo: {},
bindInfo: {}, bindInfo: {},
country: { country: {
...@@ -41,10 +24,121 @@ class BindPhone extends Component { ...@@ -41,10 +24,121 @@ class BindPhone extends Component {
} }
} }
getCaptchaInstance = instance => {
this.setState({
captchaInstance: instance
});
}
onVerify = (err, data) => {
if (err) {
console.log(err);
} else {
this.setState({
validate: data.validate
});
}
}
handleToSend = ({tel, code}) => {
let { validate, seconds, isFirst, isTimer, captchaInstance, country: {num = '86'} } = this.state;
if(validate) {
if (!isFirst) {
Toast.info('请重新进行滑块验证', 2, null, false);
captchaInstance.refresh();
this.setState({
isFirst: true
});
return
}
if(!isTimer) {
if (!tel) {
Toast.info('手机号码不能为空', 2, null, false);
}else if(!/^\d+$/.test(tel)) {
// }else if (!validateTel(tel)) {
Toast.info('请输入正确格式的手机号码', 2, null, false);
}else {
// 获取验证码
http.post(
`${API['passport-api']}/m/personal/bindPhoneSendCode`,
{
area_code: `00${num}`,
phone_num: tel
}
).then(res => {
const { errno, msg } = res.data;
if(errno === 200) {
Toast.info('验证码发送成功', 2, null, false);
// 倒计时
this.timer = window.setInterval(() => {
if (seconds <= 0) {
window.clearInterval(this.timer);
this.setState({
isTimer: false,
seconds: 60
});
}else {
this.setState({
isTimer: true,
seconds: --seconds
});
}
}, 1000);
// 滑块
this.setState({
isFirst: false
})
}else {
Toast.info(msg, 2, null, false);
}
})
}
}
}
return false;
}
// 绑定手机
toContinueBind = (isValid = 1) => {
const { accountInfo: { tel, code}, country: {num = '86'} } = this.state;
// is_valid 是否验证 1:验证(默认),0不验证
http.post(
`${API['passport-api']}/m/personal/bindPhone`,
{
area_code: `00${num}`,
phone_num: tel,
code: code,
type: 1,
is_valid: isValid
}
).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();
}
}else {
this.receviceAfterBind();
}
}else {
Toast.info(msg, 2, null, false);
}
});
}
render() { render() {
const { desc, skip = 'year' } = this.props;
const { country, validate, isTimer } = this.state; const { country, validate, isTimer } = this.state;
return ( return (
<div className="popup-form">
<Formik <Formik
initialValues={{ initialValues={{
tel: '', tel: '',
...@@ -72,15 +166,18 @@ class BindPhone extends Component { ...@@ -72,15 +166,18 @@ class BindPhone extends Component {
this.toContinueBind(); this.toContinueBind();
}} }}
render={({values: {tel, code}, errors}) => ( render={({values: {tel, code}, errors}) => (
<Form className="popup-form__content"> <Form className="popup-form" data-skip={skip}>
<h4 className="popup-form__title">绑定手机号</h4> {
desc &&
<div className="poup-form__desc">{desc}</div>
}
<div className="popup-form__item"> <div className="popup-form__item">
<Link <a
className="popup-form__button--num" className="popup-form__button--num"
to={`/country?id=${getParam('id')}&share_code`}> to={`/country?id=${getParam('id')}&share_code`}>
+{country.num} +{country.num}
<i className="iconfont iconiconfront-69"/> <i className="iconfont iconiconfront-69"/>
</Link> </a>
<Field <Field
name="tel" name="tel"
render={({field}) => { render={({field}) => {
...@@ -88,7 +185,6 @@ class BindPhone extends Component { ...@@ -88,7 +185,6 @@ class BindPhone extends Component {
<input <input
{...field} {...field}
className="popup-form__ipt" className="popup-form__ipt"
data-bdrs="0 6px 6px 0"
data-type="tel" data-type="tel"
type="text" type="text"
placeholder="请填写手机号" placeholder="请填写手机号"
...@@ -98,7 +194,6 @@ class BindPhone extends Component { ...@@ -98,7 +194,6 @@ class BindPhone extends Component {
/> />
</div> </div>
<Captcha <Captcha
mrBtm={15}
getInstance={this.getCaptchaInstance} getInstance={this.getCaptchaInstance}
onVerify={this.onVerify} onVerify={this.onVerify}
/> />
...@@ -128,7 +223,7 @@ class BindPhone extends Component { ...@@ -128,7 +223,7 @@ class BindPhone extends Component {
</button> </button>
</div> </div>
<button <button
className="popup-packet__button--bundle" className="popup-form__button--bundle"
data-status={(tel && code && isEmpty(errors))? 'do': 'done'} data-status={(tel && code && isEmpty(errors))? 'do': 'done'}
type="submit" type="submit"
> >
...@@ -137,13 +232,8 @@ class BindPhone extends Component { ...@@ -137,13 +232,8 @@ class BindPhone extends Component {
</Form> </Form>
)} )}
/> />
<i
className="popup-password__button--close iconfont iconiconfront-2"
onClick={() => this.handleToClose(false)}
/>
</div>
) )
} }
} }
export default withRouter(BindPhone); export default BindPhone;
\ No newline at end of file \ No newline at end of file
// form // form
.popup-form { // .popup-form {
text-align: center; // text-align: center;
.popup-form__title {
margin-bottom: 15px;
}
.popup-packet__button--bundle { .popup-packet__button--bundle {
margin-top: 5px; margin-top: 5px;
} }
// }
[data-skip="default"] {
.popup-form__item {
height: 36px;
}
.popup-form__button--num {
border: 1px solid #99D6FF;
border-right-style: none;
border-radius: 6px 0 0 6px;
}
.popup-form__button--code {
border-radius: 6px;
}
.popup-form__button--bundle {
width: 161px;
height: 30px;
border-radius: 15px;
font-size: 13px;
}
.popup-form__ipt {
border: 1px solid #99D6FF;
border-radius: 6px;
&[data-type="tel"] {
border-left-style: none;
border-radius: 0 6px 6px 0;
}
}
} }
.popup-form__content { [data-skip="year"] {
width: 290px; .popup-form__item {
height: 257px; width: 269px;
padding: 20px 20px 0; height: 40px;
border-radius: 10px;
box-sizing: border-box; }
background-color: #fff;
.popup-form__button--num {
border: 1px solid #CDCDCD;
border-right-style: none;
border-radius: 3px 0 0 3px;
}
.popup-form__button--code {
border-radius: 3px;
}
.popup-form__button--bundle {
width: 270px;
height: 44px;
border-radius: 5px;
font-size: 16px;
}
.popup-form__ipt {
border: 1px solid #CDCDCD;
border-radius: 3px;
&[data-type="tel"] {
border-left-style: none;
border-radius: 0 3px 3px 0;
}
}
} }
.popup-form__title { .captcha-container {
font-size: 15px; width: 269px;
font-weight: 400; margin: 0 auto 15px;
color: #333; }
line-height: 1;
.popup-form {
// width: 290px;
// height: 257px;
// padding: 20px 20px 0;
box-sizing: border-box;
} }
.popup-form__item { .popup-form__item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 36px; margin: 0 auto 15px;
margin-bottom: 15px;
.popup-form__ipt { .popup-form__ipt {
flex: 1; flex: 1;
...@@ -52,9 +111,6 @@ ...@@ -52,9 +111,6 @@
position: relative; position: relative;
height: 36px; height: 36px;
padding: 0 8px; padding: 0 8px;
border: 1px solid #99D6FF;
border-right-style: none;
border-radius: 6px 0 0 6px;
box-sizing: border-box; box-sizing: border-box;
font-size: 14px; font-size: 14px;
color: #333; color: #333;
...@@ -82,18 +138,12 @@ ...@@ -82,18 +138,12 @@
.popup-form__ipt { .popup-form__ipt {
height: 36px; height: 36px;
padding: 0 8px; padding: 0 8px;
border: 1px solid #99D6FF;
border-radius: 6px;
box-sizing: border-box; box-sizing: border-box;
font-size: 12px; font-size: 12px;
color: #999; color: #999;
line-height: 36px; line-height: 36px;
outline: none; outline: none;
&[data-bdrs="0 6px 6px 0"] {
border-radius: 0 6px 6px 0;
}
&[data-type="tel"] { &[data-type="tel"] {
border-left-style: none; border-left-style: none;
} }
...@@ -114,9 +164,8 @@ ...@@ -114,9 +164,8 @@
width: 110px; width: 110px;
height: 36px; height: 36px;
padding: 0; padding: 0;
border: 1px solid #E5E5E5; border: 1px solid #E5E5E5;
border-radius: 6px; box-sizing: border-box;
box-sizing: border-box;
font-size: 13px; font-size: 13px;
color: #999; color: #999;
text-align: center; text-align: center;
...@@ -127,4 +176,24 @@ ...@@ -127,4 +176,24 @@
border-color: #0099FF; border-color: #0099FF;
color: #0099FF; color: #0099FF;
} }
}
.popup-form__button--bundle {
display: block;
padding: 0;
margin: 0 auto;
border-style: none;
color: #2B2B2B;
background-color: #F9DB4A;
cursor: pointer;
&[data-status="done"] {
color: #fff;
background-color: #ABABAB;
}
&[data-status='do'] {
color: #fff;
background-color: #0099FF;
}
} }
\ No newline at end of file
...@@ -12,7 +12,6 @@ function ClosablePopup({ ...@@ -12,7 +12,6 @@ function ClosablePopup({
closable = true, closable = true,
close = function () {}, close = function () {},
clickMaskClose = true, clickMaskClose = true,
skip='default',
closeIcon = 'iconiconfront-2' closeIcon = 'iconiconfront-2'
} = {}) { } = {}) {
...@@ -46,7 +45,7 @@ function ClosablePopup({ ...@@ -46,7 +45,7 @@ function ClosablePopup({
} }
const closablePopup = ( const closablePopup = (
<div className={'closable-popup-mask'} data-skip={skip} onClick={clickMask}> <div className={'closable-popup-mask'} onClick={clickMask}>
<div className={classnames(['popup-container', className])}> <div className={classnames(['popup-container', className])}>
<div className="title">{title}</div> <div className="title">{title}</div>
<div className="content"> <div className="content">
......
...@@ -11,22 +11,9 @@ ...@@ -11,22 +11,9 @@
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
z-index: 999; z-index: 999;
&[data-skip="default"] {
.popup-container {
border-radius: 10px;
}
}
&[data-skip="year"] {
.popup-container {
border-radius: 5px;
}
}
.popup-container { .popup-container {
padding: 20px 10px; padding: 20px 10px;
border-radius: 10px;
background-color: #fff; background-color: #fff;
.title { .title {
......
...@@ -34,11 +34,11 @@ class MyTreasure extends Component { ...@@ -34,11 +34,11 @@ class MyTreasure extends Component {
this.fetchActivityStatus(); this.fetchActivityStatus();
// 绑定地址--宝箱 // 绑定地址--宝箱
Popup({ Popup({
title: '绑定确认', title: '绑定手机号',
content: <ConfirmPhone content: <BindPhone desc={<>
bindInfo={bindInfo} <p className="phone-treasure__desc">恭喜您获得 奖品名称(现金)</p>
tip={<p className="confirm-treasure__desc">该手机号已绑定以下账号,继续绑定将解除以下绑定状态</p>} <p className="phone-treasure__notice">为了您的账户安全,请于20191231日前绑定手机号,过期将失效</p>
/> </>} />
}); });
} }
...@@ -46,6 +46,13 @@ class MyTreasure extends Component { ...@@ -46,6 +46,13 @@ class MyTreasure extends Component {
} }
handleToConfirmPhone = () => {
this.confrimInstance = Popup({
title: '绑定确认',
content: <ConfirmPhone bindInfo={bindInfo} />
});
}
handleToBindAddress = () => { handleToBindAddress = () => {
this.addressInstance = Popup({ this.addressInstance = Popup({
title: '收货信息', title: '收货信息',
...@@ -153,27 +160,6 @@ class MyTreasure extends Component { ...@@ -153,27 +160,6 @@ class MyTreasure extends Component {
/> />
)) ))
} }
{/* <TreasureTeam data={{
is_captain: 0,
status: 1,
is_open: 1,
members:[
{
uid:1,
head_img:"https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/default/moon_my.jpg",
is_open:1,
is_captain:1,
prize_name:"dfefawefwe"
},
{
uid:22,
head_img:"https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/app/156274320700059253.png",
is_open:1,
is_captain:0,
prize_name:"带份饭问"
}
]
}}></TreasureTeam> */}
</div> </div>
} }
</div> </div>
......
...@@ -62,4 +62,21 @@ ...@@ -62,4 +62,21 @@
font-size: 12px; font-size: 12px;
color: #FF2121; color: #FF2121;
line-height: 1; line-height: 1;
}
// 绑定手机弹窗--宝箱
.phone-treasure__desc {
width: 269px;
margin: 10px 15px 0;
font-size: 14px;
color: #666;
line-height: 1;
}
.phone-treasure__notice {
width: 269px;
margin: 9px 15px 15px;
font-size: 12px;
color: #FF2121;
line-height: 18px;
} }
\ 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