124 lines
4.4 KiB
Vue
124 lines
4.4 KiB
Vue
<template>
|
|
<MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="sheetTitle">
|
|
<template #default="{ item: row }">
|
|
<MobileSheetHeader :title="sheetTitle" :subtitle="createdAtLabel(row)" :show-title="isMobile" />
|
|
|
|
<div class="flex items-center gap-2">
|
|
<span class="rounded-lg border px-2 py-0.5 text-xs font-600" :class="unitTagClass(row)">
|
|
{{ unitLabel(row) }}
|
|
</span>
|
|
<span
|
|
v-if="row.sts_str"
|
|
class="rounded-lg border px-2 py-0.5 text-xs font-600"
|
|
:class="statusClass(row)"
|
|
>
|
|
{{ row.sts_str }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<MobileStatCard bordered variant="success" :label="amountLabel(row)" :value="amountValue(row)">
|
|
<template #prefix>
|
|
<BaseIcon
|
|
:icon="row.unit === 2 ? 'vuesax-linear:coin' : 'vuesax-linear:empty-wallet'"
|
|
size="18"
|
|
color="#15803d"
|
|
/>
|
|
</template>
|
|
</MobileStatCard>
|
|
<MobileStatCard
|
|
v-if="row.unit !== 2"
|
|
bordered
|
|
label="مبلغ کل (ریال)"
|
|
:value="usePrice(row.total ?? 0, true, '')"
|
|
>
|
|
<template #prefix>
|
|
<BaseIcon icon="vuesax-linear:money-send" size="18" color="#2563eb" />
|
|
</template>
|
|
</MobileStatCard>
|
|
</div>
|
|
|
|
<MobileInfoGrid>
|
|
<MobileDetailRow label="کد" :value="row.id ?? '-'" />
|
|
<MobileDetailRow label="تعداد کدها" :value="row.count ?? '-'" />
|
|
<MobileDetailRow label="تعداد استفاده شده" full-width :value="row.used_count ?? '-'" />
|
|
<MobileDetailRow label="کد یکتا" full-width :value="row.unique_code || '-'" />
|
|
<MobileDetailRow label="نام مشتری" full-width :value="row.customer?.name || '-'" />
|
|
<MobileDetailRow label="موبایل مشتری" full-width :value="row.customer?.mobile ?? '-'" />
|
|
<MobileDetailRow label="تاریخ ثبت" full-width :value="createdAtLabel(row)" />
|
|
<MobileDetailRow label="تاریخ انقضا" full-width :value="expiryLabel(row)" />
|
|
<MobileDetailRow label="توضیحات" full-width :value="row.description || '-'" />
|
|
</MobileInfoGrid>
|
|
</template>
|
|
</MobileDetailSheet>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Giftcard } from '@/model/giftCard'
|
|
import MobileDetailRow from '@/components/mobile/MobileDetailRow.vue'
|
|
import MobileDetailSheet from '@/components/mobile/MobileDetailSheet.vue'
|
|
import MobileInfoGrid from '@/components/mobile/MobileInfoGrid.vue'
|
|
import MobileSheetHeader from '@/components/mobile/MobileSheetHeader.vue'
|
|
import MobileStatCard from '@/components/mobile/MobileStatCard.vue'
|
|
import { isMobile } from '@core/utils/is'
|
|
import { toJalali, toJalaliNoTime } from '@core/utils/useDataTime'
|
|
import { usePrice } from '@core/utils/usePrice'
|
|
import { metalLabel } from '@/utils/adminMetalLabels'
|
|
|
|
type GiftCardRow = Giftcard & { customer?: { name?: string; mobile?: string } }
|
|
|
|
const props = defineProps<{
|
|
visible: boolean
|
|
item: GiftCardRow | null
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:visible', value: boolean): void
|
|
}>()
|
|
|
|
const visibleProxy = computed({
|
|
get: () => props.visible,
|
|
set: (value: boolean) => emit('update:visible', value)
|
|
})
|
|
|
|
const sheetTitle = computed(() => props.item?.unique_code || `کارت هدیه #${props.item?.id ?? '-'}`)
|
|
|
|
function unitLabel(row: GiftCardRow) {
|
|
return row.unit === 2 ? metalLabel.goldWalletShort() : 'ریالی'
|
|
}
|
|
|
|
function unitTagClass(row: GiftCardRow) {
|
|
return row.unit === 2
|
|
? 'border-amber-300 bg-amber-50 text-amber-700'
|
|
: 'border-green-300 bg-green-50 text-green-700'
|
|
}
|
|
|
|
function statusClass(row: GiftCardRow) {
|
|
switch (row.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'
|
|
}
|
|
}
|
|
|
|
function amountLabel(row: GiftCardRow) {
|
|
return row.unit === 2 ? 'مقدار (گرم)' : 'مقدار (ریال)'
|
|
}
|
|
|
|
function amountValue(row: GiftCardRow) {
|
|
if (row.unit === 2) return `${row.amount ?? 0} گرم`
|
|
return usePrice(row.amount ?? 0, true, '')
|
|
}
|
|
|
|
function createdAtLabel(row: GiftCardRow) {
|
|
return row.created_at ? toJalali(row.created_at) : '-'
|
|
}
|
|
|
|
function expiryLabel(row: GiftCardRow) {
|
|
return row.expiry_date ? toJalali(row.expiry_date) : '-'
|
|
}
|
|
</script>
|