共债详情

src/pages/mediation-page/components/coobligationInfo.vue

@@ -13,7 +13,26 @@
         <div v-for="(item,index) in coobligationInfo.caseList" :key="index">
           <div class="flex-row justify-content-between descriptions-t-item bgColor-F7F8FA mt-16">
             <div class="descriptions-t-item-l f-weight500" style="width: 80px;"><a class="dot"></a>债务一</div>
-            <div class="descriptions-t-item-r color-86909C" style="width: 80px;">详情 ></div>
+            
+            <!-- <el-popover
+              placement="bottom"
+              title="共债详情"
+              width="500"
+              trigger="click">
+              <singleCaseInfoPopover :caseId="item.id" :singlecaseinfovisible.sync="singlecaseinfovisible"/>
+              <span slot="reference" class="descriptions-t-item-r color-86909C" style="width: 80px;display: inline-block;">详情 ></span>
+            </el-popover> -->
+            <el-popover 
+                placement="left"
+                width="500"
+                title="共债详情"
+                trigger="click">
+                <singleCaseInfoPopover :caseId="item.id" :caseObj="item" :singlecaseinfovisible.sync="singlecaseinfovisible"/>
+                <span slot="reference" class="descriptions-t-item-r color-86909C cursor-pointer" style="width: 80px;display: inline-block;">详情 ></span>
+            </el-popover>
+
+
+            <!-- <div class="descriptions-t-item-r color-86909C" style="width: 80px;">详情 ></div> -->
           </div>
           <div class="flex-row descriptions-t-item">
             <div class="descriptions-t-item-l color-86909C">案件包名称:</div>
@@ -45,11 +64,11 @@
           </div> -->
           <div class="flex-row descriptions-t-item bgColor-F7F8FA">
             <div class="descriptions-t-item-l color-86909C">当前逾期金额:</div>
-            <div class="descriptions-t-item-r color-1960F4">{{item.fields.find(item => item.fieldKey == 'moneyAmount').fieldValue}}</div>
+            <div class="descriptions-t-item-r color-F53F3F">{{item.fields.find(item => item.fieldKey == 'moneyAmount').fieldValue}}</div>
           </div>
           <div class="flex-row descriptions-t-item">
             <div class="descriptions-t-item-l color-86909C">最低还款金额:</div>
-            <div class="descriptions-t-item-r">{{item.fields.find(item => item.fieldKey == 'limitLine').fieldValue}}</div>
+            <div class="descriptions-t-item-r" >{{item.fields.find(item => item.fieldKey == 'limitLine').fieldValue}}</div>
           </div>
         </div>
         
