update
This commit is contained in:
Lizandro Guarnizo
@@ -840,13 +840,76 @@
|
||||
|
||||
<div class="bg-white px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-evenly gap-5 mt-4">
|
||||
<span>
|
||||
<button wire:click="pagar" wire:loading.attr="disabled" type="button" @if ($total <= auth()->user()->saldo->valor) class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green sm-text-sm sm-leading-5" @else disabled class="cursor-no-drop inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-gray-200 hover:bg-gray-200 focus:shadow-outline-green sm-text-sm sm-leading-5" @endif>Comprar</button>
|
||||
<!-- Botón de Comprar con protección de múltiples clics y mensaje de procesando -->
|
||||
<button id="comprarButton"
|
||||
wire:click="pagar"
|
||||
wire:loading.attr="disabled"
|
||||
type="button"
|
||||
@if ($total <= auth()->user()->saldo->valor)
|
||||
class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green sm-text-sm sm-leading-5"
|
||||
@else
|
||||
disabled
|
||||
class="cursor-no-drop inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-gray-200 hover:bg-gray-200 focus:shadow-outline-green sm-text-sm sm-leading-5"
|
||||
@endif
|
||||
onclick="enviarInfoCompra()">
|
||||
Comprar
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<!-- Botón Cerrar -->
|
||||
<button x-on:click="modalComprarPromo=false" type="button"
|
||||
class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#585858] hover:bg-[#3a3a3a] focus:shadow-outline-green sm-text-sm sm-leading-5">Cerrar</button>
|
||||
class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#585858] hover:bg-[#3a3a3a] focus:shadow-outline-green sm-text-sm sm-leading-5">
|
||||
Cerrar
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<!-- Mensaje de Procesando -->
|
||||
<div id="procesandoMensaje" class="hidden mt-2 text-sm text-gray-500">
|
||||
Procesando... por favor espera.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let botonBloqueado = false; // Controla si el botón está bloqueado
|
||||
|
||||
// Función para manejar el proceso de compra
|
||||
function enviarInfoCompra() {
|
||||
if (botonBloqueado) return; // Si el botón está bloqueado, no hacer nada
|
||||
|
||||
botonBloqueado = true; // Bloquea el botón
|
||||
const boton = document.getElementById('comprarButton');
|
||||
const mensaje = document.getElementById('procesandoMensaje'); // Referencia al mensaje de procesamiento
|
||||
boton.setAttribute('disabled', 'true'); // Deshabilita el botón
|
||||
boton.classList.add('cursor-not-allowed', 'bg-gray-300'); // Cambia el estilo visual
|
||||
mensaje.classList.remove('hidden'); // Muestra el mensaje
|
||||
|
||||
// Realiza la petición al servidor
|
||||
fetch('/registrar-accion-compra', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
},
|
||||
body: JSON.stringify({ /* puedes enviar datos si es necesario */ })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log('Respuesta del servidor:', data);
|
||||
// Aquí puedes agregar lo que suceda después de la compra
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error al enviar info:', error);
|
||||
// Rehabilitar el botón si hubo un error
|
||||
botonBloqueado = false;
|
||||
boton.removeAttribute('disabled');
|
||||
boton.classList.remove('cursor-not-allowed', 'bg-gray-300');
|
||||
mensaje.classList.add('hidden'); // Oculta el mensaje
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -319,46 +319,77 @@
|
||||
<div class="bg-white px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-evenly gap-5 mt-4">
|
||||
@if (auth()->user()->rol->nombre != 'editor')
|
||||
<span>
|
||||
<button wire:click="comprar" type="button" wire:loading.attr="disabled"
|
||||
@if ($cantidad_tarjetaPlan <= (int) $disponibles && $total <= auth()->user()->saldo->valor) onclick="enviarInfoUsuario({
|
||||
nombre: '{{ auth()->user()->name }}',
|
||||
email: '{{ auth()->user()->email }}',
|
||||
saldo: '{{ auth()->user()->saldo->valor }}'
|
||||
})"
|
||||
class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green sm-text-sm sm-leading-5"
|
||||
@else
|
||||
disabled
|
||||
class="cursor-no-drop inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-gray-200 hover:bg-gray-200 focus:shadow-outline-green sm-text-sm sm-leading-5" @endif>
|
||||
<button id="comprarButton" wire:click="comprar" type="button" wire:loading.attr="disabled"
|
||||
@if ($cantidad_tarjetaPlan <= (int) $disponibles && $total <= auth()->user()->saldo->valor)
|
||||
onclick="enviarInfoUsuario({
|
||||
nombre: '{{ auth()->user()->name }}',
|
||||
email: '{{ auth()->user()->email }}',
|
||||
saldo: '{{ auth()->user()->saldo->valor }}'
|
||||
})"
|
||||
class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green sm-text-sm sm-leading-5"
|
||||
@else
|
||||
disabled
|
||||
class="cursor-no-drop inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-gray-200 hover:bg-gray-200 focus:shadow-outline-green sm-text-sm sm-leading-5"
|
||||
@endif>
|
||||
Comprar
|
||||
</button>
|
||||
|
||||
|
||||
<!-- Mensaje de procesamiento -->
|
||||
<div id="procesandoMensaje" class="hidden mt-2 text-sm text-gray-500">
|
||||
Procesando... por favor espera.
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let botonBloqueado = false; // Controla si el botón está bloqueado
|
||||
|
||||
function enviarInfoUsuario(usuario) {
|
||||
// Si el botón ya fue bloqueado, no hacer nada
|
||||
if (botonBloqueado) return;
|
||||
|
||||
botonBloqueado = true; // Bloquea el botón después del primer clic
|
||||
|
||||
const boton = document.getElementById('comprarButton');
|
||||
const mensaje = document.getElementById('procesandoMensaje'); // Referencia al mensaje de procesamiento
|
||||
boton.setAttribute('disabled', 'true'); // Deshabilita el botón
|
||||
boton.classList.add('cursor-not-allowed', 'bg-gray-300'); // Cambia el estilo visual
|
||||
|
||||
// Muestra el mensaje de procesamiento
|
||||
mensaje.classList.remove('hidden'); // Muestra el mensaje
|
||||
|
||||
// Realiza la petición al servidor
|
||||
fetch('/registrar-accion-compra', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}' // Importante para proteger la petición
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
},
|
||||
body: JSON.stringify(usuario)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log('Respuesta del servidor:', data);
|
||||
// Aquí puedes agregar lo que suceda después de la compra
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error al enviar info:', error);
|
||||
// Opcional: Rehabilitar el botón si hubo un error
|
||||
botonBloqueado = false;
|
||||
boton.removeAttribute('disabled');
|
||||
boton.classList.remove('cursor-not-allowed', 'bg-gray-300');
|
||||
mensaje.classList.add('hidden'); // Oculta el mensaje
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</span>
|
||||
@endif
|
||||
|
||||
<span>
|
||||
<button wire:click="cerrartarjetaPlan" type="button"
|
||||
class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#585858] hover:bg-[#3a3a3a] focus:shadow-outline-green sm-text-sm sm-leading-5">Cerrar</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user