标签：styles const target value useState 输完 input true 光标

import React, { useEffect, useState } from '@alipay/bigfish/react';
import { Button, Checkbox, Input, Tooltip, Form } from '@alipay/bigfish/antd';
import { DesktopOutlined, MobileOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import styles from './index.less';
import { queryIndexInfo, queryFlowNodeData, submit } from '@/services/payment';
// import LoadingButton from '@alipay/loading-button';

import dispatchRoute from '@/services/dispatchRoute';
import { history } from '@alipay/bigfish';
import { BKEANK_SSOMODEL_INDEX } from '@/constants';
import { parse, stringify } from '@alipay/bigfish/util/query-string';

const Payment = () => {
  // 验证金额
  // const [verifyAmount, setverifyAmount] = useState<any>('');
  const [flowId, setFlowId] = useState<string>('');
  const [flowType, setFlowType] = useState<string>('');
  const [form] = Form.useForm();
  // 次数
  const [count, setcount] = useState(2);
  // 文字切换
  const [flag, setflag] = useState(true);
  const [checkbox, setcheckbox] = useState(false);
  // const [maxLength, setmaxLength] = useState([])
  // display none
  const [check, setcheck] = useState(true);
  //
  const [buttonfFlag, setbuttonfFlag] = useState(true);
  const [buttonfFlag1, setbuttonfFlag1] = useState(true);
  const [buttonfFlag2, setbuttonfFlag2] = useState(true);
  const [buttonfFlag3, setbuttonfFlag3] = useState(true);

  const [maxlength] = useState(1);
  // 卡号后四位
  const [cardNmuber, setcardNmuber] = useState('');
  // 重新决定跳转
  const decidePage = async () => {
    const data = await queryIndexInfo();
    if (!data) return;
    const { useNewFlow, hasOpenedAccount, currentNode, flowStatus, settleOpenFlowId } = data;
    if (!useNewFlow || hasOpenedAccount) {
      const parsedParams = parse(window.location.href.split('?')[1] || '');
      history.replace(`${BKEANK_SSOMODEL_INDEX}?${stringify(parsedParams)}`);
      return;
    }
    // debugger
    dispatchRoute(currentNode, flowStatus, settleOpenFlowId);
  };
  // 初始化验证数
  async function init() {
    const data = await queryIndexInfo(); // 流程
    if (!data) return;

    setFlowId(data?.flowId || '');
    setFlowType(data?.flowType || '');
    const result = await queryFlowNodeData({
      flowId: data?.flowId || '',
      flowType: data?.flowType || '',
    });
    if (!result) return;
    const flowNodeData = JSON.parse(result?.[0]?.flowNodeData || '{}'); // 返回的闫增次数
    const card = result?.[0]?.selectBindBankCard || '33300414'; // 返回的卡号
    setcardNmuber(card.substring(card.length - 4));

    // setCheckAmountCount(Number(flowNodeData.checkAmountCount) || 0);
    if (Number(flowNodeData.checkAmountCount) >= 2) {
      decidePage();
    }
  }
  // 点击验证回调
  async function confirmPayment() {
    setcheck(false);
    const verifyamount = `${form.getFieldsValue().input1}.${form.getFieldsValue().input2}${
      form.getFieldsValue().input3
    }`;
    const { success } = await submit({ verifyamount, flowId, flowType });
    setcheck(true);
    // debugger
    if (success) {
      // 成功
      decidePage();
    } else if (count - 1 === 0) {
      // 失败 次数-1 如果没次数 直接回首页
      decidePage();
    } else {
      // 还有次数
      setcount(count - 1);
      setflag(false);
      await init();
    }
  }

  // 验证码光标后移
  const handleInputValue = (e: React.ChangeEvent<HTMLInputElement>, type: string) => {
    const input = document.getElementsByTagName('input');
    const { value = '' } = e.target;
    if (type === 'A') {
      if (value) input[1].focus();
      if (e.target.value.length > 0) {
        setbuttonfFlag1(false);
      } else if (e.target.value.length === 0) {
        setbuttonfFlag1(true);
      }
    } else if (type === 'B') {
      if (value) input[2].focus();
      if (e.target.value.length > 0) {
        setbuttonfFlag2(false);
      } else if (e.target.value.length === 0) {
        setbuttonfFlag2(true);
      }
    } else if (type === 'C') {
      if (e.target.value.length > 0) {
        setbuttonfFlag3(false);
      } else if (e.target.value.length === 0) {
        setbuttonfFlag3(true);
      }
    }
  };
  // //删除验证码
  // const handleDel = (e: { target: { value: string | any[]; }; keyCode: number; }) => {
  //   console.log(e.target.value)
  //   const BACK_SPACE = 8;
  //   const isBackSpaceKey = e.keyCode === BACK_SPACE;
  //   if (isBackSpaceKey && e.target.value.length === 0) {
  //     let previous = e.target;
  //     console.log(e.target)
  //     previous = previous.previousElementSibling;
  //     while (previous) {
  //       if (previous === null) break;
  //       if (previous.tagName.toLowerCase() === "input") {
  //         console.log(previous)
  //         previous.focus();
  //         break;
  //       }
  //     }
  //   }
  // };

  useEffect(() => {
    init();
    setcount(2);
  }, []);
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };
  return (
    <div className="payment">
      <div className={styles.bigbox} style={{ display: check ? 'none' : 'block' }}>
        <div className={styles.whitebox}>
          <div className={styles.banklogo}>
            <div className={styles.bankround}></div>
            <div className={styles.span}>处理中</div>
          </div>
          <div className={styles.logo}>
            <img
              src="https://gw.alipayobjects.com/zos/bmw-prod/9a7e4265-aed8-4db2-a63d-d3cd410051ea.ico"
              alt=""
            />
          </div>
        </div>
      </div>
      <div
        className="toppayment"
        style={{ background: '#F5F5F5', display: check ? 'block' : 'none' }}
      >
        <div className={styles.middle}>
          <div style={{ paddingTop: '24px' }} className={styles.h3font}>
            <span>请完成收款验证</span>
          </div>
          <div style={{ paddingTop: '24px' }} className={styles.paymentspan}>
            <p style={{ paddingTop: '12px', color: '#8B8B8B' }}>
              网商银行于
              <span className={styles.orange}>
                {new Date().getFullYear()}年{new Date().getMonth() + 1}月{new Date().getDate()}
              </span>
              日向下述账户汇入一笔2元以下的资金，请查询您的
              <span className={styles.orange}>网商银行企业账户</span>
              <span className={styles.orange}>(尾号{cardNmuber})</span>查询金额并填写到本页面。
            </p>
          </div>
          <Form
            form={form}
            name="basic"
            initialValues={{ remember: true }}
            onFinish={onFinish}
            //   onFinishFailed={onFinishFailed}
          >
            <div className={styles.smiddle}>
              <div className={styles.text}>
                输入网商银行验证打款金额{' '}
                <Tooltip title="需要追踪的资金的第一次流转的流入时间">
                  <QuestionCircleOutlined />
                </Tooltip>
              </div>

              <div className={styles.inputs}>
                <Form.Item
                  name="input1"
                  //   rules={[{ required: true, message: 'Please input your username!' }]}
                >
                  <Input
                    type="tel"
                    id="field001"
                    maxLength={maxlength}
                    onChange={(e) => handleInputValue(e, 'A')}
                    onFocus={() => {
                      setflag(true);
                    }}
                    style={{ width: '100px', height: '46px', textAlign: 'center' }}
                  ></Input>
                </Form.Item>
                <div
                  style={{
                    width: '50px',
                    height: '46px',
                    border: '1px solid #D9D9D9',
                    textAlign: 'center',
                    paddingTop: '20px',
                    fontWeight: 800,
                  }}
                >
                  .
                </div>

                <Form.Item
                  name="input2"
                  //   rules={[{ required: true, message: 'Please input your username!' }]}
                >
                  <Input
                    // onKeyDown={maxlength ? handleDel : null}
                    type="tel"
                    maxLength={maxlength}
                    id="field002"
                    onChange={(e) => handleInputValue(e, 'B')}
                    onFocus={() => {
                      setflag(true);
                    }}
                    style={{ width: '100px', height: '46px', textAlign: 'center' }}
                  />
                </Form.Item>
                <Form.Item
                  name="input3"
                  //   rules={[{ required: true, message: 'Please input your username!' }]}
                >
                  <Input
                    type="tel"
                    maxLength={1}
                    onChange={(e) => handleInputValue(e, 'C')}
                    id="field003"
                    onFocus={() => {
                      setflag(true);
                    }}
                    style={{ width: '100px', height: '46px', textAlign: 'center' }}
                  />
                </Form.Item>
                <div
                  style={{
                    width: '53px',
                    height: '46px',
                    border: '1px solid #D9D9D9',
                    textAlign: 'center',
                    paddingTop: '20px',
                  }}
                >
                  元
                </div>
              </div>
              <div className={styles.Receivepayment}>
                {flag ? (
                  <p>
                    您有 <span style={{ color: '#353535' }}>{count}次</span> 输入机会，
                    <span>{count}次</span>输入错误后需重新确认收款账户。
                  </p>
                ) : (
                  <p style={{ color: 'red' }}>
                    输入错误，您还剩余 <span>{count}次</span> 机会
                  </p>
                )}
              </div>
              <div className={styles.check}>
                {/* <Form.Item> */}
                <Form.Item
                  rules={[
                    {
                      validator: (_, value, callback) => {
                        const reg = /^[0-9]+.?[0-9]*/;
                        form.getFieldsValue();
                        if (
                          !reg.test(form.getFieldsValue().input1) ||
                          !reg.test(form.getFieldsValue().input2) ||
                          !reg.test(form.getFieldsValue().input3)
                        ) {
                          callback('输入格式只能为数字');
                        }
                        if (!checkbox) {
                          callback('请勾选《融易收服务协议》协议');
                        } else {
                          confirmPayment();
                          callback();
                        }
                      },
                    },
                  ]}
                  name="remember"
                  valuePropName="checked"
                >
                  <Checkbox
                    checked={checkbox}
                    onChange={(e) => {
                      setbuttonfFlag(!e.target.checked);
                      setcheckbox(e.target.checked);
                    }}
                  ></Checkbox>
                  <span
                    style={{
                      marginLeft: '8px',
                      color: '#666666',
                      fontFamily: 'PingFangSC-Regular, sans-serif',
                    }}
                  >
                    同意《融易收服务协议》
                  </span>
                </Form.Item>
              </div>
              <Form.Item rules={[{ required: true, message: 'Please input your username!' }]}>
                <Button
                  htmlType="submit"
                  disabled={buttonfFlag || buttonfFlag1 || buttonfFlag2 || buttonfFlag3}
                  className={styles.button}
                >
                  确认
                </Button>
                {/* <LoadingButton htmlType="submit" disabled={buttonfFlag} className={styles.button}>确认</LoadingButton> */}
              </Form.Item>
            </div>
          </Form>
        </div>
        <div className={styles.bmiddle}>
          <p className={styles.fontweight}>如何查询验证打款金额</p>
        </div>
        <div className={styles.bottom}>
          <div className={styles.bottomleft}>
            <p style={{ paddingTop: '24px' }}>
              <span style={{ fontSize: '16px', marginTop: '24px', marginLeft: '24px' }}>
                <DesktopOutlined style={{ fontSize: '16px', marginRight: '4px' }} />{' '}
                企业网银查询账单
              </span>{' '}
              <a href="" style={{ float: 'right', marginRight: '24px' }}>
                立即前往
              </a>
            </p>
            <img
              src="https://gw.alipayobjects.com/mdn/rms_4f58df/afts/img/A*hwgBQqi5xwQAAAAAAAAAAAAAARQnAQ"
              alt=""
              style={{ width: '60%', display: 'block', margin: 'auto', marginTop: '4%' }}
            />
          </div>
          <div className={styles.bottomright}>
            <p style={{ paddingTop: '24px' }}>
              <span style={{ fontSize: '16px', marginTop: '24px', marginLeft: '24px' }}>
                <MobileOutlined style={{ fontSize: '16px', marginRight: '4px' }} />
                支付宝登录网商银行小程序
              </span>
              <a href="" style={{ float: 'right', marginRight: '24px' }}>
                扫码查看
              </a>
            </p>
            <img
              src="https://gw.alipayobjects.com/mdn/rms_4f58df/afts/img/A*R0mLTqYb6mwAAAAAAAAAAAAAARQnAQ"
              alt=""
              style={{
                display: 'block',
                margin: 'auto',
                marginTop: '50px',
              }}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Payment;

标签：styles,const,target,value,useState,输完,input,true,光标
来源： https://blog.csdn.net/mengfanyue123/article/details/120724525

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。