143 lines
4.5 KiB
JavaScript
143 lines
4.5 KiB
JavaScript
import React, { useCallback, useEffect, useState } from 'react';
|
||
import { Form, Input, Button, Modal, message } from 'antd';
|
||
import axios from 'axios';
|
||
import { setmiyah, isMobile } from 'educoder';
|
||
import { formModalLayout } from '../static';
|
||
import {checkVerificationCode} from '../api';
|
||
|
||
export default Form.create()(({ visible, history, form, setVisible,changeContactPhone }) => {
|
||
const { getFieldDecorator, validateFields, setFieldsValue, getFieldsValue } = form;
|
||
const [getCaptchaBut, setGetCaptchaBut] = useState(false);
|
||
const [num, setNum] = useState(0) // 倒计时
|
||
const [isSend, setIsSend] = useState(false) // 是否发送验证码
|
||
|
||
const helper = useCallback(
|
||
(label, name, rules, widget, initialValue, rightComponent) => (
|
||
<Form.Item label={label}>
|
||
{getFieldDecorator(name, { rules, initialValue, validateFirst: true, })(widget)}
|
||
{rightComponent}
|
||
</Form.Item>
|
||
), []);
|
||
|
||
/** 倒计时显示*/
|
||
useEffect(() => {
|
||
let timer = 0;
|
||
if (isSend && num !== 0) {
|
||
timer = setInterval(() => {
|
||
setNum(n => {
|
||
if (n === 1) {
|
||
setIsSend(false)
|
||
clearInterval(timer)
|
||
}
|
||
return n - 1;
|
||
});
|
||
}, 1000);
|
||
}
|
||
return () => {
|
||
// 组件销毁时，清除定时器
|
||
clearInterval(timer)
|
||
};
|
||
}, [isSend]);
|
||
|
||
function getCode() {
|
||
setIsSend(true);
|
||
setNum(60);
|
||
validateFields(['phone'], (err, values) => {
|
||
//请求获取验证码接口
|
||
axios.get(`/accounts/get_verification_code.json`, {
|
||
params: {
|
||
login: values.phone,
|
||
type: 5,
|
||
smscode: setmiyah(values.phone),
|
||
}
|
||
}).then(res => {
|
||
debugger
|
||
if (res && res.data && res.data && res.data.status === 0) {
|
||
//验证码发送成功
|
||
message.success({
|
||
content: <span>验证码已发送，请注意查收。</span>,
|
||
getContainer: document.querySelector('.phoneEdit')
|
||
});
|
||
} else {
|
||
//验证码发送失败,获取验证码按钮变灰并且文案变回【获取验证码】
|
||
message.error({ content: <span>验证码发送失败</span> ,
|
||
getContainer: document.querySelector('.phoneEdit')});
|
||
setGetCaptchaBut(false);
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
|
||
function checkItem() {
|
||
validateFields((err, values) => {
|
||
// 验证验证码接口
|
||
checkVerificationCode({
|
||
phoneNumber: values.phone,
|
||
verificationCode:values.code,
|
||
}).then(res=>{
|
||
if(res&&res.data){
|
||
message.success({
|
||
content: <span>修改联系手机号成功！</span>,
|
||
getContainer: document.querySelector('.phoneEdit')
|
||
});
|
||
changeContactPhone(values.phone)
|
||
setVisible(false)
|
||
}else{
|
||
message.error({ content: '验证失败',
|
||
getContainer: document.querySelector('.phoneEdit')});
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
return (
|
||
<Modal
|
||
title="修改联系电话"
|
||
visible={visible}
|
||
onOk={checkItem}
|
||
onCancel={() => { setVisible(false) }}
|
||
className="form-edit-modal phoneEdit"
|
||
>
|
||
<Form {...formModalLayout}>
|
||
<Form.Item label={"新手机号码："} >
|
||
{getFieldDecorator('phone', {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请输入手机号"
|
||
},
|
||
{
|
||
validator: (rule, val, callback) => {
|
||
const pattern = /^1(3|4|5|6|7|8|9)\d{9}$/;
|
||
if (pattern.test(val)) {
|
||
setGetCaptchaBut(true);
|
||
callback();
|
||
} else {
|
||
setGetCaptchaBut(false);
|
||
callback('请输入正确的手机号码！');
|
||
}
|
||
}
|
||
},
|
||
],
|
||
validateTrigger: "onChange",
|
||
validateFirst: true,
|
||
})(<Input className="tel-input" placeholder="请输入手机号" />)}
|
||
</Form.Item>
|
||
|
||
<Form.Item label={"验证码："} >
|
||
{getFieldDecorator('code', {
|
||
rules: [{
|
||
required: true,
|
||
message: "请输入验证码"
|
||
}],
|
||
validateTrigger: "onBlur",
|
||
})(
|
||
<Input className="code-input" placeholder="请输入验证码" />
|
||
)}
|
||
<Button className="ml10" type="primary" disabled={num !== 0 || !getCaptchaBut} onClick={getCode}>{num || '获取验证码'}</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
)
|
||
}) |