+
+
+
+
+
+
+ {{ locale.expiredText }}
+
+
+ {{ locale.refreshText }}
+
+
+
+
+
+
+
+
+
+
+ {{ locale.scannedText }}
+
+
+
+
+
+
+
+
diff --git a/uni_modules/tdesign-uniapp/components/qrcode/components/qrcode-status/type.ts b/uni_modules/tdesign-uniapp/components/qrcode/components/qrcode-status/type.ts
new file mode 100644
index 0000000..aa79fe7
--- /dev/null
+++ b/uni_modules/tdesign-uniapp/components/qrcode/components/qrcode-status/type.ts
@@ -0,0 +1,25 @@
+export interface QRCodeStatusProps {
+ /**
+ * 二维码状态
+ * @default 'active'
+ */
+ status?: 'active' | 'expired' | 'loading' | 'scanned';
+
+ /**
+ * 本地化文本配置
+ */
+ locale?: {
+ /** 过期提示文本 */
+ expiredText?: string;
+ /** 刷新按钮文本 */
+ refreshText?: string;
+ /** 已扫描提示文本 */
+ scannedText?: string;
+ };
+
+ /**
+ * 是否启用自定义渲染
+ * @default false
+ */
+ statusRender?: boolean;
+}
diff --git a/uni_modules/tdesign-uniapp/components/qrcode/hooks/useQRCode.js b/uni_modules/tdesign-uniapp/components/qrcode/hooks/useQRCode.js
new file mode 100644
index 0000000..abf1955
--- /dev/null
+++ b/uni_modules/tdesign-uniapp/components/qrcode/hooks/useQRCode.js
@@ -0,0 +1,25 @@
+import { QrCode, QrSegment } from '../../common/shared/qrcode/qrcodegen';
+import { ERROR_LEVEL_MAP, getImageSettings, getMarginSize } from '../../common/shared/qrcode/utils';
+
+const useQRCode = (opt) => {
+ const { value, level, minVersion, includeMargin, marginSize, imageSettings, size } = opt;
+
+ const qrcode = (() => {
+ const segments = QrSegment.makeSegments(value);
+ return QrCode.encodeSegments(segments, ERROR_LEVEL_MAP[level], minVersion);
+ })();
+
+ const cells = qrcode.getModules();
+ const margin = getMarginSize(includeMargin, marginSize);
+ const calculatedImageSettings = getImageSettings(cells, size, margin, imageSettings);
+
+ return {
+ cells,
+ margin,
+ numCells: cells.length + margin * 2,
+ calculatedImageSettings,
+ qrcode,
+ };
+};
+
+export default useQRCode;
diff --git a/uni_modules/tdesign-uniapp/components/qrcode/props.ts b/uni_modules/tdesign-uniapp/components/qrcode/props.ts
new file mode 100644
index 0000000..ec5f3da
--- /dev/null
+++ b/uni_modules/tdesign-uniapp/components/qrcode/props.ts
@@ -0,0 +1,66 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdQRCodeProps } from './type';
+export default {
+ /** 二维码背景颜色 */
+ bgColor: {
+ type: String,
+ default: '',
+ },
+ /** 是否有边框 */
+ borderless: Boolean,
+ /** 二维码颜色 */
+ color: {
+ type: String,
+ default: '',
+ },
+ /** 二维码中图片的地址 */
+ icon: {
+ type: String,
+ default: '',
+ },
+ /** 二维码中图片的大小 */
+ iconSize: {
+ type: [Number, Object],
+ default: 40 as TdQRCodeProps['iconSize'],
+ },
+ /** 二维码纠错等级 */
+ level: {
+ type: String,
+ default: 'M' as TdQRCodeProps['level'],
+ validator(val: TdQRCodeProps['level']): boolean {
+ if (!val) return true;
+ return ['L', 'M', 'Q', 'H'].includes(val);
+ },
+ },
+ /** 二维码大小 */
+ size: {
+ type: Number,
+ default: 160,
+ },
+ /** 二维码状态 */
+ status: {
+ type: String,
+ default: 'active' as TdQRCodeProps['status'],
+ validator(val: TdQRCodeProps['status']): boolean {
+ if (!val) return true;
+ return ['active', 'expired', 'loading', 'scanned'].includes(val);
+ },
+ },
+ /** 是否启用自定义渲染 */
+ statusRender: Boolean,
+ /** 扫描后的文本 */
+ value: {
+ type: String,
+ default: '',
+ },
+ /** 点击"点击刷新"的回调 */
+ onRefresh: {
+ type: Function,
+ default: () => ({}),
+ },
+};
diff --git a/uni_modules/tdesign-uniapp/components/qrcode/qrcode.css b/uni_modules/tdesign-uniapp/components/qrcode/qrcode.css
new file mode 100644
index 0000000..4e1366a
--- /dev/null
+++ b/uni_modules/tdesign-uniapp/components/qrcode/qrcode.css
@@ -0,0 +1,31 @@
+.t-qrcode {
+ position: relative;
+ display: flex;
+ box-sizing: border-box;
+ background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+ padding: 24rpx;
+ border-radius: 12rpx;
+ border: 1px solid var(--td-component-border, var(--td-gray-color-4, #dcdcdc));
+}
+.t-qrcode.t-borderless {
+ border-color: transparent;
+}
+.t-qrcode .t-mask {
+ left: 0;
+ top: 0;
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ z-index: 300;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ color: var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+ background-color: var(--td-mask-background, rgba(255, 255, 255, 0.96));
+ text-align: center;
+ border-radius: 12rpx;
+ font: var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+}
diff --git a/uni_modules/tdesign-uniapp/components/qrcode/qrcode.vue b/uni_modules/tdesign-uniapp/components/qrcode/qrcode.vue
new file mode 100644
index 0000000..07da5b7
--- /dev/null
+++ b/uni_modules/tdesign-uniapp/components/qrcode/qrcode.vue
@@ -0,0 +1,144 @@
+