Skip to content

M
mr-julyedu
Commit cb976119 by FE
Options

bind phone confirm

parent d6215a5b
Showing with 523 additions and 2 deletions
src/common/bindPhone/index.js 0 → 100644
import React, { Component } from 'react';
import { Formik, Form, Field } from 'formik';
import { withRouter, Link } from 'react-router-dom';
import Captcha from '@/common/Captcha';
import { getParam } from '@/utils';
import './index.scss';
class BindPhone extends Component {
constructor(props) {
super(props),
this.state = {
// 弹窗类型：0: 无弹出，1:非微信，2:微信
type: 0,
isCopy: false,
validate: '',
captchaInstance: null,
seconds: 60,
isFirst: true,
timer: null,
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: {},
bindInfo: {},
country: {
num: '86'
}
}
}
render() {
const { country, validate, isTimer } = this.state;
return (
<div className="popup-form">
<Formik
initialValues={{
tel: '',
code: ''
}}
validate={({tel, code}) => {
const errors = {};
// if (!validateTel(tel)) {
if(!/^\d+$/.test(tel)) {
errors.tel = '请填写正确格式的手机号';
}
if (!/[0-9]{6}/.test(code)) {
errors.code = '请输入验证码';
}
return errors;
}}
onSubmit={(values, { setStatus, setSubmitting }) => {
this.setState({
accountInfo: {
...values
}
});
this.toContinueBind();
}}
render={({values: {tel, code}, errors}) => (
<Form className="popup-form__content">
<h4 className="popup-form__title">绑定手机号</h4>
<div className="popup-form__item">
<Link
className="popup-form__button--num"
to={`/country?id=${getParam('id')}&share_code`}>
+{country.num}
<i className="iconfont iconiconfront-69"/>
</Link>
<Field
name="tel"
render={({field}) => {
return (
<input
{...field}
className="popup-form__ipt"
data-bdrs="0 6px 6px 0"
data-type="tel"
type="text"
placeholder="请填写手机号"
/>
);
}}
/>
</div>
<Captcha
mrBtm={15}
getInstance={this.getCaptchaInstance}
onVerify={this.onVerify}
/>
<div className="popup-form__item">
<Field
name="code"
render={({field}) => {
return (
<input
{...field}
className="popup-form__ipt popup-form__ipt--left"
type="text"
placeholder="输入验证码"
/>
);
}}
/>
<button
className="popup-form__button--code"
data-status={(validate && !isTimer)? 'do': ''}
type="button"
onClick={() => this.handleToSend({tel, code})}
>
{
isTimer? `重新发送${seconds}s` : '发送验证码'
}
</button>
</div>
<button
className="popup-packet__button--bundle"
data-status={(tel && code && isEmpty(errors))? 'do': 'done'}
type="submit"
>
完成绑定
</button>
</Form>
)}
/>
<i
className="popup-password__button--close iconfont iconiconfront-2"
onClick={() => this.handleToClose(false)}
/>
</div>
)
}
}
export default withRouter(BindPhone);
\ No newline at end of file
src/common/bindPhone/index.scss 0 → 100644
// form
.popup-form {
text-align: center;
.popup-form__title {
margin-bottom: 15px;
}
.popup-packet__button--bundle {
margin-top: 5px;
}
}
.popup-form__content {
width: 290px;
height: 257px;
padding: 20px 20px 0;
border-radius: 10px;
box-sizing: border-box;
background-color: #fff;
}
.popup-form__title {
font-size: 15px;
font-weight: 400;
color: #333;
line-height: 1;
}
.popup-form__item {
display: flex;
align-items: center;
justify-content: center;
height: 36px;
margin-bottom: 15px;
.popup-form__ipt {
flex: 1;
}
.popup-form__ipt--left {
width: 130px;
}
.popup-form__button--code {
margin-left: 10px;
}
}
.popup-form__button--num {
display: block;
position: relative;
height: 36px;
padding: 0 8px;
border: 1px solid #99D6FF;
border-right-style: none;
border-radius: 6px 0 0 6px;
box-sizing: border-box;
font-size: 14px;
color: #333;
line-height: 36px;
&::after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1px;
height: 14px;
margin: auto 0;
background-color: #AAAAAA;
}
.iconfont {
font-size: 12px;
color: #333;
}
}
.popup-form__ipt {
height: 36px;
padding: 0 8px;
border: 1px solid #99D6FF;
border-radius: 6px;
box-sizing: border-box;
font-size: 12px;
color: #999;
line-height: 36px;
outline: none;
&[data-bdrs="0 6px 6px 0"] {
border-radius: 0 6px 6px 0;
}
&[data-type="tel"] {
border-left-style: none;
}
}
.popup-form__tip {
margin: 0;
font-size: 12px;
color: #FF3131;
.iconfont {
font-size: 15px;
color: #FF3131;
}
}
.popup-form__button--code {
width: 110px;
height: 36px;
padding: 0;
border: 1px solid #E5E5E5;
border-radius: 6px;
box-sizing: border-box;
font-size: 13px;
color: #999;
text-align: center;
line-height: 36px;
background-color: transparent;
&[data-status='do'] {
border-color: #0099FF;
color: #0099FF;
}
}
\ No newline at end of file
src/common/confirmPhone/index.js 0 → 100644
import React, { Component } from 'react';
import './index.scss';
class ConfirmPhone extends Component {
render() {
const { bindInfo = { }, desc, skip = 'year' } = this.props;
return (
<div className="popup-bind" data-skip={skip}>
{
desc
? <div className="popup-bind__desc">{desc}</div>
: <p className="popup-bind__desc">该手机号已绑定到以下账号，继续绑定将解除以下绑定状态</p>
}
<ul className="popup-bind__list">
{
bindInfo['email'] &&
<li className="popup-bind__account">
{/* 邮箱 */}
<i className="popup-bind__icon" data-plat="mail"></i>
<p className="popup-bind__account--name">{bindInfo['email']}</p>
</li>
}
{
bindInfo['wechat_nickname'] &&
<li className="popup-bind__account">
{/* wechat */}
<i className="popup-bind__icon" data-plat="wachat"></i>
<p className="popup-bind__account--name">{bindInfo['wechat_nickname']}</p>
</li>
}
{
bindInfo['qq_nickname'] &&
<li className="popup-bind__account">
{/* qq */}
<i className="popup-bind__icon" data-plat="qq"></i>
<p className="popup-bind__account--name">{bindInfo['qq_nickname']}</p>
</li>
}
{
bindInfo['sina_nickname'] &&
<li className="popup-bind__account">
{/* 微博 */}
<i className="popup-bind__icon" data-plat="sina"></i>
<p className="popup-bind__account--name">{bindInfo['sina_nickname']}</p>
</li>
}
</ul>
<div className="popup-bind__footer">
<button
className="popup-bind__button popup-bind__button--cancle"
onClick={() => this.handleToClose(false)}>取消</button>
<button
className="popup-bind__button popup-bind__button--confirm"
onClick={() => this.toContinueBind(0)}>继续绑定</button>
</div>
</div>
)
}
}
export default ConfirmPhone;
\ No newline at end of file
src/common/confirmPhone/index.scss 0 → 100644
[data-skip="default"] {
.popup-bind__desc {
width: 249px;
font-size: 15px;
color: #666;
line-height: 21px;
}
.popup-bind__account {
padding: 4px;
}
.popup-bind__account--name {
padding-left: 7px;
font-size: 12px;
color: #999;
}
.popup-bind__icon {
width: 22px;
height: 22px;
}
.popup-bind__footer {
padding: 0 18px;
}
.popup-bind__button {
width: 105px;
height: 30px;
border-radius: 15px;
font-size: 14px;
}
.popup-bind__button--cancle {
border: 1px solid #0099FF;
color: #0099FF;
}
.popup-bind__button--confirm {
border-style: none;
color: #fff;
background-color: #0099FF;
}
}
[data-skip="year"] {
.popup-bind__desc {
width: 269px;
font-size: 12px;
color: #FF2121;
line-height: 18px;
}
.popup-bind__account {
padding: 14px 4px;
}
.popup-bind__account--name {
padding-left: 12px;
font-size: 15px;
color: #090909;
}
.popup-bind__icon {
width: 33px;
height: 33px;
}
.popup-bind__footer {
padding: 0 15px;
}
.popup-bind__button {
width: 130px;
height: 44px;
border-radius: 5px;
font-size: 16px;
}
.popup-bind__button--cancle {
border: 1px solid #090909;
color: #090909;
}
.popup-bind__button--confirm {
border: 1px solid #090909;
color: #090909;
background-color: #FFE319;
}
}
.popup-bind {
text-align: center;
}
.popup-bind__desc {
margin: 10px 15px 0;
text-align: left;
}
.popup-bind__list {
padding: 0 0 10px;
}
.popup-bind__account {
display: flex;
align-items: center;
margin: 0 52px;
text-align: left;
&:nth-child(n+2) {
border-top: 1px solid #E5E5E5;
}
}
.popup-bind__account--name {
margin: 0;
}
.popup-bind__icon {
display: inline-block;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
&[data-plat="mail"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/icon-mail.png');
}
&[data-plat="sina"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/icon-sina.png');
}
&[data-plat="qq"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/icon-qq.png');
}
&[data-plat="wachat"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/icon-wechat.png');
}
}
.popup-bind__footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.popup-bind__button {
box-sizing: border-box;
cursor: pointer;
outline: none;
}
.popup-bind__button--cancle {
background-color: transparent;
}
\ No newline at end of file
src/components/activity/newyear-2019/myTreasure/index.js
import React, { Component } from 'react';
import { HeaderBar, Popup } from '@common';
import AddressPopup from '@common/addressPopup/index';
import BindPhone from '@common/bindPhone/index';
import ConfirmPhone from '@common/confirmPhone/index';
import TreasureTeam from './team';
import { http } from '@/utils';
import './index.scss';
......@@ -14,18 +16,30 @@ class MyTreasure extends Component {
isEmpty: false,
seconds: 3,
teams: [],
bindInfo: {
email: 'a',
wechat_nickname: 'b',
qq_nickname: 'c',
sina_nickname: 'd',
}, // 绑定手机号冲突信息
};
}
componentDidMount() {
const { isEnd } = this.state;
const { isEnd, bindInfo } = this.state;
if(isEnd) {
this.startCountDown();
}
this.fetchMyTreasure();
this.fetchActivityStatus();
// 绑定地址--宝箱
Popup({
title: '绑定确认',
content: <ConfirmPhone
bindInfo={bindInfo}
tip={<p className="confirm-treasure__desc">该手机号已绑定以下账号，继续绑定将解除以下绑定状态</p>}
/>
});
}
handleToBindPhone = () => {
......
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