91 lines
4.6 KiB
JavaScript
91 lines
4.6 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
||
import { Switch, Form, Input, Select, Tag } from 'antd';
|
||
import Styles from './web.module.less';
|
||
export default function Sms(props) {
|
||
const { passport, t, changeEnabled, updateConfig } = props;
|
||
const { id, type, enabled, stateColor } = passport;
|
||
const config = passport.config || {};
|
||
const [templateName, setTemplateName] = useState(config?.templateName || '');
|
||
const [smsCodeDuration, setSmsCodeDuration] = useState(config?.codeDuration || '');
|
||
const [smsDigit, setSmsDigit] = useState(config?.digit || '');
|
||
useEffect(() => {
|
||
setTemplateName(config?.templateName || '');
|
||
setSmsCodeDuration(config?.codeDuration || '');
|
||
setSmsDigit(config?.digit || '');
|
||
}, [config]);
|
||
return (<div className={Styles.item}>
|
||
<div className={Styles.title}>
|
||
<Tag color={stateColor}>{t(`passport:v.type.${type}`)}</Tag>
|
||
<Switch checkedChildren="开启" unCheckedChildren="关闭" checked={enabled} onChange={(checked) => {
|
||
changeEnabled(checked);
|
||
}}/>
|
||
</div>
|
||
{enabled &&
|
||
<div>
|
||
<Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} style={{ maxWidth: 900, marginTop: 16 }}>
|
||
<Form.Item label="模拟发送" tooltip="开启模拟发送短信，发短信不会调用api">
|
||
<Switch checkedChildren="是" unCheckedChildren="否" checked={config?.mockSend} onChange={(checked) => {
|
||
updateConfig(id, config, 'mockSend', checked);
|
||
}}/>
|
||
</Form.Item>
|
||
<Form.Item label="默认渠道" tooltip="发送短信渠道，如阿里云、腾讯云、天翼云">
|
||
<>
|
||
<Select placeholder="请选择渠道" value={config?.defaultOrigin} style={{ width: 120 }} onChange={(value) => {
|
||
updateConfig(id, config, 'defaultOrigin', value);
|
||
}} options={[
|
||
{ value: 'ali', label: '阿里云' },
|
||
{ value: 'tencent', label: '腾讯云' },
|
||
{ value: 'ctyun', label: '天翼云' },
|
||
]}/>
|
||
</>
|
||
</Form.Item>
|
||
<Form.Item label="验证码模版名" tooltip="短信验证码模版名">
|
||
<Input placeholder="请输入验证码模版名" type="text" value={templateName} onChange={(e) => {
|
||
setTemplateName(e.target.value);
|
||
}} onBlur={() => {
|
||
if (templateName !== config?.templateName) {
|
||
updateConfig(id, config, 'templateName', templateName);
|
||
}
|
||
}}/>
|
||
</Form.Item>
|
||
<Form.Item label="验证码有效时间" tooltip="短信验证码发送有效时间，不填为1分钟">
|
||
<Input placeholder="请输入验证码有效时间" type="number" value={smsCodeDuration} min={0} onChange={(e) => {
|
||
const val = e.target.value;
|
||
if (val) {
|
||
setSmsCodeDuration(Number(val));
|
||
}
|
||
else {
|
||
setSmsCodeDuration('');
|
||
}
|
||
}} onBlur={() => {
|
||
if (Number(smsCodeDuration) > 0) {
|
||
updateConfig(id, config, 'codeDuration', smsCodeDuration);
|
||
}
|
||
else {
|
||
updateConfig(id, config, 'codeDuration', undefined);
|
||
}
|
||
}} suffix="分钟"/>
|
||
</Form.Item>
|
||
<Form.Item label="验证码位数" tooltip="短信验证码位数，可设置4~8位">
|
||
<Input placeholder="请输入验证码有效位数" type="number" value={smsDigit} min={4} max={8} onChange={(e) => {
|
||
const val = e.target.value;
|
||
if (val) {
|
||
setSmsDigit(Number(val));
|
||
}
|
||
else {
|
||
setSmsDigit('');
|
||
}
|
||
}} onBlur={() => {
|
||
if (Number(smsDigit) > 0) {
|
||
updateConfig(id, config, 'digit', smsDigit);
|
||
}
|
||
else {
|
||
updateConfig(id, config, 'digit', undefined);
|
||
}
|
||
}}/>
|
||
</Form.Item>
|
||
</Form>
|
||
</div>}
|
||
</div>);
|
||
}
|