pref: 登录页验证码配置修改

src/pages/productCenter/mobileConfig/SiteConfig.jsx

@@ -39,6 +39,9 @@ const SiteConfig = props => {
     { text: '江西水务', value: 'h5_jiangxi' },
     { text: 'h5_宿州', value: 'h5_suzhou' },
   ]); // H5登陆页
+  const isVerificationObj = {
+    // h5_default: true,
+  }; // 支持 验证码的登录页
   const [styleList, setStyleList] = useState([
     { text: '熊猫产品', value: 'default' },
     { text: '通用项目', value: 'project' },
@@ -49,6 +52,7 @@ const SiteConfig = props => {
   const [name, setName] = useState('');
   const [form] = Form.useForm();
   const isVerificationCode = Form.useWatch('isVerificationCode', form);
+  const h5loginTemplate = Form.useWatch('h5loginTemplate', form);
 
   const layout = {
     layout: 'horizontal',
@@ -279,33 +283,38 @@ const SiteConfig = props => {
                 ))}
             </Select>
           </Item>
-          <Item label="登录验证码" name="isVerificationCode" valuePropName="checked">
-            <Switch checkedChildren="开启" unCheckedChildren="关闭" />
-          </Item>
-          {isVerificationCode ? (
+          {isVerificationObj[h5loginTemplate] ? (
             <>
-              <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 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}
             </>
           ) : null}
+
           {/* <Item
             label="系统皮肤："
             name="theme"

src/pages/productCenter/mobileConfig/addConfig.jsx

@@ -25,7 +25,6 @@ const AddConfig = props => {
     visible,
     codeTypeList,
   } = props;
-  console.log(subType, 'ubType');
   const [config, setConfig] = useState(''); // 网站配置信息
   const [loginList, setLoginList] = useState([
     { text: '科技蓝', value: 'default.html' },
@@ -37,6 +36,9 @@ const AddConfig = props => {
     { text: '科技蓝', value: 'h5_default' },
     { text: '江西水务', value: 'h5_jiangxi' },
   ]); // H5登陆页
+  const isVerificationObj = {
+    // h5_default: true,
+  }; // 支持 验证码的登录页
   const [styleList, setStyleList] = useState([
     { text: '熊猫产品', value: 'default' },
     { text: '通用项目', value: 'project' },
@@ -52,6 +54,7 @@ const AddConfig = props => {
   const [keepValue, setKeepValue] = useState([]);
   const [form] = Form.useForm();
   const isVerificationCode = Form.useWatch('isVerificationCode', form);
+  const h5loginTemplate = Form.useWatch('h5loginTemplate', form);
 
   const layout = {
     layout: 'horizontal',
@@ -126,7 +129,6 @@ const AddConfig = props => {
                 description: res.message || '新增失败',
               });
             }
-            console.log(res, 'res');
           })
           .catch(err => {
             setLoading(false);
@@ -314,33 +316,38 @@ const AddConfig = props => {
                 ))}
             </Select>
           </Item>
-          <Item label="登录验证码" name="isVerificationCode" valuePropName="checked">
-            <Switch checkedChildren="开启" unCheckedChildren="关闭" />
-          </Item>
-          {isVerificationCode ? (
+          {isVerificationObj[h5loginTemplate] ? (
             <>
-              <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 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}
             </>
           ) : null}
+
           {/* <Item
             label="系统皮肤："
             name="theme"

src/pages/productCenter/webConfig/components/siteConfigDrawer.js

-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import {
   getLoginPage,
   getMapCofigs,
@@ -82,6 +82,8 @@ export default props => {
   } = props;
   const [form] = Form.useForm();
   const isVerificationCode = Form.useWatch('isVerificationCode', form);
+  const loginTemplate = Form.useWatch('loginTemplate', form);
+
   const [loginPages, setLoginPages] = useState([]);
   const [checkedList, setCheckedList] = useState([]);
   const [indeterminate, setIndeterminate] = useState(false);
@@ -101,6 +103,7 @@ export default props => {
   const [visibleChecked4, setVisibleChecked4] = useState(''); // 语音播报开关
   const [visibleChecked5, setVisibleChecked5] = useState(''); // 菜单样式开关
   const [visibleChecked7, setVisibleChecked7] = useState(''); // 地图遮罩开关
+  const [isCodeList, setIsCodeList] = useState({}); // 支持验证码配置的登录页
   const [homePageConfig, setHomePageConfig] = useState();
   const homepageConfigRef = useRef();
   const [addVisible, setAddVisible] = useState(false);
@@ -108,6 +111,11 @@ export default props => {
   const [checkValueList, setCheckValueList] = useState([]);
   const [aftercare, setAftercare] = useState('请勾选不显示售后服务的用户');
   const [visibleAnn, setVisibleAnn] = useState();
+  const isVerification = useMemo(() => {
+    if (!loginTemplate) return false;
+    const arr = loginTemplate.split('.');
+    return isCodeList[arr[0]];
+  }, [loginTemplate, isCodeList]);
   useEffect(() => {
     onGetLoginPages();
     let text = [];
@@ -290,20 +298,26 @@ export default props => {
             options: [],
           },
         ];
+        const obj = {};
         res.data.loginTemplate.forEach(item => {
           if (item.type === 'web5') {
-            list[0].options.push(renderItem(`${item.title}`));
+            list[0].options.push(renderItem(`${item.title}`, item.isVerificationCode));
+
+            if (item.isVerificationCode) {
+              obj[item.title] = true;
+            }
           }
           if (item.type === 'web4') {
             list[1].options.push(renderItem(`${item.title}`));
           }
         });
-
+        setIsCodeList(obj);
         setLoginPages(list);
       });
     }
   };
-  const renderItem = title => ({
+
+  const renderItem = (title, type) => ({
     value: title,
     label: (
       <div
@@ -312,7 +326,8 @@ export default props => {
           justifyContent: 'space-between',
         }}
       >
-        {title}
+        <span>{title}</span>
+        <span style={{ opacity: '0.6' }}>{type ? `(支持验证码)` : ``}</span>
       </div>
     ),
   });
@@ -449,7 +464,6 @@ export default props => {
     setAftercare(list.text === '' ? '请勾选不显示售后服务的用户' : list.text);
     setCheckValue(list.ids);
   });
-
   return (
     <Drawer
       title={isEdit ? '查看/编辑网站配置' : '新增网站'}
@@ -563,34 +577,43 @@ export default props => {
           <Input autoComplete="off" disabled={isEdit} />
         </Form.Item>
         <Form.Item label="登录模板" name="loginTemplate">
-          <AutoComplete placeholder="请选择登录模板" options={loginPages} allowClear filterOption />
-        </Form.Item>
-
-        <Form.Item label="登录验证码" name="isVerificationCode" valuePropName="checked">
-          <Switch checkedChildren="开启" unCheckedChildren="关闭" />
+          <AutoComplete
+            placeholder="请选择登录模板"
+            options={loginPages}
+            allowClear
+            filterOption
+            autoComplete="off"
+          />
         </Form.Item>
-        {isVerificationCode ? (
+        {isVerification ? (
           <>
-            <Form.Item
-              label="验证码类型"
-              name="verificationCodeType"
-              rules={[
-                {
-                  required: true,
-                  message: '请选择验证码类型',
-                },
-              ]}
-            >
-              <Select placeholder="请选择验证码类型" options={codeTypeList} />
-            </Form.Item>
-            <Form.Item label="验证码超时" name="verificationCodeTimeOut">
-              <InputNumber
-                style={{ width: '100%' }}
-                placeholder="请输入验证码超时时间"
-                min={1}
-                addonAfter="分钟"
-              />
+            <Form.Item label="登录验证码" name="isVerificationCode" valuePropName="checked">
+              <Switch checkedChildren="开启" unCheckedChildren="关闭" autoComplete="off" />
             </Form.Item>
+            {isVerificationCode ? (
+              <>
+                <Form.Item
+                  label="验证码类型"
+                  name="verificationCodeType"
+                  rules={[
+                    {
+                      required: true,
+                      message: '请选择验证码类型',
+                    },
+                  ]}
+                >
+                  <Select placeholder="请选择验证码类型" options={codeTypeList} />
+                </Form.Item>
+                <Form.Item label="验证码超时" name="verificationCodeTimeOut">
+                  <InputNumber
+                    style={{ width: '100%' }}
+                    placeholder="请输入验证码超时时间"
+                    min={1}
+                    addonAfter="分钟"
+                  />
+                </Form.Item>
+              </>
+            ) : null}
           </>
         ) : null}