更新

src/components/o-qrcode/index.module.less

@@ -0,0 +1,19 @@
+.qrcode {
+  position: relative;
+
+  .qrcodeCanvas {
+    width: 100% !important;
+    height: 100% !important;
+  }
+
+  .qrcodeLogo {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-left: -20px;
+    margin-top: -20px;
+    width: 40px !important;
+    height: 40px !important;
+    border-radius: 4px;
+  }
+}

src/components/o-qrcode/index.tsx

@@ -1,218 +1,39 @@
-import { defineComponent, ref } from 'vue'
-import { AwesomeQR } from 'vue-qr/src/lib/awesome-qr'
+import { defineComponent, onMounted, ref } from 'vue'
 import logo from '@common/images/logo.png'
-function toBoolean(val: any): boolean {
-  if (val === '') return val
-  return val === 'true' || val == '1'
-}
-function readAsArrayBuffer(url: any, callback?: any) {
-  return new Promise((resolve, reject) => {
-    const xhr = new XMLHttpRequest()
-    xhr.responseType = 'blob' //设定返回数据类型为Blob
-    xhr.onload = function () {
-      const reader = new FileReader()
-      reader.onloadend = function () {
-        resolve(reader.result)
-      }
-      reader.readAsArrayBuffer(xhr.response) //xhr.response就是一个Blob，用FileReader读取
-    }
-    xhr.open('GET', url)
-    xhr.send()
-  })
-}
+import QRCode from 'qrcode'
+import styles from './index.module.less'
 
 export default defineComponent({
-  name: 'TheQrCode',
   props: {
     text: {
       type: String,
-      required: true
-    },
-    qid: {
-      type: String
-    },
-    correctLevel: {
-      type: Number,
-      default: 1
+      default: ''
     },
     size: {
-      type: Number,
-      default: 200
-    },
-    margin: {
-      type: Number,
-      default: 20
-    },
-    colorDark: {
-      type: String,
-      default: '#000000'
-    },
-    colorLight: {
-      type: String,
-      default: '#FFFFFF'
-    },
-    bgSrc: {
-      type: String,
-      default: undefined
-    },
-    background: {
       type: String,
-      default: 'rgba(0,0,0,0)'
-    },
-    backgroundDimming: {
-      type: String,
-      default: 'rgba(0,0,0,0)'
-    },
-    logoSrc: {
-      type: String,
-      default: logo
-    },
-    logoBackgroundColor: {
-      type: String,
-      default: 'rgba(255,255,255,1)'
-    },
-    gifBgSrc: {
-      type: String,
-      default: undefined
-    },
-    logoScale: {
-      type: Number,
-      default: 0.2
-    },
-    logoMargin: {
-      type: Number,
-      default: 0
-    },
-    logoCornerRadius: {
-      type: Number,
-      default: 8
-    },
-    whiteMargin: {
-      type: [Boolean, String],
-      default: true
-    },
-    dotScale: {
-      type: Number,
-      default: 1
-    },
-    autoColor: {
-      type: [Boolean, String],
-      default: true
-    },
-    binarize: {
-      type: [Boolean, String],
-      default: false
-    },
-    binarizeThreshold: {
-      type: Number,
-      default: 128
-    },
-    callback: {
-      type: Function,
-      default: function () {
-        return undefined
-      }
-    },
-    bindElement: {
-      type: Boolean,
-      default: true
-    },
-    backgroundColor: {
-      type: String,
-      default: '#FFFFFF'
-    },
-    components: {
-      default: function () {
-        return {
-          data: {
-            scale: 1
-          },
-          timing: {
-            scale: 1,
-            protectors: false
-          },
-          alignment: {
-            scale: 1,
-            protectors: false
-          },
-          cornerAlignment: {
-            scale: 1,
-            protectors: true
-          }
-        }
-      }
+      default: '200px'
     }
   },
-  data() {
-    return {
-      imgUrl: '' as any
-    }
-  },
-  watch: {
-    $props: {
-      deep: true,
-      handler() {
-        this.main()
-      }
-    }
-  },
-  mounted() {
-    this.main()
-  },
-  methods: {
-    async main() {
-      // const that = this;
-      if (this.gifBgSrc) {
-        const gifImg = await readAsArrayBuffer(this.gifBgSrc)
-        const logoImg = this.logoSrc
-
-        this.render(undefined, logoImg, gifImg)
-        return
-      }
-      const bgImg = this.bgSrc
-      const logoImg = this.logoSrc
-      this.render(bgImg, logoImg)
-    },
-    async render(img: any, logoImg: any, gifBgSrc?: any) {
-      // eslint-disable-next-line @typescript-eslint/no-this-alias
-      const that = this
-      // if (this.$isServer) {
-      //   return;
-      // }
-      // if (!this.AwesomeQR) {
-      //   this.AwesomeQR = AwesomeQR;
-      // }
-      new AwesomeQR({
-        gifBackground: gifBgSrc,
-        text: that.text,
-        size: that.size,
-        margin: that.margin,
-        colorDark: that.colorDark,
-        colorLight: that.colorLight,
-        backgroundColor: that.backgroundColor,
-        backgroundImage: img,
-        backgroundDimming: that.backgroundDimming,
-        logoImage: logoImg,
-        logoScale: that.logoScale,
-        logoBackgroundColor: that.logoBackgroundColor,
-        correctLevel: that.correctLevel,
-        logoMargin: that.logoMargin,
-        logoCornerRadius: that.logoCornerRadius,
-        whiteMargin: toBoolean(that.whiteMargin),
-        dotScale: that.dotScale,
-        autoColor: toBoolean(that.autoColor),
-        // binarize: toBoolean(that.binarize),
-        // binarizeThreshold: that.binarizeThreshold,
-        components: that.components
-      } as any)
-        .draw()
-        .then((dataUri) => {
-          this.imgUrl = dataUri
-          that.callback && that.callback(dataUri, that.qid)
-        })
-    }
-  },
-  render() {
-    return <>{this.bindElement && <img style="display: inline-block" src={this.imgUrl} />}</>
+  setup(props) {
+    const canvas = ref()
+    onMounted(() => {
+      QRCode.toCanvas(
+        canvas.value,
+        props.text,
+        {
+          margin: 1
+        },
+        (error: any) => {
+          if (error) console.log(error)
+          console.log('success')
+        }
+      )
+    })
+    return () => (
+      <div class={styles.qrcode} style={{ width: props.size, height: props.size }}>
+        <canvas ref={canvas} class={styles.qrcodeCanvas}></canvas>
+        <img src={logo} class={styles.qrcodeLogo} />
+      </div>
+    )
   }
 })

src/school/manage-teacher/index.tsx

@@ -97,7 +97,7 @@ export default defineComponent({
                 <div class={styles.codeName}>邀请您成为乐团管理老师</div>
 
                 <div class={styles.codeQr}>
-                  <OQrcode text={form.url} size={400} />
+                  <OQrcode text={form.url} size={'100%'} />
                 </div>
                 <div style={{ textAlign: 'center' }}>
                   <span class={styles.codeBtnText}>扫描上方二维码完成资料填写</span>