Skip to content

M
mr-julyedu
Commit 0ad15bc8 by zhanghaozhe
Options

更换滑块验证

parent ca9d3562
Showing with 1013 additions and 912 deletions
src/common/Captcha-ali/index.js 0 → 100644
import React, { Component } from 'react';
import './index.scss'
import { initCaptchaNC } from "@/utils"
const appkey = 'FFFF0N000000000090FC'
const scene = 'nc_login_h5'
class CaptchaAli extends Component {
nc = null
state = {
isLoaded: false
}
componentDidMount() {
const _this = this
const el = document.querySelector('#nc')
el && initCaptchaNC(() => {
const nc_token = [appkey, (new Date()).getTime(), Math.random()].join(':');
this.nc = NoCaptcha.init({
renderTo: '#nc',
appkey,
scene,
token: nc_token,
elementID: ['tel'],
bannerHidden: false,
callback(data) {
_this.props.onVerify({
app_key: appkey,
scene,
token: nc_token,
session_id: data.csessionid,
sig: data.sig
})
},
error(s) {
console.log(s)
}
})
NoCaptcha.setEnabled(true);
this.nc.reset()
this.props.getInstance(this.nc)
})
}
render() {
const {mb = 30} = this.props
return (
<div id={'captcha'} style={{marginBottom: `${mb}px`}}>
<div id="nc"></div>
</div>
);
}
}
export default CaptchaAli;
\ No newline at end of file
src/common/Captcha-ali/index.scss 0 → 100644
#captcha {
._nc {
.stage {
padding: 0;
}
.stage1 {
height: 48px;
.label {
height: 46px;
}
.button {
width: 48px;
height: 48px;
}
.slider {
height: 48px;
width: 100%;
left: 0;
}
}
}
}
\ No newline at end of file
src/common/bindPhone/index.js
...@@ -2,8 +2,8 @@ import React, { Component } from 'react'; ...@@ -2,8 +2,8 @@ import React, { Component } from 'react';
import { Formik, Form, Field } from 'formik'; import { Formik, Form, Field } from 'formik';
import { Toast } from 'antd-mobile'; import { Toast } from 'antd-mobile';
import { isEmpty } from 'lodash'; import { isEmpty } from 'lodash';
import Captcha from '@/common/Captcha'; import CaptchaAli from "@common/Captcha-ali"
import { http, getParam } from '@/utils'; import { http } from '@/utils';
import './index.scss'; import './index.scss';
class BindPhone extends Component { class BindPhone extends Component {
...@@ -11,18 +11,19 @@ class BindPhone extends Component { ...@@ -11,18 +11,19 @@ class BindPhone extends Component {
constructor(props) { constructor(props) {
super(props), super(props),
this.state = { this.state = {
validate: '', validate: '',
seconds: 60, seconds: 60,
isFirst: true, isFirst: true,
timer: null, timer: null,
isTimer: false, // 是否开始倒计时 isTimer: false, // 是否开始倒计时
accountInfo: {}, accountInfo: {},
bindInfo: {}, bindInfo: {},
country: { country: {
num: '86' num: '86'
},
validationData: null
} }
}
} }
componentDidMount() { componentDidMount() {
...@@ -30,14 +31,14 @@ class BindPhone extends Component { ...@@ -30,14 +31,14 @@ class BindPhone extends Component {
} }
initCountryInfo = () => { initCountryInfo = () => {
const { country } = this.props; const {country} = this.props;
this.setState({ this.setState({
country country
}); });
} }
toFetchCountryNum = () => { toFetchCountryNum = () => {
const { history, hideBindPhone } = this.props; const {history, hideBindPhone} = this.props;
hideBindPhone(); hideBindPhone();
history.push('/country?from=bind'); history.push('/country?from=bind');
} }
...@@ -46,45 +47,43 @@ class BindPhone extends Component { ...@@ -46,45 +47,43 @@ class BindPhone extends Component {
this.captchaInstance = instance; this.captchaInstance = instance;
} }
onVerify = (err, data) => { onVerify = (data) => {
if (err) { this.setState({
console.log(err); validate: true,
} else { validationData: data
this.setState({ })
validate: data.validate
});
}
} }
// 获取手机号验证码 // 获取手机号验证码
handleToSend = ({tel, code}) => { handleToSend = ({tel, code}) => {
let { validate, seconds, isFirst, isTimer, country: {num = '86'} } = this.state; let {validate, seconds, validationData, isFirst, isTimer, country: {num = '86'}} = this.state;
if(validate) { if (validate) {
if (!isFirst) { if (!isFirst) {
Toast.info('请重新进行滑块验证', 2, null, false); Toast.info('请重新进行滑块验证', 2, null, false);
this.captchaInstance.refresh(); this.captchaInstance.reset();
this.setState({ this.setState({
isFirst: true isFirst: true
}); });
return return
} }
if(!isTimer) { if (!isTimer) {
if (!tel) { if (!tel) {
Toast.info('手机号码不能为空', 2, null, false); Toast.info('手机号码不能为空', 2, null, false);
}else if(!/^\d+$/.test(tel)) { } else if (!/^\d+$/.test(tel)) {
Toast.info('请输入正确格式的手机号码', 2, null, false); Toast.info('请输入正确格式的手机号码', 2, null, false);
}else { } else {
// 获取验证码 // 获取验证码
http.post( http.post(
`${API['passport-api']}/m/personal/bindPhoneSendCode`, `${API['passport-api']}/m/personal/bindPhoneSendCode`,
{ {
area_code: `00${num}`, area_code: `00${num}`,
phone_num: tel phone_num: tel,
...validationData
} }
).then(res => { ).then(res => {
const { errno, msg } = res.data; const {errno, msg} = res.data;
if(errno === 200) { if (errno === 200) {
Toast.info('验证码发送成功', 2, null, false); Toast.info('验证码发送成功', 2, null, false);
// 倒计时 // 倒计时
...@@ -95,7 +94,7 @@ class BindPhone extends Component { ...@@ -95,7 +94,7 @@ class BindPhone extends Component {
isTimer: false, isTimer: false,
seconds: 60 seconds: 60
}); });
}else { } else {
this.setState({ this.setState({
isTimer: true, isTimer: true,
seconds: --seconds seconds: --seconds
...@@ -107,7 +106,7 @@ class BindPhone extends Component { ...@@ -107,7 +106,7 @@ class BindPhone extends Component {
this.setState({ this.setState({
isFirst: false isFirst: false
}) })
}else { } else {
Toast.info(msg, 2, null, false); Toast.info(msg, 2, null, false);
} }
}) })
...@@ -119,8 +118,8 @@ class BindPhone extends Component { ...@@ -119,8 +118,8 @@ class BindPhone extends Component {
// 绑定手机 // 绑定手机
toBindPhone = () => { toBindPhone = () => {
const { accountInfo: { tel, code }, country: {num = '86'} } = this.state; const {accountInfo: {tel, code}, country: {num = '86'}} = this.state;
const { handleToConfirmPhone, successBindPhone } = this.props; const {handleToConfirmPhone, successBindPhone} = this.props;
const params = { const params = {
area_code: `00${num}`, area_code: `00${num}`,
mobile: tel, mobile: tel,
...@@ -129,121 +128,118 @@ class BindPhone extends Component { ...@@ -129,121 +128,118 @@ class BindPhone extends Component {
}; };
http.post( http.post(
`${API.home}/sys/v2/user/bindMobile`, `${API.home}/sys/v2/user/bindMobile`,
{ {
...params, ...params,
type: 1, // 1：绑定，2：修改绑定 type: 1, // 1：绑定，2：修改绑定
is_valid: 1, // is_valid 是否验证 1:验证（默认）,0不验证 is_valid: 1, // is_valid 是否验证 1:验证（默认）,0不验证
} }
).then(res => { ).then(res => {
const { code, data, msg } = res.data; const {code, data, msg} = res.data;
if(code === 200 ) { if (code === 200) {
if(data.tip_info) { if (data.tip_info) {
handleToConfirmPhone(params, data.tip_info); handleToConfirmPhone(params, data.tip_info);
}else { } else {
successBindPhone(); successBindPhone();
} }
}else { } else {
Toast.info(msg, 2, null, false); Toast.info(msg, 2, null, false);
} }
}); });
} }
render() { render() {
const { desc, skip = 'year' } = this.props; const {desc, skip = 'year'} = this.props;
const { country, validate, isTimer, seconds } = this.state; const {country, validate, isTimer, seconds} = this.state;
return ( return (
<Formik <Formik
initialValues={{ initialValues={{
tel: '', tel: '',
code: '' code: ''
}} }}
validate={({tel, code}) => { validate={({tel, code}) => {
const errors = {}; const errors = {};
// if (!validateTel(tel)) { // if (!validateTel(tel)) {
if(!/^\d+$/.test(tel)) { if (!/^\d+$/.test(tel)) {
errors.tel = '请填写正确格式的手机号'; errors.tel = '请填写正确格式的手机号';
}
if (!/[0-9]{6}/.test(code)) {
errors.code = '请输入验证码';
}
return errors;
}}
onSubmit={(values, {setStatus, setSubmitting}) => {
this.setState({
accountInfo: {
...values
} }
if (!/[0-9]{6}/.test(code)) { });
errors.code = '请输入验证码'; this.toBindPhone();
}}
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>
} }
<div className="popup-form__item">
return errors; <a className="popup-form__button--num" onClick={this.toFetchCountryNum}>
}} +{country.num}
onSubmit={(values, { setStatus, setSubmitting }) => { <i className="iconfont iconiconfront-69"/>
this.setState({ </a>
accountInfo: { <Field
...values name="tel"
} render={({field}) => {
}); return (
this.toBindPhone(); <input
}} {...field}
render={({values: {tel, code}, errors}) => ( className="popup-form__ipt"
<Form className="popup-form" data-skip={skip}> data-type="tel"
<h2 className="popup-form__title">绑定手机号</h2> type="text"
{ placeholder="请填写手机号"
desc && />
<div className="poup-form__desc">{desc}</div> );
} }}
<div className="popup-form__item"> />
<a className="popup-form__button--num" onClick={this.toFetchCountryNum}> </div>
+{country.num} <CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>
<i className="iconfont iconiconfront-69"/> <div className="popup-form__item">
</a> <Field
<Field name="code"
name="tel" render={({field}) => {
render={({field}) => { return (
return ( <input
<input {...field}
{...field} className="popup-form__ipt popup-form__ipt--left"
className="popup-form__ipt" type="text"
data-type="tel" placeholder="输入验证码"
type="text" />
placeholder="请填写手机号" );
/> }}
);
}}
/>
</div>
<Captcha
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 <button
className="popup-form__button--bundle" className="popup-form__button--code"
data-status={(tel && code && isEmpty(errors))? 'do': 'done'} data-status={(validate && !isTimer) ? 'do' : ''}
type="submit" type="button"
onClick={() => this.handleToSend({tel, code})}
> >
完成绑定 {
isTimer ? `重新发送${seconds}s` : '发送验证码'
}
</button> </button>
</Form> </div>
)} <button
/> className="popup-form__button--bundle"
data-status={(tel && code && isEmpty(errors)) ? 'do' : 'done'}
type="submit"
>
完成绑定
</button>
</Form>
)}
/>
) )
} }
} }
......
src/common/index.js
...@@ -5,6 +5,7 @@ export { default as OrderItem } from './OrderList' ...@@ -5,6 +5,7 @@ export { default as OrderItem } from './OrderList'
export { default as HeaderBar } from './HeaderBar' export { default as HeaderBar } from './HeaderBar'
export { default as CallApp } from './CallApp' export { default as CallApp } from './CallApp'
export { default as Captcha } from './Captcha' export { default as Captcha } from './Captcha'
export { default as CaptchaAli } from './Captcha-ali'
export { default as ClearableInput } from "./ClearableInput" export { default as ClearableInput } from "./ClearableInput"
export { default as Loading } from './Loading' export { default as Loading } from './Loading'
export { default as RenderTabBar } from './renderTabBar' export { default as RenderTabBar } from './renderTabBar'
......
src/components/detail/redPacket/index.js
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import {CopyToClipboard} from 'react-copy-to-clipboard'; import { CopyToClipboard } from 'react-copy-to-clipboard';
import classnames from 'classnames'; import classnames from 'classnames';
import { isEmpty } from 'lodash'; import { isEmpty } from 'lodash';
import { browser } from '@/utils'; import { browser } from '@/utils';
import { http, getParam, validateTel } from "@/utils"; import { http, getParam, validateTel } from "@/utils";
import { Formik, Form, Field } from 'formik'; import { Formik, Form, Field } from 'formik';
import { Toast } from 'antd-mobile'; import { Toast } from 'antd-mobile';
import Captcha from '@/common/Captcha'; import CaptchaAli from "@common/Captcha-ali"
import FollowQRcode from './../followQRcode'; import FollowQRcode from './../followQRcode';
import './index.scss'; import './index.scss';
import cookie from 'js-cookie' import cookie from 'js-cookie'
...@@ -17,37 +17,38 @@ class RedPacket extends PureComponent { ...@@ -17,37 +17,38 @@ class RedPacket extends PureComponent {
constructor(props) { constructor(props) {
super(props), super(props),
this.state = { this.state = {
// 弹窗类型：0: 无弹出，1:非微信，2:微信 // 弹窗类型：0: 无弹出，1:非微信，2:微信
type: 0, type: 0,
isCopy: false, 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: { shareInfo: {
url: '', url: '',
share_code: '', share_code: '',
command: '【七月在线送你一个红包】https://www.julyedu.com/' command: '【七月在线送你一个红包】https://www.julyedu.com/'
}, },
doneInfo: { //领取后的状态，1:领取成功，2:领取超时 doneInfo: { //领取后的状态，1:领取成功，2:领取超时
status: 2, status: 2,
txt: '手机号绑定超时，红包已失效!', txt: '手机号绑定超时，红包已失效!',
desc: '' desc: ''
}, },
money: '', // 红包金额, money: '', // 红包金额,
endTime: 10, // 手机绑定时限 endTime: 10, // 手机绑定时限
countdownTimer: null, countdownTimer: null,
countdown: '00分00秒', // 绑定时间 countdown: '00分00秒', // 绑定时间
accountInfo: {}, accountInfo: {},
bindInfo: {}, bindInfo: {},
country: { country: {
num: '86' num: '86'
},
validationData: null,
} }
}
} }
componentDidMount() { componentDidMount() {
...@@ -60,20 +61,19 @@ class RedPacket extends PureComponent { ...@@ -60,20 +61,19 @@ class RedPacket extends PureComponent {
window.addEventListener('beforeunload', this.removeStatisticsCookie) window.addEventListener('beforeunload', this.removeStatisticsCookie)
// 微信进入 // 微信进入
const isWechat = getParam('wechat'); const isWechat = getParam('wechat');
const { userInfo } = this.props; const {userInfo} = this.props;
if(!userInfo || !userInfo.uid) { if (!userInfo || !userInfo.uid) {
this.setRelativeCookie() this.setRelativeCookie()
} }
if(isWechat === '1' && !browser.isWeixin) { if (isWechat === '1' && !browser.isWeixin) {
if(userInfo && userInfo.uid) { if (userInfo && userInfo.uid) {
const type = window.localStorage.getItem('redpacket-click'); const type = window.localStorage.getItem('redpacket-click');
if(type === 'split') { if (type === 'split') {
http.get(`${API.home}/sys/redPacket/shareUrl/${getParam('id')}`).then(res => { http.get(`${API.home}/sys/redPacket/shareUrl/${getParam('id')}`).then(res => {
const { code, data } = res.data; const {code, data} = res.data;
if(code === 200) { if (code === 200) {
// 检查收否领取过 // 检查收否领取过
http.post( http.post(
...@@ -83,13 +83,13 @@ class RedPacket extends PureComponent { ...@@ -83,13 +83,13 @@ class RedPacket extends PureComponent {
share_code: data.share_code share_code: data.share_code
} }
).then(res => { ).then(res => {
const { code, data } = res.data; const {code, data} = res.data;
if(code === 200) { if (code === 200) {
window.localStorage.removeItem('redpacket-click'); window.localStorage.removeItem('redpacket-click');
// is_receive 是否领取过 0-否 1-是 // is_receive 是否领取过 0-否 1-是
if(data.is_receive) { if (data.is_receive) {
this.judgeReceiveStatus(data, 8); this.judgeReceiveStatus(data, 8);
}else { } else {
this.setState({ this.setState({
type: 3 type: 3
}); });
...@@ -98,13 +98,13 @@ class RedPacket extends PureComponent { ...@@ -98,13 +98,13 @@ class RedPacket extends PureComponent {
}) })
} }
}); });
}else { } else {
this.setState({ this.setState({
type: 1 type: 1
}); });
window.localStorage.removeItem('redpacket-click'); window.localStorage.removeItem('redpacket-click');
} }
}else { } else {
this.setRelativeCookie() this.setRelativeCookie()
this.setState({ this.setState({
type: 1 type: 1
...@@ -127,10 +127,10 @@ class RedPacket extends PureComponent { ...@@ -127,10 +127,10 @@ class RedPacket extends PureComponent {
fetchShareInfo = () => { fetchShareInfo = () => {
const share_code = getParam('share_code'); const share_code = getParam('share_code');
http.get(`${API.home}/sys/redPacket/shareUrl/${getParam('id')}`).then(res => { http.get(`${API.home}/sys/redPacket/shareUrl/${getParam('id')}`).then(res => {
const { code, data } = res.data; const {code, data} = res.data;
if(code === 200) { if (code === 200) {
this.setState({ this.setState({
shareInfo: share_code? Object.assign({}, data, {share_code}) : data shareInfo: share_code ? Object.assign({}, data, {share_code}) : data
}); });
} }
}); });
...@@ -139,8 +139,8 @@ class RedPacket extends PureComponent { ...@@ -139,8 +139,8 @@ class RedPacket extends PureComponent {
// 分享后进入，链接中带 share_code 字段 // 分享后进入，链接中带 share_code 字段
judgePopupType = () => { judgePopupType = () => {
const share_code = getParam('share_code'); const share_code = getParam('share_code');
const { shareInfo } = this.state; const {shareInfo} = this.state;
if(share_code && share_code !== 'null') { if (share_code && share_code !== 'null') {
this.setState({ this.setState({
shareInfo: Object.assign({}, shareInfo, { shareInfo: Object.assign({}, shareInfo, {
share_code share_code
...@@ -156,28 +156,28 @@ class RedPacket extends PureComponent { ...@@ -156,28 +156,28 @@ class RedPacket extends PureComponent {
} }
).then(res => { ).then(res => {
const {code, data} = res.data; const {code, data} = res.data;
if(code === 200) { if (code === 200) {
// is_overdue 红包是否过期 0-否 1-是 // is_overdue 红包是否过期 0-否 1-是
if(data.is_overdue) { if (data.is_overdue) {
this.setState({ this.setState({
type: 7 type: 7
}); });
}else { } else {
// is_receive 是否领取过 0-否 1-是 // is_receive 是否领取过 0-否 1-是
if(data.is_receive) { if (data.is_receive) {
this.judgeReceiveStatus(data); this.judgeReceiveStatus(data);
}else { } else {
this.setState({ this.setState({
type: browser.isWeixin? 2 : 3 type: browser.isWeixin ? 2 : 3
}); });
} }
} }
} }
if(code === 4030 || code === 4040) { if (code === 4030 || code === 4040) {
this.setState({ this.setState({
type: browser.isWeixin? 2 : 3 type: browser.isWeixin ? 2 : 3
}); });
} }
}); });
...@@ -186,9 +186,9 @@ class RedPacket extends PureComponent { ...@@ -186,9 +186,9 @@ class RedPacket extends PureComponent {
// 选择区号后进入 // 选择区号后进入
judgePopupTypeFromCountry = () => { judgePopupTypeFromCountry = () => {
const { country } = this.props; const {country} = this.props;
const { shareInfo } = this.state; const {shareInfo} = this.state;
if(country.code) { if (country.code) {
this.setState({ this.setState({
country, country,
shareInfo: Object.assign({}, shareInfo, { shareInfo: Object.assign({}, shareInfo, {
...@@ -205,13 +205,13 @@ class RedPacket extends PureComponent { ...@@ -205,13 +205,13 @@ class RedPacket extends PureComponent {
} }
).then(res => { ).then(res => {
console.log(res); console.log(res);
const { code, data } = res.data; const {code, data} = res.data;
if(code === 200) { if (code === 200) {
// is_receive 是否领取过 0-否 1-是 // is_receive 是否领取过 0-否 1-是
if(data.is_receive) { if (data.is_receive) {
this.judgeReceiveStatus(data, 8); this.judgeReceiveStatus(data, 8);
}else { } else {
this.setState({ this.setState({
type: 3 type: 3
}); });
...@@ -226,27 +226,27 @@ class RedPacket extends PureComponent { ...@@ -226,27 +226,27 @@ class RedPacket extends PureComponent {
// 判断领取状态--领取后 // 判断领取状态--领取后
judgeReceiveStatus = (data, bindType=4) => { judgeReceiveStatus = (data, bindType = 4) => {
let txt = ''; let txt = '';
let desc = ''; let desc = '';
// receive_type 领取类型 1自己 2别人 // receive_type 领取类型 1自己 2别人
if(data.receive_type === 1) { if (data.receive_type === 1) {
desc = '越多好友领取，你所得越多！'; desc = '越多好友领取，你所得越多！';
} }
if(data.receive_type === 2) { if (data.receive_type === 2) {
desc = '每天只能帮好友领取一次哦~'; desc = '每天只能帮好友领取一次哦~';
} }
// is_overdue 红包是否过期 0-否 1-是 // is_overdue 红包是否过期 0-否 1-是
if(data.is_overdue) { if (data.is_overdue) {
txt = data.red_packet_type === 1? `您已经领过该红包 ${data.amount}元现金！`: `您已经领过该红包 ${data.amount}元代金券碎片！`; txt = data.red_packet_type === 1 ? `您已经领过该红包 ${data.amount}元现金！` : `您已经领过该红包 ${data.amount}元代金券碎片！`;
}else { } else {
txt = data.red_packet_type === 1? `今日已领取${data.amount}元现金！`: `今日已领取${data.amount}元代金券碎片！`; txt = data.red_packet_type === 1 ? `今日已领取${data.amount}元现金！` : `今日已领取${data.amount}元代金券碎片！`;
} }
// receive_status 领取状态 1-已领取 2-已领取未绑定 3-已失效 // receive_status 领取状态 1-已领取 2-已领取未绑定 3-已失效
if(data.receive_status === 1) { if (data.receive_status === 1) {
this.setState({ this.setState({
type: 9, type: 9,
doneInfo: { doneInfo: {
...@@ -255,14 +255,14 @@ class RedPacket extends PureComponent { ...@@ -255,14 +255,14 @@ class RedPacket extends PureComponent {
desc desc
} }
}); });
}else if(data.receive_status === 2) { } else if (data.receive_status === 2) {
this.setState({ this.setState({
type: bindType, type: bindType,
money: data.amount, money: data.amount,
endTime: data.end_time endTime: data.end_time
}); });
this.startCountDown(); this.startCountDown();
}else if(data.receive_status === 3) { } else if (data.receive_status === 3) {
this.setState({ this.setState({
type: 9, type: 9,
doneInfo: { doneInfo: {
...@@ -276,10 +276,10 @@ class RedPacket extends PureComponent { ...@@ -276,10 +276,10 @@ class RedPacket extends PureComponent {
// 绑定时间 // 绑定时间
startCountDown = () => { startCountDown = () => {
if(this.countdownTimer) { if (this.countdownTimer) {
window.clearInterval(this.countdownTimer); window.clearInterval(this.countdownTimer);
} }
const { endTime } = this.state; const {endTime} = this.state;
let time = endTime; let time = endTime;
let minutes = 0; let minutes = 0;
let seconds = 0; let seconds = 0;
...@@ -301,25 +301,25 @@ class RedPacket extends PureComponent { ...@@ -301,25 +301,25 @@ class RedPacket extends PureComponent {
// 获取分享信息 // 获取分享信息
handleToShare = () => { handleToShare = () => {
const { history, userInfo } = this.props; const {history, userInfo} = this.props;
if(browser.isWeixin) { if (browser.isWeixin) {
this.setState({ this.setState({
type: 2 type: 2
}); });
history.push(`/detail?id=${getParam('id')}&wechat=1`); history.push(`/detail?id=${getParam('id')}&wechat=1`);
}else { } else {
if(userInfo && userInfo.uid) { if (userInfo && userInfo.uid) {
// 领取好友的后，再领取自己的 share_code 未更新 // 领取好友的后，再领取自己的 share_code 未更新
http.get(`${API.home}/sys/redPacket/shareUrl/${getParam('id')}`).then(res => { http.get(`${API.home}/sys/redPacket/shareUrl/${getParam('id')}`).then(res => {
const { code, data } = res.data; const {code, data} = res.data;
if(code === 200) { if (code === 200) {
this.setState({ this.setState({
shareInfo: data, shareInfo: data,
type: 1 type: 1
}); });
} }
}); });
}else { } else {
history.push('/passport/login'); history.push('/passport/login');
} }
} }
...@@ -327,10 +327,10 @@ class RedPacket extends PureComponent { ...@@ -327,10 +327,10 @@ class RedPacket extends PureComponent {
// 提示关注公众号 // 提示关注公众号
openTip = () => { openTip = () => {
const { shareInfo } = this.state; const {shareInfo} = this.state;
// is_follow 是否关注公众号，0否，1是 // is_follow 是否关注公众号，0否，1是
if(!shareInfo.is_follow) { if (!shareInfo.is_follow) {
this.setState({ this.setState({
type: 11 type: 11
}); });
...@@ -339,8 +339,8 @@ class RedPacket extends PureComponent { ...@@ -339,8 +339,8 @@ class RedPacket extends PureComponent {
// 拆红包 // 拆红包
handleToOpen = () => { handleToOpen = () => {
const { history } = this.props; const {history} = this.props;
const { shareInfo: { share_code='' } } = this.state; const {shareInfo: {share_code = ''}} = this.state;
http.post( http.post(
`${API.home}/sys/redPacket/split`, `${API.home}/sys/redPacket/split`,
{ {
...@@ -348,55 +348,55 @@ class RedPacket extends PureComponent { ...@@ -348,55 +348,55 @@ class RedPacket extends PureComponent {
share_code share_code
} }
).then(res => { ).then(res => {
const { code, data } = res.data; const {code, data} = res.data;
if(code === 200) { if (code === 200) {
// is_receive 是否领取过 0-否 1-是 // is_receive 是否领取过 0-否 1-是
if(data.is_receive) { if (data.is_receive) {
this.judgeReceiveStatus(data); this.judgeReceiveStatus(data);
}else { } else {
// red_packet_type 红包类型 1-现金 2-代金券 // red_packet_type 红包类型 1-现金 2-代金券
if(data.red_packet_type === 2) { if (data.red_packet_type === 2) {
this.setState({ this.setState({
type: 6, type: 6,
money: data.amount money: data.amount
}); });
}else if(data.red_packet_type === 1) { } else if (data.red_packet_type === 1) {
// receive_status 领取状态 1-已领取 2-已领取未绑定 3-已失效 // receive_status 领取状态 1-已领取 2-已领取未绑定 3-已失效
if(data.receive_status === 1) { if (data.receive_status === 1) {
if(data.red_packet_type === 1) { if (data.red_packet_type === 1) {
this.setState({ this.setState({
type: 5, type: 5,
money: data.amount money: data.amount
}); });
}else if(data.red_packet_type === 2 ) { } else if (data.red_packet_type === 2) {
this.setState({ this.setState({
type: 6, type: 6,
money: data.amount money: data.amount
}); });
} }
}else if(data.receive_status === 2) { } else if (data.receive_status === 2) {
this.setState({ this.setState({
type: 4, type: 4,
money: data.amount, money: data.amount,
endTime: data.end_time endTime: data.end_time
}); });
this.startCountDown(); this.startCountDown();
}else if(data.receive_status === 3) { } else if (data.receive_status === 3) {
this.setState({ this.setState({
type: 9, type: 9,
doneInfo: { doneInfo: {
status: 2, status: 2,
txt: '手机号绑定超时，红包已失效!', txt: '手机号绑定超时，红包已失效!',
desc: data.receive_type === 1? '越多好友领取，你所得越多！' : data.receive_type === 2? '每天只能帮好友领取一次哦~' : '' desc: data.receive_type === 1 ? '越多好友领取，你所得越多！' : data.receive_type === 2 ? '每天只能帮好友领取一次哦~' : ''
} }
}); });
} }
} }
} }
}else if(code === 4030 || code === 4040) { } else if (code === 4030 || code === 4040) {
history.push('/passport/login'); history.push('/passport/login');
} }
}) })
...@@ -404,8 +404,8 @@ class RedPacket extends PureComponent { ...@@ -404,8 +404,8 @@ class RedPacket extends PureComponent {
// 关闭弹出 // 关闭弹出
handleToClose = (isOpen, isShare = false) => { handleToClose = (isOpen, isShare = false) => {
if(isOpen) { if (isOpen) {
const { shareInfo: { share_code='' } } = this.state; const {shareInfo: {share_code = ''}} = this.state;
// 检查收否领取过 // 检查收否领取过
http.post( http.post(
...@@ -415,22 +415,22 @@ class RedPacket extends PureComponent { ...@@ -415,22 +415,22 @@ class RedPacket extends PureComponent {
share_code share_code
} }
).then(res => { ).then(res => {
const { code, data } = res.data; const {code, data} = res.data;
if(code === 200) { if (code === 200) {
// is_receive 是否领取过 0-否 1-是 // is_receive 是否领取过 0-否 1-是
if(data.is_receive) { if (data.is_receive) {
this.judgeReceiveStatus(data); this.judgeReceiveStatus(data);
}else { } else {
this.setState({ this.setState({
type: 3 type: 3
}); });
} }
} }
}); });
}else { } else {
if(isShare) { if (isShare) {
const { history } = this.props; const {history} = this.props;
history.push(`/detail?id=${getParam('id')}`); history.push(`/detail?id=${getParam('id')}`);
} }
this.setState({ this.setState({
...@@ -441,8 +441,8 @@ class RedPacket extends PureComponent { ...@@ -441,8 +441,8 @@ class RedPacket extends PureComponent {
// 微信内点击蒙层 // 微信内点击蒙层
clickMask = () => { clickMask = () => {
const { type } = this.state; const {type} = this.state;
if(type === 2) { if (type === 2) {
this.setState({ this.setState({
type: 0 type: 0
}); });
...@@ -455,45 +455,43 @@ class RedPacket extends PureComponent { ...@@ -455,45 +455,43 @@ class RedPacket extends PureComponent {
}); });
} }
onVerify = (err, data) => { onVerify = (data) => {
if (err) { this.setState({
console.log(err); validate: true,
} else { validationData: data
this.setState({ })
validate: data.validate
});
}
} }
handleToSend = ({tel, code}) => { handleToSend = ({tel, code}) => {
let { validate, seconds, isFirst, isTimer, captchaInstance, country: {num = '86'} } = this.state; let {validate, seconds, validationData, isFirst, isTimer, captchaInstance, country: {num = '86'}} = this.state;
if(validate) { if (validate) {
if (!isFirst) { if (!isFirst) {
Toast.info('请重新进行滑块验证', 2, null, false); Toast.info('请重新进行滑块验证', 2, null, false);
captchaInstance.refresh(); captchaInstance.reset();
this.setState({ this.setState({
isFirst: true isFirst: true
}); });
return return
} }
if(!isTimer) { if (!isTimer) {
if (!tel) { if (!tel) {
Toast.info('手机号码不能为空', 2, null, false); Toast.info('手机号码不能为空', 2, null, false);
}else if(!/^\d+$/.test(tel)) { } else if (!/^\d+$/.test(tel)) {
// }else if (!validateTel(tel)) { // }else if (!validateTel(tel)) {
Toast.info('请输入正确格式的手机号码', 2, null, false); Toast.info('请输入正确格式的手机号码', 2, null, false);
}else { } else {
// 获取验证码 // 获取验证码
http.post( http.post(
`${API['passport-api']}/m/personal/bindPhoneSendCode`, `${API['passport-api']}/m/personal/bindPhoneSendCode`,
{ {
area_code: `00${num}`, area_code: `00${num}`,
phone_num: tel phone_num: tel,
...validationData
} }
).then(res => { ).then(res => {
const { errno, msg } = res.data; const {errno, msg} = res.data;
if(errno === 200) { if (errno === 200) {
Toast.info('验证码发送成功', 2, null, false); Toast.info('验证码发送成功', 2, null, false);
// 倒计时 // 倒计时
...@@ -504,7 +502,7 @@ class RedPacket extends PureComponent { ...@@ -504,7 +502,7 @@ class RedPacket extends PureComponent {
isTimer: false, isTimer: false,
seconds: 60 seconds: 60
}); });
}else { } else {
this.setState({ this.setState({
isTimer: true, isTimer: true,
seconds: --seconds seconds: --seconds
...@@ -516,7 +514,7 @@ class RedPacket extends PureComponent { ...@@ -516,7 +514,7 @@ class RedPacket extends PureComponent {
this.setState({ this.setState({
isFirst: false isFirst: false
}) })
}else { } else {
Toast.info(msg, 2, null, false); Toast.info(msg, 2, null, false);
} }
}) })
...@@ -529,39 +527,39 @@ class RedPacket extends PureComponent { ...@@ -529,39 +527,39 @@ class RedPacket extends PureComponent {
// 绑定后领取 // 绑定后领取
receviceAfterBind = () => { receviceAfterBind = () => {
http.get(`${API.home}/sys/red_packet/receive`).then(res => { http.get(`${API.home}/sys/red_packet/receive`).then(res => {
const { code, data, msg } = res.data; const {code, data, msg} = res.data;
if(code === 200) { if (code === 200) {
// receive_status 领取状态 1-已领取 2-已领取未绑定 3-已失效 // receive_status 领取状态 1-已领取 2-已领取未绑定 3-已失效
if(data.receive_status === 1) { if (data.receive_status === 1) {
if(data.red_packet_type === 1) { if (data.red_packet_type === 1) {
this.setState({ this.setState({
type: 5, type: 5,
money: data.amount money: data.amount
}); });
}else if(data.red_packet_type === 2 ) { } else if (data.red_packet_type === 2) {
this.setState({ this.setState({
type: 6, type: 6,
money: data.amount money: data.amount
}); });
} }
}else if(data.receive_status === 2) { } else if (data.receive_status === 2) {
this.setState({ this.setState({
type: 4, type: 4,
money: data.amount, money: data.amount,
endTime: data.end_time endTime: data.end_time
}); });
this.startCountDown(); this.startCountDown();
}else if(data.receive_status === 3) { } else if (data.receive_status === 3) {
this.setState({ this.setState({
type: 9, type: 9,
doneInfo: { doneInfo: {
status: 2, status: 2,
txt: '手机号绑定超时，红包已失效!', txt: '手机号绑定超时，红包已失效!',
desc: data.receive_type === 1? '越多好友领取，你所得越多！' : data.receive_type === 2? '每天只能帮好友领取一次哦~' : '' desc: data.receive_type === 1 ? '越多好友领取，你所得越多！' : data.receive_type === 2 ? '每天只能帮好友领取一次哦~' : ''
} }
}); });
} }
}else { } else {
Toast.info(msg, 2, null, false); Toast.info(msg, 2, null, false);
} }
}) })
...@@ -569,7 +567,7 @@ class RedPacket extends PureComponent { ...@@ -569,7 +567,7 @@ class RedPacket extends PureComponent {
// 绑定手机 // 绑定手机
toContinueBind = (isValid = 1) => { toContinueBind = (isValid = 1) => {
const { accountInfo: { tel, code}, country: {num = '86'} } = this.state; const {accountInfo: {tel, code}, country: {num = '86'}} = this.state;
// is_valid 是否验证 1:验证（默认）,0不验证 // is_valid 是否验证 1:验证（默认）,0不验证
http.post( http.post(
`${API['passport-api']}/m/personal/bindPhone`, `${API['passport-api']}/m/personal/bindPhone`,
...@@ -581,21 +579,21 @@ class RedPacket extends PureComponent { ...@@ -581,21 +579,21 @@ class RedPacket extends PureComponent {
is_valid: isValid is_valid: isValid
} }
).then(res => { ).then(res => {
const { errno, data, msg } = res.data; const {errno, data, msg} = res.data;
if(errno === 200 ) { if (errno === 200) {
if(isValid) { if (isValid) {
if(data.tip_info) { if (data.tip_info) {
this.setState({ this.setState({
type: 10, type: 10,
bindInfo: data.tip_info bindInfo: data.tip_info
}) })
}else { } else {
this.receviceAfterBind(); this.receviceAfterBind();
} }
}else { } else {
this.receviceAfterBind(); this.receviceAfterBind();
} }
}else { } else {
Toast.info(msg, 2, null, false); Toast.info(msg, 2, null, false);
} }
}); });
...@@ -610,7 +608,7 @@ class RedPacket extends PureComponent { ...@@ -610,7 +608,7 @@ class RedPacket extends PureComponent {
render() { render() {
// console.log(this.props); // console.log(this.props);
const { history, userInfo } = this.props; const {history, userInfo} = this.props;
const { const {
type, type,
isCopy, isCopy,
...@@ -628,7 +626,7 @@ class RedPacket extends PureComponent { ...@@ -628,7 +626,7 @@ class RedPacket extends PureComponent {
bindInfo, bindInfo,
country country
} = this.state; } = this.state;
const cls = classnames('popup-mask',{ const cls = classnames('popup-mask', {
'popup-mask--no': type !== 2 'popup-mask--no': type !== 2
}); });
return ( return (
...@@ -661,21 +659,21 @@ class RedPacket extends PureComponent { ...@@ -661,21 +659,21 @@ class RedPacket extends PureComponent {
<h4 className="popup-password__header">复制口令发送给好友</h4> <h4 className="popup-password__header">复制口令发送给好友</h4>
<div className="popup-password__body"> <div className="popup-password__body">
<p id="password" className="popup-passowrd__info"> <p id="password" className="popup-passowrd__info">
{command.length > 16? `${command.substr(0, 16)}...` : command} {command.length > 16 ? `${command.substr(0, 16)}...` : command}
</p> </p>
{!isCopy {!isCopy
? userInfo && userInfo.uid ? userInfo && userInfo.uid
? ( ? (
<CopyToClipboard <CopyToClipboard
text={command} text={command}
onCopy={() => this.setState({ onCopy={() => this.setState({
isCopy: true isCopy: true
})} })}
> >
<button className="popup-password__button--copy">复制口令</button> <button className="popup-password__button--copy">复制口令</button>
</CopyToClipboard> </CopyToClipboard>
) )
: ( : (
<button <button
className="popup-password__button--copy" className="popup-password__button--copy"
onClick={() => { onClick={() => {
...@@ -688,24 +686,24 @@ class RedPacket extends PureComponent { ...@@ -688,24 +686,24 @@ class RedPacket extends PureComponent {
} }
</div> </div>
<p className="popup-password__footer"> <p className="popup-password__footer">
好友领取红包后，你将获得同样奖励。<br /> 好友领取红包后，你将获得同样奖励。<br/>
自己也可以领取哦~ 自己也可以领取哦~
</p> </p>
</div> </div>
<i <i
className="popup-password__button--close iconfont iconiconfront-2" className="popup-password__button--close iconfont iconiconfront-2"
onClick={() => { onClick={() => {
if(getParam('wechat') === '1') { if (getParam('wechat') === '1') {
if(userInfo && userInfo.uid) { if (userInfo && userInfo.uid) {
this.handleToClose(true); this.handleToClose(true);
history.push(`/detail?id=${getParam('id')}`); history.push(`/detail?id=${getParam('id')}`);
}else { } else {
this.setState({ this.setState({
type: 3 type: 3
}); });
window.localStorage.setItem('redpacket-click', 'split'); window.localStorage.setItem('redpacket-click', 'split');
} }
}else { } else {
this.handleToClose(true); this.handleToClose(true);
} }
this.setState({ this.setState({
...@@ -758,7 +756,7 @@ class RedPacket extends PureComponent { ...@@ -758,7 +756,7 @@ class RedPacket extends PureComponent {
type={5} type={5}
packetInfo={{ packetInfo={{
money, money,
tip: ['可前往【七月在线】APP','- 账户资金中提现'], tip: ['可前往【七月在线】APP', '- 账户资金中提现'],
btn: { btn: {
txt: '获取更多奖励', txt: '获取更多奖励',
onClick: () => { onClick: () => {
...@@ -767,7 +765,7 @@ class RedPacket extends PureComponent { ...@@ -767,7 +765,7 @@ class RedPacket extends PureComponent {
} }
}} }}
handleToClose={() => { handleToClose={() => {
const isShare = getParam('share_code')? true : false; const isShare = getParam('share_code') ? true : false;
this.handleToClose(false, isShare); this.handleToClose(false, isShare);
this.openTip(); this.openTip();
}} }}
...@@ -781,7 +779,7 @@ class RedPacket extends PureComponent { ...@@ -781,7 +779,7 @@ class RedPacket extends PureComponent {
type={6} type={6}
packetInfo={{ packetInfo={{
money, money,
tip: ['可前往【七月在线】APP','- 我的优惠券中合成代金券'], tip: ['可前往【七月在线】APP', '- 我的优惠券中合成代金券'],
btn: { btn: {
txt: '获取更多奖励', txt: '获取更多奖励',
onClick: () => { onClick: () => {
...@@ -790,7 +788,7 @@ class RedPacket extends PureComponent { ...@@ -790,7 +788,7 @@ class RedPacket extends PureComponent {
} }
}} }}
handleToClose={() => { handleToClose={() => {
const isShare = getParam('share_code')? true : false; const isShare = getParam('share_code') ? true : false;
this.handleToClose(false, isShare); this.handleToClose(false, isShare);
this.openTip(); this.openTip();
}} }}
...@@ -811,7 +809,7 @@ class RedPacket extends PureComponent { ...@@ -811,7 +809,7 @@ class RedPacket extends PureComponent {
} }
}} }}
handleToClose={() => { handleToClose={() => {
const isShare = getParam('share_code')? true : false; const isShare = getParam('share_code') ? true : false;
this.handleToClose(false, isShare); this.handleToClose(false, isShare);
}} }}
/> />
...@@ -830,7 +828,7 @@ class RedPacket extends PureComponent { ...@@ -830,7 +828,7 @@ class RedPacket extends PureComponent {
const errors = {}; const errors = {};
// if (!validateTel(tel)) { // if (!validateTel(tel)) {
if(!/^\d+$/.test(tel)) { if (!/^\d+$/.test(tel)) {
errors.tel = '请填写正确格式的手机号'; errors.tel = '请填写正确格式的手机号';
} }
if (!/[0-9]{6}/.test(code)) { if (!/[0-9]{6}/.test(code)) {
...@@ -839,7 +837,7 @@ class RedPacket extends PureComponent { ...@@ -839,7 +837,7 @@ class RedPacket extends PureComponent {
return errors; return errors;
}} }}
onSubmit={(values, { setStatus, setSubmitting }) => { onSubmit={(values, {setStatus, setSubmitting}) => {
this.setState({ this.setState({
accountInfo: { accountInfo: {
...values ...values
...@@ -873,13 +871,9 @@ class RedPacket extends PureComponent { ...@@ -873,13 +871,9 @@ class RedPacket extends PureComponent {
}} }}
/> />
</div> </div>
<Captcha <CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>
mrBtm={15}
getInstance={this.getCaptchaInstance}
onVerify={this.onVerify}
/>
{ {
endTime === 0? ( endTime === 0 ? (
<> <>
<div className="popup-form__item"> <div className="popup-form__item">
<p className="popup-form__tip"> <p className="popup-form__tip">
...@@ -894,7 +888,8 @@ class RedPacket extends PureComponent { ...@@ -894,7 +888,8 @@ class RedPacket extends PureComponent {
onClick={() => { onClick={() => {
history.push('/ShareCourse'); history.push('/ShareCourse');
}} }}
>获取更多奖励</button> >获取更多奖励
</button>
</> </>
) : ( ) : (
<> <>
...@@ -914,18 +909,18 @@ class RedPacket extends PureComponent { ...@@ -914,18 +909,18 @@ class RedPacket extends PureComponent {
/> />
<button <button
className="popup-form__button--code" className="popup-form__button--code"
data-status={(validate && !isTimer)? 'do': ''} data-status={(validate && !isTimer) ? 'do' : ''}
type="button" type="button"
onClick={() => this.handleToSend({tel, code})} onClick={() => this.handleToSend({tel, code})}
> >
{ {
isTimer? `重新发送${seconds}s` : '发送验证码' isTimer ? `重新发送${seconds}s` : '发送验证码'
} }
</button> </button>
</div> </div>
<button <button
className="popup-packet__button--bundle" className="popup-packet__button--bundle"
data-status={(tel && code && isEmpty(errors))? 'do': 'done'} data-status={(tel && code && isEmpty(errors)) ? 'do' : 'done'}
type="submit" type="submit"
> >
{`完成绑定(${countdown})`} {`完成绑定(${countdown})`}
...@@ -948,7 +943,8 @@ class RedPacket extends PureComponent { ...@@ -948,7 +943,8 @@ class RedPacket extends PureComponent {
type === 9 && type === 9 &&
<div className="popup-done"> <div className="popup-done">
<div className="popup-done__content"> <div className="popup-done__content">
<h4 className={classnames("popup-done__title", {'popup-done__title--overtime': doneInfo.status === 2})}> <h4
className={classnames("popup-done__title", {'popup-done__title--overtime': doneInfo.status === 2})}>
{ {
doneInfo.status === 2 && doneInfo.status === 2 &&
<i className="iconfont icondanseshixintubiao-8"></i> <i className="iconfont icondanseshixintubiao-8"></i>
...@@ -963,12 +959,13 @@ class RedPacket extends PureComponent { ...@@ -963,12 +959,13 @@ class RedPacket extends PureComponent {
onClick={() => { onClick={() => {
history.push('/ShareCourse'); history.push('/ShareCourse');
}} }}
>获取更多奖励</button> >获取更多奖励
</button>
</div> </div>
<i <i
className="popup-password__button--close iconfont iconiconfront-2" className="popup-password__button--close iconfont iconiconfront-2"
onClick={() => { onClick={() => {
const isShare = getParam('share_code')? true : false; const isShare = getParam('share_code') ? true : false;
this.handleToClose(false, isShare); this.handleToClose(false, isShare);
}} }}
/> />
...@@ -1005,10 +1002,10 @@ class RedPacket extends PureComponent { ...@@ -1005,10 +1002,10 @@ class RedPacket extends PureComponent {
bindInfo['qq_nickname'] && bindInfo['qq_nickname'] &&
<li className="popup-bind__account"> <li className="popup-bind__account">
{/* qq */} {/* qq */}
<i className="icon-qq"></i> <i className="icon-qq"></i>
<p className="popup-bind__account--name">{bindInfo['qq_nickname']}</p> <p className="popup-bind__account--name">{bindInfo['qq_nickname']}</p>
</li> </li>
} }
{ {
bindInfo['sina_nickname'] && bindInfo['sina_nickname'] &&
...@@ -1022,11 +1019,13 @@ class RedPacket extends PureComponent { ...@@ -1022,11 +1019,13 @@ class RedPacket extends PureComponent {
</ul> </ul>
<div className="popup-bind__button"> <div className="popup-bind__button">
<button <button
className="popup-bind__button--cancle" className="popup-bind__button--cancle"
onClick={() => this.handleToClose(false)}>取消</button> onClick={() => this.handleToClose(false)}>取消
</button>
<button <button
className="popup-bind__button--confirm" className="popup-bind__button--confirm"
onClick={() => this.toContinueBind(0)}>继续绑定</button> onClick={() => this.toContinueBind(0)}>继续绑定
</button>
</div> </div>
</div> </div>
<i <i
...@@ -1039,7 +1038,7 @@ class RedPacket extends PureComponent { ...@@ -1039,7 +1038,7 @@ class RedPacket extends PureComponent {
{/* 关注公众号 */} {/* 关注公众号 */}
{ {
type === 11 && type === 11 &&
<FollowQRcode toClose={() => this.handleToClose(false)} /> <FollowQRcode toClose={() => this.handleToClose(false)}/>
} }
</div> </div>
} }
...@@ -1048,7 +1047,7 @@ class RedPacket extends PureComponent { ...@@ -1048,7 +1047,7 @@ class RedPacket extends PureComponent {
} }
} }
const Packet = ({type, packetInfo, handleToClose, handleToOpen }) => { const Packet = ({type, packetInfo, handleToClose, handleToOpen}) => {
const cls_content = classnames( const cls_content = classnames(
'popup-packet__content', 'popup-packet__content',
{ {
...@@ -1058,7 +1057,7 @@ const Packet = ({type, packetInfo, handleToClose, handleToOpen }) => { ...@@ -1058,7 +1057,7 @@ const Packet = ({type, packetInfo, handleToClose, handleToOpen }) => {
'popup-packet__content--late': type === 7, 'popup-packet__content--late': type === 7,
} }
); );
const {money, tip=[], btn} = packetInfo; const {money, tip = [], btn} = packetInfo;
return ( return (
<div className={classnames('popup-packet')}> <div className={classnames('popup-packet')}>
<div className={cls_content}> <div className={cls_content}>
...@@ -1066,11 +1065,11 @@ const Packet = ({type, packetInfo, handleToClose, handleToOpen }) => { ...@@ -1066,11 +1065,11 @@ const Packet = ({type, packetInfo, handleToClose, handleToOpen }) => {
type === 3 && type === 3 &&
<> <>
<p className="popup-packet__title">七月在线给你发了个红包～</p> <p className="popup-packet__title">七月在线给你发了个红包～</p>
<button className="popup-packet__button--split" onClick={handleToOpen} /> <button className="popup-packet__button--split" onClick={handleToOpen}/>
</> </>
} }
{ {
(type === 4 || type === 5 || type === 6)&& (type === 4 || type === 5 || type === 6) &&
<> <>
<h4 className="popup-packet__label">恭喜您获得</h4> <h4 className="popup-packet__label">恭喜您获得</h4>
<p className="popup-packet__value"> <p className="popup-packet__value">
...@@ -1080,11 +1079,11 @@ const Packet = ({type, packetInfo, handleToClose, handleToOpen }) => { ...@@ -1080,11 +1079,11 @@ const Packet = ({type, packetInfo, handleToClose, handleToOpen }) => {
<p className="popup-packet__tip"> <p className="popup-packet__tip">
{ {
tip.map((item, index) => { tip.map((item, index) => {
if(index !== (tip.lenght - 1)) { if (index !== (tip.lenght - 1)) {
return ( return (
<> <>
{item} {item}
<br /> <br/>
</> </>
) )
} }
...@@ -1105,7 +1104,7 @@ const Packet = ({type, packetInfo, handleToClose, handleToOpen }) => { ...@@ -1105,7 +1104,7 @@ const Packet = ({type, packetInfo, handleToClose, handleToOpen }) => {
<> <>
<h4 className="popup-packet__label">您来晚了！</h4> <h4 className="popup-packet__label">您来晚了！</h4>
<p className="popup-packet__value"> <p className="popup-packet__value">
红包仅能当日领取，下次<br /> 红包仅能当日领取，下次<br/>
早点来哦~ 早点来哦~
</p> </p>
<button <button
......
src/components/detail/redPacket/index.scss
...@@ -323,6 +323,34 @@ ...@@ -323,6 +323,34 @@
border-radius: 10px; border-radius: 10px;
box-sizing: border-box; box-sizing: border-box;
background-color: #fff; background-color: #fff;
#nc{
$height: 36px;
height: $height;
._nc{
.stage1{
height: $height;
.icon{
left: 5px;
}
.button{
width: $height;
height: $height;
}
}
.slider{
height: $height;
.label{
height: 100%;
line-height: $height;
}
.bg-green{
height: $height;
line-height: $height;
}
}
}
}
} }
.popup-form__title { .popup-form__title {
......
src/components/passport/bindingTel/index.js
...@@ -5,11 +5,7 @@ import { http, getParam } from "@/utils" ...@@ -5,11 +5,7 @@ import { http, getParam } from "@/utils"
import { compose } from "redux" import { compose } from "redux"
import { connect } from "react-redux" import { connect } from "react-redux"
import { setCurrentUser } from "@/store/userAction" import { setCurrentUser } from "@/store/userAction"
import Captcha from '@/common/Captcha' import { HeaderBar, CaptchaAli } from '@/common'
import { HeaderBar } from '@/common'
// import ClearableInput from '@common/ClearableInput'
import ClearableInput from '../common/clearableInputWithCountryCodes' import ClearableInput from '../common/clearableInputWithCountryCodes'
import Button from '../common/Button' import Button from '../common/Button'
import VeriCodeInput from '../common/veriCodeInput' import VeriCodeInput from '../common/veriCodeInput'
...@@ -21,7 +17,8 @@ class BindingTel extends Component { ...@@ -21,7 +17,8 @@ class BindingTel extends Component {
state = { state = {
validate: null, validate: null,
captchaInstance: null captchaInstance: null,
validationData: null
} }
getCaptchaInstance = instance => { getCaptchaInstance = instance => {
...@@ -29,14 +26,11 @@ class BindingTel extends Component { ...@@ -29,14 +26,11 @@ class BindingTel extends Component {
captchaInstance: instance captchaInstance: instance
}) })
} }
onVerify = (err, data) => { onVerify = (data) => {
if (err) { this.setState({
console.log(err) validate: true,
} else { validationData: data
this.setState({ })
validate: data.validate
})
}
} }
render() { render() {
...@@ -79,16 +73,16 @@ class BindingTel extends Component { ...@@ -79,16 +73,16 @@ class BindingTel extends Component {
placeholder={'验证码'} placeholder={'验证码'}
account={values.tel} account={values.tel}
tel={values.tel} tel={values.tel}
challenge={this.state.validate}
instance={this.state.captchaInstance} instance={this.state.captchaInstance}
action={'auth'} action={'auth'}
country={country} country={country}
validationData={this.state.validationData}
/> />
) )
}} }}
/> />
<Captcha onVerify={this.onVerify} getInstance={this.getCaptchaInstance}/> <CaptchaAli onVerify={this.onVerify} getInstance={this.getCaptchaInstance} mb={0}/>
<Button className={'complete-btn'} <Button className={'complete-btn'}
active={values.tel && values.veriCode && isEmpty(errors)}>完成</Button> active={values.tel && values.veriCode && isEmpty(errors)}>完成</Button>
</Form> </Form>
......
src/components/passport/common/veriCodeInput/index.js
...@@ -2,7 +2,7 @@ import React, { Component } from 'react'; ...@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import './veri-code-input.scss' import './veri-code-input.scss'
import { http, validateEmail } from '@/utils'; import { http, validateEmail } from '@/utils';
import { Toast } from "antd-mobile"; import { Toast } from "antd-mobile";
import { has } from 'lodash' import { has, isEmpty } from 'lodash'
import classnames from 'classnames' import classnames from 'classnames'
...@@ -10,152 +10,151 @@ import classnames from 'classnames' ...@@ -10,152 +10,151 @@ import classnames from 'classnames'
import Input from '../Input' import Input from '../Input'
class VeriCodeInput extends Component { class VeriCodeInput extends Component {
count = 60 count = 60
state = { state = {
counting: false, counting: false,
count: this.count, count: this.count,
isFirst: true
}
timer = null
countDown = () => {
let {count} = this.state
if (!this.state.isFirst) {
Toast.info('请重新进行滑块验证', 2, null, false)
this.props.instance.reset()
this.setState({
isFirst: true isFirst: true
} })
timer = null return
countDown = () => {
let {count} = this.state
if (!this.state.isFirst) {
Toast.info('请重新进行滑块验证', 2, null, false)
this.props.instance.refresh()
this.setState({
isFirst: true
})
return
}
if (!this.state.counting) {
if (!this.sendCode()) {
return
}
this.setState({count: count--, counting: true})
this.timer = setInterval(() => {
if (count <= 0) {
clearInterval(this.timer)
this.setState({counting: false, count: this.count})
return
}
this.setState({count: count--})
}, 1000)
}
} }
getType = () => { if (!this.state.counting) {
const {email} = this.props if (!this.sendCode()) {
if (validateEmail(email)) { return
return 'email' }
this.setState({count: count--, counting: true})
this.timer = setInterval(() => {
if (count <= 0) {
clearInterval(this.timer)
this.setState({counting: false, count: this.count})
return
} }
this.setState({count: count--})
}, 1000)
} }
}
getType = () => {
sendCode = () => { const {email} = this.props
if (!this.validate()) return if (validateEmail(email)) {
this.getType() === 'email' ? this.sendEmail() : this.sendSMS(); return 'email'
return true;
} }
}
sendEmail = () => {
const {email, challenge} = this.props
http.post(`${API['passport-api']}/send_email_code`, { sendCode = () => {
email, if (!this.validate()) return
challenge this.getType() === 'email' ? this.sendEmail() : this.sendSMS();
}).then(res => { return true;
if (res.data.errno === 0) { }
Toast.info('验证码发送成功', 2, null, false)
} else { sendEmail = () => {
Toast.info(res.data.msg, 2, null, false) const {email, validationData} = this.props
} http.post(`${API['passport-api']}/send_email_code`, {
this.setState({ email,
isFirst: false ...validationData
}) }).then(res => {
}) if (res.data.errno === 0) {
Toast.info('验证码发送成功', 2, null, false)
} else {
Toast.info(res.data.msg, 2, null, false)
}
this.setState({
isFirst: false
})
})
}
sendSMS = () => {
const {action, tel, account, validationData, checking, country} = this.props
if (!tel) {
Toast.info('请输入手机号')
return
} }
http.post(`${API['passport-api']}/quick_sms`, {
sendSMS = () => { phone_num: tel || account,
const {action, tel, account, challenge, checking, country} = this.props action: action || 'login',
if (!tel) { area_code: '00' + country.num,
Toast.info('请输入手机号') checking,
return ...validationData
} }).then(res => {
http.post(`${API['passport-api']}/quick_sms`, { if (res.data.errno === 0) {
phone_num: tel || account, Toast.info('验证码发送成功', 2, null, false)
action: action || 'login', } else {
area_code: '00'+country.num, Toast.info(res.data.msg, 2, null, false)
challenge, }
checking this.setState({
}).then(res => { isFirst: false
if (res.data.errno === 0) { })
Toast.info('验证码发送成功', 2, null, false) })
} else { }
Toast.info(res.data.msg, 2, null, false)
}
this.setState({ validate = () => {
isFirst: false const {tel, validationData, email} = this.props
}) let hasTel = has(this.props, 'tel')
}) let content
if (hasTel) {
if (!tel) {
content = '手机号码不能为空'
}
if (!/\d/.test(tel)) {
content = '请输入正确格式的手机号码'
}
} else {
if (!email) {
content = '电子邮件不能为空'
}
if (!validateEmail(email)) {
content = '请输入正确格式的电子邮件'
}
} }
if (content) {
validate = () => { Toast.info(content, 2, null, false)
const {tel, challenge, email} = this.props return false
let hasTel = has(this.props, 'tel')
let content
if (hasTel) {
if (!tel) {
content = '手机号码不能为空'
}
if (!/\d/.test(tel)) {
content = '请输入正确格式的手机号码'
}
} else {
if (!email) {
content = '电子邮件不能为空'
}
if (!validateEmail(email)) {
content = '请输入正确格式的电子邮件'
}
}
if (content) {
Toast.info(content, 2, null, false)
return false
}
if (!challenge) {
Toast.info('请进行滑块验证', 2, null, false)
return false
}
return true
} }
render() { if (isEmpty(validationData)) {
let {className, ...rest} = this.props Toast.info('请进行滑块验证', 2, null, false)
return ( return false
<Input
type={'number'}
wrapperClass={className}
{...rest}
>
<button type='button' className={classnames('verify', {active: !this.state.counting})}
onClick={this.countDown}>
{
this.state.counting ?
(`重新发送${this.state.count}s`)
: '发送验证码'
}
</button>
</Input>
);
} }
return true
}
render() {
let {className, validationData, ...rest} = this.props
return (
<Input
type={'number'}
wrapperClass={className}
{...rest}
>
<button type='button' className={classnames('verify', {active: !this.state.counting})}
onClick={this.countDown}>
{
this.state.counting ?
(`重新发送${this.state.count}s`)
: '发送验证码'
}
</button>
</Input>
);
}
} }
export default VeriCodeInput; export default VeriCodeInput;
\ No newline at end of file
src/components/passport/forgotPassword/index.js
...@@ -6,7 +6,7 @@ import { withFormik, Form, Field } from 'formik'; ...@@ -6,7 +6,7 @@ import { withFormik, Form, Field } from 'formik';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { compose } from 'redux'; import { compose } from 'redux';
import { Toast } from "antd-mobile"; import { Toast } from "antd-mobile";
import { HeaderBar, Captcha } from "@/common"; import { HeaderBar, CaptchaAli } from "@/common";
import ClearableInput from '../common/clearableInputWithCountryCodes' import ClearableInput from '../common/clearableInputWithCountryCodes'
import { http } from "@/utils"; import { http } from "@/utils";
import { quickLogin } from '@/store/userAction'; import { quickLogin } from '@/store/userAction';
...@@ -16,129 +16,128 @@ import { Link } from "react-router-dom"; ...@@ -16,129 +16,128 @@ import { Link } from "react-router-dom";
class ForgotPassword extends Component { class ForgotPassword extends Component {
state = { state = {
validate: null, validate: null,
captchaInstance: null captchaInstance: null,
} validationData: null
}
getCaptchaInstance = instance => { getCaptchaInstance = instance => {
this.setState({ this.setState({
captchaInstance: instance captchaInstance: instance
}) })
} }
onVerify = (err, data) => { onVerify = (data) => {
if (err) { this.setState({
console.log(err) validationData: data,
} else { validate: true
this.setState({ })
validate: data.validate }
}) onSubmissionError = () => {
} const errors = Object.values(this.props.errors);
} errors.length && Toast.info(errors[0], 2, null, false)
onSubmissionError = () => { }
const errors = Object.values(this.props.errors);
errors.length && Toast.info(errors[0], 2, null, false)
}
render() { render() {
const { const {
values, values,
isValid, isValid,
country country
} = this.props } = this.props
return ( return (
<div className={'forgot-password'}> <div className={'forgot-password'}>
<HeaderBar title='忘记密码' arrow={true}/> <HeaderBar title='忘记密码' arrow={true}/>
<div className="content"> <div className="content">
<Form className='forgot-password-form'> <Form className='forgot-password-form'>
<Field <Field
name={'tel'} name={'tel'}
render={({field, form}) => { render={({field, form}) => {
return ( return (
<ClearableInput <ClearableInput
{...field} {...field}
type={'tel'} type={'tel'}
placeholder={'请输入注册时的手机号'} placeholder={'请输入注册时的手机号'}
wrapperClass={'tel-input'} wrapperClass={'tel-input'}
setFieldValue={form.setFieldValue} setFieldValue={form.setFieldValue}
country={country} country={country}
/>) />)
}} }}
/> />
{ {
this.state.validate && this.state.validate &&
<Field <Field
name='veriCode' name='veriCode'
render={({field}) => { render={({field}) => {
return ( return (
<VeriCodeInput <VeriCodeInput
{...field} {...field}
className={'verify-code'} className={'verify-code'}
icon={<i className={'iconfont iconduanxin'} icon={<i className={'iconfont iconduanxin'}
style={{fontSize: '20px', left: '12px'}} style={{fontSize: '20px', left: '12px'}}
/>} />}
tel={values.tel} tel={values.tel}
challenge={this.state.validate} challenge={this.state.validate}
instance={this.state.captchaInstance} instance={this.state.captchaInstance}
action={'auth'} action={'auth'}
checking={1} checking={1}
country={country} country={country}
/> validationData={this.state.validationData}
) />
}} )
/> }}
} />
<OnSubmissionError callback={this.onSubmissionError}/> }
<Captcha getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/> <OnSubmissionError callback={this.onSubmissionError}/>
<Button className={'next_step'} active={isValid}>下一步</Button> <CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>
<Link className={'to-email'} to={`/passport/forgot-password-email`} replace>邮箱找回</Link> <Button className={'next_step'} active={isValid}>下一步</Button>
</Form> <Link className={'to-email'} to={`/passport/forgot-password-email`} replace>邮箱找回</Link>
</div> </Form>
</div> </div>
); </div>
} );
}
} }
const formikConfig = { const formikConfig = {
mapPropsToValues: () => ({ mapPropsToValues: () => ({
tel: '', tel: '',
veriCode: '' veriCode: ''
}), }),
validateOnChange: true, validateOnChange: true,
validateOnBlur: true, validateOnBlur: true,
validate: values => { validate: values => {
let errors = {} let errors = {}
if (!/\d/.test(values.tel)) { if (!/\d/.test(values.tel)) {
errors.tel = '请输入正确的手机号' errors.tel = '请输入正确的手机号'
} }
values.veriCode.toString().length !== 6 && (errors.veriCode = '验证码格式不正确') values.veriCode.toString().length !== 6 && (errors.veriCode = '验证码格式不正确')
return errors return errors
}, },
handleSubmit(values, {props}) { handleSubmit(values, {props}) {
sessionStorage.setItem('r_type', 'phone') sessionStorage.setItem('r_type', 'phone')
sessionStorage.setItem('tel', values.tel) sessionStorage.setItem('tel', values.tel)
http.post(`${API['passport-api']}/check_phone_code`, { http.post(`${API['passport-api']}/check_phone_code`, {
phone: values.tel, phone: values.tel,
code: values.veriCode, code: values.veriCode,
area_code: '00'+props.country.num area_code: '00' + props.country.num
}).then(res => { }).then(res => {
if (res.data.errno == 0) { if (res.data.errno == 0) {
props.history.push('/passport/set-password', {from: props.location}) props.history.push('/passport/set-password', {from: props.location})
} else { } else {
Toast.info(res.data.msg, 2, null, false) Toast.info(res.data.msg, 2, null, false)
} }
}) })
}, },
} }
export default compose( export default compose(
connect( connect(
state => ({country: state.country}), state => ({country: state.country}),
{quickLogin} {quickLogin}
), ),
withFormik(formikConfig) withFormik(formikConfig)
)(ForgotPassword) )(ForgotPassword)
\ No newline at end of file
src/components/passport/forgotPasswordEmail/index.js
...@@ -6,8 +6,8 @@ import { withFormik, Form, Field } from 'formik'; ...@@ -6,8 +6,8 @@ import { withFormik, Form, Field } from 'formik';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { compose } from 'redux'; import { compose } from 'redux';
import { Toast } from "antd-mobile"; import { Toast } from "antd-mobile";
import { HeaderBar, Captcha, ClearableInput } from "@/common"; import { HeaderBar, ClearableInput, CaptchaAli } from "@/common";
import { validateEmail, http, api } from "@/utils"; import { validateEmail, http } from "@/utils";
import { quickLogin } from '@/store/userAction'; import { quickLogin } from '@/store/userAction';
import OnSubmissionError from '../common/OnSubmissionError' import OnSubmissionError from '../common/OnSubmissionError'
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
...@@ -15,125 +15,125 @@ import { Link } from "react-router-dom"; ...@@ -15,125 +15,125 @@ import { Link } from "react-router-dom";
class ForgotPassword extends Component { class ForgotPassword extends Component {
state = { state = {
validate: null, validate: null,
captchaInstance: null captchaInstance: null,
} validationData: null
}
getCaptchaInstance = instance => { getCaptchaInstance = instance => {
this.setState({ this.setState({
captchaInstance: instance captchaInstance: instance
}) })
} }
onVerify = (err, data) => { onVerify = (data) => {
if (err) { this.setState({
console.log(err) validationData: data,
} else { validate: true
this.setState({ })
validate: data.validate }
}) onSubmissionError = () => {
} const errors = Object.values(this.props.errors);
} errors.length && Toast.info(errors[0], 2, null, false)
onSubmissionError = () => { }
const errors = Object.values(this.props.errors);
errors.length && Toast.info(errors[0], 2, null, false)
}
render() { render() {
const { const {
values, values,
isValid isValid
} = this.props } = this.props
return ( return (
<div className={'forgot-password-email'}> <div className={'forgot-password-email'}>
<HeaderBar title='忘记密码' arrow={true}/> <HeaderBar title='忘记密码' arrow={true}/>
<div className="content"> <div className="content">
<Form className='forgot-password-form'> <Form className='forgot-password-form'>
<Field <Field
name={'email'} name={'email'}
render={({field, form}) => { render={({field, form}) => {
return ( return (
<ClearableInput <ClearableInput
{...field} {...field}
type={'email'} type={'email'}
placeholder={'请输入注册时的邮箱账号'} placeholder={'请输入注册时的邮箱账号'}
wrapperClass={'email-input'} wrapperClass={'email-input'}
setFieldValue={form.setFieldValue} setFieldValue={form.setFieldValue}
/>) />)
}} }}
/> />
{ {
this.state.validate && this.state.validate &&
<Field <Field
name='veriCode' name='veriCode'
render={({field}) => { render={({field}) => {
return ( return (
<VeriCodeInput <VeriCodeInput
{...field} {...field}
className={'verify-code'} className={'verify-code'}
icon={<i className={'iconfont iconduanxin'} icon={<i className={'iconfont iconduanxin'}
style={{fontSize: '20px', left: '12px'}} style={{fontSize: '20px', left: '12px'}}
/>} />}
email={values.email} email={values.email}
challenge={this.state.validate} challenge={this.state.validate}
instance={this.state.captchaInstance} instance={this.state.captchaInstance}
action={'auth'} validationData={this.state.validationData}
checking={1} action={'auth'}
/> checking={1}
) />
}} )
/> }}
} />
<OnSubmissionError callback={this.onSubmissionError}/> }
<Captcha getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/> <OnSubmissionError callback={this.onSubmissionError}/>
<Button className={'next_step'} active={isValid}>下一步</Button> {/*<Captcha getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>*/}
<Link className={'to-phone'} to={'/passport/forgot-password'} replace>手机号找回</Link> <CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>
</Form> <Button className={'next_step'} active={isValid}>下一步</Button>
</div> <Link className={'to-phone'} to={'/passport/forgot-password'} replace>手机号找回</Link>
</div> </Form>
); </div>
} </div>
);
}
} }
const formikConfig = { const formikConfig = {
mapPropsToValues: () => ({ mapPropsToValues: () => ({
email: '', email: '',
veriCode: '' veriCode: ''
}), }),
validateOnChange: true, validateOnChange: true,
validateOnBlur: true, validateOnBlur: true,
validate: values => { validate: values => {
let errors = {} let errors = {}
if (!validateEmail(values.email)) { if (!validateEmail(values.email)) {
errors.email = '请输入正确的邮箱地址' errors.email = '请输入正确的邮箱地址'
} }
values.veriCode.toString().length !== 6 && (errors.veriCode = '验证码格式不正确') values.veriCode.toString().length !== 6 && (errors.veriCode = '验证码格式不正确')
return errors return errors
}, },
handleSubmit(values, {props}) { handleSubmit(values, {props}) {
sessionStorage.setItem('r_type', 'email') sessionStorage.setItem('r_type', 'email')
sessionStorage.setItem('email', values.email) sessionStorage.setItem('email', values.email)
http.post(`${API['passport-api']}/check_email_code`, { http.post(`${API['passport-api']}/check_email_code`, {
email: values.email, email: values.email,
code: values.veriCode code: values.veriCode
}).then(res => { }).then(res => {
if (res.data.errno == 0) { if (res.data.errno == 0) {
props.history.push('/passport/set-password', {from: props.location}) props.history.push('/passport/set-password', {from: props.location})
} else { } else {
Toast.info(res.data.msg, 2, null, false) Toast.info(res.data.msg, 2, null, false)
} }
}) })
}, },
} }
export default compose( export default compose(
connect( connect(
null, null,
{quickLogin} {quickLogin}
), ),
withFormik(formikConfig) withFormik(formikConfig)
)(ForgotPassword) )(ForgotPassword)
\ No newline at end of file
src/components/passport/login/index.js
import React, { Component } from 'react' import React, { Component } from 'react'
import './wechatLogin.scss' import './wechatLogin.scss'
// import Input from "../common/Input"
import Input from '../common/inputWithCountryCodes' import Input from '../common/inputWithCountryCodes'
import LoginButton from '../common/LoginButton' import LoginButton from '../common/LoginButton'
import LoginWays from '../common/LoginWays' import LoginWays from '../common/LoginWays'
import Header from '../common/Header' import Header from '../common/Header'
import VeriCodeInput from '../common/veriCodeInput' import VeriCodeInput from '../common/veriCodeInput'
import { Form, Field, withFormik } from "formik" import { Form, Field, withFormik } from "formik"
import Captcha from '@/common/Captcha'
import { quickLogin } from '@/store/userAction'; import { quickLogin } from '@/store/userAction';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { compose } from 'redux'; import { compose } from 'redux';
import { isEmpty } from 'lodash' import { isEmpty } from 'lodash'
import { Toast } from 'antd-mobile'; import { Toast } from 'antd-mobile';
import { HeaderBar } from "@/common"; import { HeaderBar, CaptchaAli } from "@/common";
class Login extends Component { class Login extends Component {
state = { state = {
validate: null, validate: null,
captchaInstance: null captchaInstance: null,
validationData: null
}
loginWaysClick = method => {
const {history, loginWays, location} = this.props
const item = loginWays.find(item => item.text === method)
let from = location.state && location.state.from || {
pathname: '/',
search: window.location.search,
hash: ''
};
const referrer = document.referrer
const redirectURI = (!/^https?:\/\/m.julyedu.com\/?$/.test(referrer) && referrer) ? referrer : window.location.origin + from.pathname + from.search + from.hash;
switch (method) {
case '账号登录':
history.push({pathname: '/passport/account-login', search: window.location.search}, location.state)
break;
case '微信':
window.location.assign(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=${encodeURIComponent(redirectURI)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`)
break;
case 'QQ':
window.location.assign(`${API["passport-api"]}/m/login/qqLogin?redirect_url=${encodeURIComponent(redirectURI)}`);
break;
default:
window.location.assign(item.url)
} }
loginWaysClick = method => { }
const {history, loginWays, location} = this.props
getCaptchaInstance = instance => {
const item = loginWays.find(item => item.text === method) this.setState({
captchaInstance: instance
let from = location.state && location.state.from || { })
pathname: '/', }
search: window.location.search,
hash: '' onVerify = (data) => {
}; this.setState({
const referrer = document.referrer validationData: data,
const redirectURI = (!/^https?:\/\/m.julyedu.com\/?$/.test(referrer) && referrer) ? referrer : window.location.origin + from.pathname + from.search + from.hash; validate: true
})
switch (method) { }
case '账号登录':
history.push({pathname: '/passport/account-login', search: window.location.search}, location.state) toStudentRegister = () => {
break; const {history} = this.props;
case '微信': history.push('/passport/student-login')
window.location.assign(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=${encodeURIComponent(redirectURI)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`) }
break;
case 'QQ': componentDidMount() {
window.location.assign(`${API["passport-api"]}/m/login/qqLogin?redirect_url=${encodeURIComponent(redirectURI)}`); const {location} = this.props
break; const {action} = this.props.history
default: let pathname = location.state && location.state.from && location.state.from.pathname
window.location.assign(item.url) let search = location.state && location.state.from && location.state.from.search
}
if (action !== 'POP') {
} let historyUrl = `${pathname}${search}`
window.localStorage.setItem('HistoryUrl', historyUrl)
getCaptchaInstance = instance => {
this.setState({
captchaInstance: instance
})
}
onVerify = (err, data) => {
if (err) {
console.log(err)
} else {
this.setState({
validate: data.validate
})
}
} }
toStudentRegister = () => { }
const { history } = this.props;
history.push('/passport/student-login') render() {
} const {
loginWays,
componentDidMount() { errors,
const {location} = this.props values,
const {action} = this.props.history country
let pathname = location.state && location.state.from && location.state.from.pathname } = this.props
let search = location.state && location.state.from && location.state.from.search return (
<div className='login'>
console.log(action,pathname,search); <HeaderBar title={'登录'} arrow={true}/>
<Header/>
if(action !== 'POP'){ <Form className="login-info">
let historyUrl = `${pathname}${search}` <Field
window.localStorage.setItem('HistoryUrl',historyUrl) name='tel'
} render={({field}) => (
<Input
} {...field}
type={'tel'}
render() { placeholder={'手机号快捷登录(免注册)'}
const { wrapperClass={'tel-input'}
loginWays, country={country}
errors, id={'tel'}
values, />
country )}
} = this.props >
return ( </Field>
<div className='login'> {
<HeaderBar title={'登录'} arrow={true}/> this.state.validate &&
<Header/> <Field
<Form className="login-info"> type='number'
<Field name='veriCode'
name='tel' render={({field}) => (
render={({field}) => ( <VeriCodeInput
<Input {...field}
{...field} className={'verification'}
type={'tel'} icon={<i className={'iconfont iconduanxin'}
placeholder={'手机号快捷登录(免注册)'} style={{fontSize: '20px', left: '12px'}}
wrapperClass={'tel-input'} />}
country={country} tel={values.tel}
/> errors={errors}
)} placeholder={'请输入验证码'}
> instance={this.state.captchaInstance}
</Field> validationData={this.state.validationData}
{ country={country}
this.state.validate && />
<Field )}
type='number' />
name='veriCode' }
render={({field}) => ( <CaptchaAli onVerify={this.onVerify} getInstance={this.getCaptchaInstance}/>
<VeriCodeInput
{...field} <LoginButton active={values.tel && values.veriCode && isEmpty(errors)}/>
className={'verification'}
icon={<i className={'iconfont iconduanxin'} {/* 助学计划 */}
style={{fontSize: '20px', left: '12px'}} <div className="student-root">
/>} <a className="student-root__button" onClick={this.toStudentRegister}>助学计划</a>
tel={values.tel} </div>
challenge={this.state.validate} </Form>
errors={errors} <LoginWays onClick={this.loginWaysClick} loginWays={loginWays}/>
placeholder={'请输入验证码'} </div>
instance={this.state.captchaInstance} )
country={country} }
/>
)}
/>
}
<Captcha mrBtm={this.state.validate ? '20px' : '33px'} getInstance={this.getCaptchaInstance}
onVerify={this.onVerify}
/>
<LoginButton active={values.tel && values.veriCode && isEmpty(errors)}/>
{/* 助学计划 */}
<div className="student-root">
<a className="student-root__button" onClick={this.toStudentRegister}>助学计划</a>
</div>
</Form>
<LoginWays onClick={this.loginWaysClick} loginWays={loginWays}/>
</div>
)
}
} }
const FormikConfig = { const FormikConfig = {
mapPropsToValues: () => ({ mapPropsToValues: () => ({
tel: '', tel: '',
veriCode: '' veriCode: ''
}), }),
handleSubmit(values, {props}) { handleSubmit(values, {props}) {
const from = props.location.state && props.location.state.from const from = props.location.state && props.location.state.from
props.quickLogin({ props.quickLogin({
phone_num: values.tel, phone_num: values.tel,
phone_code: values.veriCode, phone_code: values.veriCode,
area_code: '00'+props.country.num, area_code: '00' + props.country.num,
redirect: from && encodeURIComponent(window.location.origin + from.pathname + from.search + from.hash) redirect: from && encodeURIComponent(window.location.origin + from.pathname + from.search + from.hash)
}).then(res => { }).then(res => {
if (res.hasError) { if (res.hasError) {
Toast.info(res.msg); Toast.info(res.msg);
} else { } else {
let state = props.location.state || {from: {pathname: '/'}} let state = props.location.state || {from: {pathname: '/'}}
props.history.replace(state.from) props.history.replace(state.from)
} }
}) })
}, },
validateOnChange: true, validateOnChange: true,
validate: (values) => { validate: (values) => {
let errors = {} let errors = {}
if (!/\d/.test(values.tel)) { if (!/\d/.test(values.tel)) {
errors.tel = '请填写正确格式的手机号' errors.tel = '请填写正确格式的手机号'
} }
if (!/[0-9]{6}/.test(values.veriCode)) { if (!/[0-9]{6}/.test(values.veriCode)) {
errors.veriCode = '请输入验证码' errors.veriCode = '请输入验证码'
}
return errors
} }
return errors
}
} }
export default compose( export default compose(
connect( connect(
state => ({country: state.country}), state => ({country: state.country}),
{quickLogin} {quickLogin}
), ),
withFormik(FormikConfig), withFormik(FormikConfig),
)(Login) )(Login)
src/components/passport/studentRoot/index.js
...@@ -5,8 +5,7 @@ import { studentLogin } from '@/store/userAction'; ...@@ -5,8 +5,7 @@ import { studentLogin } from '@/store/userAction';
import { http } from '@/utils'; import { http } from '@/utils';
import { Formik, Form, Field } from 'formik'; import { Formik, Form, Field } from 'formik';
import { Toast } from "antd-mobile"; import { Toast } from "antd-mobile";
import { HeaderBar } from "@/common"; import { HeaderBar, CaptchaAli } from "@/common";
import Captcha from '@/common/Captcha'
import Header from '../common/Header'; import Header from '../common/Header';
import Input from '../common/inputWithCountryCodes'; import Input from '../common/inputWithCountryCodes';
import VeriCodeInput from '../common/veriCodeInput'; import VeriCodeInput from '../common/veriCodeInput';
...@@ -33,6 +32,7 @@ class StudentRoot extends PureComponent { ...@@ -33,6 +32,7 @@ class StudentRoot extends PureComponent {
list: [], list: [],
schoolList: [], schoolList: [],
schoolName: '', schoolName: '',
validationData: null,
}; };
} }
...@@ -73,7 +73,7 @@ class StudentRoot extends PureComponent { ...@@ -73,7 +73,7 @@ class StudentRoot extends PureComponent {
redirect: from && window.location.origin + from.pathname + from.search + from.hash, redirect: from && window.location.origin + from.pathname + from.search + from.hash,
}).then(res => { }).then(res => {
if (res.hasError) { if (res.hasError) {
captchaInstance.refresh(); captchaInstance.reset();
Toast.info(res.msg, 2, null, false); Toast.info(res.msg, 2, null, false);
} }
}); });
...@@ -84,13 +84,12 @@ class StudentRoot extends PureComponent { ...@@ -84,13 +84,12 @@ class StudentRoot extends PureComponent {
captchaInstance: instance captchaInstance: instance
}); });
} }
onVerify = (err, data) => { onVerify = (data) => {
if (!err) { this.setState({
this.setState({ validationData: data,
validate: data.validate validate: true
}); })
}
} }
selectSwitch = (key, value) => { selectSwitch = (key, value) => {
...@@ -123,7 +122,7 @@ class StudentRoot extends PureComponent { ...@@ -123,7 +122,7 @@ class StudentRoot extends PureComponent {
<HeaderBar title={'助学计划'} arrow={true}/> <HeaderBar title={'助学计划'} arrow={true}/>
<Header/> <Header/>
<Formik <Formik
initialValues={{ initialValues={{
tel: '', tel: '',
password: '', password: '',
code: '', code: '',
...@@ -185,20 +184,16 @@ class StudentRoot extends PureComponent { ...@@ -185,20 +184,16 @@ class StudentRoot extends PureComponent {
)} )}
/> />
<div className="student-form__item"> <div className="student-form__item">
<Field <Field
className="student-form__input" className="student-form__input"
type="password" type="password"
name="password" name="password"
minLength="6" minLength="6"
maxLength="16" maxLength="16"
placeholder="密码需要包含6-16位字母和数字" placeholder="密码需要包含6-16位字母和数字"
/> />
</div> </div>
<Captcha <CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify} mb={15}/>
mrBtm={'15px'}
getInstance={this.getCaptchaInstance}
onVerify={this.onVerify}
/>
{ {
validate && validate &&
<Field <Field
...@@ -210,7 +205,7 @@ class StudentRoot extends PureComponent { ...@@ -210,7 +205,7 @@ class StudentRoot extends PureComponent {
className={'student-form__code'} className={'student-form__code'}
icon={<i className={'iconfont iconduanxin'} style={{fontSize: '20px', left: '12px'}}/>} icon={<i className={'iconfont iconduanxin'} style={{fontSize: '20px', left: '12px'}}/>}
tel={props.values.tel} tel={props.values.tel}
challenge={validate} validationData={this.state.validationData}
errors={props.errors} errors={props.errors}
placeholder={'请输入验证码'} placeholder={'请输入验证码'}
instance={captchaInstance} instance={captchaInstance}
...@@ -221,7 +216,7 @@ class StudentRoot extends PureComponent { ...@@ -221,7 +216,7 @@ class StudentRoot extends PureComponent {
} }
<div className="student-form__item"> <div className="student-form__item">
<label className="student-form__label">学校</label> <label className="student-form__label">学校</label>
<StudentSelect <StudentSelect
name="school" name="school"
value={props.values.school} value={props.values.school}
schoolName={schoolName} schoolName={schoolName}
...@@ -236,12 +231,12 @@ class StudentRoot extends PureComponent { ...@@ -236,12 +231,12 @@ class StudentRoot extends PureComponent {
props.setFieldValue('college', '') props.setFieldValue('college', '')
}} }}
selectSwitch={this.selectSwitch} selectSwitch={this.selectSwitch}
changeToCollege={this.changeToCollege} changeToCollege={this.changeToCollege}
/> />
</div> </div>
<div className="student-form__item"> <div className="student-form__item">
<label className="student-form__label">学院</label> <label className="student-form__label">学院</label>
<StudentSelect <StudentSelect
name="college" name="college"
value={props.values.college} value={props.values.college}
data={{ data={{
...@@ -252,7 +247,7 @@ class StudentRoot extends PureComponent { ...@@ -252,7 +247,7 @@ class StudentRoot extends PureComponent {
options={collegeList} options={collegeList}
placeholder="请先选择学校" placeholder="请先选择学校"
onChange={props.setFieldValue} onChange={props.setFieldValue}
selectSwitch={this.selectSwitch} selectSwitch={this.selectSwitch}
/> />
</div> </div>
<div className="student-form__item"> <div className="student-form__item">
...@@ -280,8 +275,8 @@ class StudentRoot extends PureComponent { ...@@ -280,8 +275,8 @@ class StudentRoot extends PureComponent {
} }
const StudentSelect = (props) => { const StudentSelect = (props) => {
const { const {
options = [], options = [],
data: { key = '' , val = false }, data: { key = '' , val = false },
schoolName, schoolName,
isClick = true, isClick = true,
...@@ -295,23 +290,23 @@ const StudentSelect = (props) => { ...@@ -295,23 +290,23 @@ const StudentSelect = (props) => {
} = props; } = props;
return ( return (
<div className="student-select"> <div className="student-select">
<input <input
className={classnames({'active': val})} className={classnames({'active': val})}
value={value} value={value}
type="text" type="text"
placeholder={placeholder} placeholder={placeholder}
readOnly readOnly
onClick={() => { onClick={() => {
isClick && selectSwitch(key, true); isClick && selectSwitch(key, true);
}} }}
/> />
{ {
val && val &&
<ul className="student-select__list"> <ul className="student-select__list">
{ {
options.length > 0 && options.map((item, index) => ( options.length > 0 && options.map((item, index) => (
<li <li
className="student-select__option" className="student-select__option"
key={index} key={index}
onClick={() => { onClick={() => {
selectSwitch(key, false); selectSwitch(key, false);
......
src/store/userAction.js
...@@ -16,7 +16,6 @@ const accountLogin = user => dispatch => { ...@@ -16,7 +16,6 @@ const accountLogin = user => dispatch => {
const studentLogin = params => dispatch => { const studentLogin = params => dispatch => {
return http.post(`${API['passport-api']}/phone_reg`, { return http.post(`${API['passport-api']}/phone_reg`, {
challenge: params.validate,
phone: params.tel, phone: params.tel,
password: params.password, password: params.password,
code: params.code, code: params.code,
......
src/utils/index.js
...@@ -67,6 +67,15 @@ function initCaptcha(cb) { ...@@ -67,6 +67,15 @@ function initCaptcha(cb) {
} }
function initCaptchaNC(cb) {
if (window.NoCaptcha && typeof window.NoCaptcha.init === 'function') {
cb()
} else {
const url = '//g.alicdn.com/sd/nch5/index.js' + '?t=' + getTimestamp(1 * 60 * 1000)
loadScript(url, cb)
}
}
export const is_weixin = () => { export const is_weixin = () => {
var ua = window.navigator.userAgent.toLowerCase(); var ua = window.navigator.userAgent.toLowerCase();
...@@ -126,11 +135,12 @@ export { ...@@ -126,11 +135,12 @@ export {
export { export {
html, html,
initCaptcha, initCaptcha,
initCaptchaNC,
validateTel, validateTel,
validateEmail, validateEmail,
browser, browser,
isLogin, isLogin,
dateCountDown dateCountDown,
} }
export { export {
default as SendMessageToApp default as SendMessageToApp
......
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