补充弹窗相关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,135 +35,205 @@ 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={{
-        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']}>100,000</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']}>100,000</span>
-                </div>
+    <>
+      <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={12}>
-                <div className={styles.badgeWrap}>
-                  <Badge color="#DFE1E6" text={(<span className={styles['badgeWrap-title']}>总额度(元)：</span>)} />
-                  <span className={styles['badgeWrap-content']}>200,000</span>
+              <Col span={10}>
+                <div className={styles.statistic}>
+                  <div className={styles['statistic-title']}>
+                    <Badge color="#41CC9E" text="剩余可用额度(元)：" />
+                  </div>
+                  <div className={styles['statistic-amount']}>100,000</div>
                 </div>
               </Col>
             </Row>
-          </div>
-        </MellowCard>
-      </Col>
-      <Col span={14}>
-        <MellowCard 
-          title="账单记录"
-          extra={(
-            <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>
-              </Space>
-            </div>
-          )}
-          fullHeight
-        >
-          {!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']}>100,000</div>
-                      </div>
-                      <div className={styles['repayment-end']}>
-                        <span className={styles['repayment-time']}>
-                          2020-08-32到期
-                        </span>
-                        <StatusTag type="danger" title="逾期 3 天" />
-                      </div>
-                    </div>
-                    <div className={styles['repayment-right']}>
-                      <Button type="primary">立即还款</Button>
-                    </div>
+          
+            <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']}>100,000</span>
                   </div>
                 </Col>
-                <Col span={10}>
-                  <div className={styles.statistic}>
-                    <div className={styles['statistic-title']}>本期账单(元)：</div>
-                    <div className={styles['statistic-amount']}>100,000</div>
+                <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>
                   </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']}>100,000</span>
+            </div>
+          </MellowCard>
+        </Col>
+        <Col span={14}>
+          <MellowCard 
+            title="账单记录"
+            extra={(
+              <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>
+                </Space>
+              </div>
+            )}
+            fullHeight
+          >
+            {!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']}>100,000</div>
+                        </div>
+                        <div className={styles['repayment-end']}>
+                          <span className={styles['repayment-time']}>
+                            2020-08-32到期
+                          </span>
+                          <StatusTag type="danger" title="逾期 3 天" />
+                        </div>
+                      </div>
+                      <div className={styles['repayment-right']}>
+                        <Button type="primary" onClick={handleRepayment}>立即还款</Button>
+                      </div>
                     </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>
+                  <Col span={10}>
+                    <div className={styles.statistic}>
+                      <div className={styles['statistic-title']}>本期账单(元)：</div>
+                      <div className={styles['statistic-amount']}>100,000</div>
                     </div>
                   </Col>
                 </Row>
-              </div>
-            </>
-          ) : (
-            <TradeRecord />
-          )}
-        </MellowCard>
-      </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']}>100,000</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>
+                      </div>
+                    </Col>
+                  </Row>
+                </div>
+              </>
+            ) : (
+              <TradeRecord />
+            )}
+          </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>
   );
 };