crm-mobile/pages_message/backlog/detailContractItem.vue

<template>
  <view class="list-item" @click="handleToDetail">
    <view class="list-item-main">
      <text class="left">
        {{ itemData.name }}
      </text>
      <text
        :style="{
          color: statusObj.color,
          backgroundColor: statusObj.bg,
        }"
        class="right status">
        {{ statusObj.label }}
      </text>
    </view>
    <view class="list-item-desc">
      <text class="left customer-name">
        {{ itemData.customerName }}
      </text>
    </view>
    <view
      v-if="type === 7"
      class="list-item-desc">
      <text class="right">
        到期时间：<text class="end-time">
          {{ itemData.endTime || '' }}
        </text>
      </text>
    </view>
    <view class="list-item-desc">
      <text class="left money">
        ￥{{ itemData.money }}
      </text>
    </view>
  </view>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    name: 'DetailContractItem',
    props: {
      type: {
        type: Number,
        default: null
      },
      itemData: {
        type: Object,
        required: true
      }
    },
    computed: {
      ...mapGetters({
        calcStatus: 'base/calcStatus'
      }),
			statusObj() {
				return this.calcStatus(this.itemData.checkStatus) || {}
			}
    },
    methods: {
      handleToDetail() {
        this.$Router.navigateTo({
          url: '/pages_crm/contract/detail',
          query: {
            id: this.itemData.contractId
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "detailItem";

  .list-item-desc {
    margin-top: 15rpx !important;
    line-height: 1.2;
  }
  .status {
    font-size: 26rpx !important;
    font-weight: 500;
    line-height: normal;
    padding: 5rpx 18rpx;
    border-radius: 4rpx;
    @include center;
  }

  .customer-name {
    color: $gray;
    @include ellipsis;
  }
  .money {
    font-size: 28rpx;
    color: #FF7812;
    font-weight: bold;
  }

  .end-time {
    color: red;
  }
</style>