changes

app/components/orders/OrderProductTab.vue

@@ -1,39 +1,66 @@
 <script setup>
 const props = defineProps({
-  order: Object,
+  invoice: Object,
 });
 
-const { $numtoString } = useNuxtApp();
+const { $getdata, $numtoString } = useNuxtApp();
+const invoiceDetails = ref([]);
+onMounted(async () => {
+  invoiceDetails.value = await $getdata("Invoice_Detail", { filter: { invoice: props.invoice.id } });
+});
 </script>
 
 <template>
   <div>
+    <pre class="fs-12 max-h-40 mb-2">{{ invoiceDetails }}</pre>
     <div class="is-flex is-flex-direction-column is-gap-2">
       <div
-        v-for="product in order.order__products"
-        :key="product.id"
+        v-for="invoiceDetail in invoiceDetails"
+        :key="invoiceDetail.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>{{ invoiceDetail.variant__product__name }}</p>
+          <p class="font-semibold">
+            {{ $numtoString(invoiceDetail.price, { 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>SL: {{ invoiceDetail.quantity }}</p>
+          <p>Đơn giá: {{ $numtoString(invoiceDetail.price, { hasUnit: true }) }}</p>
           <p>
             Giảm:
-            {{ new Intl.NumberFormat("vi-VN", { style: "percent" }).format(product.discount) }}
+            {{ new Intl.NumberFormat("vi-VN", { style: "percent" }).format(invoiceDetail.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>
+    <table class="table is-fullwidth is-bordered fs-14 mb-8">
+      <tbody class="has-text-right">
+        <tr>
+          <td class="has-text-grey-dark">Tổng tiền hàng</td>
+          <td>{{ $numtoString(invoice.total_amount, { hasUnit: true }) }}</td>
+        </tr>
+        <tr>
+          <td class="has-text-grey-dark">Phí vận chuyển</td>
+          <td>{{ $numtoString(invoice.shipping_fee, { hasUnit: true }) }}</td>
+        </tr>
+        <tr>
+          <td class="has-text-grey-dark">Giảm giá</td>
+          <td>{{ $numtoString(invoice.discount_amount, { hasUnit: true }) }}</td>
+        </tr>
+        <tr class="font-bold">
+          <td>Tổng cộng</td>
+          <td class="fs-17">{{ $numtoString(invoice.final_amount, { hasUnit: true }) }}</td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </template>
+
+<style scoped>
+table td {
+  vertical-align: middle;
+}
+</style>