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

<template>
  <view class="section about-contract">
    <view class="section-title">
      <image :src="$static('images/crm_about/contract.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.contractId)">
            <view class="list-item-info">
              <view class="box">
                <text class="name">
                  {{ item.contractName }}
                </text>
              </view>
              <view class="box">
                <text class="text">
                  已回款 {{ item.receivedMoney ? splitNumber(item.receivedMoney) : 0 }}
                </text>
                <text class="text">
                  待回款 {{ item.unreceivedMoney ? splitNumber(item.unreceivedMoney) : 0 }}
                </text>
              </view>
              <view class="box">
                <view class="progress-box">
                  <text>回款进度</text>
                  <view class="progress">
                    <view :style="{width: (item.receivedProgress || 0) + '%'}" class="now" />
                  </view>
                  <text class="progress-text">
                    {{ item.receivedProgress || 0 }}%
                  </text>
                </view>
                <view class="money">
                  ￥{{ item.unreceivedMoney ? splitNumber(item.unreceivedMoney) : splitNumber(item.money) }}
                </view>
              </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: 'AboutContract',
    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)
      },

      // calcRate(num1, num2) {
      //   let res = Number(num1) / Number(num2) * 100
      //   return (res.toFixed(2) + '%') || '0.00%'
      // },

      handleAdd() {
        const checkRes = this.$auth('crm.contract.save')
        if (!checkRes) {
          this.$toast('权限不足！')
          return
        }
        if (!this.config.detail) return

        const crmType = this.config.type
        if (crmType === 'business') {
          getApp().globalData.formBridge = {
            default: {
              businessId: [{
                businessId: this.config.detail.businessId,
                businessName: this.config.detail.businessName
              }],
              customerId: [{
                customerId: this.config.detail.customerId,
                customerName: this.config.detail.customerName
              }],
              money: this.config.detail.totalPrice
            },
            assignForm: {
              businessId: this.config.detail.businessId
            }
          }
        } if (crmType === 'customer') {
          getApp().globalData.formBridge = {
            default: {
              customerId: [{
                customerId: this.config.detail.customerId,
                customerName: this.config.detail.customerName
              }]
            }
          }
        }

        this.$Router.navigateTo({
          url: '/pages_crm/contract/create',
          query: {
            type: 'contract'
          }
        })
      },

      handleTo(id) {
        const checkRes = this.$auth('crm.contract.read')
        if (!checkRes) {
          this.$toast('权限不足！')
          return
        }
        this.$Router.navigateTo({
          url: '/pages_crm/contract/detail',
          query: {
            id: id
          }
        })
      },
    }
  }
</script>

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

.list {
  padding: 0 32rpx;
  &-item {
    border-bottom: 1rpx solid $border-color;
    @include left;
    &:last-child {
      border-bottom: 0 none;
    }
    &-info {
      flex: 1;
      @include padding;
      .box {
        @include left;
        .name {
          font-size: $wk-font-medium;
          font-weight: 500;
          color: $dark;
          line-height: 1.5;
        }

        .text {
          font-size: $wk-font-sm;
          color: $gray;
          margin-right: 15rpx;
        }
        .status {
          font-size: $wk-font-mini;
          color: $gray;
        }
        .progress-box {
          flex: 1;
          font-size: $wk-font-sm;
          color: $gray;
          @include left;
          .progress-text {
            margin: 0 10rpx;
          }
          .progress {
            width: 160rpx;
            height: 12rpx;
            border-radius: 6rpx;
            background-color: #e1e1e1;
            margin-left: 10rpx;
            overflow: hidden;
            .now {
              height: 12rpx;
              background-color: $theme-color;
            }
          }
        }
        .money {
          font-size: $wk-font-base;
          font-weight: bold;
          color: $warning;
        }
      }
    }
  }
  .list-item:last-child {
    .list-item-info {
      border-bottom: 0 none;
    }
  }
}
</style>