Skip to content

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

完成授信额度详情UI

parent 95bc7072
Hide whitespace changes
Inline Side-by-side
Showing with 404 additions and 4 deletions
src/pages/payandSettle/quotaMenage/detail/components/BillInfo/index.less 0 → 100644
View file @ 8f57bc56
.billInfo {
:global {
.ant-tabs-top >
.ant-tabs-nav {
.ant-tabs-ink-bar {
top: 0;
}
&::before {
border-bottom: none;
}
}
}
}
.dateWrap {
padding: 10px 16px 22px;
.time {
margin-top: 18px;
line-height: 22px;
font-weight: 400;
color: #172B4D;
}
}
.content {
display: flex;
&-left {
flex-shrink: 0;
width: 300px;
}
&-right {
flex: 1;
}
}
\ No newline at end of file
src/pages/payandSettle/quotaMenage/detail/components/BillInfo/index.tsx 0 → 100644
View file @ 8f57bc56
import React from 'react';
import {
Tabs,
Descriptions,
Row,
Col,
} from 'antd';
import MellowCard from '@/components/MellowCard';
import StatusTag from '@/components/StatusTag';
import TradeWrap from '../TradeWrap';
import styles from './index.less';
const { TabPane } = Tabs;
const BillInfo: React.FC = () => {
return (
<MellowCard
style={{
marginTop: 24,
}}
bodyStyle={{
padding: '0 24px 24px',
}}
>
<div className={styles.billInfo}>
<Tabs defaultActiveKey="1" onChange={() => {}}>
<TabPane
tab={(
<div className={styles.dateWrap}>
<StatusTag type="danger" title="逾期 9 天" />
<div className={styles.time}>2020/06/11 ～ 2020/07/11</div>
</div>
)}
key="1"
>
<div className={styles.content}>
<div className={styles['content-left']}>
<Descriptions column={1}>
<Descriptions.Item label="账单金额(元)">30,000.00</Descriptions.Item>
<Descriptions.Item label="账单最后还款日期">2020-08-20</Descriptions.Item>
<Descriptions.Item label="账单最后还款金额(元)">20,000.00</Descriptions.Item>
<Descriptions.Item label="还清日期">2020-08-21</Descriptions.Item>
</Descriptions>
</div>
<div className={styles['content-right']}>
<TradeWrap>
<TradeWrap.TradeItem width="33.33%">
<Descriptions column={1}>
<Descriptions.Item label="交易流水号">
<Row justify="space-between">
<Col span={12}>
<a>20200820000010</a>
</Col>
<Col
span={10}
style={{
textAlign: 'right',
}}
>
<StatusTag type="danger" title="待确认还款结果" />
</Col>
</Row>
</Descriptions.Item>
<Descriptions.Item label="交易项目">
<Row justify="space-between">
<Col span={12}>
还款
</Col>
<Col
span={10}
style={{
textAlign: 'right',
}}
>
<strong>+30,000.00元</strong>
</Col>
</Row>
</Descriptions.Item>
<Descriptions.Item label="交易时间">2020-08-25 08:58</Descriptions.Item>
</Descriptions>
</TradeWrap.TradeItem>
</TradeWrap>
</div>
</div>
</TabPane>
</Tabs>
</div>
</MellowCard>
);
};
export default BillInfo;
\ No newline at end of file
src/pages/payandSettle/quotaMenage/detail/components/HistoryList/index.tsx 0 → 100644
View file @ 8f57bc56
import React from 'react';
import MellowCard from '@/components/MellowCard';
import PolymericTable from '@/components/PolymericTable';
import { EditableColumns } from '@/components/PolymericTable/interface';
import EyePreview from '@/components/EyePreview';
const HistoryList: React.FC = () => {
const columns: EditableColumns[] = [
{
title: '申请单号',
dataIndex: 'order',
render: text => (
<EyePreview
url={`/memberCenter/payandSettle/creditApplication/quotaMenage/detail`}
>
{text}
</EyePreview>
),
},
{
title: '调整前额度(元)',
dataIndex: 'content',
align: 'center',
},
{
title: '申请调整额度(元)',
dataIndex: 'byMemberName',
align: 'center',
},
{
title: '审批额度(元)',
dataIndex: 'reason',
align: 'center',
},
{
title: '申请时间',
dataIndex: 'createTime',
align: 'center',
},
];
const handlePaginationChange = () => {
};
return (
<MellowCard
title="历史授信申请"
style={{
marginTop: 24,
}}
>
<PolymericTable
rowKey="remark"
dataSource={[]}
columns={columns}
loading={false}
pagination={{
pageSize: 10,
total: 100,
}}
onPaginationChange={handlePaginationChange}
/>
</MellowCard>
);
};
export default HistoryList;
\ No newline at end of file
src/pages/payandSettle/quotaMenage/detail/components/IntroduceRow/index.tsx
View file @ 8f57bc56
......@@ -8,10 +8,13 @@ import {
Select,
Space,
Button,
Descriptions,
Pagination,
} from 'antd';
import MellowCard from '@/components/MellowCard';
import { Pie } from '@/components/Charts';
import StatusTag from '@/components/StatusTag';
import TradeRecord from '../TradeRecord';
import styles from './index.less';
const { Option } = Select;
......@@ -35,7 +38,7 @@ const IntroduceRow: React.FC<IntroduceRowProps> = ({
return (
<Row gutter={23}>
<Col span={10}>
<MellowCard title="授信额度">
<MellowCard title="授信额度" fullHeight>
<Row gutter={20} align="middle">
<Col span={14}>
<Pie
......@@ -91,6 +94,7 @@ const IntroduceRow: React.FC<IntroduceRowProps> = ({
</Space>
</div>
)}
fullHeight
>
{!visibleRecord ? (
<>
......@@ -145,9 +149,7 @@ const IntroduceRow: React.FC<IntroduceRowProps> = ({
</div>
</>
) : (
<div>
2
</div>
<TradeRecord />
)}
</MellowCard>
</Col>
......
src/pages/payandSettle/quotaMenage/detail/components/TradeRecord/index.less 0 → 100644
View file @ 8f57bc56
@import '../../../../../../global/styles/utils.less';
.record {
.list {
height: 290px;
overflow-y: auto;
overflow-x: hidden;
.silkyScrollbar();
}
.pagination {
margin-top: 10px;
text-align: right;
}
}
\ No newline at end of file
src/pages/payandSettle/quotaMenage/detail/components/TradeRecord/index.tsx 0 → 100644
View file @ 8f57bc56
import React from 'react';
import {
Row,
Col,
Descriptions,
Pagination,
} from 'antd';
import StatusTag from '@/components/StatusTag';
import TradeWrap from '../TradeWrap';
import styles from './index.less';
const TradeRecord: React.FC = () => {
return (
<div className={styles.record}>
<div className={styles.list}>
<TradeWrap>
<TradeWrap.TradeItem>
<Descriptions column={1}>
<Descriptions.Item label="交易流水号">
<Row justify="space-between">
<Col span={12}>
<a>20200820000010</a>
</Col>
<Col
span={10}
style={{
textAlign: 'right',
}}
>
<StatusTag type="primary" title="待确认还款结果" />
</Col>
</Row>
</Descriptions.Item>
<Descriptions.Item label="交易项目">
<Row justify="space-between">
<Col span={12}>
还款
</Col>
<Col
span={10}
style={{
textAlign: 'right',
}}
>
<strong>+30,000.00元</strong>
</Col>
</Row>
</Descriptions.Item>
<Descriptions.Item label="交易时间">2020-08-25 08:58</Descriptions.Item>
<Descriptions.Item label="备注">订单号：DTR980</Descriptions.Item>
</Descriptions>
</TradeWrap.TradeItem>
<TradeWrap.TradeItem>
<Descriptions column={1}>
<Descriptions.Item label="交易流水号">
<Row justify="space-between">
<Col span={12}>
<a>20200820000010</a>
</Col>
<Col
span={10}
style={{
textAlign: 'right',
}}
>
<StatusTag type="primary" title="待确认还款结果" />
</Col>
</Row>
</Descriptions.Item>
<Descriptions.Item label="交易项目">
<Row justify="space-between">
<Col span={12}>
还款
</Col>
<Col
span={10}
style={{
textAlign: 'right',
}}
>
<strong>+30,000.00元</strong>
</Col>
</Row>
</Descriptions.Item>
<Descriptions.Item label="交易时间">2020-08-25 08:58</Descriptions.Item>
<Descriptions.Item label="备注">订单号：DTR980</Descriptions.Item>
</Descriptions>
</TradeWrap.TradeItem>
</TradeWrap>
</div>
<div className={styles.pagination}>
<Pagination size="small" total={50} />
</div>
</div>
);
};
export default TradeRecord;
\ No newline at end of file
src/pages/payandSettle/quotaMenage/detail/components/TradeWrap/index.less 0 → 100644
View file @ 8f57bc56
.tradeWrap {
padding: 0;
margin: 0 -12px;
&-item {
padding: 0 12px 16px;
display: inline-block;
list-style: none;
&-content {
padding: 12px 16px;
background: #FAFBFC;
border-radius: 4px;
border: 1px solid #EBECF0;
:global {
.ant-descriptions-row {
&:last-child {
.ant-descriptions-item {
padding-bottom: 0;
}
}
}
}
}
}
}
\ No newline at end of file
src/pages/payandSettle/quotaMenage/detail/components/TradeWrap/index.tsx 0 → 100644
View file @ 8f57bc56
import React, { ReactNode } from 'react';
import styles from './index.less';
interface TradeItemProps {
width?: number | string;
children?: ReactNode;
};
const TradeItem: React.FC<TradeItemProps> = ({
width = '50%',
children,
}) => {
return (
<li
className={styles['tradeWrap-item']}
style={{
width,
}}
>
<div className={styles['tradeWrap-item-content']}>
{children}
</div>
</li>
);
};
class TradeWrap extends React.Component {
static TradeItem = TradeItem;
render() {
const { children } = this.props;
return (
<ul className={styles.tradeWrap}>
{children}
</ul>
);
};
}
export default TradeWrap;
\ No newline at end of file
src/pages/payandSettle/quotaMenage/detail/index.tsx
View file @ 8f57bc56
......@@ -16,6 +16,8 @@ import StatusTag from '@/components/StatusTag';
import styles from './index.less';
const IntroduceRow = React.lazy(() => import('./components/IntroduceRow'));
const BillInfo = React.lazy(() => import('./components/BillInfo'));
const HistoryList = React.lazy(() => import('./components/HistoryList'));
const QuotaMenageDetail: React.FC = () => {
......@@ -74,6 +76,14 @@ const QuotaMenageDetail: React.FC = () => {
<Suspense fallback={null}>
<IntroduceRow quotaData={quotaData} />
</Suspense>
<Suspense fallback={null}>
<BillInfo />
</Suspense>
<Suspense fallback={null}>
<HistoryList />
</Suspense>
</PageHeaderWrapper>
);
};
......
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