react实现分期计算（等额本金等额本息）

import React, { useState, useRef, useEffect } from 'react';
import { Button, message } from 'antd';

import ProForm, {
  ProFormSelect,
  ProFormMoney,
  ProFormDigit,
  ModalForm,
} from '@ant-design/pro-form';
function LoanModal(props) {
  const { months, finalAmt } = props;
  const modalFormRef = useRef();
  const [way, setWay] = useState('1');
  //   const [haveDeviceFee,setHaveDeviceFee] = useState('1')
  const [createDrawerVisible, handleDrawerVisible] = useState(false); /** 新建窗口的弹窗 */
  const debj = (year_lilv, money, month) => {
    money = money * 10000;

    var active = ((year_lilv * 10) / 12) * 0.001;
    var objArray = new Array();
    var interestM = 0; //月还款额
    var interestTotal = 0; //累计还款总额
    var chbj = money / month; //每月偿还本金（元） month 3年36
    for (var i = 1; i <= month; i++) {
      var t1 = (money - (money * (i - 1)) / month) * active; //第i月还款利息
      interestM = money / month + t1; //第i月还款额
      objArray[i - 1] = new Array(); //声明二维，每一个一维数组里面的一个元素都是一个数组；
      objArray[i - 1]['qc'] = i; //期次
      objArray[i - 1]['chbx'] = interestM.toFixed(2); //第i个月，偿还本息（元） 月供
      objArray[i - 1]['chlx'] = (interestM - chbj).toFixed(2); //第i个月，偿还利息（元）
      objArray[i - 1]['chbj'] = chbj.toFixed(2); //第i个月，偿还本金（元）
      objArray[i - 1]['sybj'] = (money - chbj * i).toFixed(2); //第i个月，剩余本金（元）
      if (objArray[i - 1]['sybj'] <= 1) {
        //最后一个月出现小于1元的值
        objArray[i - 1]['sybj'] = 0.0; //第i个月，剩余本金（元）
      }
      interestTotal = interestTotal + interestM;
    }
    interestTotal = Math.round(interestTotal * 100) / 100; //累计还款总额
    var yg = objArray[0]['chbx']; //月供 最高月供
    var ljhkze = interestTotal; //累计还款总额
    var lxze = ljhkze - money; //利息总额
    lxze = lxze.toFixed(0);
    var yxxdy = parseFloat(objArray[0]['chbx']) + parseFloat(objArray[month - 1]['chbx']); //月薪需大于
    yxxdy = yxxdy.toFixed(0);
    var resArray = new Array();
    resArray['simp_res'] = new Array(); //顶部基础信息数组
    resArray['list_res'] = new Array(); //底部列表信息数组
    resArray['simp_res']['yg'] = parseFloat(yg / 10000).toFixed(2);
    resArray['simp_res']['ljhkze'] = parseFloat(ljhkze / 10000).toFixed(2);
    resArray['simp_res']['lxze'] = parseFloat(lxze / 10000).toFixed(2);
    resArray['simp_res']['yxxdy'] = parseFloat(yxxdy / 10000).toFixed(2);
    resArray['list_res'] = objArray;

    return resArray;
  };

  // 等额本息
  const debx = (year_lilv, money, month) => {
    console.log(year_lilv, money, month, 'aa');
    money = money * 10000;

    var active = ((year_lilv * 10) / 12) * 0.001;
    var t1 = Math.pow(1 + active, month);
    var t2 = t1 - 1;
    var tmp = t1 / t2;
    var monthratio = active * tmp; //月利率
    var monthBack = (money * monthratio).toFixed(2); //每月支付本息
    year_lilv = year_lilv * 0.01; //百分比
    var yue_lilv = year_lilv / 12;
    var objArray = new Array(); //等额本息结果二维数组
    var ljch_bj = 0; //累积偿还本金
    var pre_sybj = 0; //上一个月剩余本金
    var i = 1;
    for (i = 1; i <= month; i++) {
      //等额本息
      objArray[i - 1] = new Array(); //声明二维，每一个一维数组里面的一个元素都是一个数组；
      objArray[i - 1]['qc'] = i; //期次
      objArray[i - 1]['chbx'] = monthBack; //第i个月，偿还本息（元） 月供
      if (i == 1) {
        //第一个月
        pre_sybj = money;
      } else {
        pre_sybj = objArray[i - 2]['sybj'];
      }
      objArray[i - 1]['chlx'] = (pre_sybj * yue_lilv).toFixed(2); //第i个月，偿还利息（元）每月付息额 =（贷款本金-已还清贷款本金）×月利率
      var chbj = objArray[i - 1]['chbx'] - objArray[i - 1]['chlx']; //第i个月，偿还本金（元）
      objArray[i - 1]['chbj'] = chbj.toFixed(2);
      ljch_bj += chbj;
      var sybj = money - ljch_bj;
      objArray[i - 1]['sybj'] = sybj.toFixed(2); //第i个月，剩余本金（元）
      if (sybj <= 1) {
        //最后一个月出现小于1元的值
        objArray[i - 1]['sybj'] = 0.0; //第i个月，剩余本金（元）
      }
    }
    var yg = monthBack; //月供
    var ljhkze = monthBack * month; //累计还款总额
    var lxze = ljhkze - money; //利息总额
    var yxxdy = monthBack * 2; //月薪需大于
    var resArray = new Array();
    resArray['simp_res'] = new Array(); //顶部基础信息数组
    resArray['list_res'] = new Array(); //底部列表信息数组
    resArray['simp_res']['yg'] = parseFloat(yg / 10000).toFixed(2);
    resArray['simp_res']['ljhkze'] = parseFloat(ljhkze / 10000).toFixed(2);
    resArray['simp_res']['lxze'] = parseFloat(lxze / 10000).toFixed(2);
    resArray['simp_res']['yxxdy'] = parseFloat(yxxdy / 10000).toFixed(2);
    resArray['list_res'] = objArray;

    return resArray;
  };
  useEffect(() => {
    setTimeout(() => {
      let money = (finalAmt * 0.75).toFixed(2);
      console.log(finalAmt, money, way, 'finalAmt');
      // if(way=='1'){
      let a = debx(12, Number(money), months);
      console.log(a);
      modalFormRef.current?.setFieldsValue({
        Loan_frist_month: (a.list_res[0].chbx / 10000).toFixed(2),
        Loan_lxze: a.simp_res.lxze,
        Loan_principal_interest_Total: a.simp_res.ljhkze,
        Loan_decreasing: 0,
      });
      // }else{
      //     debj(12,finalAmt,months)
      //     let a =  debj(12,Number(money),months)
      //     console.log(a);
      //     let Loan_decreasing = ((a.list_res[0].chbx-a.list_res[1].chbx)/10000).toFixed(2)
      //  modalFormRef.current?.setFieldsValue({ Loan_total: Number(finalAmt), Loan_month: months,Loan_frist_month:(a.list_res[0].chbx/10000).toFixed(2),Loan_lxze:a.simp_res.lxze,Loan_principal_interest_Total:a.simp_res.ljhkze,Loan_decreasing});

      // }
    }, 1000);
  }, []);
  return (
    <div>
      <Button
        onClick={() => {
          console.log(finalAmt, 'sss');
          if (!months || !finalAmt) return message.error('请输入正确的金额和月份');
          handleDrawerVisible(true);
        }}
        key={'ai'}
      >
        获取分期金额
      </Button>
      <ModalForm
        key={(Math.random() * 1000000).toFixed(0)}
        width="500px"
        formRef={modalFormRef}
        visible={createDrawerVisible}
        onVisibleChange={handleDrawerVisible}
        onCancel={() => {
          handleDrawerVisible(false);
        }}
      >
        <ProForm.Group>
          <ProFormMoney
            name="Loan_total"
            label="贷款总额"
            addonAfter="元"
            disabled={true}
            initialValue={finalAmt}
          />
                  
          <ProFormSelect
            allowClear={false}
            name="Loan_wa"
            label="包含设备费"
            options={[
              { label: '包含', value: '1' },
              { label: '不包含', value: '2' },
            ]}
            initialValue={haveDeviceFee}
            
            onChange={(e) => {
                console.log(e)
                setHaveDeviceFee(e)
              }}
          /> 
           <ProFormSelect
            allowClear={false}
            name="Loan_way"
            label="还款方式"
            options={[
              { label: '等额本息', value: '1' },
              { label: '等额本金', value: '2' },
            ]}
            // initialValue={way}
            
            onChange={(e) => {
                console.log(e)
                setWay(e)
              }}
          /> 
        </ProForm.Group>
        <ProFormMoney
          name="Loan_frist"
          label="第一期付款"
          addonAfter="元"
          disabled={true}
          initialValue={finalAmt * 0.25 || 0}
        />
        {/* <ProFormDigit
          name="Loan_month"
          label="贷款期限"
          disabled={true}
          initialValue={months}
          addonAfter="月"
        />
        <ProFormDigit
          name="Loan_rate"
          label="贷款利率"
          disabled={true}
          initialValue={'12'}
          addonAfter="%"
        /> */}
        {/* 利息总额 */}
        <ProFormMoney name="Loan_lxze" label="分期总额" disabled={true} addonAfter="元" />
        <ProFormMoney
          name="Loan_frist_month"
          label='每月还款'
          disabled={true}
          addonAfter="元"
        />

        {/* {way == '2' && (
          <ProFormMoney name="Loan_decreasing" label="每月递减" disabled={true} addonAfter="元" />
        )} */}
        <ProFormMoney
          name="Loan_principal_interest_Total"
          label="本息合计"
          disabled={true}
          addonAfter="元"
        />
      </ModalForm>
    </div>
  );
}
export default LoanModal;