changes
This commit is contained in:
Viet An
@@ -1,35 +1,35 @@
|
||||
<script setup>
|
||||
import { isNil } from "es-toolkit";
|
||||
import Address from "~/components/pos/Address.vue";
|
||||
import CartItem from "~/components/pos/CartItem.vue";
|
||||
import SearchBox from "~/components/SearchBox.vue";
|
||||
|
||||
const store = useStore();
|
||||
const { $getdata, $numtoString } = useNuxtApp();
|
||||
const { $getdata, $patchapi, $numtoString } = useNuxtApp();
|
||||
const cart = ref();
|
||||
const cartItems = ref();
|
||||
const isUpdating = ref(false);
|
||||
|
||||
async function getCart() {
|
||||
console.count("getCart");
|
||||
const cartFetched = await $getdata("Cart", {
|
||||
filter: { customer: store.customer },
|
||||
first: true,
|
||||
});
|
||||
cart.value = cartFetched;
|
||||
try {
|
||||
isUpdating.value = true;
|
||||
const cartFetched = await $getdata("Cart", {
|
||||
first: true,
|
||||
});
|
||||
cart.value = cartFetched;
|
||||
|
||||
const cartItemsFetched = await $getdata("Cart_Item", {
|
||||
filter: {
|
||||
cart: cartFetched.id,
|
||||
},
|
||||
});
|
||||
cartItems.value = cartItemsFetched;
|
||||
|
||||
console.log("cartFetched", cartFetched);
|
||||
console.log("cartItemsFetched", cartItemsFetched);
|
||||
const cartItemsFetched = await $getdata("Cart_Item", {
|
||||
filter: {
|
||||
cart: cartFetched.id,
|
||||
},
|
||||
});
|
||||
cartItems.value = cartItemsFetched;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
isUpdating.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
provide("cartItems", cartItems);
|
||||
provide("getCart", getCart);
|
||||
onMounted(getCart);
|
||||
|
||||
const showProductSelectionModal = ref();
|
||||
@@ -50,8 +50,7 @@ const orderInfo = ref({
|
||||
});
|
||||
const addresses = ref([]);
|
||||
const subtotal = computed(() => {
|
||||
return 0;
|
||||
// return store.selectedImeis.reduce((prev, curr) => prev + curr.variant__price, 0);
|
||||
return cartItems.value?.reduce((prev, curr) => prev + curr.imei__variant__price, 0);
|
||||
});
|
||||
|
||||
async function getAddresses() {
|
||||
@@ -63,6 +62,12 @@ async function getAddresses() {
|
||||
watch(
|
||||
() => orderInfo.value.customer,
|
||||
async (newVal, oldVal) => {
|
||||
const updatedCart = await $patchapi("Cart", {
|
||||
id: cart.value.id,
|
||||
customer: newVal?.id,
|
||||
});
|
||||
getCart();
|
||||
|
||||
if (newVal) {
|
||||
await getAddresses();
|
||||
if (oldVal === null || oldVal.id !== newVal.id) {
|
||||
@@ -76,16 +81,41 @@ watch(
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => orderInfo.value.deliveryMethod,
|
||||
(newVal) => {
|
||||
if (newVal?.code === "HOME_DELIVERY") {
|
||||
const defaultAddress = addresses.value.find((add) => add.is_default);
|
||||
orderInfo.value.address = defaultAddress;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const isOrderValid = computed(() => {
|
||||
if (cartItems.value?.length === 0) return false;
|
||||
if (!orderInfo.value.customer) return false;
|
||||
if (!orderInfo.value.deliveryMethod) return false;
|
||||
if (!orderInfo.value.paymentMethod) return false;
|
||||
if (orderInfo.value.deliveryMethod.code === "HOME_DELIVERY" && !orderInfo.value.address) return false;
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
const showConfirmModal = ref();
|
||||
function openConfirmModal() {
|
||||
showConfirmModal.value = {
|
||||
component: "pos/ConfirmOrder",
|
||||
title: "Xác nhận đơn hàng",
|
||||
width: "60%",
|
||||
height: "auto",
|
||||
vbind: orderInfo.value,
|
||||
height: "400px",
|
||||
};
|
||||
}
|
||||
|
||||
provide("pos", {
|
||||
cartItems,
|
||||
orderInfo,
|
||||
getCart,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -104,6 +134,16 @@ function openConfirmModal() {
|
||||
/>
|
||||
</span>
|
||||
<span>Giỏ hàng</span>
|
||||
<span
|
||||
v-if="isUpdating"
|
||||
class="icon"
|
||||
>
|
||||
<Icon
|
||||
name="svg-spinners:180-ring-with-bg"
|
||||
:size="18"
|
||||
class="has-text-primary"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<button
|
||||
@click="openProductSelectionModal"
|
||||
@@ -119,20 +159,21 @@ function openConfirmModal() {
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="cartItems"
|
||||
v-if="cartItems?.length > 0"
|
||||
class="is-flex is-flex-direction-column is-gap-1"
|
||||
>
|
||||
<CartItem
|
||||
v-for="cartItem in cartItems"
|
||||
:key="cartItem.id"
|
||||
:cartItem="cartItem"
|
||||
deleteable
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
v-else
|
||||
class="py-4 fs-16 has-text-centered has-text-grey"
|
||||
>
|
||||
Không có sản phẩm nào trong giỏ hàng
|
||||
Không có sản phẩm nào trong giỏ hàng.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -156,6 +197,7 @@ function openConfirmModal() {
|
||||
field: 'label',
|
||||
column: ['label'],
|
||||
first: true,
|
||||
optionid: cart?.customer,
|
||||
placeholder: 'Khách hàng',
|
||||
onOption: (e) => (orderInfo.customer = e),
|
||||
addon: {
|
||||
@@ -180,7 +222,7 @@ function openConfirmModal() {
|
||||
</span>
|
||||
<span>Giao hàng</span>
|
||||
</p>
|
||||
<div>
|
||||
<div class="block">
|
||||
<SearchBox
|
||||
v-bind="{
|
||||
api: 'Delivery_Method',
|
||||
@@ -192,57 +234,62 @@ function openConfirmModal() {
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="orderInfo.customer">
|
||||
<div class="block">
|
||||
<p class="mb-2">Thông tin người nhận</p>
|
||||
<div v-if="orderInfo.customer">
|
||||
<div class="field">
|
||||
<label class="label is-small">Tên</label>
|
||||
<p class="control">
|
||||
<input
|
||||
class="input is-small"
|
||||
type="email"
|
||||
:value="orderInfo.customer.fullname"
|
||||
placeholder="Name"
|
||||
disabled
|
||||
/>
|
||||
</p>
|
||||
<template v-if="orderInfo.deliveryMethod?.code === 'HOME_DELIVERY'">
|
||||
<div v-if="orderInfo.customer">
|
||||
<div class="block">
|
||||
<p class="mb-2">Thông tin người nhận</p>
|
||||
<div v-if="orderInfo.customer">
|
||||
<div class="field">
|
||||
<label class="label is-small">Tên</label>
|
||||
<p class="control">
|
||||
<input
|
||||
class="input is-small"
|
||||
type="email"
|
||||
:value="orderInfo.customer.fullname"
|
||||
placeholder="Name"
|
||||
disabled
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="label is-small">SĐT</label>
|
||||
<p class="control">
|
||||
<input
|
||||
class="input is-small"
|
||||
type="email"
|
||||
:value="orderInfo.customer?.phone"
|
||||
placeholder="Phone"
|
||||
disabled
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="label is-small">SĐT</label>
|
||||
<p class="control">
|
||||
<input
|
||||
class="input is-small"
|
||||
type="email"
|
||||
:value="orderInfo.customer?.phone"
|
||||
placeholder="Phone"
|
||||
disabled
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="block">
|
||||
<p class="mb-2">Địa chỉ giao hàng</p>
|
||||
<div v-if="addresses.length > 0">
|
||||
<Address
|
||||
v-for="address in addresses"
|
||||
:key="address"
|
||||
:address="address"
|
||||
:selected="orderInfo.address?.id === address.id"
|
||||
@selectAddress="orderInfo.address = $event"
|
||||
@update="getAddresses"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p class="has-text-grey has-text-centered p-4">Khách hàng chưa có địa chỉ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="block">
|
||||
<p class="mb-2">Địa chỉ giao hàng</p>
|
||||
<div>
|
||||
<Address
|
||||
v-for="address in addresses"
|
||||
:key="address"
|
||||
:address="address"
|
||||
:selected="orderInfo.address?.id === address.id"
|
||||
@selectAddress="orderInfo.address = $event"
|
||||
@update="getAddresses"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
v-else-if="orderInfo.deliveryMethod?.code === 'HOME_DELIVERY'"
|
||||
class="has-text-grey-light py-4 has-text-centered"
|
||||
>
|
||||
Chưa chọn khách hàng
|
||||
</p>
|
||||
<p
|
||||
v-else
|
||||
class="has-text-grey-light py-4 has-text-centered"
|
||||
>
|
||||
Chưa chọn khách hàng
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
@@ -279,8 +326,7 @@ function openConfirmModal() {
|
||||
<tr>
|
||||
<td>
|
||||
<span>Tạm tính</span>
|
||||
<span> ({{ 0 }} sản phẩm)</span>
|
||||
<!-- <span> ({{ store.selectedImeis.length }} sản phẩm)</span> -->
|
||||
<span> ({{ cartItems?.length || 0 }} sản phẩm)</span>
|
||||
</td>
|
||||
<td class="has-text-right">{{ $numtoString(subtotal, { hasUnit: true }) }}</td>
|
||||
</tr>
|
||||
@@ -294,8 +340,8 @@ function openConfirmModal() {
|
||||
</table>
|
||||
<button
|
||||
@click="openConfirmModal"
|
||||
:disabled="!isOrderValid"
|
||||
class="button is-fullwidth is-success"
|
||||
:disabled="Object.values(orderInfo).some(isNil)"
|
||||
>
|
||||
Thanh toán
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user