165 lines
4.9 KiB
Vue
165 lines
4.9 KiB
Vue
<script setup>
|
|
import ProductCard from "@/components/pos/ProductCard.vue";
|
|
import SearchBox from "@/components/SearchBox.vue";
|
|
|
|
const store = useStore();
|
|
const { $numtoString } = useNuxtApp();
|
|
|
|
function openModal() {
|
|
store.showmodal = {
|
|
component: "pos/ProductSelection",
|
|
title: "Chọn sản phẩm",
|
|
width: "85%",
|
|
height: "500px",
|
|
};
|
|
}
|
|
|
|
const record = ref({
|
|
customer: null,
|
|
paymentMethod: null,
|
|
});
|
|
const subtotal = computed(() => {
|
|
return store.selectedImeis.reduce((prev, curr) => prev + curr.variant__price, 0);
|
|
});
|
|
</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"
|
|
>
|
|
Thanh toán
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|