补充弹窗相关UI

src/pages/payandSettle/creditApplication/components/QuotaApplicationInfo/schema/index.ts

@@ -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

-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

+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/index.tsx

@@ -2,21 +2,26 @@ import React, { useState } from 'react';
 import { 
   Row, 
   Col, 
-  Statistic, 
   Badge, 
   Checkbox, 
   Select, 
   Space, 
   Button, 
-  Descriptions, 
-  Pagination, 
+  Modal, 
+  message, 
 } from 'antd';
+import { createFormActions, FormEffectHooks } from '@formily/antd';
 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 TradeRecord from '../TradeRecord';
 import styles from './index.less';
 
+const repaymentFormActions = createFormActions();
+const uploadVoucherFormActions = createFormActions();
+
 const { Option } = Select;
 
 interface IntroduceRowProps {
@@ -30,12 +35,37 @@ const IntroduceRow: React.FC<IntroduceRowProps> = ({
   quotaData = [], 
 }) => {
   const [visibleRecord, setVisibleRecord] = useState(false);
+  const [visibleRepayment, setVisibleRepayment] = useState(false);
+  const [visibleUploadVoucher, setVisibleUploadVoucher] = useState(false);
       
   const handleRecordCheckboxChange = e => {
     setVisibleRecord(e.target.checked);
   };
 
+  const handleRepayment = () => {
+    setVisibleRepayment(true);
+  };
+
+  const handleRepaymentSubmit = values => {
+    const { payType } = values;
+
+    setVisibleRepayment(false);
+
+    // 模拟选择 线下支付逻辑
+    if (payType === 2) {
+      setVisibleUploadVoucher(true);
+    }
+  };
+
+  const beforeUploadVoucher = file => {
+    if (file.size > 200) {
+      message.warning('图片大小超过200K');
+      return Promise.reject();
+    }
+  };
+  
   return (
+    <>
       <Row 
         gutter={23}
         style={{
@@ -125,7 +155,7 @@ const IntroduceRow: React.FC<IntroduceRowProps> = ({
                         </div>
                       </div>
                       <div className={styles['repayment-right']}>
-                      <Button type="primary">立即还款</Button>
+                        <Button type="primary" onClick={handleRepayment}>立即还款</Button>
                       </div>
                     </div>
                   </Col>
@@ -159,6 +189,51 @@ const IntroduceRow: React.FC<IntroduceRowProps> = ({
           </MellowCard>
         </Col>
       </Row>
+    
+      <Modal
+        title="还款"
+        width={576}
+        visible={visibleRepayment}
+        onOk={() => repaymentFormActions.submit()}
+        onCancel={() => setVisibleRepayment(false)}
+        destroyOnClose
+      >
+        <NiceForm
+          previewPlaceholder=""
+          effects={($, { setFieldState }) => {
+            
+          }}
+          expressionScope={{
+
+          }}
+          actions={repaymentFormActions}
+          schema={repaymentModalSchema}
+          onSubmit={handleRepaymentSubmit}
+        />
+      </Modal>
+      
+      <Modal
+        title="上传支付凭证"
+        width={576}
+        visible={visibleUploadVoucher}
+        onOk={() => uploadVoucherFormActions.submit()}
+        onCancel={() => setVisibleUploadVoucher(false)}
+        destroyOnClose
+      >
+        <NiceForm
+          previewPlaceholder=""
+          effects={($, { setFieldState }) => {
+            
+          }}
+          expressionScope={{
+            beforeUpload: beforeUploadVoucher, 
+          }}
+          actions={uploadVoucherFormActions}
+          schema={uploadVoucherModalSchema}
+          onSubmit={handleRepaymentSubmit}
+        />
+      </Modal>
+    </>
   );
 };
 

src/pages/payandSettle/creditApplication/quotaMenage/detail/components/IntroduceRow/schema/index.ts

+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

-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>
   );
 };