christian.julian
/
Proyecto_venta_boletos
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Soportar QR

This commit is contained in:
Christian Julian Jimenez 2025-03-09 00:30:51 -06:00
parent f5e53a0799
commit 792c1a7d4c
2 changed files with 52 additions and 0 deletions

22
vista/css/comprobante.css
View File

@ -78,4 +78,26 @@ th {
}
.btn:hover {
opacity: 0.9;
}
.qr-container {
text-align: center;
margin: 30px 0;
padding: 10px;
border-top: 1px dashed #ccc;
padding-top: 20px;
}
#qr-code {
display: inline-block;
margin: 0 auto;
}
.qr-info {
font-size: 14px;
margin-top: 10px;
}
.mensaje {
margin-top: 40px;
font-size: 14px;
text-align: center;
}

30
vista/js/comprobante.js
View File

@ -34,6 +34,9 @@ function cargarComprobante() {
});
tablaBoletos.innerHTML = contenidoTabla;
// Generar código QR con el ID de la venta
generarQR(comprobante.id_venta);
})
.catch(error => {
console.error('Error:', error);
@ -42,6 +45,29 @@ function cargarComprobante() {
});
}
// Función para generar el código QR
function generarQR(idVenta) {
// Verificar si existe el elemento donde se mostrará el QR
const qrContainer = document.getElementById('qr-code');
if (!qrContainer) {
console.error('No se encontró el elemento para mostrar el código QR');
return;
}
// Limpiar el contenedor por si ya tiene contenido
qrContainer.innerHTML = '';
// Crear una nueva instancia de QRCode
new QRCode(qrContainer, {
text: idVenta.toString(),
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H // Alta corrección de errores
});
}
// Función para imprimir el comprobante
function imprimirComprobante() {
const contenido = document.getElementById('comprobante-imprimible').innerHTML;
@ -61,6 +87,10 @@ function imprimirComprobante() {
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background-color: #f8f9fa; }
.total { font-size: 18px; font-weight: bold; text-align: right; margin-top: 20px; padding-top: 10px; border-top: 1px solid #ddd; }
.qr-container { text-align: center; margin: 20px 0; border-top: 1px dashed #ccc; padding-top: 20px;}
#qr-code { display: inline-block; margin: 0 auto; }
.qr-info { font-size: 14px; margin-top: 10px; }
.mensaje { margin-top: 40px; font-size: 14px; text-align: center;}
</style>
</head>
<body>