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-21 14:30:13 +08:00
parent c9a4673203
commit 57a67bd61b
1 changed files with 49 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
pages_tool/card/detail.vue
View File

@@ -18,6 +18,13 @@
:class="ds.layout === 'compact' ? 'dc-cover-compact' : 'dc-cover-hero'">
<image class="dc-cover-img" :src="$util.img(ds.cover)" mode="aspectFill"></image>
</view>
<!-- 名片二维码入口: 名片卡右上角(2026-10-21 从底部宫格移入; 点击打开名片二维码弹层) -->
<view class="dc-qr" @tap="openShare">
<text class="iconfont icon-erweima" :style="{ color: '#000000' }"></text>
</view>
<!-- 预览名片: 二维码块下方, 纯文字四个字(2026-10-21 去背景去药丸, 只留「预览名片」;
点击打开本卡公开页, 后端 wap 模板完整渲染画布, 永远跟后台一致) -->
<view class="dc-preview" @tap="previewCard" v-if="shareUrl">预览名片</view>
<!-- 文字色/字号内联: 小程序端 var(--card-text / --card-font-scale) 失效 -->
<view class="dc-name" :style="{ color: ds.textColor }">{{ relation.name || '未命名名片' }}</view>
<view class="dc-job" v-if="relation.job_title" :style="{ color: ds.textSoft, fontSize: (28 * ds.fontScaleNum) + 'rpx' }">{{ relation.job_title }}</view>
@@ -35,8 +42,10 @@
</view>
</view>
<!-- 卡下操作条(参考图: 三项等分, 项与项之间用浅灰竖线分隔) -->
<view class="card-actions" v-if="relation">
<!-- 卡下操作条(参考图: 三项等分, 项与项之间用浅灰竖线分隔)
2026-10-21: 编辑资料/名片样式/切换名片 暂隐藏(showLegacyActions=false), 代码保留可随时恢复;
预览名片已移入名片卡右侧(.dc-preview), 此处不再重复放置 -->
<view class="card-actions" v-if="relation && showLegacyActions">
<view class="ca-item" @tap="goEdit">
<text class="ca-icon iconfont icon-bianji"></text>
<text>编辑资料</text>
@@ -51,11 +60,6 @@
<text class="ca-icon iconfont icon-shuaxin"></text>
<text>切换名片</text>
</view>
<view class="ca-divider"></view>
<!-- 预览名片: 打开本卡公开页(后端 wap 模板完整渲染画布, 永远跟后台一致) -->
<view class="ca-item" @tap="previewCard" v-if="shareUrl">
<text>预览名片</text>
</view>
</view>
<!-- 发名片: 微信小程序端必须用原生 <button open-type="share"> ——
@@ -72,24 +76,23 @@
<!-- #endif -->
</view>
<!-- 功能入口宫格(参考图: 发名片下方四等分图标入口) -->
<view class="entry-grid" v-if="relation">
<!-- 功能入口宫格(参考图: 发名片下方四等分图标入口)
2026-10-21: 潜在客户/我的人脉 暂隐藏(showLegacyActions=false), 代码保留可随时恢复;
名片二维码入口已移至名片卡右上角(.dc-qr), 宫格不再重复放置 -->
<view class="entry-grid" v-if="relation && showLegacyActions">
<view class="eg-item" @tap="goList">
<text class="eg-icon iconfont icon-list" :style="{ color: ds.themeColor }"></text>
<text class="eg-text">名片夹</text>
</view>
<view class="eg-item" @tap="goLeads">
<view class="eg-item" @tap="goLeads" v-if="showLegacyActions">
<text class="eg-icon iconfont icon-yonghu3" :style="{ color: ds.themeColor }"></text>
<text class="eg-text">潜在客户</text>
</view>
<view class="eg-item" @tap="goContacts">
<view class="eg-item" @tap="goContacts" v-if="showLegacyActions">
<text class="eg-icon iconfont icon-pengyouquan" :style="{ color: ds.themeColor }"></text>
<text class="eg-text">我的人脉</text>
</view>
<view class="eg-item" @tap="openShare">
<text class="eg-icon iconfont icon-erweima" :style="{ color: ds.themeColor }"></text>
<text class="eg-text">名片二维码</text>
</view>
<!-- 名片二维码入口已移至名片卡右上角(.dc-qr), 宫格不再重复放置 -->
</view>
<!-- 交换名片提醒条(参考图: 宫格下方出现对方要交换的名片) -->
@@ -229,7 +232,10 @@ export default {
exchangeList: [],
exchangeCount: 0,
// 商家是否开启「员工端样式自选」(GET design/presets 的 enabled); 默认 true(失败开放)
designEnabled: true
designEnabled: true,
// 旧入口显隐开关(2026-10-21 需求: 隐藏「编辑资料/名片样式/切换名片」「潜在客户/我的人脉」,
// 隐藏非删除——改回 true 即全部恢复; 对应方法 goEdit/onStyleTap/goLeads/goContacts 均保留)
showLegacyActions: false
};
},
computed: {
@@ -847,6 +853,33 @@ export default {
padding: 40rpx 36rpx 32rpx;
box-shadow: 0 6rpx 20rpx rgba(0, 30, 80, 0.06);
// 名片二维码入口: 卡片右上角放大块(2026-10-21 从底部宫格移入后按需求放大到右侧整块区域)
.dc-qr {
position: absolute;
top: 24rpx;
right: 24rpx;
width: 170rpx;
height: 170rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16rpx;
background: rgba(0, 30, 80, 0.04);
.iconfont {
font-size: 110rpx;
}
}
// 预览名片: 二维码块下方, 纯文字四个字(2026-10-21 去背景去药丸, 无底色无边框无 padding)
.dc-preview {
position: absolute;
top: 206rpx;
right: 24rpx;
font-size: 24rpx;
color: #666666;
}
// 封面(hero/compact): 顶部全幅出血, 身份信息压在其下沿; classic 不展示
.dc-cover {
margin: -40rpx -36rpx 24rpx;