pref: 移动端验证码登录配置

src/pages/productCenter/mobileConfig/SiteConfig.jsx

 import React, { useState, useEffect } from 'react';
-import { Form, Select, Input, Button, Radio, notification, Spin, Tag } from 'antd';
+import {
+  Switch,
+  InputNumber,
+  Form,
+  Select,
+  Input,
+  Button,
+  Radio,
+  notification,
+  Spin,
+  Tag,
+} from 'antd';
 import { editWebsite, getWebsite, addWebsite } from '@/services/mobileConfig/api';
 import PicturesWall from '@/components/Upload/index';
 import { stripBasename } from 'history/pathutils';
 const { Item } = Form;
 const { Option } = Select;
 const SiteConfig = props => {
-  const { miniTitle, submitCallback, addCallback, parentKey, clientName, singleList } = props;
+  const {
+    miniTitle,
+    submitCallback,
+    addCallback,
+    parentKey,
+    clientName,
+    singleList,
+    codeTypeList,
+  } = props;
   const [config, setConfig] = useState(''); // 网站配置信息
   const [loginList, setLoginList] = useState([
     { text: '科技蓝', value: 'default.html' },
@@ -18,7 +37,7 @@ const SiteConfig = props => {
   const [h5LoginList, setH5LoginList] = useState([
     { text: '科技蓝', value: 'h5_default' },
     { text: '江西水务', value: 'h5_jiangxi' },
-    { text: 'h5_宿州', value: 'h5_suzhou' }
+    { text: 'h5_宿州', value: 'h5_suzhou' },
   ]); // H5登陆页
   const [styleList, setStyleList] = useState([
     { text: '熊猫产品', value: 'default' },
@@ -29,19 +48,19 @@ const SiteConfig = props => {
   const [keepText, setKeepText] = useState([]);
   const [name, setName] = useState('');
   const [form] = Form.useForm();
+  const isVerificationCode = Form.useWatch('isVerificationCode', form);
+
   const layout = {
     layout: 'horizontal',
     labelCol: { span: 7 },
     wrapperCol: { span: 8 },
   };
   useEffect(() => {
-    console.log(singleList);
     let aa = [];
     singleList.map(i => {
       aa.push(i.text);
     });
     setKeepText(aa);
-    console.log(miniTitle, 'miniTitle');
     if (!miniTitle) {
       return;
     }
@@ -53,12 +72,16 @@ const SiteConfig = props => {
     })
       .then(res => {
         setLoading(false);
+        const data = res.data || {};
         let obj = {};
         let arr = Object.keys(form.getFieldsValue());
-        arr.map(k => {
-          obj[k] = res.data[k];
+        arr.forEach(k => {
+          obj[k] = data[k];
         });
-        console.log(obj);
+        obj.isVerificationCode = data.VerificationConfig?.IsVerificationCode || false;
+        obj.verificationCodeType = data.VerificationConfig?.VerificationCodeType || '图片验证码';
+        obj.verificationCodeTimeOut = data.VerificationConfig?.VerificationCodeTimeOut || 1;
+
         setName(obj.title);
         form.setFieldsValue(obj);
       })
@@ -74,6 +97,11 @@ const SiteConfig = props => {
       if (valid) {
         setLoading(true);
         const obj = { ...form.getFieldsValue() };
+        obj.verificationConfig = {
+          isVerificationCode: obj.isVerificationCode || false,
+          VerificationCodeType: obj.verificationCodeType || '图片验证码',
+          verificationCodeTimeOut: obj.verificationCodeTimeOut || 1,
+        };
         let params = { ...obj, mode: 'single', client: clientName };
         editWebsite(params)
           .then(res => {
@@ -251,6 +279,33 @@ const SiteConfig = props => {
                 ))}
             </Select>
           </Item>
+          <Item label="登录验证码" name="isVerificationCode" valuePropName="checked">
+            <Switch checkedChildren="开启" unCheckedChildren="关闭" />
+          </Item>
+          {isVerificationCode ? (
+            <>
+              <Item
+                label="验证码类型"
+                name="verificationCodeType"
+                rules={[
+                  {
+                    required: true,
+                    message: '请选择验证码类型',
+                  },
+                ]}
+              >
+                <Select placeholder="请选择验证码类型" options={codeTypeList} />
+              </Item>
+              <Item label="验证码超时" name="verificationCodeTimeOut">
+                <InputNumber
+                  style={{ width: '100%' }}
+                  placeholder="请输入验证码超时时间"
+                  min={1}
+                  addonAfter="分钟"
+                />
+              </Item>
+            </>
+          ) : null}
           {/* <Item
             label="系统皮肤："
             name="theme"

src/pages/productCenter/mobileConfig/addConfig.jsx

 import React, { useState, useEffect } from 'react';
-import { Form, Select, Input, Button, Radio, notification, Spin, Tag } from 'antd';
+import {
+  Form,
+  Select,
+  Input,
+  Button,
+  Radio,
+  notification,
+  Spin,
+  Tag,
+  Switch,
+  InputNumber,
+} from 'antd';
 import { editWebsite, getWebsite, addWebsite } from '@/services/mobileConfig/api';
 import PicturesWall from '@/components/Upload/index';
 const { Item } = Form;
 const { Option } = Select;
 const AddConfig = props => {
-  const { miniTitle, submitCallback, subType, addCallback, singleList, visible } = props;
+  const {
+    miniTitle,
+    submitCallback,
+    subType,
+    addCallback,
+    singleList,
+    visible,
+    codeTypeList,
+  } = props;
   console.log(subType, 'ubType');
   const [config, setConfig] = useState(''); // 网站配置信息
   const [loginList, setLoginList] = useState([
@@ -32,6 +51,8 @@ const AddConfig = props => {
   const [keepTitle, setKeepTitle] = useState([]);
   const [keepValue, setKeepValue] = useState([]);
   const [form] = Form.useForm();
+  const isVerificationCode = Form.useWatch('isVerificationCode', form);
+
   const layout = {
     layout: 'horizontal',
     labelCol: { span: 7 },
@@ -39,7 +60,6 @@ const AddConfig = props => {
   };
 
   useEffect(() => {
-    console.log(singleList);
     let text = [];
     let value = [];
     singleList.map(i => {
@@ -59,6 +79,9 @@ const AddConfig = props => {
         loginTemplate: loginList[0].value,
         theme: themeList[0].value,
         style: styleList[0].value,
+        isVerificationCode: false,
+        verificationCodeType: '图片验证码',
+        verificationCodeTimeOut: 1,
       });
     }
   }, [visible]);
@@ -80,6 +103,11 @@ const AddConfig = props => {
         }
         setLoading(true);
         const obj = { ...form.getFieldsValue() };
+        obj.verificationConfig = {
+          isVerificationCode: obj.isVerificationCode || false,
+          VerificationCodeType: obj.verificationCodeType || '图片验证码',
+          verificationCodeTimeOut: obj.verificationCodeTimeOut || 1,
+        };
         let params = { ...obj, mode: 'single' };
         addWebsite(params)
           .then(res => {
@@ -286,6 +314,33 @@ const AddConfig = props => {
                 ))}
             </Select>
           </Item>
+          <Item label="登录验证码" name="isVerificationCode" valuePropName="checked">
+            <Switch checkedChildren="开启" unCheckedChildren="关闭" />
+          </Item>
+          {isVerificationCode ? (
+            <>
+              <Item
+                label="验证码类型"
+                name="verificationCodeType"
+                rules={[
+                  {
+                    required: true,
+                    message: '请选择验证码类型',
+                  },
+                ]}
+              >
+                <Select placeholder="请选择验证码类型" options={codeTypeList} />
+              </Item>
+              <Item label="验证码超时" name="verificationCodeTimeOut">
+                <InputNumber
+                  style={{ width: '100%' }}
+                  placeholder="请输入验证码超时时间"
+                  min={1}
+                  addonAfter="分钟"
+                />
+              </Item>
+            </>
+          ) : null}
           {/* <Item
             label="系统皮肤："
             name="theme"

src/pages/productCenter/mobileConfig/index.jsx

@@ -2,12 +2,13 @@ import React, { useState, useEffect, useMemo } from 'react';
 import { Card, Tabs, Button, Popconfirm, notification, Spin, Modal, Drawer } from 'antd';
 import ProCard from '@ant-design/pro-card';
 import PageContainer from '@/components/BasePageContainer';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
 import SevenParams from './menuconfig/SevenParams';
 import VersionPublish from './menuconfig/VersionPublish';
 import ApkUpload from './menuconfig/ApkUpload';
 import WorkDesign from './menuconfig/WorkDesign';
 import { getMiniAppModuleTree, deleteWebsite, deleteMiniMenu } from '@/services/mobileConfig/api';
-import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { GetVerificationCodeType } from '@/services/webConfig/api';
 import SiteConfig from './SiteConfig';
 import MiniMenu from './menuconfig/miniMenu';
 import AddConfig from './addConfig';
@@ -27,6 +28,8 @@ const MobileConfigPage = props => {
   const [singleList, setSingleList] = useState([]);
   const [clientName, setClientName] = useState(''); // client
   const [addVisible, setAddVisible] = useState(false);
+  const [codeTypeList, setCodeTypeList] = useState([]); // 验证码类型
+
   useEffect(() => {
     setLoading(true);
     getMiniAppModuleTree({
@@ -65,7 +68,22 @@ const MobileConfigPage = props => {
       console.log(res);
     });
   }, [flag]);
+  useEffect(() => {
+    getCodeType();
+  }, []);
 
+  const getCodeType = () => {
+    GetVerificationCodeType({}).then(res => {
+      if (res.code === 0) {
+        setCodeTypeList(
+          (res.data || []).map(item => ({
+            label: item,
+            value: item,
+          })),
+        );
+      }
+    });
+  };
   // 修改选中的tab
   const handleChange = key => {
     setActiveKey(key);
@@ -233,6 +251,7 @@ const MobileConfigPage = props => {
           clientName={clientName}
           parentKey={parentKey}
           singleList={singleList}
+          codeTypeList={codeTypeList}
         />
       ),
     },
@@ -285,6 +304,7 @@ const MobileConfigPage = props => {
           addCallback={addCallback}
           submitCallback={submitCallback}
           singleList={singleList}
+          codeTypeList={codeTypeList}
         />
       </Drawer>
     </PageContainer>