From 562cd80636d2cff559e3359ef3bcd06706adcafc Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Wed, 19 Mar 2025 09:21:00 +0300
Subject: [PATCH] qr

---
 pages/qr.vue | 87 +++++++++++++++++++---------------------------------
 1 file changed, 32 insertions(+), 55 deletions(-)

diff --git a/pages/qr.vue b/pages/qr.vue
index c438f34..5be7920 100644
--- a/pages/qr.vue
+++ b/pages/qr.vue
@@ -1,60 +1,37 @@
-<template>
-  <div class="qr-container">
-    <h1 class="qr-title">QR-КОД</h1>
-    <canvas ref="qrCanvas" class="qr-code"></canvas>
-  </div>
-</template>
-
-<script>
+<script setup>
 import QRCode from 'qrcode';
 
-export default {
-  name: 'QRPage',
-  data() {
-    return {
-      qrText: '', // Текст или ссылка для QR-кода
-    };
-  },
-  mounted() {
-    // Добавляем "https://", если его нет в URL
-    const currentUrl = window.location.href;
-    this.qrText = currentUrl.startsWith('http') ? currentUrl : `https://${currentUrl}`;
-    this.generateQR();
-  },
-  methods: {
-    async generateQR() {
-      try {
-        await QRCode.toCanvas(this.$refs.qrCanvas, this.qrText, {
-          width: 500,
-        });
-      } catch (error) {
-        console.error('Ошибка при генерации QR-кода:', error);
-      }
-    },
-  },
+// Реактивная переменная для хранения текста QR-кода
+const qrText = ref('');
+
+// Ссылка на элемент canvas для рендеринга QR-кода
+const qrCanvas = ref(null);
+
+// Генерация QR-кода
+const generateQR = async () => {
+  try {
+    await QRCode.toCanvas(qrCanvas.value, qrText.value, {
+      width: 500,
+    });
+  } catch (error) {
+    console.error('Ошибка при генерации QR-кода:', error);
+  }
 };
+
+onMounted(() => {
+  const currentUrl = window.location.href;
+  qrText.value = currentUrl.startsWith('http') ? currentUrl : `https://${currentUrl}`;
+  generateQR();
+});
 </script>
 
-<style scoped>
-.qr-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  text-align: center;
-}
-
-.qr-title {
-  font-family: 'Arial', sans-serif;
-  font-size: 2rem;
-  color: #333;
-  font-weight: bold;
-  margin-bottom: 20px;
-}
-
-.qr-code {
-  margin-top: 20px;
-  border: 1px solid #ccc;
-}
-</style>
\ No newline at end of file
+<template>
+  <div class="siteblock">
+    <div class="container text-center">
+      <h1 class="siteblock-title">QR-КОД</h1>
+      <div class="col-span-full">
+        <canvas class="border mx-auto" ref="qrCanvas"></canvas>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file