diff --git a/pages_tool/card/detail.vue b/pages_tool/card/detail.vue
index b9b7e90..f5fa74e 100644
--- a/pages_tool/card/detail.vue
+++ b/pages_tool/card/detail.vue
@@ -30,7 +30,7 @@
编辑资料
-
+
名片样式
@@ -78,6 +78,42 @@
+
+
+
+
+
+ 有 {{ exchangeRequest.count }} 人请求与您交换名片
+
+
+
+
+ {{ exchangeRequest.name.charAt(0) }}
+
+
+ {{ exchangeRequest.name }}
+
+
+ {{ exchangeRequest.job_title }}{{ exchangeRequest.company ? ' · ' + exchangeRequest.company : '' }}
+ {{ exchangeRequest.time }} 向您发起名片交换
+
+
+
+
+
+
+ 忽略
+
+
+
+
+
+ 同意
+
+
+
+
+
加载中…
@@ -135,7 +171,16 @@ export default {
errorMsg: '',
showShare: false,
shareUrl: '',
- qrUrl: ''
+ qrUrl: '',
+ // 交换名片请求(静态占位数据, 接口就绪后替换为后端返回)
+ exchangeRequest: {
+ count: 1,
+ name: '名片君',
+ job_title: '销售经理',
+ company: '示例科技有限公司',
+ avatar: '',
+ time: '今天 14:17'
+ }
};
},
computed: {
@@ -306,6 +351,24 @@ export default {
this.buildShareInfo();
this.showShare = true;
},
+ // 「名片样式」: 与分享二维码无关, 不再打开分享抽屉。
+ // 样式选择页尚未开发, 先给占位提示; 后续实现后把这里换成跳转/弹层即可。
+ onStyleTap() {
+ uni.showToast({ title: '名片样式功能开发中', icon: 'none' });
+ },
+ // 「交换名片」提醒条: 静态占位, 接口就绪后替换数据源并接真实请求
+ goExchangeReq() {
+ uni.showToast({ title: '交换名片功能开发中', icon: 'none' });
+ },
+ viewExchangeCard() {
+ uni.showToast({ title: '查看对方名片（接口待接入）', icon: 'none' });
+ },
+ onIgnoreExchange() {
+ uni.showToast({ title: '已忽略（接口待接入）', icon: 'none' });
+ },
+ onAgreeExchange() {
+ uni.showToast({ title: '已同意（接口待接入）', icon: 'none' });
+ },
closeShare() {
this.showShare = false;
},
@@ -522,6 +585,162 @@ export default {
}
}
+// 交换名片请求提醒条(参考图: 宫格下方出现对方要交换的名片)
+// 数据先用假数据占位(exchangeRequest), 接口就绪后替换数据源即可
+.exchange-bar {
+ margin: 24rpx 24rpx 0;
+ // 参考图: 整条外框为蓝色描边, 内层名片区白底, 顶部提醒行为浅蓝底
+ background-color: #ffffff;
+ border: 2rpx solid #2aa5ff;
+ border-radius: 16rpx;
+ overflow: hidden;
+ box-sizing: border-box;
+
+ .eb-head {
+ display: flex;
+ align-items: center;
+ padding: 20rpx 24rpx;
+ background-color: #eef5ff;
+ }
+
+ .eb-dot {
+ width: 10rpx;
+ height: 10rpx;
+ margin-right: 12rpx;
+ border-radius: 50%;
+ background-color: #2aa5ff;
+ flex-shrink: 0;
+ }
+
+ .eb-head-text {
+ flex: 1;
+ font-size: 24rpx;
+ color: #2aa5ff;
+ }
+
+ .eb-arrow {
+ font-size: 24rpx;
+ color: #9fb4cc;
+ }
+
+ .eb-card {
+ display: flex;
+ align-items: center;
+ // 名片区独立白底, 与浅蓝提醒行分块(参考图)
+ padding: 24rpx;
+ background-color: #ffffff;
+ }
+
+ .eb-avatar {
+ width: 80rpx;
+ height: 80rpx;
+ border-radius: 50%;
+ flex-shrink: 0;
+ background-color: #2aa5ff;
+ }
+
+ .eb-avatar-ph {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #ffffff;
+ font-size: 34rpx;
+ font-weight: 600;
+ }
+
+ .eb-info {
+ flex: 1;
+ min-width: 0;
+ margin-left: 20rpx;
+ }
+
+ .eb-name-row {
+ display: flex;
+ align-items: center;
+ }
+
+ .eb-name {
+ font-size: 28rpx;
+ font-weight: 600;
+ color: #333333;
+ max-width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ .eb-badge {
+ margin-left: 8rpx;
+ font-size: 24rpx;
+ color: #2aa5ff;
+ }
+
+ .eb-job {
+ display: block;
+ margin-top: 6rpx;
+ font-size: 22rpx;
+ color: #7b8794;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ .eb-time {
+ display: block;
+ margin-top: 6rpx;
+ font-size: 20rpx;
+ color: #a9b4c0;
+ }
+
+ .eb-actions {
+ display: flex;
+ flex-shrink: 0;
+ margin-left: 20rpx;
+ }
+
+ // 参考图: 上方图标圆 + 下方文字(忽略/同意)
+ .eb-act-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ &:first-child {
+ margin-right: 24rpx;
+ }
+ }
+
+ .eb-act {
+ width: 76rpx;
+ height: 76rpx;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 32rpx;
+ box-sizing: border-box;
+
+ // 忽略: 白底细描边圆 + 灰色 ✕
+ &.eb-act-ignore {
+ background-color: #ffffff;
+ border: 2rpx solid #bcccdc;
+ color: #7b8794;
+ }
+
+ // 同意: 蓝底实心圆 + 白色 ✓
+ &.eb-act-agree {
+ background-color: #2aa5ff;
+ color: #ffffff;
+ }
+ }
+
+ .eb-act-text {
+ margin-top: 8rpx;
+ font-size: 20rpx;
+ line-height: 1.2;
+ color: #8a94a6;
+ }
+}
+
/* 分享面板(微信式底部抽屉, 与 wap 留资抽屉同风格) */
.share-mask {
position: fixed;