mediate-manage-web/src/pages/mediation-page/components/singleCaseInfoPopover.vue

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