From 256f0eefa1dceb7f7a272442e169edfdb184f2af Mon Sep 17 00:00:00 2001 From: wkj <278599135@.com> Date: Sat, 13 Sep 2025 20:48:27 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E4=BA=8C=E7=BB=B4=E7=A0=81?= =?UTF-8?q?=E5=88=86=E4=BA=AB=E7=BB=84=E4=BB=B6=EF=BC=8C=20=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E4=BC=A0=E5=85=A5color,bgColor,disabled?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- es/components/common/qrCode/index.d.ts | 3 + es/components/common/qrCode/index.js | 7 +- es/components/common/qrCode/index.less | 21 +++++ es/components/common/qrCode/index.xml | 20 ++++- .../common/qrCode/locales/zh_CN.json | 3 +- es/components/common/qrCode/weapp-qrcode.js | 84 +++++++++++++++---- es/components/common/qrCode/web.d.ts | 3 + es/components/common/qrCode/web.js | 15 ++-- es/components/common/qrCode/web.less | 19 ++++- es/components/wechatQrCode/share/index.d.ts | 3 + es/components/wechatQrCode/share/index.js | 8 +- es/components/wechatQrCode/share/index.xml | 2 +- es/components/wechatQrCode/share/web.d.ts | 3 + es/components/wechatQrCode/share/web.js | 4 +- es/components/wechatQrCode/share/web.pc.d.ts | 3 + es/components/wechatQrCode/share/web.pc.js | 4 +- es/data/i18n.js | 3 +- lib/data/i18n.js | 3 +- src/components/common/qrCode/index.less | 21 +++++ src/components/common/qrCode/index.ts | 12 ++- src/components/common/qrCode/index.xml | 20 ++++- .../common/qrCode/locales/zh_CN.json | 3 +- src/components/common/qrCode/weapp-qrcode.js | 84 +++++++++++++++---- src/components/common/qrCode/web.less | 19 ++++- src/components/common/qrCode/web.tsx | 21 +++-- src/components/wechatQrCode/share/index.ts | 8 +- src/components/wechatQrCode/share/index.xml | 2 +- src/components/wechatQrCode/share/web.pc.tsx | 7 +- src/components/wechatQrCode/share/web.tsx | 7 +- src/data/i18n.ts | 3 +- 30 files changed, 345 insertions(+), 70 deletions(-) diff --git a/es/components/common/qrCode/index.d.ts b/es/components/common/qrCode/index.d.ts index 8adad63c7..0b8d61196 100644 --- a/es/components/common/qrCode/index.d.ts +++ b/es/components/common/qrCode/index.d.ts @@ -11,5 +11,8 @@ declare const _default: ) => React.ReactElement; export default _default; diff --git a/es/components/common/qrCode/index.js b/es/components/common/qrCode/index.js index 90f7fbb4c..6d468d905 100644 --- a/es/components/common/qrCode/index.js +++ b/es/components/common/qrCode/index.js @@ -13,10 +13,13 @@ export default OakComponent({ disableDownload: false, onRefresh: undefined, onDownload: undefined, + disabled: false, + color: '#000000', + bgColor: '#ffffff', }, lifetimes: { ready() { - const { url, size } = this.props; + const { url, size, color, bgColor } = this.props; if (process.env.OAK_PLATFORM === 'wechatMp') { const isBase64 = /data:image\/[\w|\W]+(;base64,)[\w|\W]*/.test(url); if (isBase64) { @@ -26,6 +29,8 @@ export default OakComponent({ typeNumber: 4, // 密度 errorCorrectLevel: 'L', // 纠错等级 size: size, // 白色边框 + color, + bgColor }); this.setState({ qrcodeURL, diff --git a/es/components/common/qrCode/index.less b/es/components/common/qrCode/index.less index 41c4f4b56..7befefe8b 100644 --- a/es/components/common/qrCode/index.less +++ b/es/components/common/qrCode/index.less @@ -7,11 +7,32 @@ justify-content: center; align-items: center; + .qrcode { + position: relative; + } + .image { margin-top: 16px; margin-bottom: 16px; } + .mask { + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + z-index: 10; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + color: rgba(0,0,0,0.88); + line-height: 1.5; + background: rgba(255,255,255,0.96); + text-align: center; + } + .caption { color: @oak-text-color-secondary; font-size: 12px; diff --git a/es/components/common/qrCode/index.xml b/es/components/common/qrCode/index.xml index 30de00764..f23f67c1a 100644 --- a/es/components/common/qrCode/index.xml +++ b/es/components/common/qrCode/index.xml @@ -1,9 +1,23 @@ - + + + + + {{t('disabled')}} + + + - + + + + + {{t('disabled')}} + + + @@ -21,7 +35,7 @@ - + diff --git a/es/components/common/qrCode/locales/zh_CN.json b/es/components/common/qrCode/locales/zh_CN.json index 654c5ec7b..0f869c7d2 100644 --- a/es/components/common/qrCode/locales/zh_CN.json +++ b/es/components/common/qrCode/locales/zh_CN.json @@ -8,5 +8,6 @@ "Album permission denied, please reauthorize": "相册权限被拒绝，请重新授权", "Save fail": "保存失败", "Save successful": "保存成功", - "Authorization successful": "授权成功" + "Authorization successful": "授权成功", + "disabled": "已禁用" } diff --git a/es/components/common/qrCode/weapp-qrcode.js b/es/components/common/qrCode/weapp-qrcode.js index 43fbf66c7..ea92afd50 100644 --- a/es/components/common/qrCode/weapp-qrcode.js +++ b/es/components/common/qrCode/weapp-qrcode.js @@ -20,8 +20,8 @@ * @Modified: Pudon * @demoURL: https://github.com/Pudon/weapp-qrcode * @Date: 2018-09-11 14:00:05 - * @Last Modified by: Pudon - * @Last Modified time: 2018-09-12 16:33:19 + * @Last Modified by: mikey.zhaopeng + * @Last Modified time: 2025-09-13 19:22:01 */ //--------------------------------------------------------------------- @@ -448,11 +448,16 @@ var qrcode = function(typeNumber, errorCorrectLevel) { return qrHtml; }; - _this.createImgTag = function(cellSize, margin, size) { + _this.createImgTag = function(cellSize, margin, size, foregroundColor, backgroundColor) { cellSize = cellSize || 2; margin = (typeof margin == 'undefined')? cellSize * 4 : margin; + // 设置默认颜色 + foregroundColor = foregroundColor || '#000000'; + backgroundColor = backgroundColor || '#ffffff'; + + var min = margin; var max = _this.getModuleCount() * cellSize + margin; @@ -464,7 +469,7 @@ var qrcode = function(typeNumber, errorCorrectLevel) { } else { return 1; } - } ); + }, foregroundColor, backgroundColor ); }; return _this; @@ -1351,7 +1356,10 @@ var base64DecodeInputStream = function(str) { // gifImage (B/W) //--------------------------------------------------------------------- -var gifImage = function(width, height) { +var gifImage = function(width, height, foregroundColor, backgroundColor) { + // 设置默认颜色 + foregroundColor = foregroundColor || [0, 0, 0]; // 默认黑色 + backgroundColor = backgroundColor || [255, 255, 255]; // 默认白色 var _width = width; var _height = height; @@ -1383,15 +1391,24 @@ var gifImage = function(width, height) { //--------------------------------- // Global Color Map + // /使用自定义的前景色和背景色 + out.writeByte(foregroundColor[0]); + out.writeByte(foregroundColor[1]); + out.writeByte(foregroundColor[2]); + out.writeByte(backgroundColor[0]); + out.writeByte(backgroundColor[1]); + out.writeByte(backgroundColor[2]); + + // black - out.writeByte(0x00); - out.writeByte(0x00); - out.writeByte(0x00); + // out.writeByte(0x00); + // out.writeByte(0x00); + // out.writeByte(0x00); // white - out.writeByte(0xff); - out.writeByte(0xff); - out.writeByte(0xff); + // out.writeByte(0xff); + // out.writeByte(0xff); + // out.writeByte(0xff); //--------------------------------- // Image Descriptor @@ -1561,9 +1578,20 @@ var gifImage = function(width, height) { return _this; }; -var createImgTag = function(width, height, getPixel, alt) { +var createImgTag = function(width, height, getPixel, foregroundColor, backgroundColor) { - var gif = gifImage(width, height); + // 设置默认颜色 + foregroundColor = foregroundColor || '#000000'; + backgroundColor = backgroundColor || '#ffffff'; + + // 将颜色转换为RGB数组 + var fgRgb = hexToRgb(foregroundColor); + var bgRgb = hexToRgb(backgroundColor); + + if (!fgRgb) fgRgb = [0, 0, 0]; // 默认黑色 + if (!bgRgb) bgRgb = [255, 255, 255]; // 默认白色 + + var gif = gifImage(width, height, fgRgb, bgRgb); for (var y = 0; y < height; y += 1) { for (var x = 0; x < width; x += 1) { gif.setPixel(x, y, getPixel(x, y) ); @@ -1587,6 +1615,28 @@ var createImgTag = function(width, height, getPixel, alt) { return img; }; +// 添加十六进制颜色转RGB函数 +function hexToRgb(hex) { + // 移除#号 + hex = hex.replace('#', ''); + + // 处理简写形式 #abc → #aabbcc + if (hex.length === 3) { + hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; + } + + // 验证是否为6位十六进制颜色 + if (!/^[0-9A-F]{6}$/i.test(hex)) { + return null; + } + + var r = parseInt(hex.substring(0, 2), 16); + var g = parseInt(hex.substring(2, 4), 16); + var b = parseInt(hex.substring(4, 6), 16); + + return [r, g, b]; +} + //--------------------------------------------------------------------- // returns qrcode function. @@ -1595,6 +1645,8 @@ var drawImg = function(text, options) { var typeNumber = options.typeNumber || 4; var errorCorrectLevel = options.errorCorrectLevel || 'M'; var size = options.size || 500; + var foregroundColor = options.color || '#000000'; + var backgroundColor = options.bgColor || '#ffffff'; var qr; @@ -1609,7 +1661,9 @@ var drawImg = function(text, options) { return drawImg(text, { size: size, errorCorrectLevel: errorCorrectLevel, - typeNumber: typeNumber + 1 + typeNumber: typeNumber + 1, + color: foregroundColor, + bgColor: backgroundColor }); } } @@ -1618,7 +1672,7 @@ var drawImg = function(text, options) { var cellsize = parseInt(size / qr.getModuleCount()); var margin = parseInt((size - qr.getModuleCount() * cellsize) / 2); - return qr.createImgTag(cellsize, margin, size); + return qr.createImgTag(cellsize, margin, size, foregroundColor, backgroundColor); }; module.exports = { drawImg: drawImg diff --git a/es/components/common/qrCode/web.d.ts b/es/components/common/qrCode/web.d.ts index fbccb461f..4c7f14eb9 100644 --- a/es/components/common/qrCode/web.d.ts +++ b/es/components/common/qrCode/web.d.ts @@ -12,6 +12,9 @@ type IQrCodeProps = { url: string; loading?: boolean; disableDownload?: boolean; + disabled: boolean; + color: string; + bgColor: string; }; export default function Render(props: WebComponentProps -
- {isBase64 ? (qrCode) : url ? () : null} + {isBase64 ? (qrCode) : url ? () : null} + {disabled ?
+ {t('disabled')} +
: null}
{V} {tips} { - {!!url && !disableDownload && (