Refine order code and calendar cards

This commit is contained in:
Ruslan Bakiev
2026-04-04 15:27:00 +07:00
parent 309d0e78db
commit e20565b4ae
6 changed files with 167 additions and 9 deletions

View File

@@ -1,5 +1,6 @@
<script setup lang="ts">
import OrderStatusBadge from '~/components/orders/OrderStatusBadge.vue';
import { formatOrderCode } from '~/composables/useOrderCodePresentation';
import { formatPrice } from '~/composables/useOrderDetailPresentation';
type OrderCardItem = {
@@ -63,6 +64,7 @@ function createProductCover(name: string, seedKey: string) {
const visibleItems = computed(() => props.items.slice(0, 4));
const hiddenCount = computed(() => Math.max(props.items.length - visibleItems.value.length, 0));
const totalPriceLabel = computed(() => formatPrice(props.totalPrice) ?? '—');
const codeLabel = computed(() => formatOrderCode(props.code));
</script>
<template>
@@ -72,7 +74,7 @@ const totalPriceLabel = computed(() => formatPrice(props.totalPrice) ?? '—');
>
<div class="grid gap-4 md:grid-cols-4 md:items-center md:gap-6">
<div class="min-w-0">
<h2 class="truncate text-lg font-bold text-[#123824]">{{ code }}</h2>
<h2 class="truncate text-lg font-bold text-[#123824]">{{ codeLabel }}</h2>
<p class="mt-1 text-sm text-[#688676]">{{ formatCreatedAt(createdAt) }}</p>
</div>