crm-mobile/pages_crm/components/tabAbout/aboutReceivablesPlan.vue

<template>
  <view class="section about-receivables-plan">
    <view class="section-title">
      <image :src="$static('images/crm_about/receivables.png')" class="icon" />
      <text class="title">
        回款计划
      </text>
      <view
        class="add-btn"
        @click="handleAdd">
        <text class="wk wk-plus icon-add" />
        <text>新建</text>
      </view>
    </view>

    <view class="section-body">
      <template v-if="list.length > 0">
        <view class="list">
          <view v-for="(item, index) in list" :key="index" class="list-item">
            <view class="list-item-info">
              <view class="box">
                <text class="left main">
                  {{ item.num }}期
                </text>
                <text class="text">
                  回款方式：{{ item.returnType }}
                </text>
              </view>
              <view class="box">
                <text class="left text">
                  计划回款日 {{ formatTime(item.returnDate) }}
                </text>
                <text class="special">
                  ￥{{ splitNumber(item.money) }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-else>
        <view class="no-data">
          暂无数据
        </view>
      </template>
    </view>
  </view>
</template>

<script>
  import { splitNumber } from '@/utils/lib.js'
  import moment from 'moment'

  export default {
    name: 'AboutReceivablesPlan',
    props: {
      list: {
        type: Array,
        required: true
      },
      config: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {}
    },
    methods: {
      formatTime(date) {
        if (!date) return '--'
        return moment(date).format('YYYY-MM-DD')
      },
      splitNumber(num) {
        return splitNumber(num)
      },
      handleAdd() {
        const crmType = this.config.type

        if (crmType === 'contract') {
          getApp().globalData.formBridge = {
            default: {
              contractId: [{
                contractId: this.config.detail.contractId,
                num: this.config.detail.num
              }],
              customerId: [{
                customerId: this.config.detail.customerId,
                customerName: this.config.detail.customerName
              }]
            },
            assignForm: {
              businessId: this.config.detail.businessId
            }
          }
        }

        this.$Router.navigateTo({
          url: '/pages_crm/receivables_plan/create'
        })
      }
    }
  }
</script>

<style scoped lang="scss">
@import './style.scss';

.list {
  padding: 0 32rpx;
  &-item {
    @include left;
    &-info {
      flex: 1;
      border-bottom: 1rpx solid $border-color;
      @include padding;
      .box {
        @include left;
        .left {
          flex: 1;
        }
        .main {
          font-size: $wk-font-medium;
          color: $dark;
          line-height: 2;
        }
        .special {
          font-size: $wk-font-sm;
          color: $warning;
          font-weight: bold;
        }
        .text {
          font-size: 26rpx;
          color: $gray;
        }
      }
    }
  }
  .list-item:last-child {
    .list-item-info {
      border-bottom: 0 none;
    }
  }
}
</style>