85 lines
2.2 KiB
Vue
85 lines
2.2 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
id: Number,
|
|
code: String,
|
|
employee: Number,
|
|
employee__name: String,
|
|
customer: Number,
|
|
customer__name: String,
|
|
customer__phone: String,
|
|
total: String,
|
|
status: Number,
|
|
status__name: String,
|
|
status__color: String,
|
|
payment_status: Number,
|
|
payment_status__name: String,
|
|
payment_status__color: String,
|
|
delivery_status: Number,
|
|
delivery_status__name: String,
|
|
delivery_status__color: String,
|
|
order__products: Array,
|
|
create_time: String
|
|
});
|
|
|
|
const { $dayjs, $shortenCurrency } = useNuxtApp();
|
|
|
|
</script>
|
|
<template>
|
|
<tr>
|
|
<td>
|
|
<div>
|
|
<p class="fs-15 font-semibold">{{ code }}</p>
|
|
<p class="fs-13 has-text-grey">{{ employee__name }}</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div>
|
|
<p>{{ customer__name }}</p>
|
|
<div class="is-flex is-gap-0.5 is-align-items-center mt-1 fs-13 has-text-grey">
|
|
<Icon name="material-symbols:call-outline-rounded"
|
|
:size="15"
|
|
/>
|
|
<span class="fs-12">{{ customer__phone }}</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="has-text-right">
|
|
<div>
|
|
<p class="font-semibold">{{ $shortenCurrency(total) }}</p>
|
|
<p class="fs-13 has-text-grey">{{ order__products.length }} SP</p>
|
|
</div>
|
|
</td>
|
|
<td class="has-text-centered">
|
|
<span :class="[
|
|
'tag rounded-full',
|
|
`has-background-${status__color}-80 has-text-${status__color}-25`
|
|
]">
|
|
{{ status__name }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<p :class="`has-text-${payment_status__color}-40`">{{ payment_status__name }}</p>
|
|
</td>
|
|
<td>
|
|
<p :class="`has-text-${delivery_status__color}-40`">{{ delivery_status__name }}</p>
|
|
</td>
|
|
<td>
|
|
<div>
|
|
<div class="is-flex is-gap-0.5">
|
|
<Icon :size="18" name="material-symbols:calendar-month-outline-rounded" />
|
|
<span class="fs-13">{{ $dayjs(create_time).format('L') }}</span>
|
|
</div>
|
|
<p class="has-text-grey fs-12">{{ $dayjs(create_time).format('HH:mm') }}</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<button class="button is-dark fs-13 rounded-full">Xác nhận</button>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
<style scoped>
|
|
td {
|
|
vertical-align: middle;
|
|
--bulma-table-cell-padding: 0.75em;
|
|
}
|
|
</style> |