changes

app/components/orders/OrderProductTab.vue

@@ -0,0 +1,34 @@
+<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-grey-95 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-50 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>