feat: 添加二维码组件功能

- 引入uqrcodejs依赖库用于生成二维码
- 新增QCode组件实现二维码生成功能
- 在我的页面中集成二维码展示
- 更新组件声明文件以支持新组件

package.json

@@ -84,6 +84,7 @@
     "alova": "^3.3.4",
     "echarts": "^6.0.0",
     "pinia": "^2.3.1",
+    "uqrcodejs": "^4.0.7",
     "vue": "~3.4.38",
     "vue-demi": "^0.14.10",
     "vue-i18n": "^9.14.0",

pnpm-lock.yaml

@@ -82,6 +82,9 @@ importers:
       pinia:
         specifier: ^2.3.1
         version: 2.3.1(typescript@5.5.4)(vue@3.4.38(typescript@5.5.4))
+      uqrcodejs:
+        specifier: ^4.0.7
+        version: 4.0.7
       vue:
         specifier: ~3.4.38
         version: 3.4.38(typescript@5.5.4)
@@ -6829,6 +6832,9 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
+  uqrcodejs@4.0.7:
+    resolution: {integrity: sha512-84+aZmD2godCVI+93lxE3YUAPNY8zAJvNA7xRS7R7U+q57KzMDepBSfNCwoRUhWOfR6eHFoAOcHRPwsP6ka1cA==}
+
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
@@ -15383,6 +15389,8 @@ snapshots:
       escalade: 3.2.0
       picocolors: 1.1.1
 
+  uqrcodejs@4.0.7: {}
+
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1

src/components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     GlobalMessage: typeof import('./components/GlobalMessage.vue')['default']
     GlobalToast: typeof import('./components/GlobalToast.vue')['default']
     PrivacyPopup: typeof import('./components/PrivacyPopup.vue')['default']
+    QCode: typeof import('./components/QCode.vue')['default']
     StatusTip: typeof import('./components/StatusTip.vue')['default']
     WdBadge: typeof import('wot-design-uni/components/wd-badge/wd-badge.vue')['default']
     WdButton: typeof import('wot-design-uni/components/wd-button/wd-button.vue')['default']

src/components/QCode.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+// eslint-disable-next-line ts/ban-ts-comment
+// @ts-expect-error
+
+import UQRCode from 'uqrcodejs'
+
+const props = defineProps<{ text: string, qwidth: number }>()
+const _this = getCurrentInstance()
+function createQRCode() {
+  const qr = new UQRCode()
+  qr.data = props.text
+  qr.size = props.qwidth || 100
+  qr.make()
+  const canvasContext = uni.createCanvasContext('qrcode', _this)
+  qr.canvasContext = canvasContext
+  qr.drawCanvas()
+}
+createQRCode()
+</script>
+
+<template>
+  <canvas id="qrcode" canvas-id="qrcode" :style="{ width: `${props.qwidth}px`, height: `${props.qwidth}px` }" />
+</template>
+
+<style scoped>
+
+</style>

src/pages/my/index.vue

@@ -148,6 +148,7 @@ function handleGo(item: { name: string }) {
         退出登录
       </wd-button>
     </view>
+    <QCode text="123" :qwidth="100" />
   </view>
 </template>