Refine order code and calendar cards
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user