chore:精选名片的快捷按钮样式改变

This commit is contained in:
2026-10-23 09:01:20 +08:00
parent f26d11f38a
commit 5f4a0ecea1
3 changed files with 13 additions and 45 deletions

View File

@@ -9,7 +9,7 @@
</view>
<!-- 名片卡(已登录=本人名片 / 未登录=兜底名片); loading 时基件出骨架屏;
「我的名片」角标恒显(参考图 2026-10-22: 兜底名片也带角标) -->
「我的名片」角标已按 2026-10-23 参考图定稿移除 -->
<diy-card-mini
v-else-if="loading || card"
:card="card"
@@ -19,11 +19,6 @@
@row-act="doAct"
@detail="goDetail"
>
<template slot="badge">
<view class="self-badge" :style="badgeStyle">
<text class="badge-text">我的名片</text>
</view>
</template>
</diy-card-mini>
<!-- 未登录提示条(参考图 2026-10-22): 兜底名片下方灰条, 左文案右链接 -->
@@ -122,9 +117,6 @@ export default {
subTextStyle() {
return this.$util.objToStyle({ color: (this.value || {}).infoColor || '#8A8F99' });
},
badgeStyle() {
return this.$util.objToStyle({ background: (this.card || {}).theme_color || '#2F6BFF' });
},
loginLinkStyle() {
return this.$util.objToStyle({ color: (this.card || {}).theme_color || '#2F6BFF' });
},
@@ -230,22 +222,6 @@ export default {
width: 100%;
position: relative;
/* 「我的名片」角标: 覆在基件右上(基件已留 logo 位, badge 靠左一点避免重叠) */
.self-badge {
position: absolute;
top: 10rpx;
left: 10rpx;
z-index: 10;
border-radius: 999rpx 0 16rpx 0;
padding: 8rpx 20rpx;
.badge-text {
font-size: 20rpx;
color: #ffffff;
font-weight: 600;
}
}
/* 未登录提示条(参考图 2026-10-22): 兜底名片下方, 浅灰圆角条 左文案右链接 */
.self-login-bar {
margin-top: 20rpx;

View File

@@ -71,12 +71,13 @@
<text class="qr-tip-corner" :style="subStyle">{{ qrTipText }}</text>
</view>
<!-- 快捷操作(面板「显示快捷操作」可关; 服务端按资料派生, 首个主动作填充) -->
<!-- 快捷操作(面板「显示快捷操作」可关; 服务端按资料派生;
2026-10-23 参考图定稿: 统一「发邮件」样式 白底+主题色描边) -->
<view v-if="showActsBlock && acts.length" class="card-acts">
<view v-for="(act, i) in acts" :key="i" class="act-chip"
:style="i === 0 ? actPrimaryStyle : actGhostStyle"
:style="actChipStyle"
hover-class="btn-press" @tap.stop="doAct(act)">
<text class="act-text" :style="i === 0 ? actPrimaryTextStyle : actGhostTextStyle">{{ act.label }}</text>
<text class="act-text" :style="actChipTextStyle">{{ act.label }}</text>
</view>
</view>
</view>
@@ -260,24 +261,16 @@ export default {
acts() {
return this.card && Array.isArray(this.card.acts) ? this.card.acts : [];
},
actPrimaryStyle() {
actChipStyle() {
// 快捷芯片统一「发邮件」样式(2026-10-23 参考图定稿): 白底 + 主题色描边;
// 尺寸/圆角由 .act-chip CSS 类控制(避免内联锁死)
const theme = (this.card && this.card.theme_color) || CardTokens.color.primary;
return this.$util.objToStyle({
background: theme,
background: '#FFFFFF',
border: '2rpx solid ' + theme,
});
},
actGhostStyle() {
const theme = (this.card && this.card.theme_color) || CardTokens.color.primary;
return this.$util.objToStyle({
background: 'transparent',
border: '2rpx solid ' + theme,
});
},
actPrimaryTextStyle() {
return this.$util.objToStyle({ color: '#FFFFFF' });
},
actGhostTextStyle() {
actChipTextStyle() {
return this.$util.objToStyle({ color: (this.card && this.card.theme_color) || CardTokens.color.primary });
},
avatarStyle() {

View File

@@ -247,10 +247,9 @@ test('self: miniConfig 透传头像+二维码新六字段', () => {
assert.match(selfSrc, /qrTipShow:\s*v\.qrTipShow/);
});
test('self: 「我的名片」角标恒显 + 未登录提示条(2026-10-22 参考图定稿)', () => {
// 角标不再依赖 isSelf(兜底名片也带「我的名片」角标)
assert.match(selfSrc, /<template slot="badge">/);
assert.match(selfSrc, /<text class="badge-text">我的名片<\/text>/);
test('self: 「我的名片」角标已移除 + 未登录提示条(2026-10-23 参考图定稿)', () => {
// 角标按 2026-10-23 参考图删除(此前 2026-10-22 曾恒显), 反例防回归
assert.ok(!selfSrc.includes('self-badge') && !selfSrc.includes('slot="badge"'));
// 未登录提示条: 兜底名片下方, 左文案(点去登录)右链接(点去看看名片)
assert.match(selfSrc, /v-if="!hasToken && fallbackMode !== 'none' && !loading && card"\s+class="self-login-bar"/);
assert.match(selfSrc, /class="login-bar-text" :style="subTextStyle" @tap="goLogin"/);