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 10:52:47 +08:00
parent b294fc3640
commit 3d144a7492
2 changed files with 103 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,6 +20,11 @@
<view class="show-band" :style="bandStyle"></view>
<view class="show-card" :style="cardShellStyle">
<!-- 封面图作背景(面板可关): 铺满整卡 + 压暗遮罩, 内容层 z-index 抬升防遮挡 -->
<image v-if="showCover" class="card-cover" :src="$util.img(card.cover)" mode="aspectFill" />
<view v-if="showCover" class="card-cover-scrim"></view>
<!-- 主题渐变饰条(面板可关): 名片主题渐变横条, 置于卡片顶部 -->
<view v-if="showGradBar" class="card-grad-bar" :style="gradBarStyle"></view>
<!-- 头部: 头像(面板可关, 关后只留姓名/职位) + 姓名/职位 左, 小二维码"预览名片" 右 -->
<view class="card-head">
<view v-if="showAvatarBlock" class="card-avatar" :style="avatarStyle">
@@ -35,6 +40,8 @@
<image class="qr-img" :style="qrImgStyle" :src="$util.img(card.qr_url)" mode="aspectFit" />
<text class="qr-tip" :style="subStyle">{{ qrTipText }}</text>
</view>
<!-- 名片 Logo(面板可关): 头部右侧, 与头部档二维码同位自动避让 -->
<image v-if="showLogo" class="card-logo" :src="$util.img(card.logo)" mode="aspectFit" />
</view>
<!-- 资料行(面板「显示资料行」可关; 有字形字段显图标, 无字形退化为文字标签; href 派生点击动作) -->
@@ -145,11 +152,31 @@ export default {
cardShellStyle() {
const c = this.c;
return this.$util.objToStyle({
background: c.bgColor || CardTokens.color.bg,
// 封面图作背景时白底让位(封面图铺满整卡, mini 基件同口径)
background: this.showCover ? 'transparent' : (c.bgColor || CardTokens.color.bg),
borderRadius: px2rpx(num(c.borderRadius, 16)) + 'rpx',
boxShadow: c.showShadow === false ? 'none' : CardTokens.shadow.card,
});
},
/** 封面图作背景: 面板「名片设计资产 → 封面图作背景」(默认关; 名片未配封面图时不显示) */
showCover() {
return flagOn(this.c.useCover, false) && !!(this.card && this.card.cover);
},
/** 主题渐变饰条: 面板「名片设计资产 → 主题渐变饰条」(默认关) */
showGradBar() {
return flagOn(this.c.showGradient, false);
},
/** 名片 Logo: 面板「名片设计资产 → 名片 Logo」(默认关; 名片未配 Logo 不显示;
* 与头部档二维码同在右上, 自动避让 —— mini 基件同口径) */
showLogo() {
return flagOn(this.c.showLogo, false) && !!(this.card && this.card.logo) && !this.showQrHead;
},
/** 饰条底色: 名片主题渐变(未配渐变副色时 themeGradient 退化为纯主题色) */
gradBarStyle() {
return this.$util.objToStyle({
background: themeGradient(this.card),
});
},
/** 主题色顶栏: 名片主题渐变, 无主题退化默认主色 */
bandStyle() {
return this.$util.objToStyle({ background: themeGradient(this.card) });
@@ -503,6 +530,56 @@ export default {
width: auto;
overflow: hidden;
/* 封面图作背景(面板「封面图作背景」开 + 名片已配封面图才渲染):
铺满整卡 + 半透明压暗遮罩(白字可读), mini 基件同款参数 */
.card-cover {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.card-cover-scrim {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(15, 23, 42, 0.45);
z-index: 1;
}
/* 内容层压过封面/遮罩(绝对定位的封面默认盖住静态内容) */
.card-head,
.card-rows,
.card-acts,
.qr-center {
position: relative;
z-index: 2;
}
/* 主题渐变饰条: 卡片顶部横条(细高圆角, 底色走 gradBarStyle 内联主题渐变) */
.card-grad-bar {
position: relative;
z-index: 2;
height: 14rpx;
border-radius: 8rpx;
margin-bottom: 28rpx;
}
/* 名片 Logo: 头部右侧小图(自动推到行尾; 头部档二维码显示时不渲染, 自动避让) */
.card-logo {
position: relative;
z-index: 2;
width: 96rpx;
height: 96rpx;
border-radius: 12rpx;
margin-left: auto;
flex-shrink: 0;
}
.card-head {
display: flex;
align-items: flex-start;

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

@@ -239,6 +239,31 @@ test('show: 二维码位置四档(与面板下拉/mini 基件同口径, 未配
assert.match(showSrc, /qrTransform\(this\.c\.qrOffsetX,\s*this\.c\.qrOffsetY\)/);
});
test('show: 封面图作背景(面板「名片设计资产 → 封面图作背景」, 默认关, 未配封面图不显示)', () => { assert.match(showSrc, /showCover\(\)\s*\{\s*return flagOn\(this\.c\.useCover,\s*false\) && !!\(this\.card && this\.card\.cover\)/);
// 开启后白卡底变透明, 封面图铺满整卡 + 压暗遮罩(mini 基件同款参数)
assert.match(showSrc, /background:\s*this\.showCover \? 'transparent' : \(c\.bgColor \|\| CardTokens\.color\.bg\)/);
assert.match(showSrc, /<image v-if="showCover" class="card-cover" :src="\$util\.img\(card\.cover\)" mode="aspectFill" \/>/);
assert.match(showSrc, /<view v-if="showCover" class="card-cover-scrim"><\/view>/);
assert.match(showSrc, /background: rgba\(15, 23, 42, 0\.45\);/);
});
test('show: 主题渐变饰条(面板「名片设计资产 → 主题渐变饰条」, 默认关)', () => {
assert.match(showSrc, /showGradBar\(\)\s*\{\s*return flagOn\(this\.c\.showGradient,\s*false\)/);
// 饰条底色走名片主题渐变
assert.match(showSrc, /gradBarStyle\(\)\s*\{\s*return this\.\$util\.objToStyle\(\{\s*background: themeGradient\(this\.card\),\s*\}\);/);
// 模板: 卡片顶部横条 + 细高圆角样式
assert.match(showSrc, /<view v-if="showGradBar" class="card-grad-bar" :style="gradBarStyle"><\/view>/);
assert.match(showSrc, /\.card-grad-bar \{[\s\S]*?height: 14rpx;[\s\S]*?border-radius: 8rpx;/);
});
test('show: 名片 Logo 开关(面板「名片设计资产 → 名片 Logo」, 默认关; 未配 Logo 不显示; 头部档二维码同位避让)', () => {
assert.match(showSrc, /showLogo\(\)\s*\{\s*return flagOn\(this\.c\.showLogo,\s*false\) && !!\(this\.card && this\.card\.logo\) && !this\.showQrHead;/);
// 模板: 头部右侧 Logo 图
assert.match(showSrc, /<image v-if="showLogo" class="card-logo" :src="\$util\.img\(card\.logo\)" mode="aspectFit" \/>/);
// 样式: 头部右侧小图, margin-left:auto 推到行尾
assert.match(showSrc, /\.card-logo \{[\s\S]*?width: 96rpx;[\s\S]*?margin-left: auto;/);
});
test('show: 发名片按钮开关(面板「底部按钮 → 发送名片按钮」, 默认显示; 文案消费 detailBtnText)', () => {
assert.match(showSrc, /showSendBtn\(\)\s*\{\s*return flagOn\(this\.c\.showDetailBtn,\s*true\)/);
assert.match(showSrc, /v-if="showSendBtn" class="show-send"/);