crm-mobile/pages_crm/contract/components/contractItem.vue

<template>
  <button class="contract-item" @click="handleDetail">
    <view class="cell">
      <text class="cell-left name">
        {{ itemData.name || '' }}
      </text>
      <view
        :style="{
          color: statusObj.color,
          backgroundColor: statusObj.bg,
        }"
        class="cell-right status">
        {{ statusObj.label }}
      </view>
    </view>

    <template v-if="hasMoney">
      <view class="cell">
        <text class="cell-left text-info">
          {{ itemData.customerName || '' }}
        </text>
      </view>
      <view class="cell">
        <view class="cell-left">
          <view
            class="text-info progress-box">
            <text>回款进度{{ itemData.statusName || '' }}</text>
            <text class="progress-text">
              ({{ itemData.receivedProgress }}%)
            </text>
            <view class="progress">
              <view :style="{width: dataRate}" class="now" />
            </view>
          </view>
        </view>
        <view class="cell-right money">
          ￥{{ splitNumber(itemData.money) }}
        </view>
      </view>
      <view class="cell">
        <view class="cell-left text-info">
          <text>已回款：￥{{ splitNumber(itemData.receivedMoney) }}</text>
          <text class="duration">
            /
          </text>
          <text>待回款：￥{{ splitNumber(itemData.unreceivedMoney) }}</text>
          <text class="duration">
            /
          </text>
          <text>签约时间：{{ itemData.orderDate | formatTime }}</text>
        </view>
      </view>
    </template>

    <template v-else>
      <view class="cell">
        <view class="cell-left text-info">
          <text>创建时间：{{ itemData.createTime | formatTime }}</text>
        </view>
      </view>
    </template>
  </button>
</template>

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

  export default {
    name: 'ContractItem',
    filters: {
      formatTime(val) {
        if (!val) return '--'
        return moment(val).format('YYYY-MM-DD')
      }
    },
    props: {
      itemData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        auth: 'crm.contract.read'
      }
    },
    computed: {
    ...mapGetters({
      calcStatus: 'base/calcStatus'
    }),
    statusObj() {
      return this.calcStatus(this.itemData.checkStatus) || {}
    },
    dataRate() {
      return this.itemData.receivedProgress + '%'
    },
    hasMoney() {
      return this.itemData.hasOwnProperty('money')
    }
    },
    methods: {
      splitNumber(num) {
        return splitNumber(num)
      },
      /**
       * 合同详情跳转
       */
      handleDetail() {
        if (!this.$auth(this.auth)) {
          this.$toast('权限不足')
          return
        }
        this.$Router.navigateTo({
          url: '/pages_crm/contract/detail',
          query: {
            id: this.itemData.contractId
          }
        })
      }
    }
  }
</script>

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

.contract-item {
  border-bottom: 1rpx solid $border-color;
  background-color: white;
  padding: 20rpx 32rpx;

  .cell {
    .name {
      font-size: 32rpx;
      color: #212121;
      @include ellipsis;
    }
    .status {
      width: 116rpx;
      height: 46rpx;
      font-size: 24rpx;
      border-radius: 4rpx;
      @include center;
    }

    .text-info {
      font-size: 26rpx;
      color: $gray;
    }
    .money {
      color: #FF7300;
      font-size: 28rpx;
      font-weight: bold;
    }
    .progress-box {
      @include left;
      .progress-text {
        margin-left: 10rpx;
      }
      .progress {
        width: 160rpx;
        height: 12rpx;
        border-radius: 6rpx;
        background-color: #e1e1e1;
        margin-left: 10rpx;
        overflow: hidden;
        .now {
          height: 12rpx;
          background-color: $theme-color;
        }
      }
    }
    .duration {
      margin: 0 10rpx;
    }
  }
}
</style>