融资信息弹窗编写

src/assets/styles/mixin.less

@@ -1503,4 +1503,24 @@ input:-internal-autofill-selected {
 
   .ant-layout-sider-has-trigger {
       padding-bottom: 40px;
-  }
+  }
+
+  // 弹窗中表格内容居中
+.tableContextCenter {
+    .dialogTable {
+        .ant-table-thead {
+            tr {
+                th {
+                    text-align: center;
+                }
+            }
+        }
+        .ant-table-tbody {
+            tr {
+                td {
+                    text-align: center;
+                }
+            }
+        }
+    }
+}

src/views/platinum/platinum_financing_information/list/tab/compoments/detail/index.vue

@@ -12,7 +12,95 @@
                 :loading="loading.loading"
                 @click="cancel">关闭</a-button>
     </template>
-    <Des :list="desList" />
+    <!-- <Des :list="desList" /> -->
+    <a-form class="inlineForm">
+      <fieldset class="formFieldSet">
+        <legend>融资信息</legend>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="账号类型">
+              <span class="white">企业</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="企业名称">
+              <span class="white">深圳首饰加工厂</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="账号">
+              <span class="white">2732175</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="融资商品">
+              <span class="white">黄金</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="数量">
+              <span class="white">50g</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="成本价">
+              <span class="white">366.06</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="订单总额">
+              <span class="white">17320.00</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="首付款">
+              <span class="white">2400.00</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="已付货款">
+              <span class="white">4500.00</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="融资额">
+              <span class="white">12820.00</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="利息">
+              <span class="white">25.34</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="状态">
+              <span class="red">预警（需追加5000.00）</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </fieldset>
+      <fieldset class="formFieldSet">
+        <legend>还款信息</legend>
+        <div class="tableDatas tableContextCenter">
+            <a-table class="dialogTable"
+                    :columns="columns"
+                    :data-source="dataSource"
+                    :pagination="false">
+
+            </a-table>
+            </div>
+      </fieldset>
+    </a-form>
   </a-modal>
 </template>
 
@@ -36,7 +124,38 @@ export default defineComponent({
         const { visible, cancel } = closeModal('platinum_financing_information_detail');
         const loading = ref<boolean>(false);
         const { desList, getDesList } = handleDesList();
+        const dataSource =  [
+            {
+                key: '1',
+                name: 'Mike',
+                age: 32,
+                address: '10 Downing Street',
+            },
+            {
+                key: '2',
+                name: 'John',
+                age: 42,
+                address: '10 Downing Street',
+            }
+            ];
 
+            const columns = [
+            {
+                title: '追加/还款时间',
+                dataIndex: 'name',
+                key: 'name',
+            },
+            {
+                title: '金额',
+                dataIndex: 'age',
+                key: 'age',
+            },
+            {
+                title: '剩余款',
+                dataIndex: 'address',
+                key: 'address',
+            }
+            ];
         watchEffect(() => {
             // if (props.selectedRow.customername) {
             const data = props.selectedRow;
@@ -52,13 +171,15 @@ export default defineComponent({
                 { label: '备注', value: formatValue(data.remark) },
             ];
             getDesList(person);
-            // }
+            
         });
         return {
             desList,
             cancel,
             visible,
             loading,
+            dataSource,
+            columns,
         };
     },
 });
@@ -74,5 +195,8 @@ export default defineComponent({
             margin-left: 0;
         }
     }
+    .red {
+        color: @m-red1;
+    }
 }
 </style>;