54 lines
2.0 KiB
Vue
54 lines
2.0 KiB
Vue
<template>
|
|
<MobileCard clickable @click="$emit('open', item)">
|
|
<div class="space-y-1">
|
|
<div class="flex items-center justify-between gap-2">
|
|
<div class="truncate text-sm font-700 text-gray-900">{{ customerName }}</div>
|
|
<span class="shrink-0 rounded-full px-2 py-0.5 text-[11px] font-600" :class="statusClass">
|
|
{{ statusText }}
|
|
</span>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-gray-600">
|
|
<span>نوع: <span class="font-600 text-gray-900">{{ item.type || '-' }}</span></span>
|
|
<span>مقدار: <span class="font-600 text-gray-900">{{ metalLabel }}</span></span>
|
|
<span>ریال: <span class="font-600 text-gray-900">{{ rialLabel }}</span></span>
|
|
</div>
|
|
<div class="text-xs text-gray-400">{{ createdAtLabel }}</div>
|
|
</div>
|
|
</MobileCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { ZarinRecord } from '@/api/zarin'
|
|
import MobileCard from '@/components/mobile/MobileCard.vue'
|
|
import { toJalali } from '@core/utils/useDataTime'
|
|
import {
|
|
metalAmountLabel,
|
|
rialAmountLabel,
|
|
} from '@/pages/menuPages/accounting/utils/accountingDocAmounts'
|
|
import { zarinStatusLabel } from '@/pages/menuPages/accounting/utils/zarinStatus'
|
|
|
|
const props = defineProps<{
|
|
item: ZarinRecord
|
|
}>()
|
|
|
|
defineEmits<{
|
|
(e: 'open', item: ZarinRecord): void
|
|
}>()
|
|
|
|
const customerName = computed(() => props.item.customer?.name || '-')
|
|
const createdAtLabel = computed(() =>
|
|
props.item.created_at ? toJalali(props.item.created_at) : '-'
|
|
)
|
|
const metalLabel = computed(() => metalAmountLabel(props.item))
|
|
const rialLabel = computed(() => rialAmountLabel(props.item))
|
|
const statusText = computed(() =>
|
|
zarinStatusLabel(props.item.sync_status, props.item.zarin_id)
|
|
)
|
|
const statusClass = computed(() => {
|
|
const text = statusText.value
|
|
if (text === 'موفق') return 'bg-green-100 text-green-700'
|
|
if (text === 'ناموفق') return 'bg-red-100 text-red-700'
|
|
return 'bg-amber-100 text-amber-700'
|
|
})
|
|
</script>
|