改一大堆校验问题

展示端/src/pages/B1exhibit/index.tsx

@@ -20,7 +20,7 @@ function B1exhibit() {
     const res0 = await API_getConfigById(17)
 
     if (res0.code === 0) {
-      console.log(123, res0)
+      // console.log(123, res0)
       let info = JSON.parse(res0.data.rtf)
       setTxt0(info.txtArr[0].txt)
     }

展示端/src/pages/B4form/index.module.scss

@@ -4,10 +4,10 @@
   background-size: cover;
   :global {
     .B4main {
-      height: calc(100% - 100px);
+      height: calc(100% - 160px);
       overflow-y: auto;
       overflow-x: hidden;
-      padding: 26px 24px;
+      padding: 26px 24px 0;
       .B4top {
         height: 130px;
         position: relative;
@@ -35,6 +35,11 @@
         }
       }
       .B4addBtn {
+        position: absolute;
+        bottom: 70px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: calc(100% - 48px);
         height: 60px;
         border-radius: 6px;
         background-color: var(--themeColor2);
@@ -45,7 +50,23 @@
         justify-content: center;
         align-items: center;
         margin-bottom: 20px;
+        display: flex;
+        flex-direction: column;
+        & > div {
+          & > img {
+            display: inline-block;
+            margin-right: 5px;
+          }
+        }
+        & > p {
+          margin-top: 3px;
+          font-size: 14px;
+        }
       }
+      .myBtnNo {
+        pointer-events: auto !important;
+      }
+
       // 选择地区
       .B4KaBox0 {
         display: flex;
@@ -167,7 +188,18 @@
             }
           }
         }
+
+        // 提交按钮置灰
+        .FormBtnNo {
+          background-color: #d9d9d9 !important;
+          pointer-events: none !important;
+          color: #aeaeae !important;
+        }
       }
     }
+    .B4mainGeRen {
+      height: calc(100% - 100px);
+      padding-bottom: 26px;
+    }
   }
 }

展示端/src/pages/B4form/index.tsx

@@ -55,7 +55,12 @@ function B4form() {
   // 表单的ref
   const FormBoxRef = useRef<FormInstance>(null)
 
-  const [formArr, setFormArr] = useState([{ id: 1 }])
+  const [formArr, setFormArr] = useState<
+    {
+      id: number
+      zhengType?: string
+    }[]
+  >([{ id: 1, zhengType: '内地身份证' }])
   const formArrNumRef = useRef(1)
 
   // 点击新增 参观人
@@ -63,6 +68,10 @@ function B4form() {
     if (formArr.length >= 5) return MessageFu.warning('最多5位!')
     setFormArr([...formArr, { id: formArrNumRef.current + 1 }])
     formArrNumRef.current += 1
+
+    setTimeout(() => {
+      B4mainRef.current?.scrollTo({ top: 99999, behavior: 'smooth' })
+    }, 200)
   }, [formArr])
 
   // 点击删除 参观人
