docs: design paid post detail refresh
This commit is contained in:
hajimi
@@ -0,0 +1,99 @@
|
||||
# 社区付费帖子详情页 UI 与逻辑优化设计
|
||||
|
||||
日期：2026-08-02
|
||||
|
||||
## 目标
|
||||
|
||||
以用户提供的帖子详情设计稿为视觉基准，重构 `uniapp/src/packages_community/pages/post_detail.vue` 的信息层级和付费解锁区域，同时保留现有点赞、评论、关注、私聊、分享、翻译、AI 分析和删除能力。修复当前详情页付费解锁参数错误及免费预览字数未生效的问题。
|
||||
|
||||
## 方案比较
|
||||
|
||||
1. **高度还原设计稿（采用）**：重组页面结构、样式和解锁交互，效果最接近设计稿；改动集中在详情页，并补充必要的后端预览逻辑修复。
|
||||
2. **中度视觉调整**：保留当前 DOM，仅调整字号、间距和颜色；风险低，但无法解决内容卡层级、解锁信息缺失和评论结构差异。
|
||||
3. **仅修复逻辑**：只修复购买确认参数；实现最快，但不满足本次 UI 优化目标。
|
||||
|
||||
用户已选择方案 1。
|
||||
|
||||
## 页面结构
|
||||
|
||||
### 顶部导航
|
||||
|
||||
- 标题固定为“帖子详情”，不再用正文截断文本占满标题栏。
|
||||
- 左侧保留返回按钮，右侧增加分享图标，复用现有 `SharePopup`。
|
||||
- H5 不额外模拟系统状态栏；App/小程序继续使用 `statusBarHeight`。
|
||||
|
||||
### 帖子内容卡
|
||||
|
||||
- 作者头像、昵称、发布日期和关注按钮放在卡片顶部。
|
||||
- 关注按钮文案统一为“关注 / 已关注”，底层仍复用现有关注关系接口。
|
||||
- 付费内容显示带锁图标的“付费内容”标签。
|
||||
- 将免费预览拆分为标题与摘要：优先使用第一行或第一句作为标题，其余内容作为摘要；数据不足时安全降级为单段正文。
|
||||
- 摘要默认限制行数，内容较长时显示“展开 / 收起”；展开仅展示后端返回的免费预览，不泄露付费全文。
|
||||
- 图片、标签、特朗普翻译和六合彩 AI 分析继续沿用现有分支规则。
|
||||
|
||||
### 解锁卡
|
||||
|
||||
- 使用浅蓝渐变、锁图形、标题、所需积分、当前余额、积分明细入口、主按钮和永久可读提示组成完整解锁区。
|
||||
- 当前余额复用 `getCommunityUserStats()`，未登录时显示“登录后查看”。
|
||||
- “积分明细”跳转现有 `/packages/pages/points_log/points_log`，不新增不存在的积分规则页面。
|
||||
- 主按钮状态区分“确认解锁 / 解锁中 / 已解锁”。
|
||||
|
||||
### 互动与评论
|
||||
|
||||
- 互动标题与点赞、评论、浏览数据放在同一行；分享入口移到顶部导航，避免重复。
|
||||
- 评论项恢复头像、昵称、正文、时间、点赞数和更多操作的清晰层级。
|
||||
- 保留回复、删除自己的评论、子回复列表和底部固定输入栏。
|
||||
- 输入栏采用安全区自适应布局，继续使用 `100vh + flex`，不使用 JS 计算滚动高度。
|
||||
|
||||
## 数据与交互逻辑
|
||||
|
||||
### 付费解锁
|
||||
|
||||
详情页复用社区列表已经验证过的两阶段购买流程：
|
||||
|
||||
1. 调用 `purchasePost({ post_id, confirm: 0 })` 探测购买状态。
|
||||
2. 已购买或 VIP 免费时，直接使用返回全文更新页面。
|
||||
3. 返回 `needs_payment` 时展示确认弹窗。
|
||||
4. 用户确认后调用 `purchasePost({ post_id, confirm: 1 })` 完成扣分。
|
||||
5. 成功后直接更新正文、锁定状态、购买人数和积分余额，不再次请求详情，避免重复增加浏览量。
|
||||
|
||||
购买按钮增加进行中保护，避免重复点击。失败信息继续由统一请求层展示。
|
||||
|
||||
### 免费预览
|
||||
|
||||
- 后端 `postDetail()` 当前硬编码只返回前 20 个字符，忽略帖子保存的 `free_content_len`。
|
||||
- 改为读取 `free_content_len`，并将有效范围限制为 20～500 个字符；缺失或异常时使用默认值 100。
|
||||
- 锁定状态只返回预览文本和最多一张图片，完整正文仍只在购买成功、作者本人或已购买用户场景返回。
|
||||
|
||||
### 点赞与评论计数
|
||||
|
||||
- 本地点赞计数统一转为非负数字，防止空值加减产生 `NaN` 或负数。
|
||||
- 评论成功后等待评论列表刷新完成，再以接口结果为准更新展示；删除评论继续按后端返回的 `deleted_ids` 同步父评论和子回复计数。
|
||||
|
||||
## 异常与空状态
|
||||
|
||||
- 详情加载失败时显示页面级失败提示和返回入口，不只弹出短暂 Toast 后留白。
|
||||
- 评论加载失败不影响帖子正文，评论区显示可重试状态。
|
||||
- 积分余额加载失败显示“--”，不误显示为 0。
|
||||
- 无头像、无昵称、无摘要、无评论等场景继续使用默认资源和空状态。
|
||||
|
||||
## 跨端约束
|
||||
|
||||
- 使用 uni-app `view/text/image/scroll-view/input` 与现有 `u-icon`，不新增仅 H5 可用的 DOM API。
|
||||
- 安全区、状态栏和键盘顶起行为保持现有条件编译方式。
|
||||
- 样式继续使用当前项目 SCSS/BEM 命名，不引入新的 UI 依赖。
|
||||
|
||||
## 计划改动文件
|
||||
|
||||
- `uniapp/src/packages_community/pages/post_detail.vue`
|
||||
- `server/app/api/controller/CommunityController.php`
|
||||
- `docs/设计稿映射.md`
|
||||
- `docs/业务进度管理.md`
|
||||
|
||||
## 验收标准
|
||||
|
||||
- 430px H5 视口下，结构和视觉层级接近设计稿：固定标题、作者内容卡、完整解锁卡、互动评论区和底部输入栏。
|
||||
- 未登录、积分不足、已购买、VIP 免费、作者本人和普通免费帖均不会进入错误解锁状态。
|
||||
- 点击确认解锁会真实传递 `confirm=1`，成功后页面立即显示全文且余额刷新。
|
||||
- 免费预览按 `free_content_len` 生效，锁定用户无法从接口响应获得完整正文。
|
||||
- 现有关注、点赞、评论、回复、分享、翻译、AI 分析和删除入口不回归。
|
||||
Reference in New Issue
Block a user