diff --git a/components-diy/diy-card-show.vue b/components-diy/diy-card-show.vue index 3a76489..b1fda02 100644 --- a/components-diy/diy-card-show.vue +++ b/components-diy/diy-card-show.vue @@ -36,7 +36,7 @@ {{ jobLine }} - + {{ qrTipText }} @@ -60,13 +60,13 @@ - + {{ qrTipText }} - + {{ qrTipText }} @@ -82,7 +82,7 @@ - + {{ qrTipText }} @@ -206,13 +206,10 @@ export default { showQrRows() { return this.showQrBase && this.qrPos === 'rows'; }, showQrCorner() { return this.showQrBase && this.qrPos === 'corner'; }, showQrBottom() { return this.showQrBase && this.qrPos === 'bottom'; }, - /** 二维码微调(qrOffsetX/Y, 任一轴非零才输出 transform) */ - qrShiftStyle() { - const t = qrTransform(this.c.qrOffsetX, this.c.qrOffsetY); - return t ? this.$util.objToStyle({ transform: t }) : ''; - }, /** 二维码外观(四档): plain 原图 / card 白卡描边 / theme 主题色衬底 / gradient 渐变圆角。 - * 多彩只装饰外围衬底, 码本身保持黑白保可扫(与 mini 基件 qrBlockStyle 同口径) */ + * 多彩只装饰外围衬底, 码本身保持黑白保可扫(与 mini 基件 qrBlockStyle 同口径)。 + * 注意: 必须输出单一字符串样式 —— uni-app 运行时不支持 :style="[字符串, 字符串]" + * 数组绑定(会被静默丢弃, 衬底/微调全部失效), 故 transform 合并在同一对象里 */ qrStyle() { return normalizeQrStyle(this.c.qrStyle); }, @@ -238,6 +235,9 @@ export default { style.padding = '6rpx'; } // plain 不进任何分支(无衬底, 即原图) + // 微调位移(qrOffsetX/Y): 与外观合并成同一段内联样式 + const t = qrTransform(this.c.qrOffsetX, this.c.qrOffsetY); + if (t) style.transform = t; return this.$util.objToStyle(style); }, /** 二维码提示文字: 面板 qrTip, 未配置回落「扫码查看完整名片」 */ diff --git a/tests/diy-card-qr-style.test.js b/tests/diy-card-qr-style.test.js index dcd08b8..24cc748 100644 --- a/tests/diy-card-qr-style.test.js +++ b/tests/diy-card-qr-style.test.js @@ -283,8 +283,13 @@ test('show: 二维码外观四档(plain 原图 / card 白卡描边 / theme 主 assert.match(showSrc, /else if \(this\.qrStyle === 'gradient'\) \{\s+const theme = \(this\.card && this\.card\.theme_color\) \|\| CardTokens\.color\.primary;\s+const end = \(this\.card && this\.card\.gradient_end\) \|\| darkenColor\(theme, 0\.18\);\s+style\.background = 'linear-gradient\(135deg, ' \+ theme \+ ' 0%, ' \+ end \+ ' 100%\)';\s+style\.borderRadius = '16rpx';\s+style\.padding = '6rpx';/); // plain 不进任何分支(无衬底, 即原图) assert.ok(!showSrc.includes("qrStyle === 'plain' ? style.background")); - // 四个位置档共用 qrBlockStyle - assert.equal((showSrc.match(/:style="\[qrBlockStyle, qrShiftStyle\]"/g) || []).length, 4); + // 四个位置档共用 qrBlockStyle(单字符串绑定) + assert.equal((showSrc.match(/:style="qrBlockStyle"/g) || []).length, 4); + // 反例: uni-app 运行时静默丢弃 :style="[字符串, 字符串]" 数组绑定 + // (2026-10-22 线上问题: 微调/外观在 C 端全部失效的根因), 禁止回归 + assert.ok(!showSrc.includes(':style="[qrBlockStyle')); + // 微调位移并入 qrBlockStyle 同一对象(qrTransform 引用仍在计算属性内) + assert.match(showSrc, /const t = qrTransform\(this\.c\.qrOffsetX,\s*this\.c\.qrOffsetY\);\s*if \(t\) style\.transform = t;/); }); test('show: 自绘版式自带小二维码(开关可关 + 点击进详情, 尺寸/提示文字面板可调)', () => {