pages/qr.vue

@@ -1,60 +1,37 @@
-<template>
+<script setup>
-  <div class="qr-container">
-    <h1 class="qr-title">QR-КОД</h1>
-    <canvas ref="qrCanvas" class="qr-code"></canvas>
-  </div>
-</template>
-
-<script>
 import QRCode from 'qrcode';
 
-export default {
+// Реактивная переменная для хранения текста QR-кода
-  name: 'QRPage',
+const qrText = ref('');
-  data() {
+
-    return {
+// Ссылка на элемент canvas для рендеринга QR-кода
-      qrText: '', // Текст или ссылка для QR-кода
+const qrCanvas = ref(null);
-    };
+
-  },
+// Генерация QR-кода
-  mounted() {
+const generateQR = async () => {
-    // Добавляем "https://", если его нет в URL
+  try {
-    const currentUrl = window.location.href;
+    await QRCode.toCanvas(qrCanvas.value, qrText.value, {
-    this.qrText = currentUrl.startsWith('http') ? currentUrl : `https://${currentUrl}`;
+      width: 500,
-    this.generateQR();
+    });
-  },
+  } catch (error) {
-  methods: {
+    console.error('Ошибка при генерации QR-кода:', error);
-    async generateQR() {
+  }
-      try {
-        await QRCode.toCanvas(this.$refs.qrCanvas, this.qrText, {
-          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>
+<template>
-.qr-container {
+  <div class="siteblock">
-  display: flex;
+    <div class="container text-center">
-  flex-direction: column;
+      <h1 class="siteblock-title">QR-КОД</h1>
-  align-items: center;
+      <div class="col-span-full">
-  justify-content: center;
+        <canvas class="border mx-auto" ref="qrCanvas"></canvas>
-  height: 100vh;
+      </div>
-  text-align: center;
+    </div>
-}
+  </div>
-
+</template>
-.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>