change responsive]

2026-05-31 11:51:52 +03:30
parent 06568c5858
commit 023b8ee5be
124 changed files with 6296 additions and 4233 deletions
@@ -0,0 +1,101 @@
+<template>
+  <MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="sheetTitle">
+    <template #default="{ item: row }">
+      <MobileSheetHeader :title="sheetTitle" :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 class="rounded-lg border px-2 py-0.5 text-xs font-600" :class="statusClass(row)">
+          {{ statusLabel(row) }}
+        </span>
+      </div>
+
+      <MobileStatCard bordered label="مقدار" :value="amountLabel(row)">
+        <template #prefix>
+          <BaseIcon
+            :icon="row.unit === 2 ? 'vuesax-linear:coin' : 'vuesax-linear:empty-wallet'"
+            size="18"
+            color="#2563eb"
+          />
+        </template>
+      </MobileStatCard>
+
+      <MobileInfoGrid>
+        <MobileDetailRow label="کد" full-width :value="row.code || '-'" />
+        <MobileDetailRow label="تاریخ انقضا" full-width :value="dateLabel(row.expiry_date)" />
+        <MobileDetailRow label="تاریخ استفاده" full-width :value="dateLabel(row.used_at)" />
+        <MobileDetailRow label="نام کاربر" full-width :value="row.assigned_to?.name || '-'" />
+        <MobileDetailRow label="موبایل کاربر" full-width :value="row.assigned_to?.mobile || '-'" />
+      </MobileInfoGrid>
+    </template>
+  </MobileDetailSheet>
+</template>
+
+<script setup lang="ts">
+import type { Giftcardcode } 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 } from '@core/utils/useDataTime'
+
+const props = defineProps<{
+  visible: boolean
+  item: Giftcardcode | 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?.code || 'کد کارت هدیه')
+
+function statusLabel(row: Giftcardcode) {
+  switch (row.sts) {
+    case 1:
+      return 'فعال'
+    case 2:
+      return 'استفاده شده'
+    default:
+      return 'غیرفعال'
+  }
+}
+
+function statusClass(row: Giftcardcode) {
+  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 unitLabel(row: Giftcardcode) {
+  return row.unit === 2 ? 'طلایی' : 'ریالی'
+}
+
+function unitTagClass(row: Giftcardcode) {
+  return row.unit === 2
+    ? 'border-amber-300 bg-amber-50 text-amber-700'
+    : 'border-green-300 bg-green-50 text-green-700'
+}
+
+function amountLabel(row: Giftcardcode) {
+  return `${row.amount ?? 0} ${row.unit === 2 ? 'گرم' : 'ریال'}`
+}
+
+function dateLabel(value?: string) {
+  return value ? toJalali(value) : '-'
+}
+</script>