54 lines
1.2 KiB
Vue
54 lines
1.2 KiB
Vue
<script setup>
|
|
import OrderStatusCard from '@/components/dashboard/OrderStatusCard.vue';
|
|
|
|
const statuses = [
|
|
{
|
|
id: 1,
|
|
code: 'pending',
|
|
name: 'Chờ xử lý',
|
|
value: 12,
|
|
color: 'orange',
|
|
icon: 'material-symbols:clock-loader-40'
|
|
},
|
|
{
|
|
id: 2,
|
|
code: 'delivering',
|
|
name: 'Đang giao',
|
|
value: 8,
|
|
color: 'blue',
|
|
icon: 'material-symbols:delivery-truck-speed-outline-rounded'
|
|
},
|
|
{
|
|
id: 3,
|
|
code: 'delivered',
|
|
name: 'Đã giao',
|
|
value: 15,
|
|
color: 'purple',
|
|
icon: 'material-symbols:bucket-check-outline-rounded'
|
|
},
|
|
{
|
|
id: 4,
|
|
code: 'completed',
|
|
name: 'Hoàn thành',
|
|
value: 38,
|
|
color: 'green',
|
|
icon: 'material-symbols:check-circle-outline-rounded'
|
|
},
|
|
]
|
|
</script>
|
|
<template>
|
|
<div class="card h-full">
|
|
<div class="card-content">
|
|
<p class="fs-17 font-semibold mb-4">Trạng thái đơn hàng</p>
|
|
<div class="fixed-grid has-2-cols-mobile has-4-cols">
|
|
<div class="grid">
|
|
<OrderStatusCard
|
|
v-for="status in statuses"
|
|
:key="status.name"
|
|
v-bind="status"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |