92 lines
2.9 KiB
Vue
92 lines
2.9 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
invoice: Object,
|
|
});
|
|
|
|
const showModal = ref();
|
|
|
|
function openModal() {
|
|
showModal.value = {
|
|
component: "orders/SelectedOrder",
|
|
title: "Chi tiết đơn hàng",
|
|
width: "min(700px, 75%)",
|
|
vbind: {
|
|
invoice: props.invoice,
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="['card fs-14 is-clickable', `has-background-${invoice.invoice_status__color}-100`]"
|
|
:style="{ border: `1px solid var(--bulma-${invoice.invoice_status__color}-80)` }"
|
|
@click="openModal"
|
|
>
|
|
<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">{{ invoice.code }}</p>
|
|
<span :class="['fs-13', `has-text-${invoice.payment_status__color}-40`]">
|
|
{{ invoice.payment_status__name }}
|
|
</span>
|
|
</div>
|
|
<div class="is-flex is-flex-direction-column is-gap-2">
|
|
<!-- customer info -->
|
|
<div>
|
|
<p class="has-text-grey-20">{{ invoice.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>{{ invoice.customer_phone }}</p>
|
|
</div>
|
|
</div>
|
|
<!-- product info -->
|
|
<div>
|
|
<p class="fs-24 has-text-grey-20 font-bold">
|
|
{{ $shortenCurrency(invoice.final_amount) }}
|
|
</p>
|
|
<p class="fs-13 has-text-grey">{{ invoice.product_amount }} sản phẩm</p>
|
|
</div>
|
|
<hr class="m-0 has-background-grey-85" />
|
|
<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(invoice.create_time).format("L") }}</span>
|
|
<span>•</span>
|
|
<span>{{ $dayjs(invoice.create_time).format("HH:mm") }}</span>
|
|
</p>
|
|
<p>
|
|
NV: <span>{{ invoice.staff__fullname }}</span>
|
|
</p>
|
|
</div>
|
|
<button
|
|
v-if="invoice.invoice_status__code !== 'COMPLETED'"
|
|
:class="[
|
|
'button fs-14 has-text-white',
|
|
invoice.invoice_status__code === 'DRAFT'
|
|
? 'is-primary'
|
|
: invoice.invoice_status__code === 'CONFIRMED'
|
|
? 'is-orange'
|
|
: 'is-success',
|
|
]"
|
|
>
|
|
{{
|
|
invoice.invoice_status__code === "DRAFT"
|
|
? "Xác nhận"
|
|
: invoice.invoice_status__code === "CONFIRMED"
|
|
? "Giao hàng"
|
|
: "Hoàn thành"
|
|
}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<Modal
|
|
v-if="showModal"
|
|
v-bind="showModal"
|
|
@close="showModal = null"
|
|
/>
|
|
</div>
|
|
</template>
|