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 18:25:00 +08:00
parent 3fb5b0b92e
commit efa7c736f9
3 changed files with 25 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components-diy/diy-card-common.js
View File

@@ -192,7 +192,10 @@ export function normalizeQrPosition(v) {
return QR_POSITION_ALIAS[s] || 'rows';
}
/** 各档位的二维码边长(rpx): 头部右侧紧凑, 浮层带衬底, 行下/底部大图便于扫 */
export const QR_SIZES = { rows: 180, head: 120, corner: 120, bottom: 180 };
/** 二维码默认尺寸(rpx); 面板「二维码尺寸」留空/0 = 按位自动取此档。
* rows/bottom(流内大码)240, head(头部右侧)200 —— 以 2026-10-22 用户参考图(C 端运行效果)定稿;
* corner(右上浮层, 占 Logo 位)空间受限保持 120 */
export const QR_SIZES = { rows: 240, head: 200, corner: 120, bottom: 240 };
/**
* 二维码外观样式(四档): plain 原图 / card 白卡描边(默认) / theme 主题色底 /

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

@@ -78,8 +78,8 @@
</view>
</view>
<!-- 二维码·资料行下方(rows 档, 默认; 点击预览名片) -->
<view v-if="showQrRows" class="mini-qr" :style="qrBlockStyle" @tap.stop="onQrTap">
<!-- 二维码·资料行下方(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" />
<text v-if="showQrTip" class="qr-tip" :style="labelStyle">{{ qrTip || '扫码查看完整名片' }}</text>
</view>
@@ -94,7 +94,7 @@
</view>
<!-- 二维码·主按钮上方(bottom 档; 点击预览名片) -->
<view v-if="showQrBottom" class="mini-qr" :style="qrBlockStyle" @tap.stop="onQrTap">
<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" />
<text v-if="showQrTip" class="qr-tip" :style="labelStyle">{{ qrTip || '扫码查看完整名片' }}</text>
</view>
@@ -410,12 +410,14 @@ export default {
}
.mini-gradient {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 10rpx;
/* 流内饰条(2026-10-22 参考图定稿, show 的 .card-grad-bar 同款):
不再 absolute 贴死卡顶, 改为排在头像行上方并与其拉开 28rpx */
position: relative;
z-index: 2;
width: 100%;
height: 14rpx;
border-radius: 8rpx;
margin-bottom: 28rpx;
}
.mini-logo {
@@ -584,6 +586,12 @@ export default {
flex-direction: column;
align-items: center;
/* rows/bottom 档(流内块级)水平居中; corner/head 档不带本类, 定位不受影响 */
&.mini-qr-center {
margin-left: auto;
margin-right: auto;
}
/* 块尺寸由 qrBlockStyle 内联给出(自定义/档位), 图片填满内容盒 */
.qr-img {
width: 100%;

7
tests/diy-card-ab-visual.test.js
View File

@@ -103,8 +103,11 @@ test('mini: 二维码四档渲染分支齐全', () => {
// 模板四个挂点
assert.match(miniSrc, /v-if="showQrCorner" class="mini-qr mini-qr-corner"/);
assert.match(miniSrc, /v-if="showQrHead" class="mini-qr mini-qr-head"/);
assert.match(miniSrc, /v-if="showQrRows" class="mini-qr"/);
assert.match(miniSrc, /v-if="showQrBottom" class="mini-qr"/);
// rows/bottom 档流内块级, 带 mini-qr-center 水平居中(2026-10-22: 修复二维码偏左)
assert.match(miniSrc, /v-if="showQrRows" class="mini-qr mini-qr-center"/);
assert.match(miniSrc, /v-if="showQrBottom" class="mini-qr mini-qr-center"/);
// 居中只加左右 auto 边距, 不碰 corner/head 档定位
assert.match(miniSrc, /&\.mini-qr-center \{\s*margin-left: auto;\s*margin-right: auto;\s*\}/);
// 总条件仍要求名片有 qr_url
assert.match(miniSrc, /showQrBase\(\)\s*\{\s*return flagOn\(this\.c\.showQr,\s*false\) && !!\(this\.card && this\.card\.qr_url\)/);
});