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

<template>
  <div class="coobligationInfo">
    <!-- 共债信息 -->
    <div class="case-debt-info">
      <div class="descriptions-t">
        <div class="f16 f-weight600 descriptions-t-title">共债</div>
        <div class="coobligation-totle flex-column">
          <span>当前债务人名下共有{{coobligationInfo.caseNum}}笔债务，</span>
          <span>逾期总金额：<a class="color-F53F3F">{{coobligationInfo.totalAmount}}</a>元，</span>
          <span>最低还款总金额：<a class="color-F53F3F">{{coobligationInfo.minTotalAmount}}</a>元</span>
        </div>

        <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>债务{{ $util.changeNumToHan(index+1)}}</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>
            <div class="descriptions-t-item-r">{{item.casePkg}}</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">{{item.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">{{item.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">{{item.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">{{item.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">{{item.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">{{item.debtorEntityList.find(item => item.role == 'DEBTOR').phone}}</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-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>
        </div>
        
        <!-- limitLine -->
      </div>

    </div>

  </div>
</template>

<script>
import api from "@/services/caseManagement";
export default {
  components: {
    singleCaseInfoPopover: () => import('./singleCaseInfoPopover.vue'),//共债基本信息
    // singlesmsPopover: () => import('./singlesmsPopover.vue'),//
  },
  props: {
    caseId: {
      type: String,
      default: () => {
        return ''
      },
    },
  },
  data() {
    return {
      singlecaseinfovisible:false,
      coobligationInfo:{},
    }
  },
  mounted() {
   this.getList()
  },
  methods: {
    // 列表数据
    getList() {
      api.mediate_coobligation_list({id:this.caseId}).then(res => {
        if (!res.code) {
          this.coobligationInfo = res
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
.coobligationInfo {
  .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>