424 lines
14 KiB
Vue
424 lines
14 KiB
Vue
<script setup>
|
|
import { without } from "es-toolkit";
|
|
import Address from "~/components/pos/Address.vue";
|
|
import CartItem from "~/components/pos/CartItem.vue";
|
|
import CartTabs from "~/components/pos/CartTabs.vue";
|
|
import SearchBox from "~/components/SearchBox.vue";
|
|
|
|
const store = useStore();
|
|
const { $findapi, $getapi, $getdata, $patchapi, $numtoString } = useNuxtApp();
|
|
const carts = ref([]);
|
|
const cartItems = ref([]);
|
|
const customers = ref([]);
|
|
const activeCartId = ref();
|
|
const activeCart = computed(() => carts.value.find((c) => c.id === activeCartId.value));
|
|
const activeCartItems = computed(() => cartItems.value.filter((ci) => ci.cart === activeCartId.value));
|
|
const isUpdating = ref(false);
|
|
|
|
async function getCarts() {
|
|
const apis = $findapi(["Cart", "Cart_Item", "customer"]);
|
|
const [cartsRes, cartItemsRes, customersRes] = await $getapi(apis);
|
|
|
|
carts.value = cartsRes.data.rows || [];
|
|
cartItems.value = cartItemsRes.data.rows || [];
|
|
customers.value = customersRes.data.rows || [];
|
|
}
|
|
|
|
const customerIdsWithNoCart = computed(() => {
|
|
const cusIds = customers.value.map((c) => c.id);
|
|
const cusIdsWithCart = carts.value.filter((c) => c.customer).map((c) => c.customer);
|
|
const cusIdsWithNoCart = without(cusIds, ...cusIdsWithCart);
|
|
return cusIdsWithNoCart;
|
|
});
|
|
|
|
onMounted(async () => {
|
|
await getCarts();
|
|
activeCartId.value = carts.value[0].id;
|
|
});
|
|
|
|
watch(activeCartId, () => {
|
|
orderInfo.value.deliveryMethod = null;
|
|
orderInfo.value.paymentMethod = null;
|
|
});
|
|
|
|
const showProductSelectionModal = ref();
|
|
function openProductSelectionModal() {
|
|
showProductSelectionModal.value = {
|
|
component: "pos/ProductSelection",
|
|
title: "Chọn sản phẩm",
|
|
width: "85%",
|
|
height: "500px",
|
|
};
|
|
}
|
|
|
|
const orderInfo = ref({
|
|
address: null,
|
|
deliveryMethod: null,
|
|
paymentMethod: null,
|
|
});
|
|
const addresses = ref([]);
|
|
const subtotal = computed(() => {
|
|
return activeCartItems.value?.reduce((prev, curr) => prev + curr.imei__variant__price, 0);
|
|
});
|
|
|
|
async function getAddresses() {
|
|
addresses.value = await $getdata("Customer_Address", {
|
|
filter: { customer: activeCart.value.customer },
|
|
});
|
|
}
|
|
|
|
watch(activeCart, async (newVal, oldVal) => {
|
|
// set order info
|
|
if (newVal.customer) {
|
|
await getAddresses();
|
|
if (!oldVal || !oldVal.customer || oldVal.customer !== newVal.customer) {
|
|
const defaultAddress = addresses.value.find((add) => add.is_default);
|
|
orderInfo.value.address = defaultAddress;
|
|
}
|
|
} else {
|
|
addresses.value = null;
|
|
orderInfo.value.address = null;
|
|
}
|
|
});
|
|
|
|
const isChangingCus = ref(false);
|
|
async function changeCustomer(cusId) {
|
|
isChangingCus.value = true;
|
|
const updatedCart = await $patchapi("Cart", {
|
|
id: activeCartId.value,
|
|
customer: cusId,
|
|
});
|
|
await getCarts();
|
|
isChangingCus.value = false;
|
|
}
|
|
|
|
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 (activeCartItems.value?.length === 0) return false;
|
|
if (!activeCart.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: "400px",
|
|
};
|
|
}
|
|
|
|
provide("pos", {
|
|
carts,
|
|
activeCartId,
|
|
activeCart,
|
|
activeCartItems,
|
|
isChangingCus,
|
|
orderInfo,
|
|
getCarts,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<!-- <div class="fs-11">
|
|
<pre>customerIdsWithNoCart: {{ customerIdsWithNoCart }}</pre>
|
|
<pre>{{ customerIdsWithNoCart }}</pre>
|
|
<pre>{{ activeCart }}</pre>
|
|
<pre>{{ JSON.stringify(activeCartItems) }}</pre>
|
|
<pre>{{ JSON.stringify(activeCart) }}</pre>
|
|
<pre>activeCart?.customer: {{ JSON.stringify(activeCart?.customer) }}</pre>
|
|
<pre>{{ orderInfo }}</pre>
|
|
</div> -->
|
|
<CartTabs />
|
|
<div class="fixed-grid has-1-cols-mobile has-12-cols has-background-white is-clipped">
|
|
<div
|
|
class="grid"
|
|
style="row-gap: 0"
|
|
>
|
|
<div :class="['cell', store.viewport < 3 ? 'is-col-span-12' : 'is-col-span-8']">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<div class="block is-flex is-justify-content-space-between">
|
|
<p class="icon-text fs-16 font-semibold mb-4">
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:shopping-cart-outline-rounded"
|
|
:size="18"
|
|
/>
|
|
</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"
|
|
class="button is-primary"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:add-rounded"
|
|
:size="20"
|
|
/>
|
|
</span>
|
|
<span>Thêm sản phẩm</span>
|
|
</button>
|
|
</div>
|
|
<div
|
|
v-if="activeCartItems?.length > 0"
|
|
class="is-flex is-flex-direction-column is-gap-1"
|
|
>
|
|
<CartItem
|
|
v-for="cartItem in activeCartItems"
|
|
:key="cartItem.id"
|
|
:cartItem="cartItem"
|
|
deleteable
|
|
/>
|
|
</div>
|
|
<p
|
|
v-else
|
|
class="py-4 fs-16 has-text-centered has-text-grey"
|
|
>
|
|
Chưa có sản phẩm nào trong giỏ hàng.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div :class="['cell sidebar', store.viewport < 3 ? 'is-col-span-12' : 'is-col-span-4']">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<p class="icon-text fs-16 font-semibold mb-4">
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:supervisor-account-outline-rounded"
|
|
:size="18"
|
|
/>
|
|
</span>
|
|
<span>Khách hàng</span>
|
|
</p>
|
|
<div>
|
|
<SearchBox
|
|
v-bind="{
|
|
api: 'customer',
|
|
// filter: { id__in: [...customerIdsWithNoCart, activeCart?.customer] },
|
|
field: 'label',
|
|
column: ['label'],
|
|
first: true,
|
|
placeholder: 'Khách hàng',
|
|
optionid: activeCart?.customer,
|
|
onOption: (e) => {
|
|
if (e?.id !== activeCart?.customer) changeCustomer(e?.id || null);
|
|
},
|
|
addon: {
|
|
component: 'customer/CustomerQuickAdd',
|
|
width: '50%',
|
|
height: 'auto',
|
|
title: 'Tạo khách hàng',
|
|
},
|
|
}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<p class="icon-text fs-16 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 class="block">
|
|
<SearchBox
|
|
v-bind="{
|
|
api: 'Delivery_Method',
|
|
field: 'name',
|
|
column: ['name'],
|
|
first: true,
|
|
placeholder: 'Phương thức giao hàng',
|
|
optionid: orderInfo.deliveryMethod?.id,
|
|
onOption: (e) => (orderInfo.deliveryMethod = e),
|
|
}"
|
|
/>
|
|
</div>
|
|
<template v-if="orderInfo.deliveryMethod?.code === 'HOME_DELIVERY'">
|
|
<div v-if="activeCart.customer">
|
|
<div class="block">
|
|
<p class="mb-2">Thông tin người nhận</p>
|
|
<div v-if="activeCart.customer">
|
|
<div class="field">
|
|
<label class="label is-small">Tên</label>
|
|
<p class="control">
|
|
<input
|
|
class="input is-small"
|
|
type="email"
|
|
:value="activeCart.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="activeCart.customer__phone"
|
|
placeholder="Phone"
|
|
disabled
|
|
/>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
<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">
|
|
<div class="card-content">
|
|
<p class="icon-text fs-16 font-semibold mb-4">
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:credit-card-outline"
|
|
:size="18"
|
|
/>
|
|
</span>
|
|
<span>Thanh toán</span>
|
|
</p>
|
|
<div>
|
|
<SearchBox
|
|
v-bind="{
|
|
api: 'Payment_Method',
|
|
field: 'name',
|
|
column: ['name'],
|
|
first: true,
|
|
placeholder: 'Phương thức thanh toán',
|
|
optionid: orderInfo.paymentMethod?.id,
|
|
onOption: (e) => (orderInfo.paymentMethod = e),
|
|
}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<p class="icon-text fs-16 font-semibold mb-4">Tổng cộng</p>
|
|
<div>
|
|
<table class="table is-fullwidth fs-13">
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<span>Tạm tính</span>
|
|
<span> ({{ activeCartItems?.length || 0 }} 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>
|
|
<button
|
|
@click="openConfirmModal"
|
|
:disabled="!isOrderValid"
|
|
class="button is-fullwidth is-success"
|
|
>
|
|
Thanh toán
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Modal
|
|
v-if="showProductSelectionModal"
|
|
v-bind="showProductSelectionModal"
|
|
@close="showProductSelectionModal = undefined"
|
|
/>
|
|
<Modal
|
|
v-if="showConfirmModal"
|
|
v-bind="showConfirmModal"
|
|
@close="showConfirmModal = undefined"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@use "bulma/sass/utilities/mixins.scss" as *;
|
|
|
|
.cell > .card {
|
|
border-radius: 0;
|
|
border: none;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.fixed-grid {
|
|
border: 1px solid var(--bulma-border);
|
|
border-bottom-left-radius: var(--bulma-radius);
|
|
border-bottom-right-radius: var(--bulma-radius);
|
|
}
|
|
.sidebar {
|
|
border-left: 1px solid var(--bulma-border);
|
|
border-top: none;
|
|
|
|
@include touch {
|
|
border-left: none;
|
|
border-top: 1px solid var(--bulma-border);
|
|
}
|
|
}
|
|
</style>
|