64 lines
2.3 KiB
Vue
64 lines
2.3 KiB
Vue
<template>
|
|
<MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="sheetTitle">
|
|
<template #default="{ item: row }">
|
|
<MobileSheetHeader :title="sheetTitle" :subtitle="dateTimeLabel(row)" :show-title="isMobile" />
|
|
|
|
<div class="space-y-2">
|
|
<MobileStatCard bordered variant="success" label="قیمت هر گرم طلا برای مشتری (ریال)" :value="usePrice(row.price ?? 0, true, '')">
|
|
<template #prefix>
|
|
<BaseIcon icon="vuesax-linear:empty-wallet" size="18" color="#15803d" />
|
|
</template>
|
|
</MobileStatCard>
|
|
</div>
|
|
|
|
<MobileInfoGrid>
|
|
<MobileDetailRow label="کد قیمت" :value="row.id ?? '-'" />
|
|
<MobileDetailRow label="کد کاربری" :value="row.user_id ?? '-'" />
|
|
<MobileDetailRow label="نام و نام خانوادگی" full-width :value="row.user?.name || '-'" />
|
|
<MobileDetailRow label="تاریخ ثبت" :value="dateLabel(row)" />
|
|
<MobileDetailRow label="زمان ثبت" :value="row.time_at || '-'" />
|
|
</MobileInfoGrid>
|
|
</template>
|
|
</MobileDetailSheet>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Price } from '@/model/price'
|
|
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 { toJalaliNoTime } from '@core/utils/useDataTime'
|
|
import { usePrice } from '@core/utils/usePrice'
|
|
|
|
const props = defineProps<{
|
|
visible: boolean
|
|
item: Price | 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?.user?.name || `قیمت #${props.item?.id ?? '-'}`)
|
|
|
|
function dateLabel(row: Price) {
|
|
return row.created_at ? toJalaliNoTime(row.created_at) : '-'
|
|
}
|
|
|
|
function dateTimeLabel(row: Price) {
|
|
const date = dateLabel(row)
|
|
const time = row.time_at
|
|
if (date === '-' && !time) return '-'
|
|
if (!time) return date
|
|
return `${date} · ${time}`
|
|
}
|
|
</script>
|