From 67af165c14b839390bc376f63353dd569ee68fc0 Mon Sep 17 00:00:00 2001 From: jing <1683105490@qq.com> Date: Wed, 14 Oct 2026 11:24:23 +0800 Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=E4=BA=A4=E6=8D=A2=E5=90=8D?= =?UTF-8?q?=E7=89=87=E6=A0=B7=E5=BC=8F=E6=9B=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages_tool/card/detail.vue | 240 +++++++++++++++++++++++++++++-------- 1 file changed, 192 insertions(+), 48 deletions(-) diff --git a/pages_tool/card/detail.vue b/pages_tool/card/detail.vue index 1e32fa7..fb2016a 100644 --- a/pages_tool/card/detail.vue +++ b/pages_tool/card/detail.vue @@ -76,27 +76,35 @@ - - - + + + + - - 有 {{ exchangeRequest.count }} 人请求与您交换名片 + + + + 有 + {{ exchangeCount }} + 人请求与您交换名片 + - - - {{ exchangeRequest.name.charAt(0) }} + + + {{ exchangeItem.name.charAt(0) }} - {{ exchangeRequest.name }} + {{ exchangeItem.name }} - {{ exchangeRequest.job_title }}{{ exchangeRequest.company ? ' · ' + exchangeRequest.company : '' }} - {{ exchangeRequest.time }} 向您发起名片交换 + + {{ exchangeItem.job_title }} + {{ exchangeItem.company }} + {{ exchangeItem.create_time_txt }} 向您发起名片交换 - + @@ -106,7 +114,7 @@ 忽略 - + @@ -175,15 +183,10 @@ export default { showShare: false, shareUrl: '', qrUrl: '', - // 交换名片请求(静态占位数据, 接口就绪后替换为后端返回) - exchangeRequest: { - count: 1, - name: '名片君', - job_title: '销售经理', - company: '示例科技有限公司', - avatar: '', - time: '今天 14:17' - } + // 交换名片: ① 待处理请求(真实, exchange/lists) ② 最近一次交换来的人脉(真实, contact/lists?source=exchange) + exchangeList: [], + exchangeCount: 0, + latestExchange: null }; }, computed: { @@ -231,16 +234,27 @@ export default { } return rows; + }, + // 是否「待处理请求」(决定头部文案与是否显示忽略/同意) + exchangeIsRequest() { + return this.exchangeList.length > 0; + }, + // 提醒条展示对象: 优先真实待处理请求(最新的那条), 否则最近一次真实交换来的人脉 + exchangeItem() { + if (this.exchangeList.length > 0) return this.exchangeList[0]; + return this.latestExchange; } }, onLoad(options) { this.cardId = decodeURIComponent(options.card_id || ''); this.loadDetail(); + this.loadExchange(); }, onShow() { // 首次进入由 onLoad 负责加载; 从编辑页返回时(onShow 再次触发)刷新 if (this._loadedOnce) { this.loadDetail(); + this.loadExchange(); } this._loadedOnce = true; }, @@ -363,16 +377,121 @@ export default { }, // 「交换名片」提醒条: 点右侧箭头/整条 → 进入交换请求列表页 goExchangeReq() { - uni.navigateTo({ url: '/pages_tool/card/exchange' }); + const url = this.cardId + ? '/pages_tool/card/exchange?card_id=' + encodeURIComponent(this.cardId) + : '/pages_tool/card/exchange'; + uni.navigateTo({ url: url }); }, - viewExchangeCard() { - uni.showToast({ title: '查看对方名片（接口待接入）', icon: 'none' }); + // 拉取待处理交换请求(只含 status=0), 回填 exchangeList / exchangeCount + // 没有待处理请求时, 再取「最近一次交换来的人脉」作为提醒条的第二个真实数据源 + loadExchange() { + this.$cardApi.exchangeLists({ + data: { page: 1, page_size: 20 }, + success: res => { + const list = (res.code == 0 && res.data) ? (res.data.list || []) : []; + if (list.length > 0) { + // 展示最新那条: create_time / id 都可能缺失, 取到可比较的值再倒序 + const ordered = list.slice().sort((a, b) => { + const av = Number(a.create_time) || Number(a.id) || 0; + const bv = Number(b.create_time) || Number(b.id) || 0; + return bv - av; + }); + this.exchangeList = ordered; + this.exchangeCount = (res.data && res.data.count) || ordered.length; + this.latestExchange = null; + } else { + this.exchangeList = []; + this.exchangeCount = 0; + this.loadLatestExchange(); + } + }, + fail: () => { + this.exchangeList = []; + this.exchangeCount = 0; + this.loadLatestExchange(); + } + }); }, - onIgnoreExchange() { - uni.showToast({ title: '已忽略（接口待接入）', icon: 'none' }); + // 第二个真实数据源: 人脉库里来源=交换的最新一条(交换成功后后端会自动双方建人脉) + loadLatestExchange() { + this.$cardApi.contactLists({ + data: { page: 1, page_size: 1, source: 'exchange' }, + success: res => { + if (res.code != 0 || !res.data) return; + const row = (res.data.list || [])[0]; + this.latestExchange = row ? { + id: row.id, + name: row.name || '', + avatar: row.avatar || '', + job_title: row.job_title || '', + company: row.company || '', + create_time_txt: row.create_time_txt || '' + } : null; + // 无待处理请求时的兜底展示: 头部件数按 1 渲染, 与参考图「有 1 人请求与您交换名片」一致 + this.exchangeCount = this.latestExchange ? 1 : 0; + }, + fail: () => { this.latestExchange = null; this.exchangeCount = 0; } + }); }, - onAgreeExchange() { - uni.showToast({ title: '已同意（接口待接入）', icon: 'none' }); + // 提醒条整条点击: 待处理请求 → 交换请求列表页; 最近交换 → 我的人脉 + onExchangeBarTap() { + if (this.exchangeIsRequest) { + this.goExchangeReq(); + } else { + this.goContacts(); + } + }, + // 点对方名片 → 待处理请求跳对方名片详情; 兜底展示的人脉则回「我的人脉」 + viewExchangeCard(item) { + if (!this.exchangeIsRequest) { + this.goContacts(); + return; + } + if (!item || !item.from_card_id) return; + uni.navigateTo({ + url: '/pages_tool/card/detail?card_id=' + encodeURIComponent(item.from_card_id) + }); + }, + onIgnoreExchange(item) { + // 兜底展示项不是真实待处理请求, 不能拿人脉 id 去调交换接口 + if (!this.exchangeIsRequest || !item || !item.id) { + uni.showToast({ title: '当前没有待处理的交换请求', icon: 'none' }); + return; + } + this.$cardApi.exchangeIgnore({ + data: { id: item.id }, + success: res => { + if (res.code == 0) { + uni.showToast({ title: '已忽略', icon: 'none' }); + this.loadExchange(); + } else if (res.message) { + uni.showToast({ title: res.message, icon: 'none' }); + } + }, + fail: () => {} + }); + }, + onAgreeExchange(item) { + // 兜底展示项不是真实待处理请求, 不能拿人脉 id 去调交换接口 + if (!this.exchangeIsRequest || !item || !item.id) { + uni.showToast({ title: '当前没有待处理的交换请求', icon: 'none' }); + return; + } + this.$cardApi.exchangeAgree({ + data: { id: item.id }, + success: res => { + if (res.code == 0) { + // receiver_created=0 也是正常成功(同人脉已存在被跳过), 不当失败 + const d = res.data || {}; + const txt = d.receiver_created === 0 ? '已交换（人脉已存在）' : '已交换，人脉已互加'; + uni.showToast({ title: txt, icon: 'none' }); + this.loadExchange(); + } else if (res.message) { + uni.showToast({ title: res.message, icon: 'none' }); + } + }, + fail: () => {} + }); }, closeShare() { this.showShare = false; @@ -599,41 +718,55 @@ export default { } // 交换名片请求提醒条(参考图: 宫格下方出现对方要交换的名片) -// 数据先用假数据占位(exchangeRequest), 接口就绪后替换数据源即可 +// 顶部提醒行为浅蓝底 + 蓝色喇叭图标, 名片区白底, 整条浅蓝描边 .exchange-bar { margin: 24rpx 24rpx 0; - // 参考图: 整条外框为蓝色描边, 内层名片区白底, 顶部提醒行为浅蓝底 background-color: #ffffff; - border: 2rpx solid #2aa5ff; + border: 2rpx solid #cfe3ff; border-radius: 16rpx; overflow: hidden; box-sizing: border-box; + // 提醒行高度按需求收窄(上下内边距 20rpx → 12rpx) .eb-head { display: flex; align-items: center; - padding: 20rpx 24rpx; - background-color: #eef5ff; + padding: 12rpx 24rpx; + background-color: #eaf3ff; } - .eb-dot { - width: 10rpx; - height: 10rpx; - margin-right: 12rpx; - border-radius: 50%; - background-color: #2aa5ff; + // 参考图: 蓝色喇叭图标(替换原来的小圆点) + .eb-head-icon { + margin-right: 10rpx; + font-size: 26rpx; + line-height: 1; + color: #2aa5ff; flex-shrink: 0; } .eb-head-text { flex: 1; + display: flex; + align-items: baseline; font-size: 24rpx; + line-height: 1.2; + color: #333333; + } + + // 参考图: 「有 1 人请求与您交换名片」里的数字更大更粗 + .eb-num { + margin: 0 6rpx; + font-size: 26rpx; + line-height: 1.2; + font-weight: 600; color: #2aa5ff; } .eb-arrow { + margin-left: 12rpx; font-size: 24rpx; color: #9fb4cc; + flex-shrink: 0; } .eb-card { @@ -645,8 +778,8 @@ export default { } .eb-avatar { - width: 80rpx; - height: 80rpx; + width: 88rpx; + height: 88rpx; border-radius: 50%; flex-shrink: 0; background-color: #2aa5ff; @@ -688,11 +821,22 @@ export default { color: #2aa5ff; } + // 参考图: 职位一行、公司一行 .eb-job { + display: block; + margin-top: 8rpx; + font-size: 22rpx; + color: #8a94a6; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .eb-company { display: block; margin-top: 6rpx; font-size: 22rpx; - color: #7b8794; + color: #5a6572; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -700,7 +844,7 @@ export default { .eb-time { display: block; - margin-top: 6rpx; + margin-top: 8rpx; font-size: 20rpx; color: #a9b4c0; } @@ -718,13 +862,13 @@ export default { align-items: center; &:first-child { - margin-right: 24rpx; + margin-right: 26rpx; } } .eb-act { - width: 76rpx; - height: 76rpx; + width: 80rpx; + height: 80rpx; border-radius: 50%; display: flex; align-items: center; @@ -734,7 +878,7 @@ export default { // 忽略: 白底细描边圆 + 灰色 ✕ &.eb-act-ignore { background-color: #ffffff; - border: 2rpx solid #dfe4ea; + border: 2rpx solid #e3e8ef; } // 同意: 蓝底实心圆 + 白色 ✓