feat: 添加授信余额还款

src/components/BalancePayModal/index.less

+.title {
+  display: inline-block;
+  width: 122px;
+  font-weight: 400;
+}
+
+.amount {
+  font-size: 24px;
+  font-weight: 500;
+  color: #172B4D;
+}
+
+.amount1 {
+  font-size: 16px;
+}
+
+.amount2 {
+  font-size: 16px;
+  color: #E63F3B;
+}
+
+.payContainer {
+  margin: 90px 0;
+  text-align: center;
+
+  .title {
+    font-size: 14px;
+    font-weight: 400;
+    color: #6B778C;
+    margin-bottom: 24px;
+  }
+
+  .inputBox {
+    position: relative;
+    width: 336px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    font-weight: bold;
+
+    .codeItem {
+      width: 48px;
+      height: 48px;
+      line-height: 0.5;
+      text-align: center;
+      background: #FFFFFF;
+      border: 1px solid #EBECF0;
+      font-size: 80px;
+    }
+
+    .codeInput {
+      height: 48px;
+      position: absolute;
+      outline: none;
+      color: transparent;
+      caret-color: #EBECF0;
+      font-size: 28px;
+      padding: 0 14px;
+      letter-spacing: 48px;
+      width: 336px;
+      border: none;
+      background: none;
+      -webkit-appearance: none;
+
+      &:focus {
+        border: none !important;
+        box-shadow: 0 0 0 0 #fff;
+      }
+
+      &::-webkit-input-safebox-button {
+        display: none;
+      }
+    }
+  }
+}

