first commit

uni_modules/tdesign-uniapp/components/qrcode/qrcode.vue

@@ -0,0 +1,144 @@
+<template>
+  <view
+    :style="`${tools._style([customStyle])}; width:${containerSize}px; height: ${containerSize}px; background-color: ${bgColor};`"
+    :class="`${classPrefix} ${borderless ? prefix + '-' + 'borderless' : ''} ${tClass}`"
+  >
+    <QrcodeCanvas
+      ref="qrcodeCanvas"
+      :t-class="tClassCanvas"
+      :size="size"
+      :value="value"
+      :level="level"
+      :color="color"
+      :bg-color="bgColor"
+      :icon="icon"
+      :icon-size="iconSize"
+      @drawError="handleDrawError"
+      @drawCompleted="handleDrawCompleted"
+    />
+
+    <view
+      v-if="showMask && canvasReady"
+      :class="`${prefix}-mask`"
+    >
+      <QrcodeStatus
+        :status="status"
+        :status-render="statusRender"
+        @refresh="handleRefresh"
+      >
+        <template #statusRender>
+          <slot name="statusRender" />
+        </template>
+      </QrcodeStatus>
+    </view>
+  </view>
+</template>
+
+<script>
+import QrcodeCanvas from './components/qrcode-canvas/qrcode-canvas.vue';
+import QrcodeStatus from './components/qrcode-status/qrcode-status.vue';
+import { prefix } from '../common/config';
+import props from './props';
+import { uniComponent } from '../common/src/index';
+import tools from '../common/utils.wxs';
+
+const name = `${prefix}-qrcode`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-canvas`,
+  ],
+  components: {
+    QrcodeCanvas,
+    QrcodeStatus,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      tools,
+      showMask: false,
+      classPrefix: name,
+      canvasReady: false,
+      canvasNode: null,
+    };
+  },
+  computed: {
+    // 容器尺寸 = Canvas 尺寸 + padding * 2
+    // padding 为 12px，所以容器需要额外 24px
+    containerSize() {
+      return this.size + 24;
+    },
+  },
+  watch: {
+    status: {
+      handler(newVal) {
+        this.showMask = newVal !== 'active';
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.initCanvas();
+  },
+  methods: {
+    async initCanvas() {
+      // 获取 canvas 实例
+      const canvasComp = this.$refs.qrcodeCanvas;
+      if (canvasComp) {
+        const canvas = await canvasComp.getCanvasNode();
+        this.canvasNode = canvas;
+      }
+    },
+
+    // 用于外部调用，重新绘制二维码
+    init() {
+      const canvasComp = this.$refs.qrcodeCanvas;
+      if (canvasComp) {
+        canvasComp.initCanvas();
+      }
+    },
+
+    handleDrawCompleted() {
+      this.canvasReady = true;
+    },
+    handleDrawError(err) {
+      console.error('二维码绘制失败', err);
+    },
+    handleRefresh() {
+      this.$emit('refresh');
+    },
+    // 二维码下载方法
+    async handleDownload() {
+      if (!this.canvasNode) {
+        console.error('未找到 canvas 节点');
+        return;
+      }
+
+      // 注意：此方法在非小程序环境需要适配
+      if (typeof wx !== 'undefined' && uni.canvasToTempFilePath) {
+        uni.canvasToTempFilePath({
+          canvas: this.canvasNode,
+          success: (res) => {
+            uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath });
+          },
+          fail: (err) => {
+            console.error('canvasToTempFilePath failed', err);
+          },
+        });
+      }
+    },
+  },
+});
+</script>
+
+<style lang="less" scoped>
+@import './qrcode.css';
+</style>