138 lines
4.7 KiB
Vue
138 lines
4.7 KiB
Vue
<script setup>
|
|
import OrderDeliveryTab from '@/components/orders/OrderDeliveryTab.vue';
|
|
import OrderHistoryTab from '@/components/orders/OrderHistoryTab.vue';
|
|
import OrderPaymentTab from '@/components/orders/OrderPaymentTab.vue';
|
|
import OrderProductTab from '@/components/orders/OrderProductTab.vue';
|
|
import OrderReceiptTab from '@/components/orders/OrderReceiptTab.vue';
|
|
|
|
const props = defineProps({
|
|
order: Object
|
|
});
|
|
|
|
const { $dayjs, $numtoString } = useNuxtApp();
|
|
const emit = defineEmits(['unselect']);
|
|
|
|
const tabs = [
|
|
{
|
|
name: 'Chi tiết đơn',
|
|
heading: 'Chi tiết sản phẩm',
|
|
icon: 'material-symbols:deployed-code-outline'
|
|
},
|
|
{
|
|
name: 'Giao hàng',
|
|
heading: 'Thông tin giao hàng',
|
|
icon: 'material-symbols:delivery-truck-speed-outline-rounded'
|
|
},
|
|
{
|
|
name: 'Hoá đơn',
|
|
heading: 'Hoá đơn',
|
|
icon: 'material-symbols:receipt-long-outline-rounded'
|
|
},
|
|
{
|
|
name: 'Thanh toán',
|
|
heading: 'Thanh toán',
|
|
icon: 'material-symbols:credit-card-outline'
|
|
},
|
|
{
|
|
name: 'Lịch sử',
|
|
heading: 'Lịch sử đơn hàng',
|
|
icon: 'material-symbols:history-rounded'
|
|
},
|
|
];
|
|
|
|
const activeTab = ref(tabs[0]);
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="order" class="cell relative fs-14">
|
|
<div class="card">
|
|
<button
|
|
@click="emit('unselect')"
|
|
class="button is-white rounded-full has-text-grey absolute size-8 is-flex is-justify-content-center is-align-items-center"
|
|
style="right: 0.5rem; top: 0.5rem;"
|
|
>
|
|
<span class="icon">
|
|
<Icon name="material-symbols:close-rounded" :size="22" />
|
|
</span>
|
|
</button>
|
|
<div class="card-content">
|
|
<div>
|
|
<div class="is-flex is-gap-2 is-align-items-center">
|
|
<span class="fs-17 font-bold">{{ order.code }}</span>
|
|
<span :class="[
|
|
'tag rounded-full',
|
|
`has-background-${order.status__color}-80 has-text-${order.status__color}-25`
|
|
]">
|
|
{{ order.status__name }}
|
|
</span>
|
|
</div>
|
|
<div class="is-flex is-gap-0.5 is-flex-direction-column mt-2">
|
|
<div class="is-flex is-gap-1 is-align-items-center">
|
|
<Icon name="material-symbols:person-outline-rounded" :size="18" />
|
|
<p>{{ order.customer__name }}</p>
|
|
</div>
|
|
<div class="is-flex is-gap-1 is-align-items-center">
|
|
<Icon name="material-symbols:call-outline-rounded" :size="18" />
|
|
<p>{{ order.customer__phone }}</p>
|
|
</div>
|
|
<div class="is-flex is-gap-1 is-align-items-center">
|
|
<Icon name="material-symbols:calendar-today-outline-rounded" :size="18" />
|
|
<p>{{ $dayjs(order.create_time).format('LL') }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 has-background-primary-95 rounded-lg mt-6">
|
|
<p>Tổng giá trị đơn hàng</p>
|
|
<p class="font-bold fs-28">{{ $numtoString(order.total, { hasUnit: true }) }}</p>
|
|
</div>
|
|
</div>
|
|
<hr class="m-0" />
|
|
<div class="buttons m-0">
|
|
<button class="button fs-14 is-flex-grow-1 is-primary">Xác nhận đơn</button>
|
|
<button class="button fs-14 is-flex-grow-1">Ghi thanh toán</button>
|
|
</div>
|
|
<hr class="m-0" />
|
|
<div class="tabs is-toggle m-0 fs-13">
|
|
<ul>
|
|
<li
|
|
v-for="tab in tabs"
|
|
:key="tab.name"
|
|
:class="activeTab.name === tab.name && 'is-active'"
|
|
@click="activeTab = tab"
|
|
>
|
|
<a>{{ tab.name }}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<hr class="m-0" />
|
|
<div id="tab-content">
|
|
<div class="is-flex is-gap-1 mb-4">
|
|
<Icon :name="activeTab.icon" :size="21" />
|
|
<span class="fs-15 font-semibold">{{ activeTab.heading }}</span>
|
|
</div>
|
|
<div>
|
|
<OrderProductTab v-if="activeTab.name === 'Chi tiết đơn'" :order="order" />
|
|
<OrderDeliveryTab v-else-if="activeTab.name === 'Giao hàng'" :order="order" />
|
|
<OrderReceiptTab v-else-if="activeTab.name === 'Hoá đơn'" :order="order" />
|
|
<OrderPaymentTab v-else-if="activeTab.name === 'Thanh toán'" :order="order" />
|
|
<OrderHistoryTab v-else-if="activeTab.name === 'Lịch sử'" :order="order" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.card-content {
|
|
padding: 0; /* 1.5rem */
|
|
|
|
> div {
|
|
padding: var(--bulma-card-content-padding);
|
|
}
|
|
}
|
|
|
|
.tabs {
|
|
--bulma-tabs-toggle-link-active-background-color: var(--bulma-link-90);
|
|
--bulma-tabs-toggle-link-active-border-color: var(--bulma-link-90);
|
|
--bulma-tabs-toggle-link-active-color: var(--bulma-link-40);
|
|
}
|
|
</style> |