40 lines
1.2 KiB
Vue
40 lines
1.2 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
order: Object,
|
|
});
|
|
|
|
const { $numtoString } = useNuxtApp();
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="is-flex is-flex-direction-column is-gap-2">
|
|
<div
|
|
v-for="product in order.order__products"
|
|
:key="product.id"
|
|
class="p-3 has-background-white-ter rounded-md"
|
|
>
|
|
<div class="fs-15 is-flex is-justify-content-space-between">
|
|
<p class="">{{ product.name }}</p>
|
|
<p class="font-bold">
|
|
{{ $numtoString(product.total, { hasUnit: true }) }}
|
|
</p>
|
|
</div>
|
|
<div class="is-flex is-gap-8 fs-13 has-text-grey-dark mt-1">
|
|
<p>SL: {{ product.quantity }}</p>
|
|
<p>Đơn giá: {{ $numtoString(product.unit_price, { hasUnit: true }) }}</p>
|
|
<p>
|
|
Giảm:
|
|
{{ new Intl.NumberFormat("vi-VN", { style: "percent" }).format(product.discount) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="font-bold is-flex is-gap-2 is-justify-content-space-between is-align-items-center">
|
|
<p class="fs-15">Tổng cộng</p>
|
|
<p class="fs-18">{{ $numtoString(order.total, { hasUnit: true }) }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|