crm-mobile/pages_message/backlog/detailReceivablesItem.vue

<template>
  <view class="list-item" @click="handleToDetail">
    <view class="list-item-main">
      <text class="left">
        {{ itemData.number }}
      </text>
      <text
        class="right status"
        :style="{color: statusObj.color }">
        {{ statusObj.label }}
      </text>
    </view>
    <view class="list-item-desc">
      <text class="left">
        {{ itemData.customerName }}
      </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: 'DetailReceivablesItem',
    props: {
      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/receivables/detail',
          query: {
            id: this.itemData.receivablesId
          }
        })
      }
    }
  }
</script>

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

  .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;
  }
</style>