Skip to content

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

对接中

parent b33b882a
Hide whitespace changes
Inline Side-by-side
Showing with 134 additions and 32 deletions
src/pages/payandSettle/creditApplication/quotaMenage/detail/components/IntroduceRow/index.tsx
View file @ b2093cd1
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import {
Row,
Col,
......@@ -16,7 +16,7 @@ import { Pie } from '@/components/Charts';
import StatusTag from '@/components/StatusTag';
import NiceForm from '@/components/NiceForm';
import { repaymentModalSchema, uploadVoucherModalSchema } from './schema';
import TradeRecord, { TradeRecordProps } from '../TradeRecord';
import TradeRecord, { RecordParams, RecordRes } from '../TradeRecord';
import styles from './index.less';
const repaymentFormActions = createFormActions();
......@@ -24,11 +24,11 @@ const uploadVoucherFormActions = createFormActions();
const { Option } = Select;
export interface DetailParams {
export interface BillDetailParams {
id: string;
};
export interface DetailData {
export interface BillDetailData {
/**
* 账单名称（格式：yyyyMMdd~yyyyMMdd）
*/
......@@ -63,7 +63,12 @@ export interface DetailData {
lastRepayDate: string
};
interface IntroduceRowProps extends TradeRecordProps {
export interface BillRecordParams extends RecordParams {
creditId: string;
billId: string;
};
interface IntroduceRowProps {
quotaData: {
x: string,
y: number,
......@@ -72,20 +77,53 @@ interface IntroduceRowProps extends TradeRecordProps {
// 时间段下拉框选项
options: {
title: string,
value: string,
value: number,
}[];
// 剩余的数据
extraData: {
canUseQuota: number, // 可用额度
useQuota: number, // 已用额度
quota: number, // 现有额度
};
// 获取账单账单记录详情
fetchCreditDetail: (params: DetailParams) => Promise<DetailData>;
fetchBillDetail: (params: BillDetailParams) => Promise<BillDetailData>;
// 获取账单记录列表
fetchBillRecordList: (params: BillRecordParams) => Promise<RecordRes>;
};
const IntroduceRow: React.FC<IntroduceRowProps> = ({
quotaData = [],
fetchRecordList,
options,
extraData = {},
fetchBillDetail,
fetchBillRecordList,
}) => {
const [billId, setBillId] = useState(0);
const [billInfo, setBillInfo] = useState(null);
const [visibleRecord, setVisibleRecord] = useState(false);
const [visibleRepayment, setVisibleRepayment] = useState(false);
const [visibleUploadVoucher, setVisibleUploadVoucher] = useState(false);
const getBillDetail = id => {
if (fetchBillDetail && id) {
fetchBillDetail({
id: `${id}`,
}).then(res => {
setBillInfo(res);
});
}
};
useEffect(() => {
if (options && options.length) {
const first = options[0];
setBillId(first.value);
getBillDetail(first.value);
}
}, [options]);
const handleRecordCheckboxChange = e => {
setVisibleRecord(e.target.checked);
......@@ -112,6 +150,20 @@ const IntroduceRow: React.FC<IntroduceRowProps> = ({
return Promise.reject();
}
};
const getRecordList = params => {
if (fetchBillRecordList && billId) {
return fetchBillRecordList({
billId,
...params,
});
}
};
const handleBillChange = val => {
setBillId(val);
getBillDetail(val);
};
return (
<>
......@@ -141,7 +193,7 @@ const IntroduceRow: React.FC<IntroduceRowProps> = ({
<div className={styles['statistic-title']}>
<Badge color="#41CC9E" text="剩余可用额度(元)：" />
</div>
<div className={styles['statistic-amount']}>100,000</div>
<div className={styles['statistic-amount']}>{extraData?.canUseQuota}</div>
</div>
</Col>
</Row>
......@@ -150,20 +202,21 @@ const IntroduceRow: React.FC<IntroduceRowProps> = ({
<Row>
<Col span={12}>
<div className={styles.badgeWrap}>
<Badge color="#EF6260" text={(<span className={styles['badgeWrap-title']}>剩余可用额度(元)：</span>)} />
<span className={styles['badgeWrap-content']}>100,000</span>
<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']}>200,000</span>
<span className={styles['badgeWrap-content']}>{extraData?.quota}</span>
</div>
</Col>
</Row>
</div>
</MellowCard>
</Col>
<Col span={14}>
<MellowCard
title="账单记录"
......@@ -171,9 +224,14 @@ const IntroduceRow: React.FC<IntroduceRowProps> = ({
<div className={styles.recordExtra}>
<Space>
<Checkbox onChange={handleRecordCheckboxChange}>查看交易记录</Checkbox>
<Select value="1" style={{ width: 256 }}>
<Option value="1">2020/06/11 ～ 2020/07/11</Option>
<Option value="2">2020/08/11 ～ 2020/09/11</Option>
<Select
value={billId}
style={{ width: 256 }}
onChange={handleBillChange}
>
{options.map(item => (
<Option key={item.value} value={item.value}>{item.title}</Option>
))}
</Select>
</Space>
</div>
......@@ -194,13 +252,13 @@ const IntroduceRow: React.FC<IntroduceRowProps> = ({
<div className={styles['repayment-left']}>
<div className={styles.statistic}>
<div className={styles['statistic-title']}>剩余应还(元)：</div>
<div className={styles['statistic-amount']}>100,000</div>
<div className={styles['statistic-amount']}>{billInfo?.residueRepayQuota}</div>
</div>
<div className={styles['repayment-end']}>
<span className={styles['repayment-time']}>
2020-08-32到期
{billInfo?.expireTime} 到期
</span>
<StatusTag type="danger" title="逾期 3 天" />
<StatusTag type="danger" title={billInfo?.expireDay} />
</div>
</div>
<div className={styles['repayment-right']}>
......@@ -211,29 +269,35 @@ const IntroduceRow: React.FC<IntroduceRowProps> = ({
<Col span={10}>
<div className={styles.statistic}>
<div className={styles['statistic-title']}>本期账单(元)：</div>
<div className={styles['statistic-amount']}>100,000</div>
<div className={styles['statistic-amount']}>{billInfo?.billQuota}</div>
</div>
</Col>
</Row>
<div className={styles.foot}>
<Row>
<Col span={12}>
<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="#EF6260" text={(<span className={styles['badgeWrap-title']}>剩余可用额度(元)：</span>)} />
<span className={styles['badgeWrap-content']}>100,000</span>
<Badge color="#DFE1E6" text={(<span className={styles['badgeWrap-title']}>还款周期：</span>)} />
<span className={styles['badgeWrap-content']}>{billInfo?.repayPeriod}</span>
</div>
</Col>
<Col span={12}>
<Col span={8}>
<div className={styles.badgeWrap}>
<Badge color="#DFE1E6" text={(<span className={styles['badgeWrap-title']}>总额度(元)：</span>)} />
<span className={styles['badgeWrap-content']}>200,000</span>
<Badge color="#DFE1E6" text={(<span className={styles['badgeWrap-title']}>账单日期：</span>)} />
<span className={styles['badgeWrap-content']}>{billInfo?.billDay}</span>
</div>
</Col>
</Row>
</div>
</>
) : (
<TradeRecord fetchRecordList={fetchRecordList} />
<TradeRecord fetchRecordList={getRecordList} />
)}
</MellowCard>
</Col>
......
src/pages/payandSettle/creditApplication/quotaMenage/detail/components/TradeRecord/index.tsx
View file @ b2093cd1
......@@ -70,9 +70,14 @@ export interface RecordItem {
}[]
};
export interface RecordRes {
data: RecordItem[];
totalCount: number;
};
export interface TradeRecordProps {
// 获取账单账单记录详情
fetchRecordList: (params: RecordParams) => Promise<{ data: RecordItem[] , totalCount: number }>;
fetchRecordList: (params: RecordParams) => Promise<RecordRes>;
};
const TradeRecord: React.FC<TradeRecordProps> = ({
......
src/pages/payandSettle/creditApplication/quotaMenage/detail/index.tsx
View file @ b2093cd1
import React, { Suspense, useEffect, useState } from 'react';
import React, { Suspense, useEffect, useState, useMemo, useCallback } from 'react';
import {
PageHeader,
Descriptions,
......@@ -21,6 +21,7 @@ import {
MEMBER_STATUS_BADGE_MAP,
CREDIT_REPAYMENT_STATUS_TAG_MAP,
} from '../../../constant';
import { BillDetailParams, BillDetailData, BillRecordParams } from './components/IntroduceRow';
import styles from './index.less';
const IntroduceRow = React.lazy(() => import('./components/IntroduceRow'));
......@@ -58,9 +59,24 @@ const QuotaMenageDetail: React.FC = () => {
x: '已用额度(元)',
y: creditInfo && creditInfo.useQuota ? creditInfo.useQuota : 0,
},
];
];
const fetchRecordList = (params) => {
const fetchBillDetail = (params: BillDetailParams): Promise<BillDetailData> => {
return new Promise((resolve, reject) => {
PublicApi.getPayCreditApplyGetCreditBillDetail(params)
.then(res => {
if (res.code === 1000) {
resolve(res.data);
}
reject();
})
.catch(() => {
reject();
});
});
};
const fetchBillRecordList = (params: BillRecordParams): Promise<any> => {
return new Promise((resolve, reject) => {
PublicApi.getPayCreditApplyPageCreditTradeRecord({
creditId: id,
......@@ -76,6 +92,16 @@ const QuotaMenageDetail: React.FC = () => {
});
};
const normalizeOptions = arr => {
if (!arr || !Array.isArray(arr)) {
return [];
}
return arr.map(item => ({
title: item.name,
value: item.id,
}));
};
return (
<Spin spinning={infoLoading}>
<PageHeaderWrapper
......@@ -127,7 +153,14 @@ const QuotaMenageDetail: React.FC = () => {
<Suspense fallback={null}>
<IntroduceRow
quotaData={quotaData}
fetchRecordList={fetchRecordList}
extraData={{
canUseQuota: creditInfo?.canUseQuota,
useQuota: creditInfo?.useQuota,
quota: creditInfo?.quota,
}}
options={normalizeOptions(creditInfo?.billSelectList)}
fetchBillDetail={fetchBillDetail}
fetchBillRecordList={fetchBillRecordList}
/>
</Suspense>
......
src/pages/payandSettle/creditApplication/quotaMenage/index.tsx
View file @ b2093cd1
......@@ -42,7 +42,7 @@ const QuotaMenage: React.FC = () => {
render: (text, record) => (
<>
{/* 未申请过，并且授信状态为未申请 或者 申请中 */}
{!(!record.isHasApply && (record.status === CREDIT_STATUS_NOT_APPLIED || record.status === CREDIT_STATUS_APPLYING)) ? (
{(!record.isHasApply && (record.status === CREDIT_STATUS_NOT_APPLIED || record.status === CREDIT_STATUS_APPLYING)) ? (
text
) : (
<EyePreview
......
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