Skip to content

M
mr-julyedu
Commit 0ad15bc8 by zhanghaozhe
Options

更换滑块验证

parent ca9d3562
Showing with 378 additions and 280 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';
import { Formik, Form, Field } from 'formik';
import { Toast } from 'antd-mobile';
import { isEmpty } from 'lodash';
import Captcha from '@/common/Captcha';
import { http, getParam } from '@/utils';
import CaptchaAli from "@common/Captcha-ali"
import { http } from '@/utils';
import './index.scss';
class BindPhone extends Component {
......@@ -21,7 +21,8 @@ class BindPhone extends Component {
bindInfo: {},
country: {
num: '86'
}
},
validationData: null
}
}
......@@ -30,14 +31,14 @@ class BindPhone extends Component {
}
initCountryInfo = () => {
const { country } = this.props;
const {country} = this.props;
this.setState({
country
});
}
toFetchCountryNum = () => {
const { history, hideBindPhone } = this.props;
const {history, hideBindPhone} = this.props;
hideBindPhone();
history.push('/country?from=bind');
}
......@@ -46,45 +47,43 @@ class BindPhone extends Component {
this.captchaInstance = instance;
}
onVerify = (err, data) => {
if (err) {
console.log(err);
} else {
onVerify = (data) => {
this.setState({
validate: data.validate
});
}
validate: true,
validationData: data
})
}
// 获取手机号验证码
handleToSend = ({tel, code}) => {
let { validate, seconds, isFirst, isTimer, country: {num = '86'} } = this.state;
if(validate) {
let {validate, seconds, validationData, isFirst, isTimer, country: {num = '86'}} = this.state;
if (validate) {
if (!isFirst) {
Toast.info('请重新进行滑块验证', 2, null, false);
this.captchaInstance.refresh();
this.captchaInstance.reset();
this.setState({
isFirst: true
});
return
}
if(!isTimer) {
if (!isTimer) {
if (!tel) {
Toast.info('手机号码不能为空', 2, null, false);
}else if(!/^\d+$/.test(tel)) {
} else if (!/^\d+$/.test(tel)) {
Toast.info('请输入正确格式的手机号码', 2, null, false);
}else {
} else {
// 获取验证码
http.post(
`${API['passport-api']}/m/personal/bindPhoneSendCode`,
{
area_code: `00${num}`,
phone_num: tel
phone_num: tel,
...validationData
}
).then(res => {
const { errno, msg } = res.data;
if(errno === 200) {
const {errno, msg} = res.data;
if (errno === 200) {
Toast.info('验证码发送成功', 2, null, false);
// 倒计时
......@@ -95,7 +94,7 @@ class BindPhone extends Component {
isTimer: false,
seconds: 60
});
}else {
} else {
this.setState({
isTimer: true,
seconds: --seconds
......@@ -107,7 +106,7 @@ class BindPhone extends Component {
this.setState({
isFirst: false
})
}else {
} else {
Toast.info(msg, 2, null, false);
}
})
......@@ -119,8 +118,8 @@ class BindPhone extends Component {
// 绑定手机
toBindPhone = () => {
const { accountInfo: { tel, code }, country: {num = '86'} } = this.state;
const { handleToConfirmPhone, successBindPhone } = this.props;
const {accountInfo: {tel, code}, country: {num = '86'}} = this.state;
const {handleToConfirmPhone, successBindPhone} = this.props;
const params = {
area_code: `00${num}`,
mobile: tel,
......@@ -135,22 +134,22 @@ class BindPhone extends Component {
is_valid: 1, // is_valid 是否验证 1:验证（默认）,0不验证
}
).then(res => {
const { code, data, msg } = res.data;
if(code === 200 ) {
if(data.tip_info) {
const {code, data, msg} = res.data;
if (code === 200) {
if (data.tip_info) {
handleToConfirmPhone(params, data.tip_info);
}else {
} else {
successBindPhone();
}
}else {
} else {
Toast.info(msg, 2, null, false);
}
});
}
render() {
const { desc, skip = 'year' } = this.props;
const { country, validate, isTimer, seconds } = this.state;
const {desc, skip = 'year'} = this.props;
const {country, validate, isTimer, seconds} = this.state;
return (
<Formik
initialValues={{
......@@ -161,7 +160,7 @@ class BindPhone extends Component {
const errors = {};
// if (!validateTel(tel)) {
if(!/^\d+$/.test(tel)) {
if (!/^\d+$/.test(tel)) {
errors.tel = '请填写正确格式的手机号';
}
if (!/[0-9]{6}/.test(code)) {
......@@ -170,7 +169,7 @@ class BindPhone extends Component {
return errors;
}}
onSubmit={(values, { setStatus, setSubmitting }) => {
onSubmit={(values, {setStatus, setSubmitting}) => {
this.setState({
accountInfo: {
...values
......@@ -205,10 +204,7 @@ class BindPhone extends Component {
}}
/>
</div>
<Captcha
getInstance={this.getCaptchaInstance}
onVerify={this.onVerify}
/>
<CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>
<div className="popup-form__item">
<Field
name="code"
......@@ -225,18 +221,18 @@ class BindPhone extends Component {
/>
<button
className="popup-form__button--code"
data-status={(validate && !isTimer)? 'do': ''}
data-status={(validate && !isTimer) ? 'do' : ''}
type="button"
onClick={() => this.handleToSend({tel, code})}
>
{
isTimer? `重新发送${seconds}s` : '发送验证码'
isTimer ? `重新发送${seconds}s` : '发送验证码'
}
</button>
</div>
<button
className="popup-form__button--bundle"
data-status={(tel && code && isEmpty(errors))? 'do': 'done'}
data-status={(tel && code && isEmpty(errors)) ? 'do' : 'done'}
type="submit"
>
完成绑定
......
src/common/index.js
......@@ -5,6 +5,7 @@ export { default as OrderItem } from './OrderList'
export { default as HeaderBar } from './HeaderBar'
export { default as CallApp } from './CallApp'
export { default as Captcha } from './Captcha'
export { default as CaptchaAli } from './Captcha-ali'
export { default as ClearableInput } from "./ClearableInput"
export { default as Loading } from './Loading'
export { default as RenderTabBar } from './renderTabBar'
......
src/components/detail/redPacket/index.js
import React, { PureComponent } from 'react';
import {CopyToClipboard} from 'react-copy-to-clipboard';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import classnames from 'classnames';
import { isEmpty } from 'lodash';
import { browser } from '@/utils';
import { http, getParam, validateTel } from "@/utils";
import { Formik, Form, Field } from 'formik';
import { Toast } from 'antd-mobile';
import Captcha from '@/common/Captcha';
import CaptchaAli from "@common/Captcha-ali"
import FollowQRcode from './../followQRcode';
import './index.scss';
import cookie from 'js-cookie'
......@@ -46,7 +46,8 @@ class RedPacket extends PureComponent {
bindInfo: {},
country: {
num: '86'
}
},
validationData: null,
}
}
......@@ -60,20 +61,19 @@ class RedPacket extends PureComponent {
window.addEventListener('beforeunload', this.removeStatisticsCookie)
// 微信进入
const isWechat = getParam('wechat');
const { userInfo } = this.props;
if(!userInfo || !userInfo.uid) {
const {userInfo} = this.props;
if (!userInfo || !userInfo.uid) {
this.setRelativeCookie()
}
if(isWechat === '1' && !browser.isWeixin) {
if(userInfo && userInfo.uid) {
if (isWechat === '1' && !browser.isWeixin) {
if (userInfo && userInfo.uid) {
const type = window.localStorage.getItem('redpacket-click');
if(type === 'split') {
if (type === 'split') {
http.get(`${API.home}/sys/redPacket/shareUrl/${getParam('id')}`).then(res => {
const { code, data } = res.data;
if(code === 200) {
const {code, data} = res.data;
if (code === 200) {
// 检查收否领取过
http.post(
......@@ -83,13 +83,13 @@ class RedPacket extends PureComponent {
share_code: data.share_code
}
).then(res => {
const { code, data } = res.data;
if(code === 200) {
const {code, data} = res.data;
if (code === 200) {
window.localStorage.removeItem('redpacket-click');
// is_receive 是否领取过 0-否 1-是
if(data.is_receive) {
if (data.is_receive) {
this.judgeReceiveStatus(data, 8);
}else {
} else {
this.setState({
type: 3
});
......@@ -98,13 +98,13 @@ class RedPacket extends PureComponent {
})
}
});
}else {
} else {
this.setState({
type: 1
});
window.localStorage.removeItem('redpacket-click');
}
}else {
} else {
this.setRelativeCookie()
this.setState({
type: 1
......@@ -127,10 +127,10 @@ class RedPacket extends PureComponent {
fetchShareInfo = () => {
const share_code = getParam('share_code');
http.get(`${API.home}/sys/redPacket/shareUrl/${getParam('id')}`).then(res => {
const { code, data } = res.data;
if(code === 200) {
const {code, data} = res.data;
if (code === 200) {
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 {
// 分享后进入，链接中带 share_code 字段
judgePopupType = () => {
const share_code = getParam('share_code');
const { shareInfo } = this.state;
if(share_code && share_code !== 'null') {
const {shareInfo} = this.state;
if (share_code && share_code !== 'null') {
this.setState({
shareInfo: Object.assign({}, shareInfo, {
share_code
......@@ -156,28 +156,28 @@ class RedPacket extends PureComponent {
}
).then(res => {
const {code, data} = res.data;
if(code === 200) {
if (code === 200) {
// is_overdue 红包是否过期 0-否 1-是
if(data.is_overdue) {
if (data.is_overdue) {
this.setState({
type: 7
});
}else {
} else {
// is_receive 是否领取过 0-否 1-是
if(data.is_receive) {
if (data.is_receive) {
this.judgeReceiveStatus(data);
}else {
} else {
this.setState({
type: browser.isWeixin? 2 : 3
type: browser.isWeixin ? 2 : 3
});
}
}
}
if(code === 4030 || code === 4040) {
if (code === 4030 || code === 4040) {
this.setState({
type: browser.isWeixin? 2 : 3
type: browser.isWeixin ? 2 : 3
});
}
});
......@@ -186,9 +186,9 @@ class RedPacket extends PureComponent {
// 选择区号后进入
judgePopupTypeFromCountry = () => {
const { country } = this.props;
const { shareInfo } = this.state;
if(country.code) {
const {country} = this.props;
const {shareInfo} = this.state;
if (country.code) {
this.setState({
country,
shareInfo: Object.assign({}, shareInfo, {
......@@ -205,13 +205,13 @@ class RedPacket extends PureComponent {
}
).then(res => {
console.log(res);
const { code, data } = res.data;
if(code === 200) {
const {code, data} = res.data;
if (code === 200) {
// is_receive 是否领取过 0-否 1-是
if(data.is_receive) {
if (data.is_receive) {
this.judgeReceiveStatus(data, 8);
}else {
} else {
this.setState({
type: 3
});
......@@ -226,27 +226,27 @@ class RedPacket extends PureComponent {
// 判断领取状态--领取后
judgeReceiveStatus = (data, bindType=4) => {
judgeReceiveStatus = (data, bindType = 4) => {
let txt = '';
let desc = '';
// receive_type 领取类型 1自己 2别人
if(data.receive_type === 1) {
if (data.receive_type === 1) {
desc = '越多好友领取，你所得越多！';
}
if(data.receive_type === 2) {
if (data.receive_type === 2) {
desc = '每天只能帮好友领取一次哦~';
}
// is_overdue 红包是否过期 0-否 1-是
if(data.is_overdue) {
txt = data.red_packet_type === 1? `您已经领过该红包 ${data.amount}元现金！`: `您已经领过该红包 ${data.amount}元代金券碎片！`;
}else {
txt = data.red_packet_type === 1? `今日已领取${data.amount}元现金！`: `今日已领取${data.amount}元代金券碎片！`;
if (data.is_overdue) {
txt = data.red_packet_type === 1 ? `您已经领过该红包 ${data.amount}元现金！` : `您已经领过该红包 ${data.amount}元代金券碎片！`;
} else {
txt = data.red_packet_type === 1 ? `今日已领取${data.amount}元现金！` : `今日已领取${data.amount}元代金券碎片！`;
}
// receive_status 领取状态 1-已领取 2-已领取未绑定 3-已失效
if(data.receive_status === 1) {
if (data.receive_status === 1) {
this.setState({
type: 9,
doneInfo: {
......@@ -255,14 +255,14 @@ class RedPacket extends PureComponent {
desc
}
});
}else if(data.receive_status === 2) {
} else if (data.receive_status === 2) {
this.setState({
type: bindType,
money: data.amount,
endTime: data.end_time
});
this.startCountDown();
}else if(data.receive_status === 3) {
} else if (data.receive_status === 3) {
this.setState({
type: 9,
doneInfo: {
......@@ -276,10 +276,10 @@ class RedPacket extends PureComponent {
// 绑定时间
startCountDown = () => {
if(this.countdownTimer) {
if (this.countdownTimer) {
window.clearInterval(this.countdownTimer);
}
const { endTime } = this.state;
const {endTime} = this.state;
let time = endTime;
let minutes = 0;
let seconds = 0;
......@@ -301,25 +301,25 @@ class RedPacket extends PureComponent {
// 获取分享信息
handleToShare = () => {
const { history, userInfo } = this.props;
if(browser.isWeixin) {
const {history, userInfo} = this.props;
if (browser.isWeixin) {
this.setState({
type: 2
});
history.push(`/detail?id=${getParam('id')}&wechat=1`);
}else {
if(userInfo && userInfo.uid) {
} else {
if (userInfo && userInfo.uid) {
// 领取好友的后，再领取自己的 share_code 未更新
http.get(`${API.home}/sys/redPacket/shareUrl/${getParam('id')}`).then(res => {
const { code, data } = res.data;
if(code === 200) {
const {code, data} = res.data;
if (code === 200) {
this.setState({
shareInfo: data,
type: 1
});
}
});
}else {
} else {
history.push('/passport/login');
}
}
......@@ -327,10 +327,10 @@ class RedPacket extends PureComponent {
// 提示关注公众号
openTip = () => {
const { shareInfo } = this.state;
const {shareInfo} = this.state;
// is_follow 是否关注公众号，0否，1是
if(!shareInfo.is_follow) {
if (!shareInfo.is_follow) {
this.setState({
type: 11
});
......@@ -339,8 +339,8 @@ class RedPacket extends PureComponent {
// 拆红包
handleToOpen = () => {
const { history } = this.props;
const { shareInfo: { share_code='' } } = this.state;
const {history} = this.props;
const {shareInfo: {share_code = ''}} = this.state;
http.post(
`${API.home}/sys/redPacket/split`,
{
......@@ -348,55 +348,55 @@ class RedPacket extends PureComponent {
share_code
}
).then(res => {
const { code, data } = res.data;
if(code === 200) {
const {code, data} = res.data;
if (code === 200) {
// is_receive 是否领取过 0-否 1-是
if(data.is_receive) {
if (data.is_receive) {
this.judgeReceiveStatus(data);
}else {
} else {
// red_packet_type 红包类型 1-现金 2-代金券
if(data.red_packet_type === 2) {
if (data.red_packet_type === 2) {
this.setState({
type: 6,
money: data.amount
});
}else if(data.red_packet_type === 1) {
} else if (data.red_packet_type === 1) {
// receive_status 领取状态 1-已领取 2-已领取未绑定 3-已失效
if(data.receive_status === 1) {
if(data.red_packet_type === 1) {
if (data.receive_status === 1) {
if (data.red_packet_type === 1) {
this.setState({
type: 5,
money: data.amount
});
}else if(data.red_packet_type === 2 ) {
} else if (data.red_packet_type === 2) {
this.setState({
type: 6,
money: data.amount
});
}
}else if(data.receive_status === 2) {
} else if (data.receive_status === 2) {
this.setState({
type: 4,
money: data.amount,
endTime: data.end_time
});
this.startCountDown();
}else if(data.receive_status === 3) {
} else if (data.receive_status === 3) {
this.setState({
type: 9,
doneInfo: {
status: 2,
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');
}
})
......@@ -404,8 +404,8 @@ class RedPacket extends PureComponent {
// 关闭弹出
handleToClose = (isOpen, isShare = false) => {
if(isOpen) {
const { shareInfo: { share_code='' } } = this.state;
if (isOpen) {
const {shareInfo: {share_code = ''}} = this.state;
// 检查收否领取过
http.post(
......@@ -415,22 +415,22 @@ class RedPacket extends PureComponent {
share_code
}
).then(res => {
const { code, data } = res.data;
if(code === 200) {
const {code, data} = res.data;
if (code === 200) {
// is_receive 是否领取过 0-否 1-是
if(data.is_receive) {
if (data.is_receive) {
this.judgeReceiveStatus(data);
}else {
} else {
this.setState({
type: 3
});
}
}
});
}else {
if(isShare) {
const { history } = this.props;
} else {
if (isShare) {
const {history} = this.props;
history.push(`/detail?id=${getParam('id')}`);
}
this.setState({
......@@ -441,8 +441,8 @@ class RedPacket extends PureComponent {
// 微信内点击蒙层
clickMask = () => {
const { type } = this.state;
if(type === 2) {
const {type} = this.state;
if (type === 2) {
this.setState({
type: 0
});
......@@ -455,45 +455,43 @@ class RedPacket extends PureComponent {
});
}
onVerify = (err, data) => {
if (err) {
console.log(err);
} else {
onVerify = (data) => {
this.setState({
validate: data.validate
});
}
validate: true,
validationData: data
})
}
handleToSend = ({tel, code}) => {
let { validate, seconds, isFirst, isTimer, captchaInstance, country: {num = '86'} } = this.state;
if(validate) {
let {validate, seconds, validationData, isFirst, isTimer, captchaInstance, country: {num = '86'}} = this.state;
if (validate) {
if (!isFirst) {
Toast.info('请重新进行滑块验证', 2, null, false);
captchaInstance.refresh();
captchaInstance.reset();
this.setState({
isFirst: true
});
return
}
if(!isTimer) {
if (!isTimer) {
if (!tel) {
Toast.info('手机号码不能为空', 2, null, false);
}else if(!/^\d+$/.test(tel)) {
} else if (!/^\d+$/.test(tel)) {
// }else if (!validateTel(tel)) {
Toast.info('请输入正确格式的手机号码', 2, null, false);
}else {
} else {
// 获取验证码
http.post(
`${API['passport-api']}/m/personal/bindPhoneSendCode`,
{
area_code: `00${num}`,
phone_num: tel
phone_num: tel,
...validationData
}
).then(res => {
const { errno, msg } = res.data;
if(errno === 200) {
const {errno, msg} = res.data;
if (errno === 200) {
Toast.info('验证码发送成功', 2, null, false);
// 倒计时
......@@ -504,7 +502,7 @@ class RedPacket extends PureComponent {
isTimer: false,
seconds: 60
});
}else {
} else {
this.setState({
isTimer: true,
seconds: --seconds
......@@ -516,7 +514,7 @@ class RedPacket extends PureComponent {
this.setState({
isFirst: false
})
}else {
} else {
Toast.info(msg, 2, null, false);
}
})
......@@ -529,39 +527,39 @@ class RedPacket extends PureComponent {
// 绑定后领取
receviceAfterBind = () => {
http.get(`${API.home}/sys/red_packet/receive`).then(res => {
const { code, data, msg } = res.data;
if(code === 200) {
const {code, data, msg} = res.data;
if (code === 200) {
// receive_status 领取状态 1-已领取 2-已领取未绑定 3-已失效
if(data.receive_status === 1) {
if(data.red_packet_type === 1) {
if (data.receive_status === 1) {
if (data.red_packet_type === 1) {
this.setState({
type: 5,
money: data.amount
});
}else if(data.red_packet_type === 2 ) {
} else if (data.red_packet_type === 2) {
this.setState({
type: 6,
money: data.amount
});
}
}else if(data.receive_status === 2) {
} else if (data.receive_status === 2) {
this.setState({
type: 4,
money: data.amount,
endTime: data.end_time
});
this.startCountDown();
}else if(data.receive_status === 3) {
} else if (data.receive_status === 3) {
this.setState({
type: 9,
doneInfo: {
status: 2,
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);
}
})
......@@ -569,7 +567,7 @@ class RedPacket extends PureComponent {
// 绑定手机
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不验证
http.post(
`${API['passport-api']}/m/personal/bindPhone`,
......@@ -581,21 +579,21 @@ class RedPacket extends PureComponent {
is_valid: isValid
}
).then(res => {
const { errno, data, msg } = res.data;
if(errno === 200 ) {
if(isValid) {
if(data.tip_info) {
const {errno, data, msg} = res.data;
if (errno === 200) {
if (isValid) {
if (data.tip_info) {
this.setState({
type: 10,
bindInfo: data.tip_info
})
}else {
} else {
this.receviceAfterBind();
}
}else {
} else {
this.receviceAfterBind();
}
}else {
} else {
Toast.info(msg, 2, null, false);
}
});
......@@ -610,7 +608,7 @@ class RedPacket extends PureComponent {
render() {
// console.log(this.props);
const { history, userInfo } = this.props;
const {history, userInfo} = this.props;
const {
type,
isCopy,
......@@ -628,7 +626,7 @@ class RedPacket extends PureComponent {
bindInfo,
country
} = this.state;
const cls = classnames('popup-mask',{
const cls = classnames('popup-mask', {
'popup-mask--no': type !== 2
});
return (
......@@ -661,7 +659,7 @@ class RedPacket extends PureComponent {
<h4 className="popup-password__header">复制口令发送给好友</h4>
<div className="popup-password__body">
<p id="password" className="popup-passowrd__info">
{command.length > 16? `${command.substr(0, 16)}...` : command}
{command.length > 16 ? `${command.substr(0, 16)}...` : command}
</p>
{!isCopy
? userInfo && userInfo.uid
......@@ -688,24 +686,24 @@ class RedPacket extends PureComponent {
}
</div>
<p className="popup-password__footer">
好友领取红包后，你将获得同样奖励。<br />
好友领取红包后，你将获得同样奖励。<br/>
自己也可以领取哦~
</p>
</div>
<i
className="popup-password__button--close iconfont iconiconfront-2"
onClick={() => {
if(getParam('wechat') === '1') {
if(userInfo && userInfo.uid) {
if (getParam('wechat') === '1') {
if (userInfo && userInfo.uid) {
this.handleToClose(true);
history.push(`/detail?id=${getParam('id')}`);
}else {
} else {
this.setState({
type: 3
});
window.localStorage.setItem('redpacket-click', 'split');
}
}else {
} else {
this.handleToClose(true);
}
this.setState({
......@@ -758,7 +756,7 @@ class RedPacket extends PureComponent {
type={5}
packetInfo={{
money,
tip: ['可前往【七月在线】APP','- 账户资金中提现'],
tip: ['可前往【七月在线】APP', '- 账户资金中提现'],
btn: {
txt: '获取更多奖励',
onClick: () => {
......@@ -767,7 +765,7 @@ class RedPacket extends PureComponent {
}
}}
handleToClose={() => {
const isShare = getParam('share_code')? true : false;
const isShare = getParam('share_code') ? true : false;
this.handleToClose(false, isShare);
this.openTip();
}}
......@@ -781,7 +779,7 @@ class RedPacket extends PureComponent {
type={6}
packetInfo={{
money,
tip: ['可前往【七月在线】APP','- 我的优惠券中合成代金券'],
tip: ['可前往【七月在线】APP', '- 我的优惠券中合成代金券'],
btn: {
txt: '获取更多奖励',
onClick: () => {
......@@ -790,7 +788,7 @@ class RedPacket extends PureComponent {
}
}}
handleToClose={() => {
const isShare = getParam('share_code')? true : false;
const isShare = getParam('share_code') ? true : false;
this.handleToClose(false, isShare);
this.openTip();
}}
......@@ -811,7 +809,7 @@ class RedPacket extends PureComponent {
}
}}
handleToClose={() => {
const isShare = getParam('share_code')? true : false;
const isShare = getParam('share_code') ? true : false;
this.handleToClose(false, isShare);
}}
/>
......@@ -830,7 +828,7 @@ class RedPacket extends PureComponent {
const errors = {};
// if (!validateTel(tel)) {
if(!/^\d+$/.test(tel)) {
if (!/^\d+$/.test(tel)) {
errors.tel = '请填写正确格式的手机号';
}
if (!/[0-9]{6}/.test(code)) {
......@@ -839,7 +837,7 @@ class RedPacket extends PureComponent {
return errors;
}}
onSubmit={(values, { setStatus, setSubmitting }) => {
onSubmit={(values, {setStatus, setSubmitting}) => {
this.setState({
accountInfo: {
...values
......@@ -873,13 +871,9 @@ class RedPacket extends PureComponent {
}}
/>
</div>
<Captcha
mrBtm={15}
getInstance={this.getCaptchaInstance}
onVerify={this.onVerify}
/>
<CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>
{
endTime === 0? (
endTime === 0 ? (
<>
<div className="popup-form__item">
<p className="popup-form__tip">
......@@ -894,7 +888,8 @@ class RedPacket extends PureComponent {
onClick={() => {
history.push('/ShareCourse');
}}
>获取更多奖励</button>
>获取更多奖励
</button>
</>
) : (
<>
......@@ -914,18 +909,18 @@ class RedPacket extends PureComponent {
/>
<button
className="popup-form__button--code"
data-status={(validate && !isTimer)? 'do': ''}
data-status={(validate && !isTimer) ? 'do' : ''}
type="button"
onClick={() => this.handleToSend({tel, code})}
>
{
isTimer? `重新发送${seconds}s` : '发送验证码'
isTimer ? `重新发送${seconds}s` : '发送验证码'
}
</button>
</div>
<button
className="popup-packet__button--bundle"
data-status={(tel && code && isEmpty(errors))? 'do': 'done'}
data-status={(tel && code && isEmpty(errors)) ? 'do' : 'done'}
type="submit"
>
{`完成绑定(${countdown})`}
......@@ -948,7 +943,8 @@ class RedPacket extends PureComponent {
type === 9 &&
<div className="popup-done">
<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 &&
<i className="iconfont icondanseshixintubiao-8"></i>
......@@ -963,12 +959,13 @@ class RedPacket extends PureComponent {
onClick={() => {
history.push('/ShareCourse');
}}
>获取更多奖励</button>
>获取更多奖励
</button>
</div>
<i
className="popup-password__button--close iconfont iconiconfront-2"
onClick={() => {
const isShare = getParam('share_code')? true : false;
const isShare = getParam('share_code') ? true : false;
this.handleToClose(false, isShare);
}}
/>
......@@ -1023,10 +1020,12 @@ class RedPacket extends PureComponent {
<div className="popup-bind__button">
<button
className="popup-bind__button--cancle"
onClick={() => this.handleToClose(false)}>取消</button>
onClick={() => this.handleToClose(false)}>取消
</button>
<button
className="popup-bind__button--confirm"
onClick={() => this.toContinueBind(0)}>继续绑定</button>
onClick={() => this.toContinueBind(0)}>继续绑定
</button>
</div>
</div>
<i
......@@ -1039,7 +1038,7 @@ class RedPacket extends PureComponent {
{/* 关注公众号 */}
{
type === 11 &&
<FollowQRcode toClose={() => this.handleToClose(false)} />
<FollowQRcode toClose={() => this.handleToClose(false)}/>
}
</div>
}
......@@ -1048,7 +1047,7 @@ class RedPacket extends PureComponent {
}
}
const Packet = ({type, packetInfo, handleToClose, handleToOpen }) => {
const Packet = ({type, packetInfo, handleToClose, handleToOpen}) => {
const cls_content = classnames(
'popup-packet__content',
{
......@@ -1058,7 +1057,7 @@ const Packet = ({type, packetInfo, handleToClose, handleToOpen }) => {
'popup-packet__content--late': type === 7,
}
);
const {money, tip=[], btn} = packetInfo;
const {money, tip = [], btn} = packetInfo;
return (
<div className={classnames('popup-packet')}>
<div className={cls_content}>
......@@ -1066,11 +1065,11 @@ const Packet = ({type, packetInfo, handleToClose, handleToOpen }) => {
type === 3 &&
<>
<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>
<p className="popup-packet__value">
......@@ -1080,11 +1079,11 @@ const Packet = ({type, packetInfo, handleToClose, handleToOpen }) => {
<p className="popup-packet__tip">
{
tip.map((item, index) => {
if(index !== (tip.lenght - 1)) {
if (index !== (tip.lenght - 1)) {
return (
<>
{item}
<br />
<br/>
</>
)
}
......@@ -1105,7 +1104,7 @@ const Packet = ({type, packetInfo, handleToClose, handleToOpen }) => {
<>
<h4 className="popup-packet__label">您来晚了！</h4>
<p className="popup-packet__value">
红包仅能当日领取，下次<br />
红包仅能当日领取，下次<br/>
早点来哦~
</p>
<button
......
src/components/detail/redPacket/index.scss
......@@ -323,6 +323,34 @@
border-radius: 10px;
box-sizing: border-box;
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 {
......
src/components/passport/bindingTel/index.js
......@@ -5,11 +5,7 @@ import { http, getParam } from "@/utils"
import { compose } from "redux"
import { connect } from "react-redux"
import { setCurrentUser } from "@/store/userAction"
import Captcha from '@/common/Captcha'
import { HeaderBar } from '@/common'
// import ClearableInput from '@common/ClearableInput'
import { HeaderBar, CaptchaAli } from '@/common'
import ClearableInput from '../common/clearableInputWithCountryCodes'
import Button from '../common/Button'
import VeriCodeInput from '../common/veriCodeInput'
......@@ -21,7 +17,8 @@ class BindingTel extends Component {
state = {
validate: null,
captchaInstance: null
captchaInstance: null,
validationData: null
}
getCaptchaInstance = instance => {
......@@ -29,15 +26,12 @@ class BindingTel extends Component {
captchaInstance: instance
})
}
onVerify = (err, data) => {
if (err) {
console.log(err)
} else {
onVerify = (data) => {
this.setState({
validate: data.validate
validate: true,
validationData: data
})
}
}
render() {
const {
......@@ -79,16 +73,16 @@ class BindingTel extends Component {
placeholder={'验证码'}
account={values.tel}
tel={values.tel}
challenge={this.state.validate}
instance={this.state.captchaInstance}
action={'auth'}
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'}
active={values.tel && values.veriCode && isEmpty(errors)}>完成</Button>
</Form>
......
src/components/passport/common/veriCodeInput/index.js
......@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import './veri-code-input.scss'
import { http, validateEmail } from '@/utils';
import { Toast } from "antd-mobile";
import { has } from 'lodash'
import { has, isEmpty } from 'lodash'
import classnames from 'classnames'
......@@ -23,7 +23,7 @@ class VeriCodeInput extends Component {
let {count} = this.state
if (!this.state.isFirst) {
Toast.info('请重新进行滑块验证', 2, null, false)
this.props.instance.refresh()
this.props.instance.reset()
this.setState({
isFirst: true
})
......@@ -61,10 +61,10 @@ class VeriCodeInput extends Component {
}
sendEmail = () => {
const {email, challenge} = this.props
const {email, validationData} = this.props
http.post(`${API['passport-api']}/send_email_code`, {
email,
challenge
...validationData
}).then(res => {
if (res.data.errno === 0) {
Toast.info('验证码发送成功', 2, null, false)
......@@ -79,7 +79,7 @@ class VeriCodeInput extends Component {
}
sendSMS = () => {
const {action, tel, account, challenge, checking, country} = this.props
const {action, tel, account, validationData, checking, country} = this.props
if (!tel) {
Toast.info('请输入手机号')
return
......@@ -87,9 +87,9 @@ class VeriCodeInput extends Component {
http.post(`${API['passport-api']}/quick_sms`, {
phone_num: tel || account,
action: action || 'login',
area_code: '00'+country.num,
challenge,
checking
area_code: '00' + country.num,
checking,
...validationData
}).then(res => {
if (res.data.errno === 0) {
Toast.info('验证码发送成功', 2, null, false)
......@@ -104,7 +104,7 @@ class VeriCodeInput extends Component {
validate = () => {
const {tel, challenge, email} = this.props
const {tel, validationData, email} = this.props
let hasTel = has(this.props, 'tel')
let content
......@@ -129,8 +129,7 @@ class VeriCodeInput extends Component {
return false
}
if (!challenge) {
if (isEmpty(validationData)) {
Toast.info('请进行滑块验证', 2, null, false)
return false
}
......@@ -138,7 +137,7 @@ class VeriCodeInput extends Component {
}
render() {
let {className, ...rest} = this.props
let {className, validationData, ...rest} = this.props
return (
<Input
type={'number'}
......
src/components/passport/forgotPassword/index.js
......@@ -6,7 +6,7 @@ import { withFormik, Form, Field } from 'formik';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { Toast } from "antd-mobile";
import { HeaderBar, Captcha } from "@/common";
import { HeaderBar, CaptchaAli } from "@/common";
import ClearableInput from '../common/clearableInputWithCountryCodes'
import { http } from "@/utils";
import { quickLogin } from '@/store/userAction';
......@@ -18,7 +18,8 @@ class ForgotPassword extends Component {
state = {
validate: null,
captchaInstance: null
captchaInstance: null,
validationData: null
}
......@@ -27,15 +28,12 @@ class ForgotPassword extends Component {
captchaInstance: instance
})
}
onVerify = (err, data) => {
if (err) {
console.log(err)
} else {
onVerify = (data) => {
this.setState({
validate: data.validate
validationData: data,
validate: true
})
}
}
onSubmissionError = () => {
const errors = Object.values(this.props.errors);
errors.length && Toast.info(errors[0], 2, null, false)
......@@ -84,13 +82,14 @@ class ForgotPassword extends Component {
action={'auth'}
checking={1}
country={country}
validationData={this.state.validationData}
/>
)
}}
/>
}
<OnSubmissionError callback={this.onSubmissionError}/>
<Captcha getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>
<CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>
<Button className={'next_step'} active={isValid}>下一步</Button>
<Link className={'to-email'} to={`/passport/forgot-password-email`} replace>邮箱找回</Link>
</Form>
......@@ -123,7 +122,7 @@ const formikConfig = {
http.post(`${API['passport-api']}/check_phone_code`, {
phone: values.tel,
code: values.veriCode,
area_code: '00'+props.country.num
area_code: '00' + props.country.num
}).then(res => {
if (res.data.errno == 0) {
props.history.push('/passport/set-password', {from: props.location})
......
src/components/passport/forgotPasswordEmail/index.js
......@@ -6,8 +6,8 @@ import { withFormik, Form, Field } from 'formik';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { Toast } from "antd-mobile";
import { HeaderBar, Captcha, ClearableInput } from "@/common";
import { validateEmail, http, api } from "@/utils";
import { HeaderBar, ClearableInput, CaptchaAli } from "@/common";
import { validateEmail, http } from "@/utils";
import { quickLogin } from '@/store/userAction';
import OnSubmissionError from '../common/OnSubmissionError'
import { Link } from "react-router-dom";
......@@ -17,7 +17,8 @@ class ForgotPassword extends Component {
state = {
validate: null,
captchaInstance: null
captchaInstance: null,
validationData: null
}
......@@ -26,15 +27,12 @@ class ForgotPassword extends Component {
captchaInstance: instance
})
}
onVerify = (err, data) => {
if (err) {
console.log(err)
} else {
onVerify = (data) => {
this.setState({
validate: data.validate
validationData: data,
validate: true
})
}
}
onSubmissionError = () => {
const errors = Object.values(this.props.errors);
errors.length && Toast.info(errors[0], 2, null, false)
......@@ -78,6 +76,7 @@ class ForgotPassword extends Component {
email={values.email}
challenge={this.state.validate}
instance={this.state.captchaInstance}
validationData={this.state.validationData}
action={'auth'}
checking={1}
/>
......@@ -86,7 +85,8 @@ class ForgotPassword extends Component {
/>
}
<OnSubmissionError callback={this.onSubmissionError}/>
<Captcha getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>
{/*<Captcha getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>*/}
<CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>
<Button className={'next_step'} active={isValid}>下一步</Button>
<Link className={'to-phone'} to={'/passport/forgot-password'} replace>手机号找回</Link>
</Form>
......
src/components/passport/login/index.js
import React, { Component } from 'react'
import './wechatLogin.scss'
// import Input from "../common/Input"
import Input from '../common/inputWithCountryCodes'
import LoginButton from '../common/LoginButton'
import LoginWays from '../common/LoginWays'
import Header from '../common/Header'
import VeriCodeInput from '../common/veriCodeInput'
import { Form, Field, withFormik } from "formik"
import Captcha from '@/common/Captcha'
import { quickLogin } from '@/store/userAction';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { isEmpty } from 'lodash'
import { Toast } from 'antd-mobile';
import { HeaderBar } from "@/common";
import { HeaderBar, CaptchaAli } from "@/common";
class Login extends Component {
state = {
validate: null,
captchaInstance: null
captchaInstance: null,
validationData: null
}
loginWaysClick = method => {
......@@ -56,18 +55,16 @@ class Login extends Component {
captchaInstance: instance
})
}
onVerify = (err, data) => {
if (err) {
console.log(err)
} else {
onVerify = (data) => {
this.setState({
validate: data.validate
validationData: data,
validate: true
})
}
}
toStudentRegister = () => {
const { history } = this.props;
const {history} = this.props;
history.push('/passport/student-login')
}
......@@ -77,11 +74,9 @@ class Login extends Component {
let pathname = location.state && location.state.from && location.state.from.pathname
let search = location.state && location.state.from && location.state.from.search
console.log(action,pathname,search);
if(action !== 'POP'){
if (action !== 'POP') {
let historyUrl = `${pathname}${search}`
window.localStorage.setItem('HistoryUrl',historyUrl)
window.localStorage.setItem('HistoryUrl', historyUrl)
}
}
......@@ -107,6 +102,7 @@ class Login extends Component {
placeholder={'手机号快捷登录(免注册)'}
wrapperClass={'tel-input'}
country={country}
id={'tel'}
/>
)}
>
......@@ -124,18 +120,17 @@ class Login extends Component {
style={{fontSize: '20px', left: '12px'}}
/>}
tel={values.tel}
challenge={this.state.validate}
errors={errors}
placeholder={'请输入验证码'}
instance={this.state.captchaInstance}
validationData={this.state.validationData}
country={country}
/>
)}
/>
}
<Captcha mrBtm={this.state.validate ? '20px' : '33px'} getInstance={this.getCaptchaInstance}
onVerify={this.onVerify}
/>
<CaptchaAli onVerify={this.onVerify} getInstance={this.getCaptchaInstance}/>
<LoginButton active={values.tel && values.veriCode && isEmpty(errors)}/>
{/* 助学计划 */}
......@@ -159,7 +154,7 @@ const FormikConfig = {
props.quickLogin({
phone_num: values.tel,
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)
}).then(res => {
if (res.hasError) {
......
src/components/passport/studentRoot/index.js
......@@ -5,8 +5,7 @@ import { studentLogin } from '@/store/userAction';
import { http } from '@/utils';
import { Formik, Form, Field } from 'formik';
import { Toast } from "antd-mobile";
import { HeaderBar } from "@/common";
import Captcha from '@/common/Captcha'
import { HeaderBar, CaptchaAli } from "@/common";
import Header from '../common/Header';
import Input from '../common/inputWithCountryCodes';
import VeriCodeInput from '../common/veriCodeInput';
......@@ -33,6 +32,7 @@ class StudentRoot extends PureComponent {
list: [],
schoolList: [],
schoolName: '',
validationData: null,
};
}
......@@ -73,7 +73,7 @@ class StudentRoot extends PureComponent {
redirect: from && window.location.origin + from.pathname + from.search + from.hash,
}).then(res => {
if (res.hasError) {
captchaInstance.refresh();
captchaInstance.reset();
Toast.info(res.msg, 2, null, false);
}
});
......@@ -85,12 +85,11 @@ class StudentRoot extends PureComponent {
});
}
onVerify = (err, data) => {
if (!err) {
onVerify = (data) => {
this.setState({
validate: data.validate
});
}
validationData: data,
validate: true
})
}
selectSwitch = (key, value) => {
......@@ -194,11 +193,7 @@ class StudentRoot extends PureComponent {
placeholder="密码需要包含6-16位字母和数字"
/>
</div>
<Captcha
mrBtm={'15px'}
getInstance={this.getCaptchaInstance}
onVerify={this.onVerify}
/>
<CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify} mb={15}/>
{
validate &&
<Field
......@@ -210,7 +205,7 @@ class StudentRoot extends PureComponent {
className={'student-form__code'}
icon={<i className={'iconfont iconduanxin'} style={{fontSize: '20px', left: '12px'}}/>}
tel={props.values.tel}
challenge={validate}
validationData={this.state.validationData}
errors={props.errors}
placeholder={'请输入验证码'}
instance={captchaInstance}
......
src/store/userAction.js
......@@ -16,7 +16,6 @@ const accountLogin = user => dispatch => {
const studentLogin = params => dispatch => {
return http.post(`${API['passport-api']}/phone_reg`, {
challenge: params.validate,
phone: params.tel,
password: params.password,
code: params.code,
......
src/utils/index.js
......@@ -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 = () => {
var ua = window.navigator.userAgent.toLowerCase();
......@@ -126,11 +135,12 @@ export {
export {
html,
initCaptcha,
initCaptchaNC,
validateTel,
validateEmail,
browser,
isLogin,
dateCountDown
dateCountDown,
}
export {
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