56 lines
1.3 KiB
Vue
56 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>
|