opms_wechat/frontend_mobile/pages/contract/components/contractCollection.vue

<template>
  <view class="todo-list">
    <u-empty mode="list" text="暂无记录" v-if="collectList.length == 0"></u-empty>
    <view v-else v-for="(v, i) in collectList" :key="i" class="todo-item">
      <view class="cust-name">
        <u-text :bold="true" size="28rpx" :text="v.custName"></u-text>
      </view>
      <u-row>
        <u-col span="12">
          <view class="header">
            <view class="content flex">
              <text>回款金额:{{ formatPrice(v.collectionAmount) }}</text>
            </view>
            <view class="content flex">
              <text>回款方式:{{ collectionTypeOption.filter((item) => item.key == v.collectionType)[0].value || '-' }}</text>
            </view>
            <view class="content flex">
              <text>合同编号:{{ v.contractCode }}</text>
            </view>
            <view class="content-footer flex1">
              <text class="date">{{ v.collectionDatetime }}</text>
              <view class="flex flex-middle">
                <text>审核状态:{{ v.approStatus == '10' ? '未回款' : '已回款' }}</text>
              </view>
            </view>
          </view>
        </u-col>
      </u-row>
    </view>
  </view>
</template>

<script>
  import to from 'await-to-js'
  import api from '@/api/contract'
  export default {
    name: 'OmsContractCollection',
    props: {
      contractId: {
        type: [String, Number],
        default: '0',
      },
    },
    data() {
      return {
        collectList: [],
        collectionTypeOption: [], //,回款方式
      }
    },
    created() {
      this.getOptions()
    },
    mounted() {
      this.fetchData()
    },
    methods: {
      async getOptions() {
        Promise.all([this.getDicts('collection_type')])
          .then(([collectionType]) => {
            this.collectionTypeOption = collectionType.data.values || []
          })
          .catch((err) => console.log(err))
      },
      async fetchData() {
        const [err, res] = await to(api.getRePay({
          contractId: this.contractId,
          pageNum: 0
        }))
        if (err) return
        this.collectList = res.data.list
      }
    }
  }
</script>

<style lang="scss" scoped>
  .todo-list {
    height: 100%;
    overflow: auto;

    .cust-name {
      font-size: 28rpx;
    }

    .todo-item {
      padding: 12rpx 40rpx 12rpx 46rpx;
      background: #f2f3f5;
      border-radius: 15rpx;
      margin-bottom: 32rpx;

      .tit-txt {
        font-size: 28rpx;
        font-weight: bold;
        color: #323232;
      }

      .content {
        margin-top: 10rpx;
        font-size: 28rpx;
        color: #646464;
      }

      .content-footer {
        padding: 10rpx 0 12rpx 0;
        font-size: 24rpx;

        .date {
          color: #969696;
        }

        .user-img {
          width: 46rpx;
          height: 46rpx;
          border-radius: 50%;
          margin-right: 15rpx;
        }
      }
    }
  }
</style>