对接中

src/pages/payandSettle/creditApplication/quotaMenage/detail/components/IntroduceRow/index.tsx

-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

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

-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

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