开发中

src/pages/payandSettle/quotaMenage/detail/components/IntroduceRow/index.less

@@ -40,4 +40,21 @@
     font-weight: 500;
     color: #172B4D;
   }
+}
+
+.badgeWrap {
+  &-title {
+    color: #6B778C;
+  }
+
+  &-content {
+    line-height: 22px;
+    font-weight: 500;
+    color: #172B4D;
+  }
+}
+
+.foot {
+  padding: 34px 25px 8px;
+  border-top: 1px solid #F4F5F7;
 }
\ No newline at end of file

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

-import React from 'react';
+import React, { useState } from 'react';
 import { 
   Row, 
   Col, 
@@ -26,6 +26,11 @@ interface IntroduceRowProps {
 const IntroduceRow: React.FC<IntroduceRowProps> = ({
   quotaData = [], 
 }) => {
+  const [visibleRecord, setVisibleRecord] = useState(false);
+      
+  const handleRecordCheckboxChange = e => {
+    setVisibleRecord(e.target.checked);
+  };
   
   return (
     <Row gutter={23}>
@@ -39,8 +44,8 @@ const IntroduceRow: React.FC<IntroduceRowProps> = ({
                 subTitle=""
                 total={null}
                 data={quotaData}
-                height={248}
-                padding={[24, 0, 24, 0]}
+                height={276}
+                padding={[34, 0, 34, 0]}
                 colors={['#41CC9E', '#EF6260']}
               />
             </Col>
@@ -57,10 +62,16 @@ const IntroduceRow: React.FC<IntroduceRowProps> = ({
           <div className={styles.foot}>
             <Row>
               <Col span={12}>
-                <Badge color="#EF6260" text="剩余可用额度(元)：" />
+                <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>
@@ -72,7 +83,7 @@ const IntroduceRow: React.FC<IntroduceRowProps> = ({
           extra={(
             <div className={styles.recordExtra}>
               <Space>
-                <Checkbox>查看交易记录</Checkbox>
+                <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>
@@ -81,33 +92,63 @@ const IntroduceRow: React.FC<IntroduceRowProps> = ({
             </div>
           )}
         >
-          <Row gutter={100} align="middle">
-            <Col span={14}>
-              <div className={styles.repayment}>
-                <div className={styles['repayment-left']}>
+          {!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>
+                </Col>
+                <Col span={10}>
                   <div className={styles.statistic}>
-                    <div className={styles['statistic-title']}>剩余应还(元)：</div>
+                    <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>
+                </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>
-            </Col>
-            <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>
+              2
+            </div>
+          )}
         </MellowCard>
       </Col>
     </Row>