changes
This commit is contained in:
Viet An
@@ -1,8 +1,8 @@
|
||||
<script setup>
|
||||
import { isNil } from "es-toolkit";
|
||||
import Address from "~/components/pos/Address.vue";
|
||||
import ProductCard from "~/components/pos/ProductCard.vue";
|
||||
import SearchBox from "~/components/SearchBox.vue";
|
||||
import { isNil } from "es-toolkit";
|
||||
|
||||
const store = useStore();
|
||||
const { $getdata, $numtoString } = useNuxtApp();
|
||||
@@ -19,6 +19,7 @@ function openModal() {
|
||||
const orderInfo = ref({
|
||||
customer: null,
|
||||
address: null,
|
||||
deliveryMethod: null,
|
||||
paymentMethod: null,
|
||||
});
|
||||
const addresses = ref([]);
|
||||
@@ -39,7 +40,7 @@ watch(
|
||||
await getAddresses();
|
||||
if (oldVal === null || oldVal.id !== newVal.id) {
|
||||
const defaultAddress = addresses.value.find((add) => add.is_default);
|
||||
orderInfo.value.address = defaultAddress?.id;
|
||||
orderInfo.value.address = defaultAddress;
|
||||
}
|
||||
} else {
|
||||
addresses.value = null;
|
||||
@@ -47,38 +48,49 @@ watch(
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
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,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="block">
|
||||
<button
|
||||
@click="openModal"
|
||||
class="button is-primary"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:add-rounded"
|
||||
:size="20"
|
||||
/>
|
||||
</span>
|
||||
<span>Chọn sản phẩm</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="fixed-grid has-1-cols-mobile has-12-cols">
|
||||
<div class="grid">
|
||||
<div :class="['cell', store.viewport < 4 ? 'is-col-span-12' : 'is-col-span-8']">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<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>
|
||||
</p>
|
||||
<div class="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>
|
||||
</p>
|
||||
<button
|
||||
@click="openModal"
|
||||
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="store.selectedImeis.length > 0"
|
||||
class="is-flex is-flex-direction-column is-gap-1"
|
||||
@@ -87,11 +99,12 @@ watch(
|
||||
v-for="imei in store.selectedImeis"
|
||||
:key="imei.id"
|
||||
:imei="imei"
|
||||
deleteable
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
v-else
|
||||
class="py-4 fs-16 has-text-grey has-text-centered"
|
||||
class="py-4 fs-16 has-text-centered has-text-grey"
|
||||
>
|
||||
Không có sản phẩm nào trong giỏ hàng
|
||||
</p>
|
||||
@@ -99,7 +112,7 @@ watch(
|
||||
</div>
|
||||
</div>
|
||||
<div :class="['cell', store.viewport < 4 ? 'is-col-span-12' : 'is-col-span-4']">
|
||||
<div class="card mb-3">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="icon-text fs-16 font-semibold mb-4">
|
||||
<span class="icon">
|
||||
@@ -130,7 +143,7 @@ watch(
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mb-3">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="icon-text fs-16 font-semibold mb-4">
|
||||
<span class="icon">
|
||||
@@ -142,6 +155,18 @@ watch(
|
||||
<span>Giao hàng</span>
|
||||
</p>
|
||||
<div>
|
||||
<SearchBox
|
||||
v-bind="{
|
||||
api: 'Delivery_Method',
|
||||
field: 'name',
|
||||
column: ['name'],
|
||||
first: true,
|
||||
placeholder: 'Phương thức giao hàng',
|
||||
onOption: (e) => (orderInfo.deliveryMethod = e),
|
||||
}"
|
||||
/>
|
||||
</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">
|
||||
@@ -179,16 +204,22 @@ watch(
|
||||
v-for="address in addresses"
|
||||
:key="address"
|
||||
:address="address"
|
||||
:selected="orderInfo.address === address.id"
|
||||
: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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mb-3">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="icon-text fs-16 font-semibold mb-4">
|
||||
<span class="icon">
|
||||
@@ -213,7 +244,7 @@ watch(
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mb-3">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="icon-text fs-16 font-semibold mb-4">Tổng cộng</p>
|
||||
<div>
|
||||
@@ -235,6 +266,7 @@ watch(
|
||||
</tbody>
|
||||
</table>
|
||||
<button
|
||||
@click="openConfirmModal"
|
||||
class="button is-fullwidth is-success"
|
||||
:disabled="Object.values(orderInfo).some(isNil)"
|
||||
>
|
||||
@@ -246,5 +278,10 @@ watch(
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
v-if="showConfirmModal"
|
||||
v-bind="showConfirmModal"
|
||||
@close="showConfirmModal = undefined"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user