diff --git a/components-diy/diy-card-show.vue b/components-diy/diy-card-show.vue
index 6bc8406..363f37c 100644
--- a/components-diy/diy-card-show.vue
+++ b/components-diy/diy-card-show.vue
@@ -20,9 +20,13 @@
-
+
-
+
+
+ {{ initialOf(card.name) }}
+
+
{{ card.name || '未命名名片' }}
{{ jobLine }}
@@ -62,7 +66,7 @@
// 自绘参考图版式 —— 主题色顶栏衬底 + 白卡压边 + 右上小二维码(预览名片) +
// 图标资料行 + 卡外「发名片」胶囊。面板仅颜色/底色/圆角/阴影/行数继续生效。
import {
- CardTokens, px2rpx, num, themeGradient, visibleRows, rowIconFor, rowActOf,
+ CardTokens, px2rpx, num, flagOn, initialOf, avatarBg, themeGradient, visibleRows, rowIconFor, rowActOf,
} from './diy-card-common.js';
export default {
@@ -94,6 +98,13 @@ export default {
bandStyle() {
return this.$util.objToStyle({ background: themeGradient(this.card) });
},
+ /** 头像开关: 面板「显示头像」(历史配置无此字段默认显示; 关后头部只留姓名/职位) */
+ showAvatarBlock() {
+ return flagOn(this.c.showAvatar, true);
+ },
+ avatarStyle() {
+ return this.$util.objToStyle({ background: avatarBg(this.card) });
+ },
/** 职位行: 职位优先, 缺失退公司/名片标题(参考图只显一行) */
jobLine() {
const card = this.card || {};
@@ -158,6 +169,8 @@ export default {
this.fetchData();
},
methods: {
+ // 模板无法访问模块导入, 需挂到实例(diy-card-mini 同款写法); 头像缺图时显示姓氏首字
+ initialOf,
fetchData() {
const cardId = String((this.value || {}).cardId || '').trim();
if (cardId === '') {
@@ -280,12 +293,41 @@ export default {
align-items: flex-start;
justify-content: space-between;
+ /* 头像(面板「显示头像」可关): 圆形, 底色主题色, 缺图显示姓名首字 */
+ .card-avatar {
+ flex-shrink: 0;
+ width: 104rpx;
+ height: 104rpx;
+ border-radius: 50%;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .avatar-img {
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+
+ .avatar-initial {
+ font-size: 42rpx;
+ font-weight: 700;
+ color: #ffffff;
+ }
+ }
+
.head-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
+ /* 与头像的间距只在头像显示时存在(关闭后姓名列与资料行左缘对齐) */
+ &.with-avatar {
+ margin-left: 24rpx;
+ }
+
.card-name {
font-size: 38rpx;
font-weight: 700;
diff --git a/tests/diy-card-qr-style.test.js b/tests/diy-card-qr-style.test.js
index 9f3f77d..59badc9 100644
--- a/tests/diy-card-qr-style.test.js
+++ b/tests/diy-card-qr-style.test.js
@@ -182,6 +182,13 @@ test('self: miniConfig 透传头像+二维码新六字段', () => {
assert.match(selfSrc, /qrTipShow:\s*v\.qrTipShow/);
});
+test('show: 头像开关(面板「显示头像」, 默认显示, 关后头部只留姓名/职位)', () => {
+ assert.match(showSrc, /showAvatarBlock\(\)\s*\{\s*return flagOn\(this\.c\.showAvatar,\s*true\)/);
+ assert.match(showSrc, //);
+ // 反例形态: 不允许出现常显头像(绕过开关)
+ assert.ok(!showSrc.includes(' {
assert.match(showSrc, /class="card-qr"/);
assert.match(showSrc, /\$util\.img\(card\.qr_url\)/);