changes

app/components/pos/ConfirmOrder.vue

@@ -0,0 +1,138 @@
+<script setup>
+import ProductCard from "~/components/pos/ProductCard.vue";
+
+const props = defineProps({
+  customer: Object,
+  address: Object,
+  paymentMethod: Object,
+});
+
+const { $insertapi } = useNuxtApp();
+const id = "confirmOrder";
+const store = useStore();
+const subtotal = computed(() => {
+  return store.selectedImeis.reduce((prev, curr) => prev + curr.variant__price, 0);
+});
+const shipping_address = computed(() => {
+  return `${props.address.address_detail}, ${props.address.ward}, ${props.address.district}, ${props.address.city}`;
+});
+
+async function createOrder() {
+  const order = await $insertapi("Invoice", {
+    data: {
+      customer: props.customer.id,
+      customer_name: props.customer.fullname,
+      customer_phone: props.customer.phone,
+      customer_email: props.customer.email,
+      shipping_address,
+      product_amount: store.selectedImeis.length,
+    },
+  });
+}
+</script>
+
+<template>
+  <div :id="id">
+    <div class="card">
+      <div class="card-content has-background-primary-100">
+        <p class="icon-text font-semibold mb-2">
+          <span class="icon">
+            <Icon
+              name="material-symbols:supervisor-account-outline-rounded"
+              :size="18"
+            />
+          </span>
+          <span>Khách hàng</span>
+        </p>
+        <div>
+          <p>{{ props.customer.fullname }}</p>
+          <p class="is-size-7 has-text-grey">
+            {{ props.customer.phone }}
+            •
+            {{ props.customer.email }}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="card">
+      <div class="card-content has-background-primary-100">
+        <p class="icon-text font-semibold mb-2">
+          <span class="icon">
+            <Icon
+              name="material-symbols:shopping-cart-outline-rounded"
+              :size="18"
+            />
+          </span>
+          <span>{{ store.selectedImeis.length }} sản phẩm</span>
+        </p>
+        <div class="is-flex is-flex-direction-column is-gap-1">
+          <ProductCard
+            v-for="imei in store.selectedImeis"
+            :key="imei.id"
+            :imei="imei"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="card">
+      <div class="card-content has-background-primary-100">
+        <p class="icon-text font-semibold mb-2">
+          <span class="icon">
+            <Icon
+              name="material-symbols:credit-card-outline"
+              :size="18"
+            />
+          </span>
+          <span>Thanh toán</span>
+        </p>
+        <div>
+          <div class="block is-flex is-justify-content-space-between">
+            <span>Phương thức thanh toán</span>
+            <span>{{ props.paymentMethod.name }}</span>
+          </div>
+          <table class="table is-fullwidth fs-13">
+            <tbody>
+              <tr>
+                <td>
+                  <span>Tạm tính</span>
+                  <span> ({{ store.selectedImeis.length }} sản phẩm)</span>
+                </td>
+                <td class="has-text-right">{{ $numtoString(subtotal, { hasUnit: true }) }}</td>
+              </tr>
+              <tr>
+                <td class="font-bold fs-14">Tổng cộng</td>
+                <td class="has-text-right has-text-success-35 font-bold fs-17">
+                  {{ $numtoString(subtotal, { hasUnit: true }) }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    <pre>{{ props }}</pre>
+    <Teleport
+      defer
+      :to="`.modal-card:has(#${id}) .modal-card-foot`"
+    >
+      <div class="buttons w-full is-right">
+        <button
+          @click="$emit('close')"
+          class="button is-white"
+        >
+          Huỷ
+        </button>
+        <button class="button is-success">Đặt hàng</button>
+      </div>
+    </Teleport>
+  </div>
+</template>
+<style scoped>
+.table {
+  background-color: transparent;
+
+  td {
+    background-color: transparent;
+  }
+}
+</style>