Skip to content

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

feat：新增对公账户接口角色id参数

parent f527e8f9
Hide whitespace changes
Inline Side-by-side
Showing with 650 additions and 648 deletions
src/pages/payandSettle/creditApplication/quotaMenage/detail/components/IntroduceRow/index.tsx
View file @ ab3dd248
import React, { useState, useEffect, useRef } from 'react';
import {
Row,
Col,
Badge,
Checkbox,
Select,
Space,
Button,
Modal,
Spin,
message,
} from 'antd';
import { createFormActions, FormEffectHooks } from '@formily/antd';
import lodash from 'lodash';
import { PublicApi } from '@/services/api';
import MellowCard from '@/components/MellowCard';
import { Pie } from '@/components/Charts';
import StatusTag from '@/components/StatusTag';
import NiceForm from '@/components/NiceForm';
import { repaymentModalSchema, uploadVoucherModalSchema } from './schema';
import { createEffects } from './effects/repayment';
import TradeRecord, { RecordParams, RecordRes } from '../TradeRecord';
import WxPayModal from '../WxPayModal';
import styles from './index.less';
const repaymentFormActions = createFormActions();
const uploadVoucherFormActions = createFormActions();
const { onFormInit$ } = FormEffectHooks;
const { Option } = Select;
export interface BillDetailParams {
id: string;
};
export interface BillDetailData {
/**
* 账单名称（格式：yyyyMMdd~yyyyMMdd）
*/
billName: string
/**
* 账单额度
*/
billQuota: number
/**
* 剩余应还额度
*/
residueRepayQuota: number
/**
* 账单日期
*/
billDay: number
/**
* 还款周期
*/
repayPeriod: number
/**
* 到期时间
*/
expireTime: string
/**
* 到期天数（复数已到期正数未到期）
*/
expireDay: number
/**
* 最后还款日期
*/
lastRepayDate: string
/**
* 收款人Id
*/
memberId: number
};
export interface BillRecordParams extends RecordParams {
creditId: string;
billId: string;
};
interface IntroduceRowProps {
quotaData: {
x: string,
y: number,
}[],
// 时间段下拉框选项
options: {
title: string,
value: number,
}[];
// 剩余的数据
extraData: {
canUseQuota: number, // 可用额度
useQuota: number, // 已用额度
quota: number, // 现有额度
};
// 获取账单账单记录详情
fetchBillDetail: (params: BillDetailParams) => Promise<BillDetailData>;
// 获取账单记录列表
fetchBillRecordList: (params: BillRecordParams) => Promise<RecordRes>;
};
interface IntroduceRowState {
billId: number;
billInfo: BillDetailData | null;
bankAccount: {
id: number,
name: string,
bankAccount: string,
bankDeposit: string,
memberId: number,
},
visibleRecord: boolean;
visibleRepayment: boolean;
visibleUploadVoucher: boolean;
billInfoLoading: boolean;
repaymentValues: {
tradeType: number,
tradeChannel: number,
repayQuota: number,
};
repaymentSubmitLoading: boolean;
uploadVoucherSubmitLoading: boolean;
wxPayVisible: boolean;
wxPayUrl: string;
wxPayPrice: number;
};
class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState> {
constructor(props) {
super(props);
this.state = {
billId: 0,
billInfo: null,
bankAccount: {
id: 0,
name: '',
bankAccount: '',
bankDeposit: '',
memberId: 0,
},
visibleRecord: false,
visibleRepayment: false,
visibleUploadVoucher: false,
billInfoLoading: false,
repaymentValues: {
tradeType: 1,
tradeChannel: 1,
repayQuota: 0,
},
repaymentSubmitLoading: false,
uploadVoucherSubmitLoading: false,
wxPayVisible: false,
wxPayUrl: '',
wxPayPrice: 0,
};
}
tradeRecordRef = null;
/**
* 还款记录id
*/
payRecordId = '';
// 获取账单详情
getBillDetail = id => {
const { fetchBillDetail } = this.props;
if (fetchBillDetail && id) {
this.setState({ billInfoLoading: true });
fetchBillDetail({
id: `${id}`,
}).then(res => {
this.setState({ billInfo: res });
this.getSettleAccountsCorporateAccountConfig(res.memberId);
}).finally(() => {
this.setState({ billInfoLoading: false });
});
}
};
// 获取对公账户信息
getSettleAccountsCorporateAccountConfig = (payee: number) => {
if (!payee) {
return;
}
PublicApi.getSettleAccountsCorporateAccountConfig({
memberId: `${payee}`,
}).then(res => {
if (res.code === 1000) {
this.setState({
bankAccount: res.data,
});
}
});
};
// 根据下拉框数据改变设置默认选中第一项，并获取相应的账单详情
initialize = (options) => {
if (options && options.length) {
const first = options[0];
this.setState({ billId: first.value });
this.getBillDetail(first.value);
}
};
componentDidMount() {
this.initialize(this.props.options);
};
componentDidUpdate(prevProps) {
const { options } = this.props;
if (!lodash.isEqual(prevProps.options, options)) {
this.initialize(options);
}
};
handleRecordCheckboxChange = e => {
if (!this.state.billId) {
message.error('请选择账单记录');
return;
}
this.setState({ visibleRecord: e.target.checked });
};
handleRepayment = flag => {
this.setState({ visibleRepayment: !!flag });
};
handleRepaymentSubmit = values => {
const { tradeType, tradeChannel } = values;
const { billId } = this.state;
switch (tradeType) {
// 线上支付
case 1: {
this.setState({ repaymentSubmitLoading: true });
PublicApi.postPayCreditApplyCreditRepay({
billId,
...values,
}).then(res => {
if (res.code !== 1000) {
return;
}
message.destroy();
this.setState({ visibleRepayment: false });
switch (tradeChannel) {
// 微信支付
case 1: {
this.setState({
wxPayPrice: values.repayQuota,
wxPayUrl: res.data.payQRCode,
});
this.payRecordId = `${res.data.recordId}`;
this.handleWxPayVisible(true);
}
}
}).finally(() => {
this.setState({ repaymentSubmitLoading: false });
});
break;
}
// 线下支付
case 2: {
this.setState({
repaymentValues: values,
visibleUploadVoucher: true,
});
break;
}
default:
break;
}
};
handleUploadVoucherSubmit = values => {
const { payProveList } = values;
const { repaymentValues, billId, bankAccount } = this.state;
if (!bankAccount || !bankAccount.id || !bankAccount.memberId) {
message.error('没有还款账户相关信息，无法还款');
return;
}
this.setState({ uploadVoucherSubmitLoading: true });
PublicApi.postPayCreditApplyCreditRepay({
billId,
...repaymentValues,
payProveList: payProveList.map(item => item.status === 'done' && ({
name: item.name,
proveUrl: item.data.url,
})).filter(Boolean),
}).then(res => {
if (res.code === 1000) {
this.setState({ visibleRepayment: false });
this.setState({ visibleUploadVoucher: false });
this.getBillDetail(this.state.billId);
}
}).finally(() => {
this.setState({ uploadVoucherSubmitLoading: false });
});
};
beforeUploadVoucher = file => {
console.log(file.size)
if (file.size / 1024 > 200) {
message.warning('图片大小超过200K');
return Promise.reject();
}
};
getRecordList = params => {
const { billId } = this.state;
const { fetchBillRecordList } = this.props;
if (fetchBillRecordList) {
return fetchBillRecordList({
billId,
...params,
});
}
};
handleBillChange = val => {
const { visibleRecord } = this.state;
this.setState({
billId: val,
}, () => {
// 如果当前不是显示账单记录就获取账单详情，否则就获取账单记录数据
if (!visibleRecord) {
this.getBillDetail(val);
} else {
this.tradeRecordRef.reloadRecordList();
}
});
};
handleWxPayVisible = flag => {
this.setState({ wxPayVisible: !!flag });
};
handleCheckResult = (): Promise<{ success: Boolean }> => {
return new Promise((resolve, reject) => {
PublicApi.getPayCreditApplyGetCreditRepayResult({
recordId: `${this.payRecordId}`,
}).then(res => {
if (res.code !== 1000) {
resolve({ success: false });
} else {
// 3 - 确认到账
if (res.data.status === 3) {
resolve({ success: true })
} else {
resolve({ success: false });
}
}
}).catch(err => {
reject(err);
});
});
};
handleWxPaySuccess = () => {
message.success('支付成功');
this.handleWxPayVisible(false);
this.getBillDetail(this.state.billId);
};
handleWxPayFail= () => {
message.success('支付失败，请重试 或 选择其他支付方式');
this.handleWxPayVisible(false);
this.handleRepayment(true);
};
render() {
const {
quotaData = [],
options,
extraData,
} = this.props;
const {
billId,
billInfoLoading,
visibleRecord,
billInfo,
bankAccount,
visibleRepayment,
visibleUploadVoucher,
repaymentSubmitLoading,
uploadVoucherSubmitLoading,
wxPayVisible,
wxPayUrl,
wxPayPrice,
} = this.state;
const WxPayModalPros = {
url: wxPayUrl,
visible: wxPayVisible,
price: wxPayPrice,
onCancel: () => this.handleWxPayVisible(false),
onCheckResult: this.handleCheckResult,
onSuccess: this.handleWxPaySuccess,
};
return (
<>
<Row
gutter={23}
style={{
marginBottom: 24,
}}
>
<Col span={10}>
<MellowCard title="授信额度" fullHeight>
<Row gutter={20} align="middle">
<Col span={14}>
<Pie
inner={0.7}
hasLegend={false}
subTitle=""
total={null}
data={quotaData}
height={276}
padding={[34, 0, 34, 0]}
colors={['#41CC9E', '#EF6260']}
/>
</Col>
<Col span={10}>
<div className={styles.statistic}>
<div className={styles['statistic-title']}>
<Badge color="#41CC9E" text="剩余可用额度(元)：" />
</div>
<div className={styles['statistic-amount']}>{extraData?.canUseQuota}</div>
</div>
</Col>
</Row>
<div className={styles.foot}>
<Row>
<Col span={12}>
<div className={styles.badgeWrap}>
<Badge color="#EF6260" text={(<span className={styles['badgeWrap-title']}>已用额度(元)：：</span>)} />
<span className={styles['badgeWrap-content']}>{extraData?.useQuota}</span>
</div>
</Col>
<Col span={12}>
<div className={styles.badgeWrap}>
<Badge color="#DFE1E6" text={(<span className={styles['badgeWrap-title']}>总额度(元)：</span>)} />
<span className={styles['badgeWrap-content']}>{extraData?.quota}</span>
</div>
</Col>
</Row>
</div>
</MellowCard>
</Col>
<Col span={14}>
<MellowCard
title="账单记录"
extra={(
<div className={styles.recordExtra}>
<Space>
<Checkbox onChange={this.handleRecordCheckboxChange}>查看交易记录</Checkbox>
<Select
value={billId}
style={{ width: 256 }}
onChange={this.handleBillChange}
>
{options.map(item => (
<Option key={item.value} value={item.value}>{item.title}</Option>
))}
</Select>
</Space>
</div>
)}
fullHeight
>
<Spin spinning={billInfoLoading}>
{!visibleRecord ? (
<>
<Row
gutter={100}
align="middle"
style={{
marginBottom: 24,
}}
>
<Col span={14}>
<div className={styles.repayment}>
<div className={styles['repayment-left']}>
<div className={styles.statistic}>
<div className={styles['statistic-title']}>剩余应还(元)：</div>
<div className={styles['statistic-amount']}>{billInfo?.residueRepayQuota}</div>
</div>
<div className={styles['repayment-end']}>
<span className={styles['repayment-time']}>
{billInfo?.expireTime} 到期
</span>
<StatusTag
type="danger"
title={
billInfo && billInfo.expireDay !== undefined ?
billInfo.expireDay > 0 ? `${billInfo.expireDay}天后` : `逾期 ${billInfo.expireDay} 天` :
''
}
/>
</div>
</div>
<div className={styles['repayment-right']}>
<Button type="primary" onClick={() => this.handleRepayment(true)}>立即还款</Button>
</div>
</div>
</Col>
<Col span={10}>
<div className={styles.statistic}>
<div className={styles['statistic-title']}>本期账单(元)：</div>
<div className={styles['statistic-amount']}>{billInfo?.billQuota}</div>
</div>
</Col>
</Row>
<div className={styles.foot}>
<Row>
<Col span={8}>
<div className={styles.badgeWrap}>
<Badge color="#EF6260" text={(<span className={styles['badgeWrap-title']}>最后还款日期：</span>)} />
<span className={styles['badgeWrap-content']}>{billInfo?.lastRepayDate}</span>
</div>
</Col>
<Col span={8}>
<div className={styles.badgeWrap}>
<Badge color="#DFE1E6" text={(<span className={styles['badgeWrap-title']}>还款周期：</span>)} />
<span className={styles['badgeWrap-content']}>{billInfo?.repayPeriod}天</span>
</div>
</Col>
<Col span={8}>
<div className={styles.badgeWrap}>
<Badge color="#DFE1E6" text={(<span className={styles['badgeWrap-title']}>账单日期：</span>)} />
<span className={styles['badgeWrap-content']}>{billInfo?.billDay}日</span>
</div>
</Col>
</Row>
</div>
</>
) : (
<TradeRecord fetchRecordList={this.getRecordList} ref={node => this.tradeRecordRef = node} />
)}
</Spin>
</MellowCard>
</Col>
</Row>
<Modal
title="还款"
width={576}
visible={visibleRepayment}
confirmLoading={repaymentSubmitLoading}
onOk={() => repaymentFormActions.submit()}
onCancel={() => this.setState({ visibleRepayment: false })}
destroyOnClose
>
<NiceForm
previewPlaceholder=""
effects={($, actions) => {
const { setFieldState, setFieldValue } = actions;
onFormInit$().subscribe(() => {
// 初始化数据
setFieldState('repayQuota', fileState => {
fileState.value = billInfo.residueRepayQuota;
fileState.rules = fileState.rules.concat({
validator(value) {
return +value > billInfo.residueRepayQuota ? '输入值已超出还款金额' : '';
}
});
});
setFieldState('amountSlide', fileState => {
fileState.value = billInfo.residueRepayQuota;
fileState.props['x-component-props'].max = billInfo.residueRepayQuota;
fileState.props['x-component-props'].marks = {
0: {
label: 0,
},
[billInfo.residueRepayQuota]: {
label: billInfo.residueRepayQuota,
},
};
});
});
createEffects($, actions);
}}
expressionScope={{
}}
actions={repaymentFormActions}
schema={repaymentModalSchema}
onSubmit={this.handleRepaymentSubmit}
/>
</Modal>
<Modal
title="上传支付凭证"
width={576}
visible={visibleUploadVoucher}
confirmLoading={uploadVoucherSubmitLoading}
onOk={() => uploadVoucherFormActions.submit()}
onCancel={() => this.setState({ visibleUploadVoucher: false })}
destroyOnClose
>
<NiceForm
previewPlaceholder=""
initialValues={bankAccount}
effects={($, { setFieldState }) => {
}}
expressionScope={{
beforeUpload: this.beforeUploadVoucher,
}}
actions={uploadVoucherFormActions}
schema={uploadVoucherModalSchema}
onSubmit={this.handleUploadVoucherSubmit}
/>
</Modal>
<WxPayModal
{...WxPayModalPros}
/>
</>
);
};
};
import React, { useState, useEffect, useRef } from 'react';
import {
Row,
Col,
Badge,
Checkbox,
Select,
Space,
Button,
Modal,
Spin,
message,
} from 'antd';
import { createFormActions, FormEffectHooks } from '@formily/antd';
import lodash from 'lodash';
import { PublicApi } from '@/services/api';
import MellowCard from '@/components/MellowCard';
import { Pie } from '@/components/Charts';
import StatusTag from '@/components/StatusTag';
import NiceForm from '@/components/NiceForm';
import { repaymentModalSchema, uploadVoucherModalSchema } from './schema';
import { createEffects } from './effects/repayment';
import TradeRecord, { RecordParams, RecordRes } from '../TradeRecord';
import WxPayModal from '../WxPayModal';
import styles from './index.less';
const repaymentFormActions = createFormActions();
const uploadVoucherFormActions = createFormActions();
const { onFormInit$ } = FormEffectHooks;
const { Option } = Select;
export interface BillDetailParams {
id: string;
};
export interface BillDetailData {
/**
* 账单名称（格式：yyyyMMdd~yyyyMMdd）
*/
billName: string
/**
* 账单额度
*/
billQuota: number
/**
* 剩余应还额度
*/
residueRepayQuota: number
/**
* 账单日期
*/
billDay: number
/**
* 还款周期
*/
repayPeriod: number
/**
* 到期时间
*/
expireTime: string
/**
* 到期天数（复数已到期正数未到期）
*/
expireDay: number
/**
* 最后还款日期
*/
lastRepayDate: string
/**
* 收款人Id
*/
memberId: number
};
export interface BillRecordParams extends RecordParams {
creditId: string;
billId: string;
};
interface IntroduceRowProps {
quotaData: {
x: string,
y: number,
}[],
// 时间段下拉框选项
options: {
title: string,
value: number,
}[];
// 剩余的数据
extraData: {
canUseQuota: number, // 可用额度
useQuota: number, // 已用额度
quota: number, // 现有额度
};
// 获取账单账单记录详情
fetchBillDetail: (params: BillDetailParams) => Promise<BillDetailData>;
// 获取账单记录列表
fetchBillRecordList: (params: BillRecordParams) => Promise<RecordRes>;
};
interface IntroduceRowState {
billId: number;
billInfo: BillDetailData | null;
bankAccount: {
id: number,
name: string,
bankAccount: string,
bankDeposit: string,
memberId: number,
},
visibleRecord: boolean;
visibleRepayment: boolean;
visibleUploadVoucher: boolean;
billInfoLoading: boolean;
repaymentValues: {
tradeType: number,
tradeChannel: number,
repayQuota: number,
};
repaymentSubmitLoading: boolean;
uploadVoucherSubmitLoading: boolean;
wxPayVisible: boolean;
wxPayUrl: string;
wxPayPrice: number;
};
class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState> {
constructor(props) {
super(props);
this.state = {
billId: 0,
billInfo: null,
bankAccount: {
id: 0,
name: '',
bankAccount: '',
bankDeposit: '',
memberId: 0,
},
visibleRecord: false,
visibleRepayment: false,
visibleUploadVoucher: false,
billInfoLoading: false,
repaymentValues: {
tradeType: 1,
tradeChannel: 1,
repayQuota: 0,
},
repaymentSubmitLoading: false,
uploadVoucherSubmitLoading: false,
wxPayVisible: false,
wxPayUrl: '',
wxPayPrice: 0,
};
}
tradeRecordRef = null;
/**
* 还款记录id
*/
payRecordId = '';
// 获取账单详情
getBillDetail = id => {
const { fetchBillDetail } = this.props;
if (fetchBillDetail && id) {
this.setState({ billInfoLoading: true });
fetchBillDetail({
id: `${id}`,
}).then(res => {
this.setState({ billInfo: res });
this.getSettleAccountsCorporateAccountConfig(res.memberId, res.memberRoleId);
}).finally(() => {
this.setState({ billInfoLoading: false });
});
}
};
// 获取对公账户信息
getSettleAccountsCorporateAccountConfig = (memberId: number, memberRoleId: number) => {
if (!memberId || !memberRoleId) {
return;
}
PublicApi.getSettleAccountsCorporateAccountConfig({
memberId: `${memberId}`,
memberRoleId: `${memberRoleId}`,
}).then(res => {
if (res.code === 1000) {
this.setState({
bankAccount: res.data,
});
}
});
};
// 根据下拉框数据改变设置默认选中第一项，并获取相应的账单详情
initialize = (options) => {
if (options && options.length) {
const first = options[0];
this.setState({ billId: first.value });
this.getBillDetail(first.value);
}
};
componentDidMount() {
this.initialize(this.props.options);
};
componentDidUpdate(prevProps) {
const { options } = this.props;
if (!lodash.isEqual(prevProps.options, options)) {
this.initialize(options);
}
};
handleRecordCheckboxChange = e => {
if (!this.state.billId) {
message.error('请选择账单记录');
return;
}
this.setState({ visibleRecord: e.target.checked });
};
handleRepayment = flag => {
this.setState({ visibleRepayment: !!flag });
};
handleRepaymentSubmit = values => {
const { tradeType, tradeChannel } = values;
const { billId } = this.state;
switch (tradeType) {
// 线上支付
case 1: {
this.setState({ repaymentSubmitLoading: true });
PublicApi.postPayCreditApplyCreditRepay({
billId,
...values,
}).then(res => {
if (res.code !== 1000) {
return;
}
message.destroy();
this.setState({ visibleRepayment: false });
switch (tradeChannel) {
// 微信支付
case 1: {
this.setState({
wxPayPrice: values.repayQuota,
wxPayUrl: res.data.payQRCode,
});
this.payRecordId = `${res.data.recordId}`;
this.handleWxPayVisible(true);
}
}
}).finally(() => {
this.setState({ repaymentSubmitLoading: false });
});
break;
}
// 线下支付
case 2: {
this.setState({
repaymentValues: values,
visibleUploadVoucher: true,
});
break;
}
default:
break;
}
};
handleUploadVoucherSubmit = values => {
const { payProveList } = values;
const { repaymentValues, billId, bankAccount } = this.state;
if (!bankAccount || !bankAccount.id || !bankAccount.memberId) {
message.error('没有还款账户相关信息，无法还款');
return;
}
this.setState({ uploadVoucherSubmitLoading: true });
PublicApi.postPayCreditApplyCreditRepay({
billId,
...repaymentValues,
payProveList: payProveList.map(item => item.status === 'done' && ({
name: item.name,
proveUrl: item.data.url,
})).filter(Boolean),
}).then(res => {
if (res.code === 1000) {
this.setState({ visibleRepayment: false });
this.setState({ visibleUploadVoucher: false });
this.getBillDetail(this.state.billId);
}
}).finally(() => {
this.setState({ uploadVoucherSubmitLoading: false });
});
};
beforeUploadVoucher = file => {
console.log(file.size)
if (file.size / 1024 > 200) {
message.warning('图片大小超过200K');
return Promise.reject();
}
};
getRecordList = params => {
const { billId } = this.state;
const { fetchBillRecordList } = this.props;
if (fetchBillRecordList) {
return fetchBillRecordList({
billId,
...params,
});
}
};
handleBillChange = val => {
const { visibleRecord } = this.state;
this.setState({
billId: val,
}, () => {
// 如果当前不是显示账单记录就获取账单详情，否则就获取账单记录数据
if (!visibleRecord) {
this.getBillDetail(val);
} else {
this.tradeRecordRef.reloadRecordList();
}
});
};
handleWxPayVisible = flag => {
this.setState({ wxPayVisible: !!flag });
};
handleCheckResult = (): Promise<{ success: Boolean }> => {
return new Promise((resolve, reject) => {
PublicApi.getPayCreditApplyGetCreditRepayResult({
recordId: `${this.payRecordId}`,
}).then(res => {
if (res.code !== 1000) {
resolve({ success: false });
} else {
// 3 - 确认到账
if (res.data.status === 3) {
resolve({ success: true })
} else {
resolve({ success: false });
}
}
}).catch(err => {
reject(err);
});
});
};
handleWxPaySuccess = () => {
message.success('支付成功');
this.handleWxPayVisible(false);
this.getBillDetail(this.state.billId);
};
handleWxPayFail= () => {
message.success('支付失败，请重试 或 选择其他支付方式');
this.handleWxPayVisible(false);
this.handleRepayment(true);
};
render() {
const {
quotaData = [],
options,
extraData,
} = this.props;
const {
billId,
billInfoLoading,
visibleRecord,
billInfo,
bankAccount,
visibleRepayment,
visibleUploadVoucher,
repaymentSubmitLoading,
uploadVoucherSubmitLoading,
wxPayVisible,
wxPayUrl,
wxPayPrice,
} = this.state;
const WxPayModalPros = {
url: wxPayUrl,
visible: wxPayVisible,
price: wxPayPrice,
onCancel: () => this.handleWxPayVisible(false),
onCheckResult: this.handleCheckResult,
onSuccess: this.handleWxPaySuccess,
};
return (
<>
<Row
gutter={23}
style={{
marginBottom: 24,
}}
>
<Col span={10}>
<MellowCard title="授信额度" fullHeight>
<Row gutter={20} align="middle">
<Col span={14}>
<Pie
inner={0.7}
hasLegend={false}
subTitle=""
total={null}
data={quotaData}
height={276}
padding={[34, 0, 34, 0]}
colors={['#41CC9E', '#EF6260']}
/>
</Col>
<Col span={10}>
<div className={styles.statistic}>
<div className={styles['statistic-title']}>
<Badge color="#41CC9E" text="剩余可用额度(元)：" />
</div>
<div className={styles['statistic-amount']}>{extraData?.canUseQuota}</div>
</div>
</Col>
</Row>
<div className={styles.foot}>
<Row>
<Col span={12}>
<div className={styles.badgeWrap}>
<Badge color="#EF6260" text={(<span className={styles['badgeWrap-title']}>已用额度(元)：：</span>)} />
<span className={styles['badgeWrap-content']}>{extraData?.useQuota}</span>
</div>
</Col>
<Col span={12}>
<div className={styles.badgeWrap}>
<Badge color="#DFE1E6" text={(<span className={styles['badgeWrap-title']}>总额度(元)：</span>)} />
<span className={styles['badgeWrap-content']}>{extraData?.quota}</span>
</div>
</Col>
</Row>
</div>
</MellowCard>
</Col>
<Col span={14}>
<MellowCard
title="账单记录"
extra={(
<div className={styles.recordExtra}>
<Space>
<Checkbox onChange={this.handleRecordCheckboxChange}>查看交易记录</Checkbox>
<Select
value={billId}
style={{ width: 256 }}
onChange={this.handleBillChange}
>
{options.map(item => (
<Option key={item.value} value={item.value}>{item.title}</Option>
))}
</Select>
</Space>
</div>
)}
fullHeight
>
<Spin spinning={billInfoLoading}>
{!visibleRecord ? (
<>
<Row
gutter={100}
align="middle"
style={{
marginBottom: 24,
}}
>
<Col span={14}>
<div className={styles.repayment}>
<div className={styles['repayment-left']}>
<div className={styles.statistic}>
<div className={styles['statistic-title']}>剩余应还(元)：</div>
<div className={styles['statistic-amount']}>{billInfo?.residueRepayQuota}</div>
</div>
<div className={styles['repayment-end']}>
<span className={styles['repayment-time']}>
{billInfo?.expireTime} 到期
</span>
<StatusTag
type="danger"
title={
billInfo && billInfo.expireDay !== undefined ?
billInfo.expireDay > 0 ? `${billInfo.expireDay}天后` : `逾期 ${billInfo.expireDay} 天` :
''
}
/>
</div>
</div>
<div className={styles['repayment-right']}>
<Button type="primary" onClick={() => this.handleRepayment(true)}>立即还款</Button>
</div>
</div>
</Col>
<Col span={10}>
<div className={styles.statistic}>
<div className={styles['statistic-title']}>本期账单(元)：</div>
<div className={styles['statistic-amount']}>{billInfo?.billQuota}</div>
</div>
</Col>
</Row>
<div className={styles.foot}>
<Row>
<Col span={8}>
<div className={styles.badgeWrap}>
<Badge color="#EF6260" text={(<span className={styles['badgeWrap-title']}>最后还款日期：</span>)} />
<span className={styles['badgeWrap-content']}>{billInfo?.lastRepayDate}</span>
</div>
</Col>
<Col span={8}>
<div className={styles.badgeWrap}>
<Badge color="#DFE1E6" text={(<span className={styles['badgeWrap-title']}>还款周期：</span>)} />
<span className={styles['badgeWrap-content']}>{billInfo?.repayPeriod}天</span>
</div>
</Col>
<Col span={8}>
<div className={styles.badgeWrap}>
<Badge color="#DFE1E6" text={(<span className={styles['badgeWrap-title']}>账单日期：</span>)} />
<span className={styles['badgeWrap-content']}>{billInfo?.billDay}日</span>
</div>
</Col>
</Row>
</div>
</>
) : (
<TradeRecord fetchRecordList={this.getRecordList} ref={node => this.tradeRecordRef = node} />
)}
</Spin>
</MellowCard>
</Col>
</Row>
<Modal
title="还款"
width={576}
visible={visibleRepayment}
confirmLoading={repaymentSubmitLoading}
onOk={() => repaymentFormActions.submit()}
onCancel={() => this.setState({ visibleRepayment: false })}
destroyOnClose
>
<NiceForm
previewPlaceholder=""
effects={($, actions) => {
const { setFieldState, setFieldValue } = actions;
onFormInit$().subscribe(() => {
// 初始化数据
setFieldState('repayQuota', fileState => {
fileState.value = billInfo.residueRepayQuota;
fileState.rules = fileState.rules.concat({
validator(value) {
return +value > billInfo.residueRepayQuota ? '输入值已超出还款金额' : '';
}
});
});
setFieldState('amountSlide', fileState => {
fileState.value = billInfo.residueRepayQuota;
fileState.props['x-component-props'].max = billInfo.residueRepayQuota;
fileState.props['x-component-props'].marks = {
0: {
label: 0,
},
[billInfo.residueRepayQuota]: {
label: billInfo.residueRepayQuota,
},
};
});
});
createEffects($, actions);
}}
expressionScope={{
}}
actions={repaymentFormActions}
schema={repaymentModalSchema}
onSubmit={this.handleRepaymentSubmit}
/>
</Modal>
<Modal
title="上传支付凭证"
width={576}
visible={visibleUploadVoucher}
confirmLoading={uploadVoucherSubmitLoading}
onOk={() => uploadVoucherFormActions.submit()}
onCancel={() => this.setState({ visibleUploadVoucher: false })}
destroyOnClose
>
<NiceForm
previewPlaceholder=""
initialValues={bankAccount}
effects={($, { setFieldState }) => {
}}
expressionScope={{
beforeUpload: this.beforeUploadVoucher,
}}
actions={uploadVoucherFormActions}
schema={uploadVoucherModalSchema}
onSubmit={this.handleUploadVoucherSubmit}
/>
</Modal>
<WxPayModal
{...WxPayModalPros}
/>
</>
);
};
};
export default IntroduceRow;
\ No newline at end of file
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