All files / src/components/feature CustomerCard.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import Badge from '@/components/common/Badge.vue'
import type { Customer, CustomerStage } from '@/api/types'
 
defineProps<{
  customer: Customer
}>()
 
const { t } = useI18n()
 
/** 生效绿 / 跟进中琥珀 / 暂缓与未知灰 / 未成功红 */
function toneOf(stage: CustomerStage): 'success' | 'warning' | 'neutral' | 'danger' {
  if (stage === 'EFFECTIVE') return 'success'
  if (stage === 'IN_PROGRESS') return 'warning'
  if (stage === 'DELAYED' || stage === 'UNKNOWN') return 'neutral'
  return 'danger'
}
</script>
 
<template>
  <div class="rounded-2xl border border-silver-200 bg-white p-4 shadow-card">
    <div class="flex items-center justify-between gap-3">
      <div class="truncate text-sm font-medium tracking-tight text-slate-900">{{ customer.name }}</div>
      <Badge :tone="toneOf(customer.stage)">{{ t(`customerStage.${customer.stage}`) }}</Badge>
    </div>
    <div v-if="customer.productName" class="mt-2 truncate text-xs text-slate-500">{{ customer.productName }}</div>
    <div v-if="customer.mobile" class="tnum mt-1 text-xs text-slate-400">{{ customer.mobile }}</div>
  </div>
</template>