53 lines
1.3 KiB
Vue
53 lines
1.3 KiB
Vue
<script setup>
|
|
import PipelinePhase from '@/components/orders/PipelinePhase.vue';
|
|
|
|
const phases = [
|
|
{
|
|
name: 'Nháp',
|
|
value: 2,
|
|
icon: 'material-symbols:assignment-outline-rounded',
|
|
color: 'yellow',
|
|
index: 1,
|
|
},
|
|
{
|
|
name: 'Đã xác nhận',
|
|
value: 3,
|
|
icon: 'material-symbols:check-circle-outline-rounded',
|
|
color: 'blue',
|
|
index: 2,
|
|
},
|
|
{
|
|
name: 'Đang giao',
|
|
value: 2,
|
|
icon: 'material-symbols:delivery-truck-speed-outline-rounded',
|
|
color: 'orange',
|
|
index: 3,
|
|
},
|
|
{
|
|
name: 'Hoàn thành',
|
|
value: 1,
|
|
icon: 'material-symbols:box-outline-rounded',
|
|
color: 'green',
|
|
index: 4,
|
|
},
|
|
]
|
|
</script>
|
|
<template>
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<p class="fs-17 font-semibold mb-4">Pipeline đơn hàng</p>
|
|
<div class="is-flex is-justify-content-space-evenly">
|
|
<PipelinePhase
|
|
v-for="phase in phases"
|
|
:key="phases.name"
|
|
v-bind="phase"
|
|
/>
|
|
</div>
|
|
<hr class="has-background-grey-lighter" />
|
|
<div class="is-flex is-justify-content-space-between">
|
|
<p>Tổng đơn hàng</p>
|
|
<p class="fs-18 font-semibold">{{ phases.reduce((prev, curr) => prev + curr.value, 0) }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |