diff --git a/vista/css/comprobante.css b/vista/css/comprobante.css
index bd3d2c1..fcf94c0 100644
--- a/vista/css/comprobante.css
+++ b/vista/css/comprobante.css
@@ -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;
}
\ No newline at end of file
diff --git a/vista/js/comprobante.js b/vista/js/comprobante.js
index c538e80..0978029 100644
--- a/vista/js/comprobante.js
+++ b/vista/js/comprobante.js
@@ -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>