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-23 15:17:25 +08:00
parent a595a4ae1b
commit c9d77e901d
2 changed files with 23 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components-diy/diy-card-mini.vue
View File

@@ -43,7 +43,7 @@
<!-- 二维码·右上角浮层(corner 档: 外观由 qrStyle 决定, 资料行自动让位; 点击预览名片) -->
<view v-if="showQrCorner" class="mini-qr mini-qr-corner" :style="qrBlockStyle" @tap.stop="onQrTap">
<image class="qr-img" :src="$util.img(card.qr_url)" mode="aspectFit" />
<image class="qr-img" :style="qrImgStyle" :src="$util.img(card.qr_url)" mode="aspectFit" />
<text v-if="showQrTip" class="qr-tip" :style="labelStyle">{{ qrTip || '扫码查看完整名片' }}</text>
</view>
@@ -62,7 +62,7 @@
</view>
<!-- 二维码·头部右侧(head 档: 头像|信息|二维码 三段 flex, 零遮挡; 点击预览名片) -->
<view v-if="showQrHead" class="mini-qr mini-qr-head" :style="qrBlockStyle" @tap.stop="onQrTap">
<image class="qr-img" :src="$util.img(card.qr_url)" mode="aspectFit" />
<image class="qr-img" :style="qrImgStyle" :src="$util.img(card.qr_url)" mode="aspectFit" />
<text v-if="showQrTip" class="qr-tip" :style="labelStyle">{{ qrTip || '扫码查看完整名片' }}</text>
</view>
</view>
@@ -82,7 +82,7 @@
<!-- 二维码·资料行下方(rows 档, 默认; 点击预览名片); mini-qr-center: 块级居中 -->
<view v-if="showQrRows" class="mini-qr mini-qr-center" :style="qrBlockStyle" @tap.stop="onQrTap">
<image class="qr-img" :src="$util.img(card.qr_url)" mode="aspectFit" />
<image class="qr-img" :style="qrImgStyle" :src="$util.img(card.qr_url)" mode="aspectFit" />
<text v-if="showQrTip" class="qr-tip" :style="labelStyle">{{ qrTip || '扫码查看完整名片' }}</text>
</view>
@@ -97,7 +97,7 @@
<!-- 二维码·主按钮上方(bottom 档; 点击预览名片) -->
<view v-if="showQrBottom" class="mini-qr mini-qr-center" :style="qrBlockStyle" @tap.stop="onQrTap">
<image class="qr-img" :src="$util.img(card.qr_url)" mode="aspectFit" />
<image class="qr-img" :style="qrImgStyle" :src="$util.img(card.qr_url)" mode="aspectFit" />
<text v-if="showQrTip" class="qr-tip" :style="labelStyle">{{ qrTip || '扫码查看完整名片' }}</text>
</view>
@@ -249,17 +249,27 @@ export default {
return { marginTop: Math.max(24, total - 104 + 10) + 'rpx' };
},
/**
* 二维码块样式: 尺寸(自定义>档位自动) + 微调位移(transform, WXSS 支持;
* 不用 calc) + 外观(plain 原图 / card 白卡 / theme 主题色 / gradient 渐变)
* 二维码容器样式: 只管尺寸(自定义>档位自动) + 微调位移(transform, WXSS 支持)。
* 外观衬底(白卡/主题色/渐变)在 qrImgStyle 上只包二维码图 ——
* 「扫码查看完整名片」提示(2026-10-23 用户要求)在衬底外, 无蓝底
*/
qrBlockStyle() {
const size = resolveQrSize(this.qrPos, this.c.qrSize);
const style = {
width: size + 'rpx',
height: size + 'rpx',
};
const transform = qrTransform(this.c.qrOffsetX, this.c.qrOffsetY);
if (transform) style.transform = transform;
return this.$util.objToStyle(style);
},
/** 二维码图样式: 尺寸 + 外观衬底(plain 原图 / card 白卡 / theme 主题色 / gradient 渐变) */
qrImgStyle() {
const size = resolveQrSize(this.qrPos, this.c.qrSize);
const style = {
width: size + 'rpx',
height: size + 'rpx',
boxSizing: 'border-box',
};
const theme = (this.card && this.card.theme_color) || CardTokens.color.primary;
if (this.qrStyle === 'card') {
style.background = '#ffffff';