From 7cdfb9c7b645ab932d2f5250ddf4ee5193647511 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9B=B9=E7=A3=8A?= <45566618@qq.com>
Date: Thu, 10 Jul 2025 12:21:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=8C=E7=BB=B4=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                 |   3 +-
 src/components/QrcodeVue3/index.ts           |   1 +
 src/components/QrcodeVue3/src/QRCodeVue3.vue | 215 +++++++++++++++++++
 src/views/iotsync/yiweilian/index.vue        | 113 ++++++++++
 4 files changed, 331 insertions(+), 1 deletion(-)
 create mode 100644 src/components/QrcodeVue3/index.ts
 create mode 100644 src/components/QrcodeVue3/src/QRCodeVue3.vue
 create mode 100644 src/views/iotsync/yiweilian/index.vue

diff --git a/package.json b/package.json
index 3f8cfc9..defc4f2 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,8 @@
     "vxe-table": "4.6.17",
     "vxe-table-plugin-antd": "4.0.7",
     "xe-utils": "3.5.26",
-    "xss": "^1.0.15"
+    "xss": "^1.0.15",
+    "qrcode-vue3": "^1.4.17"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.6.1",
diff --git a/src/components/QrcodeVue3/index.ts b/src/components/QrcodeVue3/index.ts
new file mode 100644
index 0000000..8a6ad95
--- /dev/null
+++ b/src/components/QrcodeVue3/index.ts
@@ -0,0 +1 @@
+export { default as QRCodeVue3 } from './src/QRCodeVue3.vue';
diff --git a/src/components/QrcodeVue3/src/QRCodeVue3.vue b/src/components/QrcodeVue3/src/QRCodeVue3.vue
new file mode 100644
index 0000000..327c9cb
--- /dev/null
+++ b/src/components/QrcodeVue3/src/QRCodeVue3.vue
@@ -0,0 +1,215 @@
+<template>
+  <div ref="qrcodeRef">
+    <QRCodeVue3
+      :margin="margin"
+      :width="width"
+      :height="height"
+      :value="value"
+      :qrOptions="qrOptions"
+      :image="image"
+      :imageOptions="imageOptions"
+      :dotsOptions="dotsOptions"
+      :backgroundOptions="backgroundOptions"
+      :cornersSquareOptions="cornersSquareOptions"
+      :cornersDotOptions="cornersDotOptions"
+      :key="key"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, reactive, toRefs, PropType, ref} from "vue";
+import QRCodeVue3 from "qrcode-vue3";
+
+export default defineComponent({
+  name: "Qrcode",
+  components: {
+    QRCodeVue3,
+  },
+  props: {
+    // 二维码宽度
+    key: {
+      type: String as PropType<string>,
+      default: 0,
+    },
+    // 二维码宽度
+    width: {
+      type: String as PropType<string>,
+      default: 600,
+    },
+    // 二维码高度
+    height: {
+      type: String as PropType<string>,
+      default: 600,
+    },
+    // 二维码内容，网址
+    value: {
+      type: String as PropType<string>,
+      default: "https://www.focusnu.com/devops",
+    },
+    // 二维码图像的外边距
+    margin: {
+      type: String as PropType<string>,
+      default:6,
+    },
+    //二维码背景色
+    backgroundColor: {
+      type: String as PropType<string>,
+      default: "white",
+    },
+    //二维码中间的logo图片
+    logo: {
+      type: String as PropType<string>,
+      default: '',
+    },
+    // 隐藏图片背后有点
+    hideLogoDots: {
+      type: Boolean as PropType<boolean>,
+      default: true,
+    },
+    //二维码中间的logo大小
+    logoSize: {
+      type: String as PropType<string>,
+      default: 0.5,
+    },
+    //二维码中间的logo外边距
+    logoMargin: {
+      type: String as PropType<string>,
+      default: 5,
+    },
+    //二维码点配置
+    dotsOptions: {
+      type: Object,
+      default: () => ({
+        type: "rounded", // 二维码样式 square | dots | rounded | extra-rounded | classy | classy-rounded
+        color: "#0d2a56", //不设置渐变色时显示的颜色
+        // 渐变色，优先级高于默认color颜色
+        gradient: {
+          type: "radial", // linear线性渐变 | radial径向渐变
+          rotation: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#21a3fa",
+            },
+            {
+              offset: 1,
+              color: "#0d2a56",
+            },
+          ],
+        },
+      }),
+    },
+    /**
+     * 角落广场配置
+     */
+    cornersSquareOptions: {
+      type: Object,
+      default: () => ({
+        type: "extra-rounded", // none | square | dot | extra-rounded
+        color: "#0d2a56",//不设置渐变色时显示的颜色
+        // 渐变色
+        gradient: {
+          type: "linear",
+          rotation: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#0d2a56",
+            },
+            {
+              offset: 1,
+              color: "#21a3fa",
+            },
+          ],
+        },
+      }),
+    },
+    /**
+     * 角落点配置
+     */
+    cornersDotOptions: {
+      type: Object,
+      default: () => ({
+        type: "dot", // none | square | dot
+        color: "#0d2a56",//不设置渐变色时显示的颜色
+        // 渐变色
+        gradient: {
+          type: "linear",
+          rotation: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#0d2a56",
+            },
+            {
+              offset: 1,
+              color: "#21a3fa",
+            },
+          ],
+        },
+      }),
+    },
+  },
+  setup(props) {
+    console.log(props);
+    const qrcodeRef = ref(null);
+    const data = reactive({
+      key: props.key,//key值变化时自动刷新
+      /**
+       * 基础配置
+       * https://qr-code-styling.com
+       */
+      width: props.width, // 二维码宽度
+      height: props.height, // 二维码高度
+      value: props.value, // 二维码内容
+      margin: props.margin, // 二维码图像的外边距
+      /**
+       * 背景配置
+       */
+      backgroundOptions: {
+        //二维码背景色
+        color: props.backgroundColor,
+      },
+
+      /**
+       * 二维码配置
+       */
+      qrOptions: {
+        typeNumber: "0", // 类型编号 0 - 40
+        mode: "Byte", // 模式 Numeric | Alphanumeric | Byte | Kanji
+        errorCorrectionLevel: "Q", // 纠错等级 L | M | Q | H   'L'（低）、'M'（中）、'Q'（高）、'H'（非常高）
+      },
+
+      /**
+       * 图像配置（中心图片）
+       */
+      image: props.logo, // 二维码中心的图片
+      imageOptions: {
+        hideBackgroundDots: props.hideLogoDots, // 隐藏图片背后有点
+        imageSize: props.logoSize,
+        margin: props.logoMargin,
+        crossOrigin: "anonymous", // anonymous | use-credentials
+      },
+      /**
+       * 二维码点配置
+       */
+      dotsOptions: props.dotsOptions,
+      /**
+       * 角落广场配置
+       */
+      cornersSquareOptions: props.cornersSquareOptions,
+      /**
+       * 角落点配置
+       */
+      cornersDotOptions: props.cornersDotOptions,
+    });
+
+    return {
+      ...toRefs(data),
+      qrcodeRef
+    };
+  },
+});
+
+</script>
diff --git a/src/views/iotsync/yiweilian/index.vue b/src/views/iotsync/yiweilian/index.vue
new file mode 100644
index 0000000..5a41bb0
--- /dev/null
+++ b/src/views/iotsync/yiweilian/index.vue
@@ -0,0 +1,113 @@
+<template>
+  <main class="qrcode">
+    <div class="form">
+      <input
+        type="text"
+        v-model="data.value"
+        placeholder="请在这里输入要生成的内容！"
+        @change="changeValue"
+      />
+      <JImageUpload
+        text="上传LOGO"
+        ref="uploadRef"
+        v-model:value="data.logoImage"
+        @change="upFile"
+      />
+    </div>
+
+    <div class="code" ref="code">
+      <QRCodeVue3
+        margin="5"
+        width="400"
+        height="400"
+        :key="qrCodeKey"
+        :value="data.value"
+        :logo="data.logoImage"
+      />
+    </div>
+  </main>
+</template>
+
+<script lang="ts" name="qrcode" setup>
+import {computed, nextTick, reactive, ref} from "vue";
+import { QRCodeVue3 } from '/@/components/QrcodeVue3';
+import { JImageUpload } from '/@/components/Form/index';
+import image from "@/assets/images/logo.png";
+
+const uploadUrl = ref('');
+const data = reactive({
+  value: 'www.baidu.com',
+  logoImage: image,
+})
+
+// const qrCodeKey = ref(0);
+
+const qrCodeKey = computed(()=>data.value.length + data.logoImage.length);
+// console.log(qrCodeKey.value);
+
+function upFile(){
+  // console.log(data.logoImage);
+  // qrCodeKey.value = qrCodeKey.value + 1;
+  // console.log(qrCodeKey.value);
+}
+
+function changeValue(){
+  // qrCodeKey.value = qrCodeKey.value + 1;
+}
+
+</script>
+
+
+<style lang="less">
+.qrcode {
+  .form {
+    margin: 30px auto;
+    width: 86%;
+
+    input {
+      box-sizing: border-box;
+      padding: 0 10px;
+      width: 80%;
+      height: 50px;
+      font-size: 18px;
+      border: 1px solid #767676;
+      border-radius: 6px 0 0 6px;
+    }
+
+    button {
+      box-sizing: border-box;
+      position: relative;
+      width: 20%;
+      height: 50px;
+      font-size: 18px;
+      vertical-align: top;
+      color: white;
+      background: #42b983;
+      border: 1px solid #767676;
+      border-radius: 0 6px 6px 0;
+      border-left: none;
+      overflow: hidden;
+      cursor: pointer;
+
+      input {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        opacity: 0;
+      }
+    }
+  }
+
+  .code {
+    margin: auto;
+    padding: 8px;
+    width: 360px;
+    height: 360px;
+    border-radius: 6px;
+    border: 1px solid gray;
+  }
+}
+</style>