62 lines
1.9 KiB
Vue
62 lines
1.9 KiB
Vue
<script setup>
|
|
import { capitalize } from "es-toolkit";
|
|
|
|
const props = defineProps({
|
|
invoice: Object,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="is-flex is-flex-direction-column is-gap-2">
|
|
<div
|
|
class="p-4 rounded-md has-background-primary-95 is-flex is-justify-content-space-between is-align-items-center"
|
|
>
|
|
<div>
|
|
<p class="fs-14 has-text-grey-40">Mã giao hàng</p>
|
|
<p class="is-flex is-gap-1 is-align-items-center">
|
|
<span class="font-semibold">{{ invoice.delivery__tracking_code }}</span>
|
|
<button
|
|
class="button is-ghost is-small p-0 rounded-full"
|
|
@click="$copyToClipboard(invoice.delivery__tracking_code)"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:content-copy-outline-rounded"
|
|
:size="17"
|
|
/>
|
|
</span>
|
|
</button>
|
|
</p>
|
|
</div>
|
|
<p class="font-medium has-text-primary-50">
|
|
{{ capitalize(invoice.delivery__delivery_status__name) }}
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="rounded-md has-background-grey-100"
|
|
style="border: 1px solid var(--bulma-grey-90)"
|
|
>
|
|
<div class="p-4">
|
|
<p class="fs-14 has-text-grey-40">Địa chỉ giao hàng</p>
|
|
<p class="font-medium">{{ invoice.shipping_address }}</p>
|
|
</div>
|
|
<hr
|
|
class="m-0 has-background-grey-90"
|
|
style="height: 1px"
|
|
/>
|
|
<div class="p-4">
|
|
<p class="fs-14 has-text-grey-40">Người nhận</p>
|
|
<p class="font-medium">{{ invoice.delivery__receiver_name }}</p>
|
|
</div>
|
|
<hr
|
|
class="m-0 has-background-grey-90"
|
|
style="height: 1px"
|
|
/>
|
|
<div class="p-4">
|
|
<p class="fs-14 has-text-grey-40">Số điện thoại</p>
|
|
<p class="font-medium">{{ invoice.delivery__receiver_phone }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|