src/components/BalancePayModal/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-01-13 15:37:09
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-01-13 17:23:25
+ * @Description: 余额支付弹窗
+ */
+import React, { useState, useEffect } from 'react';
+import { Modal, Input, Spin, Space, Button, message } from 'antd';
+import classNames from 'classnames';
+import { PublicApi } from '@/services/api';
+import { encryptedByAES } from '@/utils/cryptoAes';
+import styles from './index.less';
+
+interface BalancePayModalProps {
+  /**
+   * 是否可见
+   */
+  visible: boolean,
+  /**
+   * 隐藏事件
+   */
+  onCancel: () => void,
+  /**
+   * 确认按钮 loading
+   */
+  confirmLoading?: boolean,
+  /**
+   * 提交事件
+   */
+  onSubmit: (values: any) => void,
+  /**
+   * 上级会员id
+   */
+  parentMemberId: number,
+  /**
+   * 上级会员角色id
+   */
+  parentMemberRoleId: number,
+  /**
+   * 需要支付的金额
+   */
+  payAmount: number,
+}
+
+const PWD_LEN = 6;
+const NUMBER_ARR = [0, 1, 2, 3, 4, 5];
+
+const BalancePayModal: React.FC<BalancePayModalProps> = (props: BalancePayModalProps) => {
+  const { 
+    visible, 
+    confirmLoading,
+    onCancel,
+    onSubmit,
+    parentMemberId, 
+    parentMemberRoleId, 
+    payAmount, 
+  } = props;
+  const [pwd, setPwd] = useState('');
+  const [step, setStep] = useState(0);
+  const [userBalance, setUserBalance] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  const getBalance = () => {
+    if (
+      !parentMemberId || 
+      !parentMemberRoleId || 
+      loading
+    ) {
+      return;
+    }
+    setLoading(true);
+    PublicApi.getPayAssetAccountGetUserBalance({
+      parentMemberId: `${parentMemberId}`,
+      parentMemberRoleId: `${parentMemberRoleId}`,
+      payType: `${2}`,        // 会员支付
+    }).then(res => {
+      if(res.code === 1000) {
+        setUserBalance(res.data);
+      }
+    }).finally(() => {
+      setLoading(false);
+    });
+  };
+
+  useEffect(() => {
+    if (visible) {
+      getBalance();
+    }
+  }, [visible]);
+
+
+  const handleConfirmPay = () => {
+    if (payAmount > userBalance) {
+      message.error('余额不足');
+      return;
+    }
+    if (!pwd) {
+      message.error('请输入支付密码');
+      return;
+    }
+    if (pwd.length !== PWD_LEN) {
+      message.error('请输入完整的支付密码');
+      return;
+    }
+    if (onSubmit) {
+      onSubmit({
+        passWord: encryptedByAES(pwd),
+      });
+    }
+  };
+
+  const handleCancel = () => {
+    setStep(0);
+    
+    if (onCancel) {
+      onCancel();
+    }
+  };
+
+  const handlePwdChange = (e) => {
+    setPwd(e.target.value);
+  }
+
+  return (
+    <Modal
+      title="余额支付"
+      width={576}
+      visible={visible}
+      confirmLoading={confirmLoading}
+      onCancel={handleCancel}
+      footer={(
+        <>
+          {step === 0 && (
+            <Space>
+              <Button onClick={onCancel}>
+                取消
+              </Button>
+              <Button 
+                type="primary" 
+                onClick={() => setStep(1)}
+                disabled={loading || userBalance === 0}
+              >
+                支付
+              </Button>
+            </Space>
+          )}
+          {step === 1 && (
+            <Button 
+              type="primary" 
+              onClick={handleConfirmPay}
+              loading={confirmLoading}
+              block
+            >
+              确认支付
+            </Button>
+          )}
+        </>
+      )}
+    >
+      <Spin spinning={loading}>
+        {step === 0 && (
+          <>
+            <p style={{ fontWeight: 'bold' }}>账户余额</p>
+            <p>
+              <span className={styles.title}>
+                账户可用余额(元)：
+              </span>
+              <span className={styles.amount}>
+                {userBalance}
+              </span>
+            </p>
+            <p>
+              <span className={styles.title}>
+                本次需支付(元)：
+              </span>
+              <span className={classNames(styles.amount, styles.amount2)}>
+                {payAmount}
+              </span>
+            </p>
+          </>
+        )}
+        {step === 1 && (
+          <div className={styles.payContainer}>
+            <p className={styles.title}>请输入支付密码</p>
+            <div className={styles.inputBox}>
+              {
+                NUMBER_ARR.map((item, index) => (
+                  <div
+                    className={styles.codeItem}
+                    key={index}
+                  >
+                    {pwd[index]?.replace(/[0-9]/g, '·')}
+                  </div>
+                ))
+              }
+              <Input.Password
+                className={styles.codeInput}
+                value={pwd}
+                maxLength={PWD_LEN}
+                onChange={handlePwdChange}
+                visibilityToggle={false}
+                id="balancePay"
+                autoFocus
+              />
+            </div>
+          </div>
+        )}
+      </Spin>
+    </Modal>
+  );
+};
+
+export default BalancePayModal;
\ No newline at end of file

src/pages/payandSettle/creditApplication/quotaMenage/detail/components/IntroduceRow/index.tsx

