127 lines
4.5 KiB
JavaScript
127 lines
4.5 KiB
JavaScript
/*
|
|
* Author: 黎永顺
|
|
* name: 验证码弹框
|
|
* Description:
|
|
* Date: 2023/6/16
|
|
*/
|
|
import React, { Component } from "react";
|
|
import { WeaDialog, WeaError, WeaFormItem, WeaInput, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
|
|
import { WeaForm, WeaSwitch } from "comsMobx";
|
|
import { checkMobileCode, sendMobileCode } from "../../apis/payroll";
|
|
import { getQueryString } from "../../util/url";
|
|
import FormInfo from "../FormInfo";
|
|
import { captchaCondition } from "../../pages/mobilePayroll/pwdCondtion";
|
|
import MobileModal from "../../pages/mobilePayroll/mobileModal";
|
|
import { Button, message } from "antd";
|
|
import "./index.less";
|
|
|
|
const form = new WeaForm();
|
|
const { getLabel } = WeaLocaleProvider;
|
|
|
|
class Index extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { captcha: "", time: 60 };
|
|
this.timeRef = null;
|
|
}
|
|
|
|
componentDidMount() {
|
|
form.initFormFields(captchaCondition);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
clearInterval(this.timeRef);
|
|
this.setState({ captcha: "", time: 60 });
|
|
}
|
|
|
|
handleSendCaptcha = () => {
|
|
sendMobileCode({ id: this.props.id }).then(({ status, data }) => {
|
|
if (status) {
|
|
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 = async () => {
|
|
const type = getQueryString("type"), f = await form.validateForm();
|
|
if (!this.state.captcha && type !== "phone" && !this.props.isSalaryMobile) {
|
|
this.refs.weaError.showError();
|
|
return;
|
|
} else if (!f.isValid && (type === "phone" || this.props.isSalaryMobile)) {
|
|
f.showErrors();
|
|
return;
|
|
}
|
|
checkMobileCode({ id: this.props.id, mobileCode: this.state.captcha }).then(({ status, errormsg }) => {
|
|
if (status) {
|
|
clearInterval(this.timeRef);
|
|
this.setState({ captcha: "", time: 60 });
|
|
this.props.onCancel();
|
|
this.props.onConfirm();
|
|
} else {
|
|
message.error(errormsg);
|
|
}
|
|
});
|
|
};
|
|
|
|
render() {
|
|
const { captcha, time } = this.state, { isSalaryMobile } = this.props, type = getQueryString("type");
|
|
const itemRender = {
|
|
mobileCode: (field, textAreaProps, form, formParams) => {
|
|
return (<div className="captchaInputBox">
|
|
<WeaSwitch fieldConfig={{ ...field, ...textAreaProps }} form={form} formParams={formParams}
|
|
onChange={() => this.setState({ captcha: form.getFormParams().mobileCode })}/>
|
|
<Button type="primary" onClick={this.handleSendCaptcha} disabled={time !== 60}>
|
|
{
|
|
time === 60 ? getLabel(111, "发送验证码") : `${time}S`
|
|
}
|
|
</Button>
|
|
</div>);
|
|
}
|
|
};
|
|
return (<React.Fragment>
|
|
{
|
|
(type === "phone" || isSalaryMobile) ?
|
|
<MobileModal title={getLabel(111, "验证码验证")} isSalaryMobile
|
|
onConfirm={this.handleConfirm} onCancel={this.props.onCancel}>
|
|
<FormInfo center={false} itemRender={itemRender} form={form} formFields={captchaCondition}/>
|
|
</MobileModal> :
|
|
<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: 10 }}
|
|
wrapperCol={{ span: 14 }}
|
|
>
|
|
<WeaError tipPosition="bottom" ref="weaError" error={getLabel(111, "验证码未填写")}>
|
|
<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>
|
|
}
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Index; |