changes
This commit is contained in:
Viet An
@@ -140,7 +140,10 @@ import ScrollBox from "@/components/datatable/ScrollBox.vue";
|
||||
import { debounce } from "es-toolkit";
|
||||
|
||||
const props = defineProps({
|
||||
api: String,
|
||||
api: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
field: String,
|
||||
column: Array,
|
||||
first: Boolean,
|
||||
|
||||
@@ -133,7 +133,7 @@ const emit = defineEmits("unselect");
|
||||
<div class="is-flex is-gap-1 is-align-items-center">
|
||||
<div
|
||||
:class="[
|
||||
'p-1 rounded-sm is-flex is-align-items-center',
|
||||
'p-1 rounded is-flex is-align-items-center',
|
||||
`has-background-${move.delta > 0 ? 'success' : 'danger'}-soft`,
|
||||
]"
|
||||
>
|
||||
|
||||
87
app/components/pos/Address.vue
Normal file
87
app/components/pos/Address.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
address: Object,
|
||||
selected: Boolean,
|
||||
});
|
||||
|
||||
const showModal = ref(false);
|
||||
|
||||
function openEditModal() {
|
||||
showModal.value = {
|
||||
component: "pos/EditAddress",
|
||||
title: "Cập nhật địa chỉ",
|
||||
width: "50%",
|
||||
height: "auto",
|
||||
vbind: { address: props.address },
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="['card is-clickable', selected && 'selected']"
|
||||
@click="$emit('selectAddress', address.id)"
|
||||
>
|
||||
<div class="card-content is-flex is-justify-content-space-between">
|
||||
<div>
|
||||
<div class="fs-14 is-flex is-gap-1 is-align-items-center">
|
||||
<p>{{ address.address_detail }}</p>
|
||||
<span
|
||||
v-if="address.is_default"
|
||||
class="tag is-primary is-light"
|
||||
>
|
||||
Mặc định</span
|
||||
>
|
||||
<button
|
||||
@click.stop="openEditModal"
|
||||
class="button is-small is-white rounded-full p-0 size-7"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:edit-outline-rounded"
|
||||
:size="16"
|
||||
class="has-text-primary"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="has-text-grey is-size-7">
|
||||
<span>Phường {{ address.ward }}</span>
|
||||
<span>, </span>
|
||||
<span>Quận {{ address.district }}</span>
|
||||
<span>, </span>
|
||||
<span>{{ address.city }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
v-if="selected"
|
||||
class="icon has-background-primary-95 rounded-full"
|
||||
>
|
||||
<Icon
|
||||
name="material-symbols:check-rounded"
|
||||
:size="18"
|
||||
class="has-text-primary"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<Modal
|
||||
v-if="showModal"
|
||||
v-bind="showModal"
|
||||
@close="showModal = null"
|
||||
@update="$emit('update')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.card {
|
||||
&:hover {
|
||||
border-color: var(--bulma-primary);
|
||||
}
|
||||
&.selected {
|
||||
border-color: var(--bulma-primary);
|
||||
}
|
||||
}
|
||||
.card-content {
|
||||
--bulma-card-content-padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -55,7 +55,7 @@ onMounted(fetchImeis);
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="imeis.length === 0">
|
||||
<p class="mt-6 mb-8 has-text-centered">Sản phẩm không có IMEI nào.</p>
|
||||
<p class="mt-6 mb-8 has-text-centered">Sản phẩm không có IMEI có sẵn nào.</p>
|
||||
<div class="block">
|
||||
<AddIMEIForm
|
||||
:variant="variant"
|
||||
|
||||
125
app/components/pos/EditAddress.vue
Normal file
125
app/components/pos/EditAddress.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<script setup>
|
||||
import { isEqual } from "es-toolkit";
|
||||
|
||||
const props = defineProps({
|
||||
address: Object,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["modalevent"]);
|
||||
|
||||
const { $patchapi } = useNuxtApp();
|
||||
const addressRef = ref({ ...props.address });
|
||||
const isLoading = ref(false);
|
||||
async function updateAddress() {
|
||||
isLoading.value = true;
|
||||
const updated = await $patchapi("Customer_Address", addressRef.value);
|
||||
isLoading.value = false;
|
||||
emit("modalevent", { name: "update" });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form>
|
||||
<div class="field">
|
||||
<label class="label">Địa chỉ</label>
|
||||
<div class="control">
|
||||
<input
|
||||
v-model="addressRef.address_detail"
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="Địa chỉ"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fixed-grid has-12-cols">
|
||||
<div class="grid">
|
||||
<div class="cell is-col-span-4">
|
||||
<div class="field">
|
||||
<label class="label">Phường</label>
|
||||
<div class="control">
|
||||
<input
|
||||
v-model="addressRef.ward"
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="Text input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell is-col-span-4">
|
||||
<div class="field">
|
||||
<label class="label">Quận</label>
|
||||
<div class="control">
|
||||
<input
|
||||
v-model="addressRef.district"
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="Text input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell is-col-span-4">
|
||||
<div class="field">
|
||||
<label class="label">Thành phố</label>
|
||||
<div class="control">
|
||||
<input
|
||||
v-model="addressRef.city"
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="Text input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label class="checkbox is-flex is-gap-0.5 is-align-items-center">
|
||||
<Icon
|
||||
:name="
|
||||
addressRef.is_default ? 'material-symbols:check-box-rounded' : 'material-symbols:check-box-outline-blank'
|
||||
"
|
||||
:class="['is-clickable', addressRef.is_default ? 'has-text-primary' : 'has-text-grey-light']"
|
||||
:size="24"
|
||||
@click="addressRef.is_default = !addressRef.is_default"
|
||||
/>
|
||||
<span>Địa chỉ mặc định</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="is-sr-only"
|
||||
v-model="addressRef.is_default"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-grouped is-grouped-right">
|
||||
<div class="control">
|
||||
<button
|
||||
type="button"
|
||||
class="button is-white"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
Huỷ
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button
|
||||
type="button"
|
||||
:class="['button is-link', isLoading && 'is-loading']"
|
||||
:disabled="isEqual(address, addressRef)"
|
||||
@click="updateAddress"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:edit-outline-rounded"
|
||||
:size="16"
|
||||
/>
|
||||
</span>
|
||||
<span>Cập nhật</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@@ -1,9 +1,11 @@
|
||||
<script setup>
|
||||
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 { $numtoString } = useNuxtApp();
|
||||
const { $getdata, $numtoString } = useNuxtApp();
|
||||
|
||||
function openModal() {
|
||||
store.showmodal = {
|
||||
@@ -14,147 +16,231 @@ function openModal() {
|
||||
};
|
||||
}
|
||||
|
||||
const record = ref({
|
||||
const orderInfo = ref({
|
||||
customer: null,
|
||||
address: null,
|
||||
paymentMethod: null,
|
||||
});
|
||||
const addresses = ref([]);
|
||||
const subtotal = computed(() => {
|
||||
return store.selectedImeis.reduce((prev, curr) => prev + curr.variant__price, 0);
|
||||
});
|
||||
|
||||
async function getAddresses() {
|
||||
addresses.value = await $getdata("Customer_Address", {
|
||||
filter: { customer: orderInfo.value.customer.id },
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => orderInfo.value.customer,
|
||||
async (newVal, oldVal) => {
|
||||
if (newVal) {
|
||||
await getAddresses();
|
||||
if (oldVal === null || oldVal.id !== newVal.id) {
|
||||
const defaultAddress = addresses.value.find((add) => add.is_default);
|
||||
orderInfo.value.address = defaultAddress?.id;
|
||||
}
|
||||
} else {
|
||||
addresses.value = null;
|
||||
orderInfo.value.address = null;
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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 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
|
||||
v-if="store.selectedImeis.length > 0"
|
||||
class="is-flex is-flex-direction-column is-gap-1"
|
||||
>
|
||||
<ProductCard
|
||||
v-for="imei in store.selectedImeis"
|
||||
:key="imei.id"
|
||||
:imei="imei"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
v-else
|
||||
class="py-4 fs-16 has-text-grey has-text-centered"
|
||||
>
|
||||
Không có sản phẩm nào trong giỏ hàng
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell is-col-span-4">
|
||||
<div class="card mb-3">
|
||||
<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',
|
||||
field: 'label',
|
||||
column: ['label'],
|
||||
first: true,
|
||||
placeholder: 'Khách hàng',
|
||||
addon: {
|
||||
component: 'customer/CustomerQuickAdd',
|
||||
width: '50%',
|
||||
height: 'auto',
|
||||
title: 'Tạo khách hàng',
|
||||
},
|
||||
onOption: (e) => (record.customer = e),
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mb-3">
|
||||
<div class="card-content">
|
||||
<p class="icon-text fs-17 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',
|
||||
onOption: (e) => (record.paymentMethod = e),
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mb-3">
|
||||
<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> ({{ store.selectedImeis.length }} 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
|
||||
class="button is-fullwidth is-success"
|
||||
:disabled="!record.customer || !record.paymentMethod"
|
||||
<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
|
||||
v-if="store.selectedImeis.length > 0"
|
||||
class="is-flex is-flex-direction-column is-gap-1"
|
||||
>
|
||||
Thanh toán
|
||||
</button>
|
||||
<ProductCard
|
||||
v-for="imei in store.selectedImeis"
|
||||
:key="imei.id"
|
||||
:imei="imei"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
v-else
|
||||
class="py-4 fs-16 has-text-grey has-text-centered"
|
||||
>
|
||||
Không có sản phẩm nào trong giỏ hàng
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="['cell', store.viewport < 4 ? 'is-col-span-12' : 'is-col-span-4']">
|
||||
<div class="card mb-3">
|
||||
<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',
|
||||
field: 'label',
|
||||
column: ['label'],
|
||||
first: true,
|
||||
placeholder: 'Khách hàng',
|
||||
onOption: (e) => (orderInfo.customer = e),
|
||||
addon: {
|
||||
component: 'customer/CustomerQuickAdd',
|
||||
width: '50%',
|
||||
height: 'auto',
|
||||
title: 'Tạo khách hàng',
|
||||
},
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mb-3">
|
||||
<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>
|
||||
<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>
|
||||
<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 === address.id"
|
||||
@selectAddress="orderInfo.address = $event"
|
||||
@update="getAddresses"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mb-3">
|
||||
<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',
|
||||
onOption: (e) => (orderInfo.paymentMethod = e),
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mb-3">
|
||||
<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> ({{ store.selectedImeis.length }} 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
|
||||
class="button is-fullwidth is-success"
|
||||
:disabled="Object.values(orderInfo).some(isNil)"
|
||||
>
|
||||
Thanh toán
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user