@@ -15,10 +15,14 @@ import {
 import { createFormActions, FormEffectHooks } from '@formily/antd';
 import lodash from 'lodash';
 import { PublicApi } from '@/services/api';
-import { PAY_CHANNEL_WECHAT } from '@/constants';
+import { 
+  PAY_CHANNEL_WECHAT, 
+  PAY_CHANNEL_BALANCE, 
+} from '@/constants';
 import MellowCard from '@/components/MellowCard';
 import { Pie } from '@/components/Charts';
 import StatusTag from '@/components/StatusTag';
+import BalancePayModal from '@/components/BalancePayModal';
 import TradeRecord, { RecordParams, RecordRes } from '../TradeRecord';
 import WxPayModal from '../WxPayModal';
 import RefundModal from '../RefundModal';
@@ -74,6 +78,10 @@ export interface BillDetailData {
    * 收款人角色Id
    */
   memberRoleId: number
+  /**
+   * 最终确定还款的金额
+   */
+  repayQuota?: number
 };
 
 export interface BillRecordParams extends RecordParams {
@@ -126,6 +134,7 @@ interface IntroduceRowState {
   wxPayUrl: string;
   wxPayPrice: number;
 
+  balancePayVisible: boolean;
 };
 
 class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState> {
@@ -148,6 +157,7 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
       wxPayVisible: false, 
       wxPayUrl: '', 
       wxPayPrice: 0, 
+      balancePayVisible: false,
     };
   }
 
@@ -209,11 +219,14 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
 
   handleRepaymentSubmit = values => {
     const { tradeType, tradeChannel } = values;
-    const { billId } = this.state;
+    const { billId, billInfo } = this.state;
 
     switch (tradeType) {
       // 线上支付
       case 1: {
+        switch (tradeChannel) {
+          // 微信支付
+          case PAY_CHANNEL_WECHAT: {
             this.setState({ repaymentSubmitLoading: true });
             PublicApi.postPayCreditApplyCreditRepay({
               billId, 
@@ -224,9 +237,6 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
               }
               message.destroy();
 
-          switch (tradeChannel) {
-            // 微信支付
-            case PAY_CHANNEL_WECHAT: {
               this.setState({ visibleRepayment: false });
               this.setState({
                 wxPayPrice: values.repayQuota, 
@@ -235,6 +245,21 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
               this.payRecordId = `${res.data.recordId}`;
               this.handleWxPayVisible(true);
 
+            }).finally(() => {
+              this.setState({ repaymentSubmitLoading: false });
+            });
+            break;
+          }
+          // 余额支付
+          case PAY_CHANNEL_BALANCE: {
+            this.setState({ 
+              visibleRepayment: false, 
+              billInfo: {
+                ...billInfo,
+                repayQuota: values.repayQuota,
+              },
+            });
+            this.handleBalancePayVisible(true);
             break;
           }
 
@@ -242,9 +267,6 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
             message.warning('暂不支持该支付渠道，请先选择其他支付渠道');
           }
         }
-        }).finally(() => {
-          this.setState({ repaymentSubmitLoading: false });
-        });
 
         break;
       }
@@ -264,6 +286,29 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
     }
   };
 
+  // 余额支付确认
+  handleBalancePaySubmit = values => {
+    const { billId, repaymentValues } = this.state;
+
+    this.setState({ repaymentSubmitLoading: true });
+    PublicApi.postPayCreditApplyCreditRepay({
+      billId, 
+      ...repaymentValues,
+      ...values,
+    }).then(res => {
+      if (res.code !== 1000) {
+        return;
+      }
+      setTimeout(() => {
+        this.handleBalancePayVisible(false);
+        this.getBillDetail(this.state.billId);
+      }, 500);
+    }).finally(() => {
+      this.setState({ repaymentSubmitLoading: false });
+    });
+  };
+
+  // 线下支付确认
   handleUploadVoucherSubmit = values => {
     const { payProveList = [] } = values;
     const { repaymentValues, billId } = this.state;
@@ -317,6 +362,10 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
     this.setState({ wxPayVisible: !!flag });
   };
 
+  handleBalancePayVisible = flag => {
+    this.setState({ balancePayVisible: !!flag });
+  };
+
   handleCheckResult = (): Promise<{ success: Boolean }> => {
     return new Promise((resolve, reject) => {
       PublicApi.getPayCreditApplyGetCreditRepayResult({
@@ -368,6 +417,7 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
       wxPayVisible, 
       wxPayUrl, 
       wxPayPrice, 
+      balancePayVisible,
     } = this.state;
 
     const WxPayModalPros = {
@@ -548,6 +598,16 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
           onSubmit={this.handleUploadVoucherSubmit}
         />
 
+        <BalancePayModal 
+          visible={balancePayVisible}
+          parentMemberId={billInfo?.memberId}
+          parentMemberRoleId={billInfo?.memberRoleId}
+          onCancel={() => this.handleBalancePayVisible(false)}
+          onSubmit={this.handleBalancePaySubmit}
+          confirmLoading={repaymentSubmitLoading}
+          payAmount={billInfo?.repayQuota}
+        />
+      
         <WxPayModal 
           {...WxPayModalPros}
         />