Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore：二维码微调值可以正常调动

Browse Source
This commit is contained in:
jing
2026-10-22 11:26:43 +08:00
parent 3d144a7492
commit 3bcf0c8c87
2 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components-diy/diy-card-show.vue
View File

@@ -36,7 +36,7 @@
<text v-if="jobLine" class="card-job" :style="subStyle">{{ jobLine }}</text>
</view>
<!-- 头部右侧档 -->
<view v-if="showQrHead" class="card-qr" :style="[qrBlockStyle, qrShiftStyle]" hover-class="btn-press" @tap.stop="openCardShare">
<view v-if="showQrHead" class="card-qr" :style="qrBlockStyle" hover-class="btn-press" @tap.stop="openCardShare">
<image class="qr-img" :style="qrImgStyle" :src="$util.img(card.qr_url)" mode="aspectFit" />
<text class="qr-tip" :style="subStyle">{{ qrTipText }}</text>
</view>
@@ -60,13 +60,13 @@
</view>
<!-- 资料行下方档(默认): 大码居中, 资料行随之下移 -->
<view v-if="showQrRows" class="qr-center" :style="[qrBlockStyle, qrShiftStyle]" hover-class="btn-press" @tap.stop="openCardShare">
<view v-if="showQrRows" class="qr-center" :style="qrBlockStyle" hover-class="btn-press" @tap.stop="openCardShare">
<image class="qr-img-c" :style="qrImgStyle" :src="$util.img(card.qr_url)" mode="aspectFit" />
<text class="qr-tip-c" :style="subStyle">{{ qrTipText }}</text>
</view>
<!-- 右上角浮层档: 白底描边小卡浮在名片右上角, 点击弹分享抽屉 -->
<view v-if="showQrCorner" class="card-qr-corner" :style="[qrBlockStyle, qrShiftStyle]" hover-class="btn-press" @tap.stop="openCardShare">
<view v-if="showQrCorner" class="card-qr-corner" :style="qrBlockStyle" hover-class="btn-press" @tap.stop="openCardShare">
<image class="qr-img-c" :style="qrImgStyle" :src="$util.img(card.qr_url)" mode="aspectFit" />
<text class="qr-tip-corner" :style="subStyle">{{ qrTipText }}</text>
</view>
@@ -82,7 +82,7 @@
</view>
<!-- 主按钮上方档: 大码居中卡于白卡与发名片按钮之间 -->
<view v-if="showQrBottom" class="qr-center qr-center-bottom" :style="[qrBlockStyle, qrShiftStyle]" hover-class="btn-press" @tap.stop="openCardShare">
<view v-if="showQrBottom" class="qr-center qr-center-bottom" :style="qrBlockStyle" hover-class="btn-press" @tap.stop="openCardShare">
<image class="qr-img-c" :style="qrImgStyle" :src="$util.img(card.qr_url)" mode="aspectFit" />
<text class="qr-tip-c" :style="subStyle">{{ qrTipText }}</text>
</view>
@@ -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, 未配置回落「扫码查看完整名片」 */

9
tests/diy-card-qr-style.test.js
View File

@@ -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: 自绘版式自带小二维码(开关可关 + 点击进详情, 尺寸/提示文字面板可调)', () => {