Skip to content

J
jinfa-platform
Commit e1f83b31 authored by XieZhiXiong's avatar XieZhiXiong
Browse files
Options

feat: 添加授信余额还款

parent 5a4b27c1
Hide whitespace changes
Inline Side-by-side
Showing with 372 additions and 22 deletions
src/components/BalancePayModal/index.less 0 → 100644
View file @ e1f83b31
.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 0 → 100644
View file @ e1f83b31
/*
* @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
View file @ e1f83b31
......@@ -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,24 +219,24 @@ 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: {
this.setState({ repaymentSubmitLoading: true });
PublicApi.postPayCreditApplyCreditRepay({
billId,
...values,
}).then(res => {
if (res.code !== 1000) {
return;
}
message.destroy();
switch (tradeChannel) {
// 微信支付
case PAY_CHANNEL_WECHAT: {
this.setState({ repaymentSubmitLoading: true });
PublicApi.postPayCreditApplyCreditRepay({
billId,
...values,
}).then(res => {
if (res.code !== 1000) {
return;
}
message.destroy();
switch (tradeChannel) {
// 微信支付
case PAY_CHANNEL_WECHAT: {
this.setState({ visibleRepayment: false });
this.setState({
wxPayPrice: values.repayQuota,
......@@ -235,16 +245,28 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
this.payRecordId = `${res.data.recordId}`;
this.handleWxPayVisible(true);
break;
}
}).finally(() => {
this.setState({ repaymentSubmitLoading: false });
});
break;
}
// 余额支付
case PAY_CHANNEL_BALANCE: {
this.setState({
visibleRepayment: false,
billInfo: {
...billInfo,
repayQuota: values.repayQuota,
},
});
this.handleBalancePayVisible(true);
break;
}
default: {
message.warning('暂不支持该支付渠道，请先选择其他支付渠道');
}
default: {
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 = {
......@@ -547,6 +597,16 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
onCancel={() => this.setState({ visibleUploadVoucher: false })}
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}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment