共债详情
This commit is contained in:
parent
142d89ff1f
commit
e426f36262
@ -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:{},
|
||||
}
|
||||
},
|
||||
|
||||
163
src/pages/mediation-page/components/singleCaseInfoPopover.vue
Normal file
163
src/pages/mediation-page/components/singleCaseInfoPopover.vue
Normal file
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user