crm-mobile/pages_crm/customer/components/customerItem.vue

<template>
  <button class="customer-item" @click="handleDetail">
    <view class="cell">
      <text class="cell-left name">
        {{ itemData.customerName }}
      </text>
      <view
        :class="itemData.dealStatus === 1 ? 'success' : 'waiting'"
        class="cell-right status">
        {{ itemData.dealStatus === 1 ? '已成交' : '未成交' }}
      </view>
    </view>
    <view class="cell">
      <view class="cell-left">
        <view v-if="!isSeas" class="text-info">
          负责人：{{ itemData.ownerUserName }}
        </view>
        <view class="text-info">
          最后跟进时间：{{ itemData.lastTime | formatTime }}
        </view>
        <view v-if="isSeas" class="text-info">
          放入公海时间：{{ itemData.poolTime | formatTime }}
        </view>
        <view v-if="hasLevel" class="text-info">
          客户等级：{{ itemData.level || '--' }}
        </view>
      </view>
      <view class="cell-right">
        <image
          v-if="itemData.businessCount != 0"
          :src="$static('images/icon/money_active.png')"
          class="icon" />
        <image
          v-else
          :src="$static('images/icon/money_default.png')"
          class="icon" />

        <image
          v-if="itemData.star == 1"
          :src="$static('images/icon/star_active.png')"
          class="icon" />
        <image
          v-else
          :src="$static('images/icon/star_default.png')"
          class="icon" />
      </view>
    </view>
  </button>
</template>

<script>
  import moment from 'moment'

  export default {
    name: 'CustomerItem',
    filters: {
      getClassName(status) {
        if (status === 1) return 'wk-check-fill success'
        else return 'wk-close-fill waiting'
      },
      formatTime(val) {
        if (!val) return '--'
        return moment(val).format('YYYY-MM-DD')
      }
    },
    props: {
      itemData: {
        type: Object,
        required: true
      },
      isSeas: {
        type: Boolean,
        default: false
      },
      poolId: {
        type: [String, Number],
        default: null
      }
    },
    data() {
      return {
      }
    },
    computed: {
      hasLevel() {
        return this.itemData.hasOwnProperty('level')
      }
    },
    methods: {
      /**
       * 客户详情跳转
       */
      handleDetail(e) {
        if (!this.$auth('crm.customer.read')) {
          this.$toast('权限不足')
          return
        }
        if (this.isSeas) {
          this.$Router.navigateTo({
            url: '/pages_crm/seas/detail',
            query: {
              id: this.itemData.customerId,
              poolId: this.poolId || this.itemData.poolId
            }
          })
        } else {
          if (!this.$auth('crm.customer.read')) {
            this.$toast('权限不足')
            return
          }
          this.$Router.navigateTo({
            url: '/pages_crm/customer/detail',
            query: {
              id: this.itemData.customerId
            }
          })
        }
      }
    }
  }
</script>

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

.customer-item {
  font-size: 24rpx;
  border-bottom: 1rpx solid $border-color;
  background-color: white;
  padding: 20rpx 32rpx;

  .cell {
    .name {
      font-size: 32rpx;
      color: #212121;
      @include ellipsis;
    }
    .status {
      width: 102rpx;
      height: 46rpx;
      font-size: 24rpx;
      border-radius: 4rpx;
      @include center;
      &.success {
        color: white;
        background-color: #FF7300;
      }

      &.waiting {
        color: #BBBBBB;
        background-color: #EEEEEE;
      }
    }
    .text-info {
      font-size: 26rpx;
      color: $gray;
    }
    .icon {
      width: 32rpx;
      height: 32rpx;
      &:last-child {
        margin-left: 15rpx;
      }
    }
  }
}
</style>