115 lines
2.9 KiB
Vue
115 lines
2.9 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
import Input from "@Holos/Form/Input.vue";
|
|
import QRscan from "./QRscan.vue";
|
|
|
|
/** Eventos */
|
|
const emit = defineEmits(["fine-searched"]);
|
|
|
|
/** Refs */
|
|
const numero_entrega = ref("");
|
|
const fineData = ref({
|
|
fecha: "",
|
|
numero_entrega: "",
|
|
nombre: "",
|
|
monto_entrega: "",
|
|
});
|
|
|
|
/** Métodos */
|
|
const handleSearch = () => {
|
|
if (!numero_entrega.value.trim()) {
|
|
Notify.warning("Por favor ingresa un número de entrega");
|
|
return;
|
|
}
|
|
|
|
fineData.value = {
|
|
fecha: "2025-11-11",
|
|
numero_entrega: numero_entrega.value,
|
|
nombre: "Juan Pérez García",
|
|
monto_entrega: "$1,500.00",
|
|
};
|
|
|
|
emit("fine-searched", fineData.value);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-6 p-6">
|
|
<div class="bg-white rounded-xl p-6 shadow-lg">
|
|
<h3 class="text-xl font-semibold mb-4 text-gray-800">Buscar Multa</h3>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<div class="mb-6">
|
|
<label class="block text-sm text-gray-600 font-medium mb-2">
|
|
Escanear Código QR
|
|
</label>
|
|
<div
|
|
class="w-full h-64 bg-gray-800 rounded-lg overflow-hidden"
|
|
>
|
|
<!-- QR -->
|
|
<QRscan
|
|
v-model:numero_entrega="numero_entrega"
|
|
@fine-searched="handleSearch"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col justify-center">
|
|
<div class="mb-5">
|
|
<Input
|
|
v-model="numero_entrega"
|
|
id="Número de entrega"
|
|
type="text"
|
|
placeholder="Ingrese el número de entrega"
|
|
@keyup.enter="handleSearch"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
@click="handleSearch"
|
|
type="button"
|
|
class="w-full bg-[#7a0b3a] hover:bg-[#68082e] text-white font-medium py-3.5 rounded-lg transition-colors"
|
|
>
|
|
Buscar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-6 shadow-lg">
|
|
<form @submit.prevent="handlePayment">
|
|
<!-- Fecha -->
|
|
<div class="grid grid-cols-2 gap-4 mb-5">
|
|
<Input
|
|
v-model="fineData.fecha"
|
|
id="Fecha de entrega"
|
|
type="date"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Nombre -->
|
|
<div class="mb-5">
|
|
<Input v-model="fineData.nombre" id="Nombre del cajero" type="text"/>
|
|
</div>
|
|
|
|
<!-- Monto a Pagar -->
|
|
<div class="mb-5">
|
|
<Input
|
|
v-model="fineData.monto_entrega"
|
|
id="Monto a entregar"
|
|
type="text"
|
|
class="text-lg font-semibold"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Botón Cobrar -->
|
|
<button
|
|
type="submit"
|
|
class="w-full bg-green-700 hover:bg-green-600 text-white font-medium py-3.5 rounded-lg transition-colors"
|
|
>
|
|
Entregar caja
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|