@@ -88,7 +97,11 @@ function B4form() {
       if (values.teamPcs && values.teamPcs > 100) return MessageFu.warning('参团人数最多100人!')
 
       const cityArr = selectCityRef.current.getValue()
-      if (cityArr.length < 2) return MessageFu.warning('请选择地区!')
+      if (cityArr.length < 2) {
+        B4mainRef.current?.scrollTo({ top: 0, behavior: 'smooth' })
+        MessageFu.warning('请选择地区!')
+        return
+      }
 
       const arr: any = []
 
@@ -113,11 +126,11 @@ function B4form() {
         type: urlObjTemp.key === '1' ? 'person' : 'team'
       }
 
-      // if (1 + 1 === 2) {
-      //   console.log(123, obj)
+      if (1 + 1 === 2) {
+        console.log(123, obj)
 
-      //   return
-      // }
+        return
+      }
 
       const res = await B4_APIsave(obj)
       if (res.code === 0) setTitPop('succ')
@@ -125,9 +138,28 @@ function B4form() {
     [formArr, urlObj.bookDate, urlObj.bookId, urlObj.time, urlObjTemp.key]
   )
 
+  // const [isOk, setIsOk] = useState(false)
+
+  // // 监听表单变化
+  // const handleValuesChange = useCallback((val: any, allValues: any) => {
+  //   // console.log('所有字段值:', allValues) // 当前完整表单值
+  //   // let flag = true
+  //   // for (const k in allValues) {
+  //   //   if (!allValues[k]) flag = false
+  //   // }
+  //   // setIsOk(flag)
+  // }, [])
+
+  const [formRR] = Form.useForm()
+
+  const B4mainRef = useRef<HTMLDivElement>(null)
+
   return (
     <div className={styles.B4form}>
-      <div className='B4main'>
+      <div
+        ref={B4mainRef}
+        className={classNames('B4main', urlObjTemp.key !== '1' ? 'B4mainGeRen' : '')}
+      >
         <div className='B4top'>
           <p>
             <span>预约日期：</span>
@@ -143,17 +175,6 @@ function B4form() {
           </p>
         </div>
 
-        {/* 按钮 */}
-        {/* 个人预约才有 */}
-        {urlObjTemp.key === '1' ? (
-          <div
-            className={classNames('B4addBtn', formArr.length >= 5 ? 'myBtnNo' : '')}
-            onClick={addFormFu}
-          >
-            新增参观人（最多5位）
-          </div>
-        ) : null}
-
         {/* 地区选择 */}
         <div className='B4KaBox0'>
           <div className='B4KaBoxll'>
@@ -166,6 +187,8 @@ function B4form() {
 
         <div className='B4KaBox'>
           <Form
+            form={formRR}
+            // onValuesChange={handleValuesChange}
             ref={FormBoxRef}
             name='basic'
             // labelCol={{ span: 3 }}
@@ -208,17 +231,29 @@ function B4form() {
                 </Form.Item>
 
                 <Form.Item
-                  label='联系方式'
+                  label={`联系方式`}
                   name={`phone${item.id}`}
                   rules={[
-                    { required: true, message: '请输入联系方式!' }
-                    // {
-                    //   pattern: /^1[3-9][0-9]{9}$/,
-                    //   message: '请输入正确格式的手机号!'
-                    // }
+                    { required: true, message: '请输入联系方式!' },
+
+                    () => ({
+                      validator(_, value) {
+                        if (
+                          item.zhengType &&
+                          item.zhengType === '内地身份证' &&
+                          !/^1[3-9]\d{9}$/.test(value)
+                        ) {
+                          return Promise.reject('请输入正确格式的手机号!')
+                        }
+                        return Promise.resolve()
+                      }
+                    })
                   ]}
                 >
-                  <Input placeholder='请输入联系方式' maxLength={30} />
+                  <Input
+                    placeholder='请输入联系方式'
+                    maxLength={item.zhengType === '内地身份证' ? 11 : 30}
+                  />
                 </Form.Item>
 
                 <Form.Item
@@ -226,14 +261,44 @@ function B4form() {
                   name={`papers${item.id}`}
                   rules={[{ required: true, message: '请选择证件类型!' }]}
                 >
-                  <Select placeholder='请选择证件类型' options={papersSelArr} />
+                  <Select
+                    onChange={e => {
+                      setFormArr(
+                        formArr.map(v => ({
+                          ...v,
+                          zhengType: v.id === item.id ? e : v.zhengType
+                        }))
+                      )
+                      setTimeout(() => {
+                        formRR.validateFields([`phone${item.id}`, `identity${item.id}`])
+                      }, 200)
+                    }}
+                    placeholder='请选择证件类型'
+                    options={papersSelArr}
+                  />
                 </Form.Item>
 
                 <Form.Item
                   label='证件号码'
                   name={`identity${item.id}`}
                   rules={[
-                    { required: true, message: '请输入证件号码!' }
+                    { required: true, message: '请输入证件号码!' },
+                    {
+                      max:
+                        item.zhengType === '内地身份证'
+                          ? 18
+                          : item.zhengType === '港澳居民来往内地通行证'
+                          ? 9
+                          : 30
+                    },
+                    {
+                      min:
+                        item.zhengType === '内地身份证'
+                          ? 18
+                          : item.zhengType === '港澳居民来往内地通行证'
+                          ? 9
+                          : 1
+                    }
                     // {
                     //   pattern:
                     //     /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
@@ -241,7 +306,16 @@ function B4form() {
                     // }
                   ]}
                 >
-                  <Input placeholder='请输入证件号码' maxLength={30} />
+                  <Input
+                    placeholder='请输入证件号码'
+                    maxLength={
+                      item.zhengType === '内地身份证'
+                        ? 18
+                        : item.zhengType === '港澳居民来往内地通行证'
+                        ? 9
+                        : 30
+                    }
+                  />
                 </Form.Item>
               </div>
             ))}
@@ -271,13 +345,34 @@ function B4form() {
             <ZexhiBtn
               nextFu={() => {}}
               FormBtn={
-                <Button className='FormBtn' type='primary' htmlType='submit'>
+                <Button
+                  // disabled={!isOk}
+                  // className={classNames('FormBtn', isOk ? '' : 'FormBtnNo')}
+                  className='FormBtn'
+                  type='primary'
+                  htmlType='submit'
+                >
                   提交
                 </Button>
               }
             />
           </Form>
         </div>
+
+        {/* 按钮 */}
+        {/* 个人预约才有 */}
+        {urlObjTemp.key === '1' ? (
+          <div
+            className={classNames('B4addBtn', formArr.length >= 5 ? 'myBtnNo' : '')}
+            onClick={addFormFu}
+          >
+            <div>
+              <img src={require('../../assets/img/icon_add.png')} alt='' />
+              新增参观人
+            </div>
+            <p>添加更多参观人信息</p>
+          </div>
+        ) : null}
       </div>
 
       {/* 预约成功的弹窗 */}