95 lines
2.6 KiB
JavaScript
95 lines
2.6 KiB
JavaScript
/*
|
|
* Author: 黎永顺
|
|
* name: 验证码弹框
|
|
* Description:
|
|
* Date: 2023/6/16
|
|
*/
|
|
import React, { Component } from "react";
|
|
import { WeaDialog, WeaError, WeaFormItem, WeaInput, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
|
|
import { sendMobileCode } from "../../apis/payroll";
|
|
import { Button } from "antd";
|
|
import "./index.less";
|
|
|
|
const { getLabel } = WeaLocaleProvider;
|
|
|
|
class Index extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
captcha: "",
|
|
time: 60
|
|
};
|
|
this.timeRef = null;
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
clearInterval(this.timeRef);
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps, nextContext) {
|
|
if (nextProps.visible !== this.props.visible && !nextProps.visible) {
|
|
clearInterval(this.timeRef);
|
|
this.setState({ captcha: "", time: 60 });
|
|
}
|
|
}
|
|
|
|
handleSendCaptcha = () => {
|
|
sendMobileCode({ id: this.props.id }).then(({ status, data }) => {
|
|
if (status) {
|
|
console.log(data);
|
|
this.timeRef = setInterval(() => {
|
|
const { time } = this.state;
|
|
this.setState({ time: time - 1 }, () => {
|
|
if (this.state.time === -1) {
|
|
clearInterval(this.timeRef);
|
|
this.setState({ time: 60 });
|
|
}
|
|
});
|
|
}, 1000);
|
|
}
|
|
});
|
|
};
|
|
handleConfirm = () => {
|
|
if (!this.state.captcha) {
|
|
this.refs.weaError.showError();
|
|
// return
|
|
}
|
|
this.props.onCancel();
|
|
this.props.onConfirm();
|
|
};
|
|
|
|
render() {
|
|
const { captcha, time } = this.state;
|
|
return (
|
|
<WeaDialog
|
|
initLoadCss {...this.props} style={{ width: 550 }}
|
|
className="captchaWrapper" title={getLabel(111, "验证码验证")}
|
|
buttons={[
|
|
<Button type="primary" onClick={this.handleConfirm}>{getLabel(826, "确定")}</Button>
|
|
]}
|
|
>
|
|
<WeaSearchGroup needTigger={false} title="" showGroup>
|
|
<WeaFormItem
|
|
label={getLabel(111, "验证码")}
|
|
labelCol={{ span: 8 }}
|
|
wrapperCol={{ span: 16 }}
|
|
>
|
|
<WeaError tipPosition="bottom" ref="weaError" error={getLabel(826, "验证码未填写")}>
|
|
<div className="captchaInputBox">
|
|
<WeaInput value={captcha} onChange={captcha => this.setState({ captcha })}/>
|
|
<Button type="primary" onClick={this.handleSendCaptcha} disabled={time !== 60}>
|
|
{
|
|
time === 60 ? getLabel(111, "发送验证码") : `${time}S`
|
|
}
|
|
</Button>
|
|
</div>
|
|
</WeaError>
|
|
</WeaFormItem>
|
|
</WeaSearchGroup>
|
|
</WeaDialog>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Index;
|