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

<template>
  <view class="section about-receivables">
    <view class="section-title">
      <image :src="$static('images/crm_about/receivables.png')" class="icon" />
      <text class="title">
        回款记录
      </text>
      <view
        v-if="!config.isSeas"
        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"
            @click="handleTo(item.receivablesId)">
            <view class="list-item-info">
              <view class="box">
                <text class="left name">
                  {{ item.receivablesNum }}
                </text>
              </view>
              <view class="box">
                <text class="left text">
                  回款日期  {{ item.returnTime }}
                </text>
                <text class="money">
                  ￥{{ splitNumber(item.receivablesMoney) }}
                </text>
              </view>
              <view class="box">
                <text
                  :style="{
                    color: statusObj(item).color
                  }"
                  class="text">
                  {{ statusObj(item).label }}
                </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 { mapGetters } from 'vuex'

  export default {
    name: 'AboutReceivables',
    props: {
      list: {
        type: Array,
        required: true
      },
      config: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {}
    },
    computed: {
    ...mapGetters({
      calcStatus: 'base/calcStatus'
    }),
    },
    methods: {
      splitNumber(num) {
        return splitNumber(num)
      },

      statusObj(item) {
        return this.calcStatus(item.checkStatus)
      },

      handleAdd() {
        const checkRes = this.$auth('crm.receivables.save')
        if (!checkRes) {
          this.$toast('权限不足！')
          return
        }
        if (!this.config.detail) return
        const type = this.config.type
        const formBridge = {
          default: {
            customerId: [{
              customerId: this.config.detail.customerId,
              customerName: this.config.detail.customerName
            }]
          }
        }
        if (type === 'contract') {
          formBridge.default.contractId = [{
            contractId: this.config.detail.contractId,
            num: this.config.detail.num,
          }]
          formBridge.assignForm = {
            contractId: this.config.detail.contractId
          }
        }

        getApp().globalData.formBridge = formBridge
        this.$Router.navigateTo({
          url: '/pages_crm/receivables/create',
          query: {
            type: 'receivables',
            crmType: this.config.type
          }
        })
      },

      handleTo(id) {
        const checkRes = this.$auth('crm.receivables.read')
        if (!checkRes) {
          this.$toast('权限不足！')
          return
        }
        this.$Router.navigateTo({
          url: '/pages_crm/receivables/detail',
          query: {
            id: id
          }
        })
      },
    }
  }
</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;
        }
        .name {
          font-size: $wk-font-medium;
          font-weight: 500;
          color: $dark;
          line-height: 1.5;
        }
        .money {
          font-size: $wk-font-base;
          font-weight: bold;
          color: $warning;
        }
        .text {
          font-size: 26rpx;
          color: $gray;
        }
      }
    }
  }
  .list-item:last-child {
    .list-item-info {
      border-bottom: 0 none;
    }
  }
}
</style>