84 lines
2.2 KiB
Vue
84 lines
2.2 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 has-background-grey-95" style="height: 2px" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|