chore：名片新增交换名片

pages_tool/card/detail.vue

@@ -30,7 +30,7 @@
 					<text class="ca-icon iconfont icon-bianji"></text>
 					<text>编辑资料</text>
 				</view>
-				<view class="ca-item" @tap="openShare">
+				<view class="ca-item" @tap="onStyleTap">
 					<text class="ca-icon iconfont icon-erweima"></text>
 					<text>名片样式</text>
 				</view>
@@ -78,6 +78,42 @@
 				</view>
 			</view>
 
+			<!-- 交换名片请求提醒条(参考图: 宫格下方出现对方要交换的名片) -->
+			<!-- 数据先用假数据占位(exchangeRequest), 接口就绪后替换数据源即可 -->
+			<view class="exchange-bar" v-if="relation && exchangeRequest" @tap="goExchangeReq">
+				<view class="eb-head">
+					<view class="eb-dot"></view>
+					<text class="eb-head-text">有 {{ exchangeRequest.count }} 人请求与您交换名片</text>
+					<text class="eb-arrow iconfont icon-right"></text>
+				</view>
+				<view class="eb-card" @tap.stop="viewExchangeCard">
+					<image v-if="exchangeRequest.avatar" class="eb-avatar" :src="exchangeRequest.avatar" mode="aspectFill" />
+					<view v-else class="eb-avatar eb-avatar-ph">{{ exchangeRequest.name.charAt(0) }}</view>
+					<view class="eb-info">
+						<view class="eb-name-row">
+							<text class="eb-name">{{ exchangeRequest.name }}</text>
+							<text class="eb-badge iconfont icon-dui"></text>
+						</view>
+						<text class="eb-job">{{ exchangeRequest.job_title }}{{ exchangeRequest.company ? ' · ' + exchangeRequest.company : '' }}</text>
+						<text class="eb-time">{{ exchangeRequest.time }} 向您发起名片交换</text>
+					</view>
+					<view class="eb-actions">
+						<view class="eb-act-item" @tap.stop="onIgnoreExchange">
+							<view class="eb-act eb-act-ignore">
+								<text class="iconfont icon-guanbi"></text>
+							</view>
+							<text class="eb-act-text">忽略</text>
+						</view>
+						<view class="eb-act-item" @tap.stop="onAgreeExchange">
+							<view class="eb-act eb-act-agree">
+								<text class="iconfont icon-dui"></text>
+							</view>
+							<text class="eb-act-text">同意</text>
+						</view>
+					</view>
+				</view>
+			</view>
+
 			<!-- 加载中 -->
 			<view class="detail-loading" v-if="isLoading">加载中…</view>
 
@@ -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;