63 lines
1.9 KiB
Vue
63 lines
1.9 KiB
Vue
<template>
|
|
<MobileCard clickable @click="$emit('open', item)">
|
|
<div class="space-y-1">
|
|
<div class="flex items-center justify-between gap-2">
|
|
<span class="truncate font-mono text-sm font-700 text-gray-900">{{ item.code || '-' }}</span>
|
|
<span class="shrink-0 rounded-md border px-1.5 py-0.5 text-xs font-600" :class="statusClass">
|
|
{{ statusLabel }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between gap-2 text-xs text-gray-600">
|
|
<span class="rounded-md border px-1.5 py-0.5 font-600" :class="unitTagClass">{{ unitLabel }}</span>
|
|
<span class="font-600 text-gray-900">{{ amountLabel }}</span>
|
|
</div>
|
|
</div>
|
|
</MobileCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Giftcardcode } from '@/model/giftCard'
|
|
import MobileCard from '@/components/mobile/MobileCard.vue'
|
|
import { metalLabel } from '@/utils/adminMetalLabels'
|
|
|
|
const props = defineProps<{
|
|
item: Giftcardcode
|
|
}>()
|
|
|
|
defineEmits<{
|
|
(e: 'open', item: Giftcardcode): void
|
|
}>()
|
|
|
|
const statusLabel = computed(() => {
|
|
switch (props.item.sts) {
|
|
case 1:
|
|
return 'فعال'
|
|
case 2:
|
|
return 'استفاده شده'
|
|
default:
|
|
return 'غیرفعال'
|
|
}
|
|
})
|
|
|
|
const statusClass = computed(() => {
|
|
switch (props.item.sts) {
|
|
case 1:
|
|
return 'border-amber-300 bg-amber-50 text-amber-700'
|
|
case 2:
|
|
return 'border-green-300 bg-green-50 text-green-700'
|
|
default:
|
|
return 'border-red-300 bg-red-50 text-red-600'
|
|
}
|
|
})
|
|
|
|
const unitLabel = computed(() => (props.item.unit === 2 ? metalLabel.goldWalletShort() : 'ریالی'))
|
|
const unitTagClass = computed(() =>
|
|
props.item.unit === 2
|
|
? 'border-amber-300 bg-amber-50 text-amber-700'
|
|
: 'border-green-300 bg-green-50 text-green-700'
|
|
)
|
|
|
|
const amountLabel = computed(() => `${props.item.amount ?? 0} ${props.item.unit === 2 ? 'گرم' : 'ریال'}`)
|
|
</script>
|