90 lines
2.3 KiB
Vue
90 lines
2.3 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
order: Object,
|
|
});
|
|
|
|
const { $dayjs } = useNuxtApp();
|
|
|
|
const historyItems = [
|
|
{
|
|
id: 1,
|
|
name: "Tạo đơn hàng",
|
|
details: "Đơn hàng được tạo",
|
|
icon: "material-symbols:info-outline-rounded",
|
|
color: "blue",
|
|
time: "2026-02-11T08:51:04.587660+07:00",
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Xác nhận",
|
|
details: "Đơn hàng được xác nhận",
|
|
icon: "material-symbols:check-circle-outline-rounded",
|
|
color: "green",
|
|
time: "2026-02-11T10:30:04.587660+07:00",
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "Xuất kho",
|
|
details: "Hàng đã xuất kho",
|
|
icon: "material-symbols:check-circle-outline-rounded",
|
|
color: "green",
|
|
time: "2026-02-11T11:02:04.587660+07:00",
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "Đang giao",
|
|
details: "Tài xế đang giao hàng",
|
|
icon: "material-symbols:info-outline-rounded",
|
|
color: "blue",
|
|
time: "2026-02-11T14:20:04.587660+07:00",
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "Giao hàng",
|
|
details: "Đã giao thành công",
|
|
icon: "material-symbols:check-circle-outline-rounded",
|
|
color: "green",
|
|
time: "2026-02-11T17:38:04.587660+07:00",
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="is-flex is-flex-direction-column is-gap-2">
|
|
<div
|
|
v-for="item in historyItems"
|
|
:key="item.id"
|
|
class="is-flex is-gap-2"
|
|
>
|
|
<div class="is-flex is-flex-direction-column is-align-items-center is-gap-0.5">
|
|
<Icon
|
|
:name="item.icon"
|
|
:size="22"
|
|
:class="`has-text-${item.color}-40`"
|
|
/>
|
|
<div
|
|
class="is-flex-grow-1 has-background-grey-lighter rounded-full"
|
|
style="width: 3px"
|
|
></div>
|
|
</div>
|
|
<div class="is-flex-grow-1">
|
|
<div class="is-flex is-gap-1 is-justify-content-space-between">
|
|
<div>
|
|
<p class="fs-15">{{ item.name }}</p>
|
|
<p class="fs-13 has-text-grey">{{ item.details }}</p>
|
|
</div>
|
|
<p class="is-family-monospace fs-12 has-text-grey">
|
|
{{ $dayjs(item.time).format("HH:mm") }}
|
|
</p>
|
|
</div>
|
|
<hr
|
|
class="mt-4 mb-0"
|
|
style="height: 2px"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|