assess-app/page_task/task_details/module/entities.vue

<template>
	<view class="m-20">
    <view class="title-box p-b20">
      <view class="size-32 sys-weight-600">债务</view>
      <view class="size-20 title-num">{{stageList.length}}</view>
    </view>
    <view class="row-c r-20 sys-background-fff m-b20" v-for="(item,index) in stageList" :key="index">
      <view class="file-box r-20" @click="openInfo(1,item)">
        <view class="file-data">
          <view class="file-icon" style="background-color:#FC526A " >
            <uni-icons type="calendar" color="#fff" size="20"></uni-icons>
          </view>
          <view>
            <view class="attachment-text">{{item.attachmentName}}</view>
            <view class="size-26 text-color-333 m-t20"><text class="text-icon">活跃</text><text>￥116,5710</text></view>
          </view>
        </view>
        <view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>

      </view>
    </view>

    <view class="title-box p-b20">
      <view class="size-32 sys-weight-600">借款人</view>
      <view class="size-20 title-num">{{oneList.length}}</view>
    </view>
    <view class="row-c r-20 sys-background-fff m-b20" v-for="(item,index) in oneList" :key="index">
      <view class="file-box r-20" @click="openInfo(2,item)">
        <view class="file-data">
          <view class="file-icon" style="background-color:#9335FF " >
            <uni-icons type="calendar" color="#fff" size="20"></uni-icons>
          </view>
          <view>
            <view class="attachment-text">{{item.attachmentName}}</view>
            <view class="size-26 text-color-333 m-t20"><text class="text-icon">活跃</text></view>
          </view>
        </view>
        <view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>

      </view>
    </view>

    <view class="title-box p-b20">
      <view class="size-32 sys-weight-600">担保人</view>
      <view class="size-20 title-num">{{twoList.length}}</view>
    </view>
    <view class="row-c r-20 sys-background-fff m-b20" v-for="(item,index) in twoList" :key="index">
      <view class="file-box r-20" @click="openInfo(3,item)">
        <view class="file-data">
          <view class="file-icon" style="background-color:#009BF2 " >
            <uni-icons type="calendar" color="#fff" size="20"></uni-icons>
          </view>
          <view>
            <view class="attachment-text">{{item.attachmentName}}</view>
            <view class="size-26 text-color-333 m-t20"><text class="text-icon">活跃</text></view>
          </view>
        </view>
        <view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>

      </view>
    </view>

    <view class="title-box p-b20">
      <view class="size-32 sys-weight-600">抵押物</view>
      <view class="size-20 title-num">{{threeList.length}}</view>
    </view>
    <view class="row-c r-20 sys-background-fff m-b20" v-for="(item,index) in threeList" :key="index">
      <view class="file-box r-20" @click="openInfo(4,item)">
        <view class="file-data">
          <view class="file-icon" style="background-color:#00B05E " >
            <uni-icons type="calendar" color="#fff" size="20"></uni-icons>
          </view>
          <view>
            <view class="attachment-text">{{item.attachmentName}}</view>
            <view class="size-26 text-color-333 m-t20"><text class="text-icon">活跃</text></view>
          </view>
        </view>
        <view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>

      </view>
    </view>

    <view class="title-box p-b20">
      <view class="size-32 sys-weight-600">债权人</view>
      <view class="size-20 title-num">{{fourList.length}}</view>
    </view>
    <view class="row-c r-20 sys-background-fff m-b20" v-for="(item,index) in fourList" :key="index">
      <view class="file-box r-20"@click="openInfo(4,item)">
        <view class="file-data">
          <view class="file-icon" style="background-color:#FF7E00 " >
            <uni-icons type="calendar" color="#fff" size="20"></uni-icons>
          </view>
          <view>
            <view class="attachment-text">{{item.attachmentName}}</view>
            <view class="size-26 text-color-333 m-t20"><text class="text-icon">活跃</text></view>
          </view>
        </view>
        <view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>

      </view>
    </view>

    <popupModuleVue ref="popupModuleRef"></popupModuleVue>
	</view>
</template>

<script>

  import popupModuleVue from "@/pages/index/module/popup-module.vue";

  export default {
    name:'entities',
    components: {popupModuleVue},
		props: {
      businessId:{
        default:0
      }
		},
		data() {
			return {
        stageList: [],
        oneList: [],
        twoList: [],
        threeList: [],
        fourList: [],
			}
		},
    watch:{
      'businessId':function () {
        // this.getStageList()
      }
    },
    mounted() {
      this.getStageList()
    },
    methods: {
      openInfo(colorType,data){
        this.$refs.popupModuleRef.openPop(colorType,data)
      },
      getStageList() {
        this.stageList=[{'attachmentName':'大连迈世未履行（2024）辽0211民初2861号民事判决书','attachmentFormat':'docx','attachmentSize':1165710},]
        this.oneList=[{'attachmentName':'大连迈世农业发展有限公司','attachmentFormat':'docx','attachmentSize':1165710},]
        this.twoList=[{'attachmentName':'迈世集团有限公司','attachmentFormat':'docx','attachmentSize':1165710},]
        this.fourList=[{'attachmentName':'迈世集团有限公司','attachmentFormat':'docx','attachmentSize':1165710},]
        this.threeList=[{'attachmentName':'中信银行股份有限公司大连分行','attachmentFormat':'docx','attachmentSize':1165710},{'attachmentName':'景山东园7号13层2号房屋','attachmentFormat':'docx','attachmentSize':1165710},]
      },
    },
  }
</script>

<style lang="scss" scoped>
  .title-box{
    display:  flex;
    justify-content: space-between;
    align-items: center;
    .title-num{
      color: #ee9393;
      background-color: #f6e8c4;
      padding: 4rpx 16rpx;
      border-radius: 12rpx;
    }
  }
  .file-box{
    box-shadow: 0 2rpx 6rpx 0  #0000001a, 0 2rpx 2px -2rpx  #0000001a;
    width: 100%;
    padding: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .file-data{
      display: flex;
      justify-content: flex-start;
      .attachment-text{
        width: 410rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .file-icon{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 96rpx;
        height: 96rpx;
        border-radius: 20rpx;
        margin-right: 32rpx;
        background-color: #FA4C78;
      }
      .text-icon{
        padding: 4rpx 8rpx;
        background-color: #DBFCE7;
        color: #008236;
        font-weight: 400;
        font-size: 24rpx;
        margin-right: 10rpx;
      }
      .file-icon-pdf{
        background-color: #9033FF;
      }
      .file-icon-excel{
        background-color:#00A5EC;
      }
      .file-icon-excel{
        background-color:#00A762;
      }
      .file-icon-excel{
        background-color:#FF7F00;
      }
      .file-icon-excel{
        background-color:#8440FD;
      }
    }
  }
	.steps-item:last-child {
		margin-bottom: 0;
	}

	.steps-line {
		width: 2rpx;
		background-color: #D9D9D9;
		height: 90rpx;
	}

</style>