139 lines
3.9 KiB
Vue
139 lines
3.9 KiB
Vue
<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>
|