changes
This commit is contained in:
Viet An
@@ -9,7 +9,7 @@ import useOrderInfo from "~/components/pos/composables/useOrderInfo";
|
||||
import SearchBox from "~/components/SearchBox.vue";
|
||||
|
||||
const store = useStore();
|
||||
const { $formatNum } = useNuxtApp();
|
||||
const { $insertapi, $formatNum } = useNuxtApp();
|
||||
|
||||
const { carts, cartItems, customers, getCarts, isPending } = useCartData();
|
||||
|
||||
@@ -36,8 +36,8 @@ function openProductSelectionModal() {
|
||||
component: "pos/ProductSelection",
|
||||
title: "Chọn sản phẩm",
|
||||
width: "85%",
|
||||
height: "500px",
|
||||
};
|
||||
console.log("hey");
|
||||
}
|
||||
|
||||
function openConfirmModal() {
|
||||
@@ -45,13 +45,12 @@ function openConfirmModal() {
|
||||
component: "pos/ConfirmOrder",
|
||||
title: "Xác nhận đơn hàng",
|
||||
width: "60%",
|
||||
height: "400px",
|
||||
};
|
||||
}
|
||||
|
||||
function openAddAddressModal() {
|
||||
showModal.value = {
|
||||
component: "pos/EditAddress",
|
||||
component: "pos/AddressForm",
|
||||
title: "Thêm địa chỉ",
|
||||
width: "50%",
|
||||
height: "auto",
|
||||
@@ -69,7 +68,7 @@ provide("pos", {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="is-flex-grow-1 is-flex is-flex-direction-column">
|
||||
<!-- <div class="fs-11">
|
||||
<pre>customerIdsWithNoCart: {{ customerIdsWithNoCart }}</pre>
|
||||
<pre>{{ customerIdsWithNoCart }}</pre>
|
||||
@@ -79,262 +78,317 @@ provide("pos", {
|
||||
<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="isPending"
|
||||
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',
|
||||
disabled: !activeCart?.customer,
|
||||
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"
|
||||
<template v-if="activeCartId && carts?.length > 0">
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="has-text-centered"
|
||||
</span>
|
||||
<span>Giỏ hàng</span>
|
||||
<span
|
||||
v-if="isPending"
|
||||
class="icon"
|
||||
>
|
||||
<p class="has-text-grey p-4">Khách hàng chưa có địa chỉ</p>
|
||||
<button
|
||||
@click="openAddAddressModal"
|
||||
class="button is-light is-primary"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:add-home-work-outline-rounded"
|
||||
:size="18"
|
||||
/>
|
||||
</span>
|
||||
<span>Thêm địa chỉ</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<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="has-text-grey-70 py-4 has-text-centered"
|
||||
class="py-4 fs-16 has-text-centered has-text-grey"
|
||||
>
|
||||
Chưa chọn khách hàng
|
||||
Chưa có sản phẩm nào trong giỏ 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',
|
||||
disabled: !activeCart?.customer,
|
||||
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">{{ $formatNum(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">
|
||||
{{ $formatNum(subtotal, { hasUnit: true }) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button
|
||||
@click="openConfirmModal"
|
||||
:disabled="!isOrderValid"
|
||||
class="button is-fullwidth is-success"
|
||||
>
|
||||
Thanh toán
|
||||
</button>
|
||||
<div :class="['cell sidebar', store.viewport < 3 ? 'is-col-span-12' : 'is-col-span-4']">
|
||||
<div
|
||||
class="card"
|
||||
style="border-bottom: 1px solid var(--bulma-border)"
|
||||
>
|
||||
<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"
|
||||
style="border-bottom: 1px solid var(--bulma-border)"
|
||||
>
|
||||
<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',
|
||||
disabled: !activeCart?.customer,
|
||||
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"
|
||||
@submit="getAddresses"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="has-text-centered"
|
||||
>
|
||||
<p class="has-text-grey p-4">Khách hàng chưa có địa chỉ</p>
|
||||
<button
|
||||
@click="openAddAddressModal"
|
||||
class="button is-light is-primary"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:add-home-work-outline-rounded"
|
||||
:size="18"
|
||||
/>
|
||||
</span>
|
||||
<span>Thêm địa chỉ</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
v-else
|
||||
class="has-text-grey-70 py-4 has-text-centered"
|
||||
>
|
||||
Chưa chọn khách hàng
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="card"
|
||||
style="border-bottom: 1px solid var(--bulma-border)"
|
||||
>
|
||||
<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',
|
||||
disabled: !activeCart?.customer,
|
||||
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">{{ $formatNum(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">
|
||||
{{ $formatNum(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>
|
||||
</template>
|
||||
<div
|
||||
v-else
|
||||
class="is-flex-grow-1 is-flex is-justify-content-center"
|
||||
>
|
||||
<div
|
||||
v-if="isPending"
|
||||
class="is-flex is-justify-content-center is-align-items-center"
|
||||
>
|
||||
<Icon
|
||||
name="svg-spinners:180-ring-with-bg"
|
||||
:size="30"
|
||||
class="has-text-primary"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="is-flex is-flex-direction-column is-align-items-center is-gap-2 mt-40"
|
||||
>
|
||||
<Icon
|
||||
name="material-symbols:shopping-cart-outline-rounded"
|
||||
:size="40"
|
||||
class="has-text-grey-80"
|
||||
/>
|
||||
<p class="has-text-grey-60 fs-17">Chưa có giỏ hàng nào</p>
|
||||
<button
|
||||
@click="
|
||||
async () => {
|
||||
const newCart = await $insertapi('Cart', { notify: false });
|
||||
activeCartId = newCart.id;
|
||||
getCarts();
|
||||
}
|
||||
"
|
||||
class="button is-primary"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:add-rounded"
|
||||
:size="18"
|
||||
/>
|
||||
</span>
|
||||
<span>Tạo giỏ hàng</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
v-if="showModal"
|
||||
|
||||
Reference in New Issue
Block a user