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() {
+// Реактивная переменная для хранения текста QR-кода
+const qrText = ref('');
+
+// Ссылка на элемент canvas для рендеринга QR-кода
+const qrCanvas = ref(null);
+
+// Генерация QR-кода
+const generateQR = async () => {
   try {
-        await QRCode.toCanvas(this.$refs.qrCanvas, this.qrText, {
+    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>
+<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>