从零用 Java 实现小红书 SpringBoot Vue UniApp（19）分享卡片、体验时长与上线清单
>## [**移动端演示 http://8.146.211.120:8081/#/**](https://gitee.com/link?target=http%3A%2F%2F8.146.211.120%3A8081%2F%23%2F) ## [**管理端演示 http://8.146.211.120:8088/#/**](https://gitee.com/link?target=http%3A%2F%2F8.146.211.120%3A8088%2F%23%2F) ## [**项目整体介绍及演示**](https://gitee.com/link?target=https%3A%2F%2Fblog.csdn.net%2Fqq_35238367%2Farticle%2Fdetails%2F145126222) **前言** （16）～（18）分别做了 IM、直播、聊天室。把用户真正「拉进来」，还差最后一公里：**分享**与**可控的试用时长**。 本章聚焦两件运营向能力： 1. 直播 / 聊天室邀请以**卡片消息**发到私信或群聊，点击直达房间 2. `max-minutes` 体验限制：配置、倒计时、到期关房、一键 SQL ----          ### 一、分享卡片：为什么不用纯文本链接 纯文本链接有两个问题：聊天里不好识别；无法带封面、标题、主播信息。 因此扩展私信/群聊 `contentType`： |类型值|含义|会话摘要| |:-:|:-:|:-:| |`7` LIVE|直播邀请卡|`[直播]标题`| |`8` VOICE_ROOM|聊天室邀请卡|`[聊天室]标题`| 后端摘要（16 已埋点）： ``` if (contentType == TYPE_LIVE) { return "[直播]" + extractNoteTitle(content); } if (contentType == TYPE_VOICE_ROOM) { return "[聊天室]" + extractNoteTitle(content); } ``` #### 发送链路 ``` 直播间/聊天室点击分享 → 选择「发给好友」 → share-invite 页选互关好友（或进群） → 组装卡片 payload 调用私信/群发接口 → 对端气泡渲染卡片 → 点击跳转 live?id= / voice-room/room?roomNo= ``` #### 邀请链接（站外私域） ``` export function buildLiveInviteLink(noteId) { // #ifdef H5 if (typeof location !== 'undefined') { const base = `${location.origin}${location.pathname || '/'}`; return `${base}#/pages/note/live?id=${encodeURIComponent(noteId)}`; } // #endif return `/pages/note/live?id=${noteId}`; } export function buildVoiceRoomInviteLink(roomNo) { // #ifdef H5 if (typeof location !== 'undefined') { const base = `${location.origin}${location.pathname || '/'}`; return `${base}#/pages/voice-room/room?roomNo=${encodeURIComponent(roomNo)}`; } // #endif return `/pages/voice-room/room?roomNo=${roomNo}`; } ``` #### 卡片 payload 组装思路 与笔记分享同一套路（`buildNotePayload` 模式）：JSON 字符串写入 `content`，`contentType` 标 7 或 8。 ``` // 直播卡示意 function buildLiveSharePayload(note) { return JSON.stringify({ noteId: note.id, title: note.title || '直播中', coverUrl: note.coverUrl || '', nickname: note.anchorNickname || '', avatar: note.anchorAvatar || '', liveMode: note.liveMode, // 0 语音 / 1 视频 }); } // 聊天室卡示意 function buildVoiceRoomSharePayload(room) { return JSON.stringify({ roomNo: room.roomNo, title: room.title || '聊天室', coverUrl: room.ownerAvatar || '', nickname: room.ownerNickname || '', mediaMode: room.mediaMode, }); } // 发送 await DmApi.sendMessage({ peerId, contentType: 7, // 或 8 content: buildLiveSharePayload(note), }); ``` 后端只需放宽 `contentType` 白名单并写好会话摘要，**不必为卡片单独建表**。 前端协议与页面： - `sheep/helper/dmContent.js` - `pages/message/share-invite.vue` - `pages/message/chat.vue` / `group-chat.vue` 渲染与点击跳转 ---- ### 二、体验时长：配置驱动 |config_key|默认|说明| |:-:|:-:|:-:| |`member.live.max-minutes`|30|直播单场最长分钟，`0`=不限制| |`member.voice-room.max-minutes`|30|聊天室单场最长分钟，`0`=不限制| #### 三端协同 1. **后端**：credentials / 进房接口返回 `maxMinutes` + 到期时间；定时任务扫到期房间 2. **Vue 页**：`experienceCountdown.js` 中部倒计时；到期弹窗 3. **Hybrid TRTC 页**：URL 带 `expireAt`，App WebView 内同样倒计时兜底 ``` export function createExperienceCountdown(options) { const expireAtMs = Number(options?.expireAtMs) || 0; const onTick = options?.onTick; const onExpire = options?.onExpire; let timer = null; const tick = () => { const remain = Math.max(0, Math.ceil((expireAtMs - Date.now()) / 1000)); if (typeof onTick === 'function') onTick(remain, formatRemain(remain)); if (remain **演示地址** 移动端：[http://8.146.211.120:8081/#/](https://gitee.com/link?target=http%3A%2F%2F8.146.211.120%3A8081%2F%23%2F) 管理端：[http://8.146.211.120:8088/#/](https://gitee.com/link?target=http%3A%2F%2F8.146.211.120%3A8088%2F%23%2F) **代码地址** https://gitee.com/ddeatrr/springboot_vue_xhs
