35 lines
996 B
Vue
35 lines
996 B
Vue
<script setup>
|
|
import AvatarBox from "@/components/dashboard/AvatarBox.vue";
|
|
|
|
const props = defineProps({
|
|
name: String,
|
|
status: String,
|
|
deliveries: Number,
|
|
deliveries_completed: Number,
|
|
});
|
|
</script>
|
|
<template>
|
|
<div
|
|
class="is-flex is-gap-2 fs-14 p-3 rounded-lg"
|
|
:style="{
|
|
border: '1px solid var(--bulma-grey-80)',
|
|
}"
|
|
>
|
|
<AvatarBox :text="name.slice(0, 2)" />
|
|
<div class="is-flex-grow-1">
|
|
<div class="is-flex is-gap-1 is-align-items-center">
|
|
<p>{{ name }}</p>
|
|
<span :class="['tag', status === 'Đang giao' ? 'is-warning' : 'is-success']">{{ status }}</span>
|
|
</div>
|
|
<p class="fs-13 has-text-grey">Đơn: {{ deliveries_completed }}/{{ deliveries }}</p>
|
|
<progress
|
|
v-if="deliveries !== deliveries_completed"
|
|
class="progress is-small is-primary mt-2"
|
|
style="--bulma-size-small: 0.4rem"
|
|
:value="deliveries_completed"
|
|
:max="deliveries"
|
|
></progress>
|
|
</div>
|
|
</div>
|
|
</template>
|