@@ -65,6 +84,7 @@
 import api from "@/services/caseManagement";
 export default {
   components: {
+    singleCaseInfoPopover: () => import('./singleCaseInfoPopover.vue'),//共债基本信息
     // singlesmsPopover: () => import('./singlesmsPopover.vue'),//
   },
   props: {
@@ -77,6 +97,7 @@ export default {
   },
   data() {
     return {
+      singlecaseinfovisible:false,
       coobligationInfo:{},
     }
   },

src/pages/mediation-page/components/singleCaseInfoPopover.vue

@@ -0,0 +1,163 @@
+<template>
+    <div class="dialog-content dialog-caseinfo-batch">
+        <div class="p-16">
+            <!-- 债务信息 -->
+            <div class="case-debt-info">
+                <div class="descriptions-t">
+                    <div class="f16 f-weight600 descriptions-t-title">基本信息</div>
+                    <div class="flex-row descriptions-t-item bgColor-F7F8FA">
+                        <div class="descriptions-t-item-l color-86909C">金融产品名称:</div>
+                        <div class="descriptions-t-item-r">{{baseInfo.productTypeId}}</div>
+                    </div>
+                    <div class="flex-row descriptions-t-item">
+                        <div class="descriptions-t-item-l color-86909C">金融机构名称:</div>
+                        <div class="descriptions-t-item-r">{{baseInfo.financialOrgName}}</div>
+                    </div>
+                    <div class="flex-row descriptions-t-item bgColor-F7F8FA">
+                        <div class="descriptions-t-item-l color-86909C">案件编号:</div>
+                        <div class="descriptions-t-item-r">{{baseInfo.caseNo}}</div>
+                    </div>
+                    <div class="flex-row descriptions-t-item">
+                        <div class="descriptions-t-item-l color-86909C">合同名称:</div>
+                        <div class="descriptions-t-item-r">{{baseInfo.fields.find(item => item.fieldKey == 'contactName').fieldValue}}</div>
+                    </div>
+                    <!-- <div class="flex-row descriptions-t-item bgColor-F7F8FA">
+                        <div class="descriptions-t-item-l color-86909C">被申请人姓名:</div>
+                        <div class="descriptions-t-item-r color-1960F4">{{baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR').name}}</div>
+                    </div>
+                    <div class="flex-row descriptions-t-item">
+                        <div class="descriptions-t-item-l color-86909C">被申请人手机号码:</div>
+                        <div class="descriptions-t-item-r">{{baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR').phone}}</div>
+                    </div> -->
+                </div>
+                <div class="descriptions-t mt-16">
+                    <div class="f16 f-weight600 descriptions-t-title">债务信息</div>
+                    <div class="flex-row descriptions-t-item">
+                        <div class="descriptions-t-item-l color-86909C">当前逾期金额:</div>
+                        <div class="descriptions-t-item-r color-F53F3F">{{baseInfo.fields.find(item => item.fieldKey == 'moneyAmount').fieldValue}}</div>
+                    </div>
+
+                    <div v-for="(item,index) in baseInfo.fields.filter(item => item.fieldGroup == 'DEBTINFO')" 
+                    :key="index" class="flex-row descriptions-t-item " :class="index % 2 === 0 ? 'bgColor-F7F8FA':''">
+                        <div class="descriptions-t-item-l color-86909C">{{item.name}}:</div>
+                        <div class="descriptions-t-item-r">{{item.fieldValue}}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import api from "@/services/caseManagement";
+    export default {
+        components: {
+        },
+        props: {
+            caseId: {
+                type: String,
+                default: () => {},
+            },
+            caseObj: {
+                type: Object,
+                default: () => {},
+            },
+        },
+        data() {
+            return {
+                operateMethodOptions:[],
+                baseInfo:{
+                },
+                
+            };
+        },
+        mounted () {
+          this.baseInfo = this.caseObj
+            // this.getCaseInfoById()
+        },
+        methods: {
+            // 获取详情
+            getCaseInfoById() {
+                api.getCaseInfoById(this.caseId).then(res => {
+                    if (!res.code) {
+                        this.baseInfo = res
+                    }
+                })
+            },
+
+            handleClose() {
+                this.$emit('update:singlecaseinfovisible', false)
+            },
+        }
+    };
+</script>
+
+<style scoped lang="scss">
+.dialog-jointly-batch {
+  width: 395px;
+  max-height: 500px;
+
+  .tabs__search-criteria-title {
+    width: 100%;
+  }
+  .dialog-footer{
+    display: inline-block;
+    width: 400px;
+    text-align: right;
+    border-top: solid 1px #E5E6EB;
+    padding: 10px;
+  }
+}
+</style>
+
+<style scoped lang="scss">
+.dialog-caseinfo-batch {
+  .case-debt-info{
+    .descriptions-t{
+      /* 方法1 */
+      .dot {
+        margin-left: 5px;
+        position: relative;
+        padding-left: 10px; /* 调整圆点与文本之间的距离 */
+      }
+      
+      .dot::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background-color: #000; /* 圆点的颜色 */
+      }
+      .coobligation-totle{
+        margin-top: 15px;
+        background-color:#FFF2F0 ;
+        padding: 15px 20px;
+        span{
+          margin: 2px 0;
+        }
+        
+      }
+      .descriptions-t-title{
+        //margin-bottom: 5px;
+      }
+      .descriptions-t-item-l{
+        padding: 12px 10px;
+        text-align: right;
+        width: 40%;
+      }
+      .descriptions-t-item-r{
+        padding: 12px 10px;
+        text-align: left;
+        width: 60%;
+      }
+      .bgColor-F7F8FA{
+        background-color: #F7F8FA;
+      }
+    }
+  }
+
+}
+</style>