changes
This commit is contained in:
Viet An
@@ -1,33 +1,84 @@
|
||||
<script setup>
|
||||
import ProductCard from "~/components/pos/ProductCard.vue";
|
||||
import CartItem from "~/components/pos/CartItem.vue";
|
||||
|
||||
const props = defineProps({
|
||||
customer: Object,
|
||||
address: Object,
|
||||
paymentMethod: Object,
|
||||
});
|
||||
|
||||
const { $insertapi } = useNuxtApp();
|
||||
const emit = defineEmits(["close"]);
|
||||
const { $patchapi, $deleteapi, $insertapi, $dayjs, $snackbar } = useNuxtApp();
|
||||
const id = "confirmOrder";
|
||||
const store = useStore();
|
||||
const isPending = ref(false);
|
||||
const { cartItems, orderInfo, getCart } = inject("pos");
|
||||
|
||||
const subtotal = computed(() => {
|
||||
return store.selectedImeis.reduce((prev, curr) => prev + curr.variant__price, 0);
|
||||
return cartItems.value?.reduce((prev, curr) => prev + curr.imei__variant__price, 0);
|
||||
});
|
||||
const shipping_address = computed(() => {
|
||||
return `${props.address.address_detail}, ${props.address.ward}, ${props.address.district}, ${props.address.city}`;
|
||||
return `${orderInfo.value.address.address_detail}, ${orderInfo.value.address.ward}, ${orderInfo.value.address.district}, ${orderInfo.value.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,
|
||||
},
|
||||
});
|
||||
try {
|
||||
isPending.value = true;
|
||||
const invoice = await $insertapi("Invoice", {
|
||||
data: {
|
||||
customer: orderInfo.value.customer.id,
|
||||
customer_name: orderInfo.value.customer.fullname,
|
||||
customer_phone: orderInfo.value.customer.phone,
|
||||
customer_email: orderInfo.value.customer.email,
|
||||
shipping_address: shipping_address.value,
|
||||
product_amount: cartItems.value.length,
|
||||
shipping_fee: 0,
|
||||
total_amount: subtotal.value,
|
||||
discount_amount: 0,
|
||||
final_amount: subtotal.value,
|
||||
order_type: "pos",
|
||||
status: "pending",
|
||||
ordered_at: new Date(),
|
||||
paid_at: new Date(),
|
||||
delivery_method: orderInfo.value.deliveryMethod.id,
|
||||
},
|
||||
notify: false,
|
||||
});
|
||||
|
||||
const imeisSoldPayload = cartItems.value.map((cartItem) => ({
|
||||
imei: cartItem.imei__imei,
|
||||
variant: cartItem.imei__variant,
|
||||
sold_date: $dayjs().format("YYYY-MM-DD"),
|
||||
}));
|
||||
|
||||
const imeisSold = await $insertapi("IMEI_Sold", {
|
||||
data: imeisSoldPayload,
|
||||
notify: false,
|
||||
});
|
||||
|
||||
const invoiceDetailPayload = cartItems.value.map((cartItem) => {
|
||||
const imeiSold = imeisSold.find((imeiSold) => imeiSold.imei === cartItem.imei__imei);
|
||||
return {
|
||||
invoice: invoice.id,
|
||||
variant: cartItem.imei__variant,
|
||||
imei_sold: imeiSold.id,
|
||||
price: cartItem.imei__variant__price,
|
||||
};
|
||||
});
|
||||
|
||||
const invoiceDetails = await $insertapi("Invoice_Detail", {
|
||||
data: invoiceDetailPayload,
|
||||
notify: false,
|
||||
});
|
||||
|
||||
$snackbar("Tạo đơn hàng thành công", "Success");
|
||||
|
||||
await Promise.all(cartItems.value.map(({ id }) => $deleteapi("Cart_Item", id)));
|
||||
await $patchapi("Cart", {
|
||||
id: cartItems.value[0].cart,
|
||||
customer: null,
|
||||
});
|
||||
getCart();
|
||||
emit("close");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
$snackbar("Tạo đơn hàng không thành công", "Error");
|
||||
} finally {
|
||||
isPending.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -45,11 +96,11 @@ async function createOrder() {
|
||||
<span>Khách hàng</span>
|
||||
</p>
|
||||
<div>
|
||||
<p>{{ props.customer.fullname }}</p>
|
||||
<p>{{ orderInfo.customer.fullname }}</p>
|
||||
<p class="is-size-7 has-text-grey">
|
||||
{{ props.customer.phone }}
|
||||
{{ orderInfo.customer.phone }}
|
||||
•
|
||||
{{ props.customer.email }}
|
||||
{{ orderInfo.customer.email }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -63,17 +114,43 @@ async function createOrder() {
|
||||
:size="18"
|
||||
/>
|
||||
</span>
|
||||
<span>{{ store.selectedImeis.length }} sản phẩm</span>
|
||||
<span>{{ cartItems.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"
|
||||
<CartItem
|
||||
v-for="cartItem in cartItems"
|
||||
:key="cartItem.id"
|
||||
:cartItem="cartItem"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-content has-background-primary-100">
|
||||
<p class="icon-text font-semibold mb-4">
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:delivery-truck-speed-outline-rounded"
|
||||
:size="18"
|
||||
/>
|
||||
</span>
|
||||
<span>Giao hàng</span>
|
||||
</p>
|
||||
<div>
|
||||
<div v-if="orderInfo.deliveryMethod.code === 'INSTORE_PICKUP'">
|
||||
<p>Nhận tại cửa hàng</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p class="font-medium fs-16 mb-0.5">{{ shipping_address }}</p>
|
||||
<p class="has-text-grey">
|
||||
<span>{{ orderInfo.customer.fullname }}</span>
|
||||
<span> • </span>
|
||||
<span>{{ orderInfo.customer.phone }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-content has-background-primary-100">
|
||||
<p class="icon-text font-semibold mb-2">
|
||||
@@ -88,14 +165,14 @@ async function createOrder() {
|
||||
<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>
|
||||
<span>{{ orderInfo.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>
|
||||
<span> ({{ cartItems.length }} sản phẩm)</span>
|
||||
</td>
|
||||
<td class="has-text-right">{{ $numtoString(subtotal, { hasUnit: true }) }}</td>
|
||||
</tr>
|
||||
@@ -110,7 +187,6 @@ async function createOrder() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre>{{ props }}</pre>
|
||||
<Teleport
|
||||
defer
|
||||
:to="`.modal-card:has(#${id}) .modal-card-foot`"
|
||||
@@ -122,11 +198,23 @@ async function createOrder() {
|
||||
>
|
||||
Huỷ
|
||||
</button>
|
||||
<button class="button is-success">Đặt hàng</button>
|
||||
<button
|
||||
@click="createOrder"
|
||||
:class="['button is-success', isPending && 'is-loading']"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:check-rounded"
|
||||
:size="18"
|
||||
/>
|
||||
</span>
|
||||
<span>Đặt hàng</span>
|
||||
</button>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.table {
|
||||
background-color: transparent;
|
||||
|
||||
Reference in New Issue
Block a user