All files / src/components/feature PipelineCard.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
32
33
34
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { formatDetailMoney } from '@/utils/money'
import type { PipelineItem } from '@/api/types'
 
defineProps<{
  item: PipelineItem
}>()
 
const { t } = useI18n()
 
/** 失效/保留不应当作待发金额：配色按语义状态分流 */
function statusClass(status: PipelineItem['status']): string {
  if (status === 'LAPSED') return 'text-brand-600'
  if (status === 'RETAINED' || status === 'UNKNOWN') return 'text-slate-500'
  return 'text-amber-600'
}
</script>
 
<template>
  <div class="rounded-2xl border border-silver-200 bg-white p-4 shadow-card">
    <div class="flex items-center justify-between">
      <div>
        <div class="text-sm font-medium tracking-tight">{{ item.policyNo }}</div>
        <div class="mt-1 text-xs text-slate-500">{{ t('pipeline.payoutMonth') }} {{ item.payoutMonth }}</div>
      </div>
      <div class="text-right">
        <div class="tnum text-sm font-semibold">{{ formatDetailMoney(item.expectedAmount, item.currency) }}</div>
        <div class="mt-1 text-xs font-medium" :class="statusClass(item.status)">{{ t(`stage.${item.status}`) }}</div>
      </div>
    </div>
  </div>
</template>