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-24 08:39:32 +08:00
parent c9d77e901d
commit ff530cd6a2
2 changed files with 31 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -219,28 +219,10 @@ export default {
return normalizeQrStyle(this.c.qrStyle);
},
qrBlockStyle() {
// 2026-10-23 用户定稿: 外观衬底不设在块上(否则蓝底把「扫码查看完整名片」提示一起包住),
// 只保留微调位移; 衬底移到二维码图上(qrImgStyle), 紧贴码本身
const style = {};
const theme = (this.card && this.card.theme_color) || CardTokens.color.primary;
if (this.qrStyle === 'card') {
style.background = '#ffffff';
style.border = '2rpx solid #EEF0F3';
style.borderRadius = '12rpx';
style.padding = '10rpx';
} else if (this.qrStyle === 'theme') {
style.background = theme;
style.borderRadius = '12rpx';
style.padding = '10rpx';
} else if (this.qrStyle === 'gradient') {
// 名片仅单主题色(无 gradient_end)时, themeGradient 返回纯色渐变(看不出渐变),
// 故用压暗一档的终止色保证「渐变圆角」始终可见明暗过渡
const theme = (this.card && this.card.theme_color) || CardTokens.color.primary;
const end = (this.card && this.card.gradient_end) || darkenColor(theme, 0.18);
style.background = 'linear-gradient(135deg, ' + theme + ' 0%, ' + end + ' 100%)';
style.borderRadius = '16rpx';
style.padding = '6rpx';
}
// plain 不进任何分支(无衬底, 即原图)
// 微调位移(qrOffsetX/Y): 与外观合并成同一段内联样式
// 微调位移(qrOffsetX/Y)
const t = qrTransform(this.c.qrOffsetX, this.c.qrOffsetY);
if (t) style.transform = t;
return this.$util.objToStyle(style);
@@ -293,10 +275,31 @@ export default {
return resolveQrSize(this.qrPos, this.c.qrSize);
},
qrImgStyle() {
return this.$util.objToStyle({
const style = {
width: this.qrSide + 'rpx',
height: this.qrSide + 'rpx',
});
// 外观衬底只包二维码图(边距不撑大总尺寸), 提示文字在衬底外
boxSizing: 'border-box',
};
const theme = (this.card && this.card.theme_color) || CardTokens.color.primary;
if (this.qrStyle === 'card') {
style.background = '#ffffff';
style.border = '2rpx solid #EEF0F3';
style.borderRadius = '12rpx';
style.padding = '10rpx';
} else if (this.qrStyle === 'theme') {
style.background = theme;
style.borderRadius = '12rpx';
style.padding = '10rpx';
} else if (this.qrStyle === 'gradient') {
// 名片仅单主题色(无 gradient_end)时, 用压暗一档的终止色保证「渐变圆角」始终可见明暗过渡
const end = (this.card && this.card.gradient_end) || darkenColor(theme, 0.18);
style.background = 'linear-gradient(135deg, ' + theme + ' 0%, ' + end + ' 100%)';
style.borderRadius = '16rpx';
style.padding = '6rpx';
}
// plain 不进任何分支(无衬底, 即原图)
return this.$util.objToStyle(style);
},
nameStyle() {
return this.$util.objToStyle({ color: this.c.nameColor || CardTokens.color.text });