67 lines
2.4 KiB
Vue
67 lines
2.4 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
order: Object
|
|
});
|
|
|
|
const { $dayjs, $shortenCurrency } = useNuxtApp();
|
|
const emit = defineEmits(['selectOrder', 'unselect']);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="[
|
|
'card fs-14 is-clickable',
|
|
`has-background-${order.status__color}-95`
|
|
]"
|
|
:style="{ border: `1px solid var(--bulma-${order.status__color}-60)` }"
|
|
@click="selected ? emit('unselect') : emit('selectOrder', order.id)"
|
|
>
|
|
<div class="card-content p-4">
|
|
<div class="mb-4 is-flex is-justify-content-space-between is-gap-1">
|
|
<p class="fs-15 font-bold">{{ order.code }}</p>
|
|
<span
|
|
:class="['fs-13', `has-text-${order.payment_status__color}-40`]"
|
|
>
|
|
{{ order.payment_status__name }}
|
|
</span>
|
|
</div>
|
|
<div class="is-flex is-flex-direction-column is-gap-2">
|
|
<!-- customer info -->
|
|
<div>
|
|
<p class="has-text-grey-10">{{ order.customer__name }}</p>
|
|
<div class="has-text-grey fs-13 mt-1 is-flex is-gap-1 is-align-items-center">
|
|
<Icon name="material-symbols:call-outline-rounded" />
|
|
<p>{{ order.customer__phone }}</p>
|
|
</div>
|
|
</div>
|
|
<!-- product info -->
|
|
<div>
|
|
<p class="fs-24 has-text-grey-10 font-bold">{{ $shortenCurrency(order.total) }}</p>
|
|
<p class="fs-13 has-text-grey">{{ order.order__products.length }} sản phẩm</p>
|
|
</div>
|
|
<hr class="m-0" />
|
|
<div class="is-flex is-flex-direction-column is-gap-0.5 fs-13 has-text-grey">
|
|
<p class=" is-flex is-align-items-center is-gap-0.5">
|
|
<Icon name="material-symbols:calendar-today-outline-rounded" :size="16" />
|
|
<span>{{ $dayjs(order.create_time).format('L') }}</span>
|
|
<span>•</span>
|
|
<span>{{ $dayjs(order.create_time).format('HH:mm') }}</span>
|
|
</p>
|
|
<p>
|
|
NV: <span>{{ order.employee__name }}</span>
|
|
</p>
|
|
</div>
|
|
<button
|
|
v-if="order.status__name !== 'Hoàn thành'"
|
|
:class="[
|
|
'button fs-14 has-text-white',
|
|
order.status__name === 'Nháp' ? 'is-primary' : order.status__name === 'Đã xác nhận' ? 'is-orange' : 'is-success'
|
|
]"
|
|
>
|
|
{{ order.status__name === 'Nháp' ? 'Xác nhận' : order.status__name === 'Đã xác nhận' ? 'Giao hàng' : 'Hoàn thành' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|