Skip to content

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

补充弹窗相关UI

parent c6c3f80b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 289 additions and 8 deletions
src/pages/payandSettle/creditApplication/components/QuotaApplicationInfo/schema/index.ts
View file @ 3049b78e
......@@ -81,7 +81,7 @@ export const editModalSchema: ISchema = {
},
],
},
enclosure: {
attachment: {
type: 'string',
title: '申请附件',
'x-component': 'Upload',
......@@ -89,7 +89,7 @@ export const editModalSchema: ISchema = {
action: '/api/file/file/upload/prefix',
data: {
fileType: UPLOAD_TYPE,
prefix: '/creditApplication/',
prefix: '/creditApplication/applicationAttachment/',
},
beforeUpload: '{{beforeUpload}}',
accept: '.png, .jpg, .jpeg',
......
src/pages/payandSettle/creditApplication/quotaMenage/detail/components/BillInfo/index.tsx
View file @ 3049b78e
import React from 'react';
import React, { useState } from 'react';
import {
Tabs,
Descriptions,
......@@ -8,11 +8,14 @@ import {
import MellowCard from '@/components/MellowCard';
import StatusTag from '@/components/StatusTag';
import TradeWrap from '../TradeWrap';
import CheckVoucherModal from '../CheckVoucherModal';
import styles from './index.less';
const { TabPane } = Tabs;
const BillInfo: React.FC = () => {
const [voucherVisible, setVoucherVisible] = useState(false);
return (
<MellowCard
style={{
......@@ -49,7 +52,7 @@ const BillInfo: React.FC = () => {
<Descriptions.Item label="交易流水号">
<Row justify="space-between">
<Col span={12}>
<a>20200820000010</a>
<a onClick={() => setVoucherVisible(true)}>20200820000010</a>
</Col>
<Col
span={10}
......@@ -85,6 +88,31 @@ const BillInfo: React.FC = () => {
</TabPane>
</Tabs>
</div>
<CheckVoucherModal
visible={voucherVisible}
fileList={[
{
uid: '1',
name: 'xxx.png',
status: 'done',
url: 'http://www.baidu.com/xxx.png',
},
{
uid: '2',
name: 'yyy.png',
status: 'done',
url: 'http://www.baidu.com/yyy.png',
},
{
uid: '3',
name: 'zzz.png',
status: 'done',
url: 'http://www.baidu.com/zzz.png',
},
]}
onCancel={() => setVoucherVisible(false)}
/>
</MellowCard>
);
};
......
src/pages/payandSettle/creditApplication/quotaMenage/detail/components/CheckVoucherModal/index.tsx 0 → 100644
View file @ 3049b78e
import React from 'react';
import { Modal, Upload } from 'antd';
import styles from './index.less';
interface CheckVoucherModalProps {
visible: boolean;
fileList: {
uid: string,
name: string,
status: string,
url: string,
}[],
onCancel: () => void;
};
const CheckVoucherModal: React.FC<CheckVoucherModalProps> = ({
visible,
fileList = [],
onCancel,
}) => {
const handleCancel = () => {
if (onCancel) {
onCancel();
}
};
return (
<Modal
title="查看凭证"
width={576}
visible={visible}
onCancel={handleCancel}
footer={null}
bodyStyle={{
padding: '16px 24px 24px',
}}
destroyOnClose
>
<Upload
defaultFileList={fileList}
disabled
/>
</Modal>
);
};
export default CheckVoucherModal;
\ No newline at end of file
src/pages/payandSettle/creditApplication/quotaMenage/detail/components/IntroduceRow/schema/index.ts 0 → 100644
View file @ 3049b78e
import { ISchema } from '@formily/antd';
import { UPLOAD_TYPE } from '@/constants';
export const repaymentModalSchema: ISchema = {
type: 'object',
properties: {
MEGA_LAYOUT: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelAlign: 'top',
full: true,
},
properties: {
amount: {
type: 'string',
title: '还款金额',
'x-component-props': {
placeholder: '',
addonBefore: '¥',
},
'x-rules': [
{
required: true,
message: '请填写还款金额',
},
],
},
amountSlide: {
type: 'number',
title: '',
'x-component': 'range',
'x-component-props': {
min: 0,
max: 20000,
marks: [0, 5000, 10000, 15000, 20000],
},
},
payType: {
type: 'number',
enum: [
{
label: '线上支付方式',
value: 1,
},
{
label: '线下支付方式',
value: 2,
},
],
default: 1,
title: '选择支付方式',
'x-component-props': {
placeholder: '请选择',
},
'x-rules': [
{
required: true,
message: '请选择支付方式',
},
],
},
payChannels: {
type: 'string',
title: '选择支付渠道',
enum: [
{
label: '微信',
value: 1,
},
{
label: '支付宝',
value: 2,
},
{
label: '银联',
value: 3,
},
],
default: 1,
'x-component-props': {
placeholder: '请选择',
},
'x-rules': [
{
required: true,
message: '请选择支付渠道',
},
],
},
},
},
},
};
export const uploadVoucherModalSchema: ISchema = {
type: 'object',
properties: {
MEGA_LAYOUT: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelCol: 6,
wrapperCol: 18,
labelAlign: 'left',
full: true,
},
properties: {
accountName: {
type: 'string',
title: '还款账户名称',
default: '温州市隆昌皮具有限公司',
'x-component': 'Text',
'x-component-props': {
},
},
bankAccount: {
type: 'string',
title: '银行账号',
default: '6214 7812 3456 7891 1234',
'x-component': 'Text',
'x-component-props': {
},
},
bod: {
type: 'string',
title: '开户行',
default: '中国建设银行广州市分行营业部',
'x-component': 'Text',
'x-component-props': {
},
},
voucher: {
type: 'string',
title: '上传支付凭证',
'x-component': 'Upload',
'x-component-props': {
action: '/api/file/file/upload/prefix',
data: {
fileType: UPLOAD_TYPE,
prefix: '/creditApplication/paymentVoucher/',
},
beforeUpload: '{{beforeUpload}}',
accept: '.png, .jpg, .jpeg',
},
'x-mega-props': {
labelAlign: 'top',
full: true,
},
'x-rules': [
{
required: true,
message: '请上传支付凭证',
},
],
description: '单个凭证文件大小不能超过 200K',
},
},
},
},
};
\ No newline at end of file
src/pages/payandSettle/creditApplication/quotaMenage/detail/components/TradeRecord/index.tsx
View file @ 3049b78e
import React from 'react';
import React, { useState } from 'react';
import {
Row,
Col,
......@@ -7,9 +7,23 @@ import {
} from 'antd';
import StatusTag from '@/components/StatusTag';
import TradeWrap from '../TradeWrap';
import CheckVoucherModal from '../CheckVoucherModal';
import styles from './index.less';
const TradeRecord: React.FC = () => {
interface TradeRecordProps {
};
const TradeRecord: React.FC<TradeRecordProps> = ({
}) => {
const [voucherVisible, setVoucherVisible] = useState(false);
const handleCheckInfo = record => {
// setData
setVoucherVisible(true);
};
return (
<div className={styles.record}>
<div className={styles.list}>
......@@ -19,7 +33,7 @@ const TradeRecord: React.FC = () => {
<Descriptions.Item label="交易流水号">
<Row justify="space-between">
<Col span={12}>
<a>20200820000010</a>
<a onClick={() => handleCheckInfo({})}>20200820000010</a>
</Col>
<Col
span={10}
......@@ -55,7 +69,7 @@ const TradeRecord: React.FC = () => {
<Descriptions.Item label="交易流水号">
<Row justify="space-between">
<Col span={12}>
<a>20200820000010</a>
<a onClick={() => handleCheckInfo}>20200820000010</a>
</Col>
<Col
span={10}
......@@ -92,6 +106,31 @@ const TradeRecord: React.FC = () => {
<div className={styles.pagination}>
<Pagination size="small" total={50} />
</div>
<CheckVoucherModal
visible={voucherVisible}
fileList={[
{
uid: '1',
name: 'xxx.png',
status: 'done',
url: 'http://www.baidu.com/xxx.png',
},
{
uid: '2',
name: 'yyy.png',
status: 'done',
url: 'http://www.baidu.com/yyy.png',
},
{
uid: '3',
name: 'zzz.png',
status: 'done',
url: 'http://www.baidu.com/zzz.png',
},
]}
onCancel={() => setVoucherVisible(false)}
/>
</div>
);
};
......
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