# 客户端案例详情页 TAPD 需求

## 需求背景（补充业务场景与触发原因）：

在卖家顾问需求小程序中，客户在首页浏览服务案例时，需要能够查看案例的详细信息，包括案例的具体内容、服务优势、价格等信息，以便更好地了解服务能力和做出决策。目前客户只能看到案例列表的简要信息，缺乏详细的案例展示页面，无法全面了解服务案例的具体实施过程和效果，影响了客户对服务的信任度和决策效率。

## 需求价值（补充对业务的价值）：

1. **提升客户信任度**：通过详细展示案例的实施过程、效果和技术亮点，增强客户对服务能力的信任
2. **促进业务转化**：提供便捷的联系入口，帮助客户快速联系客户经理，提高业务转化率
3. **展示服务优势**：通过案例详情展示专业团队、快速交付、持续支持等服务优势，提升品牌形象
4. **优化用户体验**：提供完整的案例信息查看体验，满足客户了解服务案例的完整需求

## 需求目标（说明该需求要解决的问题或达成的目标）：

1. 为客户提供完整的案例详情查看功能，包括案例基本信息、详细内容、服务优势等
2. 支持多个案例的展示，通过URL参数区分不同案例
3. 提供便捷的联系客户经理入口，促进业务转化
4. 支持案例分享功能，扩大案例传播范围

## 用户故事（不同的视角下，希望的结果）：

**作为客户**：
- 我希望在首页点击案例卡片后，能够查看该案例的详细信息，包括项目背景、解决方案、实施效果等
- 我希望能够看到案例的价格、类型、交付周期等关键信息，帮助我了解服务情况
- 我希望在看到感兴趣的案例后，能够快速联系客户经理进行咨询
- 我希望能够分享案例给其他人，方便他们了解服务能力

**作为业务方**：
- 我希望通过详细的案例展示，提升客户对服务的信任度和认可度
- 我希望通过联系入口，提高客户咨询和业务转化的效率
- 我希望案例详情页能够支持多个案例的展示，便于后续扩展案例库

## 需求描述（详细阐述需求的行为逻辑、交互流程或后台规则）：

### 1. 页面入口
- 从客户端首页的案例列表点击案例卡片进入
- 通过URL参数 `id` 传递案例ID，用于加载对应的案例数据
- 如果未传递ID或ID不存在，默认加载ID为1的案例

### 2. 页面结构
页面包含以下主要区域：
- **导航栏**：包含返回按钮、页面标题"案例详情"、分享按钮
- **案例封面图片**：展示案例的封面图片，高度250px，支持背景图片展示
- **案例基本信息卡片**：包含案例标题、价格、类型标签、交付周期标签、案例摘要
- **案例详细内容卡片**：包含项目背景、解决方案、实施效果、技术亮点等详细内容
- **服务优势卡片**：展示专业团队、快速交付、持续支持等服务优势
- **底部联系按钮**：固定在页面底部，提供"立即联系客户经理"功能

### 4. 交互功能

#### 4.1 返回功能
- 点击导航栏左侧返回按钮，返回上一页面

#### 4.2 分享功能
- 需要有转发给朋友和分享到朋友圈功能

#### 4.3 联系客户经理功能
- 点击底部"立即联系客户经理"按钮
- 弹出确认对话框，提示"是否立即联系客户经理？我们将为您安排专业的客户经理，为您提供详细的服务咨询。"
- 用户确认后，执行联系操作（当前实现为拨打示例电话，实际应跳转到聊天页面或联系表单）

### 5. 数据存储规则
- 案例数据可以存储在数据库中，包含以下字段：
  - id：案例ID（主键）
  - title：案例标题
  - price：案例价格
  - type：案例类型
  - duration：交付周期
  - summary：案例摘要
  - cover_image：封面图片URL
  - content：案例详细内容（支持HTML格式）
  - created_at：创建时间
  - updated_at：更新时间
- 前端通过接口获取案例数据，接口路径：`/api/cases/{id}`

### 6. 异常处理
- 如果案例ID不存在，加载默认案例（ID为1）
- 如果图片加载失败，显示默认占位图
- 网络请求失败时，显示错误提示信息

### 7. 页面适配
- 页面最大宽度414px，适配移动端显示
- 底部联系按钮需要考虑安全区域适配（iPhone X等设备）
- 支持响应式布局，适配不同屏幕尺寸

## 验收标准（列出明确、可验证的交付标准）：

1. **页面展示**：
   - ✅ 页面能够正确加载并展示案例的封面图片、基本信息、详细内容和服务优势
   - ✅ 案例标题、价格、类型、交付周期、摘要等信息正确显示
   - ✅ 案例详细内容能够正确渲染HTML格式的内容

2. **数据加载**：
   - ✅ 能够根据URL参数 `id` 正确加载对应的案例数据
   - ✅ 当ID不存在时，能够加载默认案例（ID为1）
   - ✅ 案例数据通过接口从后端获取，而非前端硬编码

3. **交互功能**：
   - ✅ 点击返回按钮能够正确返回上一页面
   - ✅ 点击分享按钮能够触发转发给朋友和分享到朋友圈功能
   - ✅ 点击"立即联系客户经理"按钮能够弹出确认对话框，确认后执行联系操作

4. **数据接口**：
   - ✅ 后端提供案例详情接口 `/api/cases/{id}`，返回案例的完整信息
   - ✅ 接口返回数据格式包含所有必需字段（title、price、type、duration、summary、cover_image、content等）
   - ✅ 接口能够处理不存在的案例ID，返回404或默认数据

5. **异常处理**：
   - ✅ 网络请求失败时，能够显示友好的错误提示
   - ✅ 图片加载失败时，能够显示默认占位图
   - ✅ 案例ID不存在时，能够加载默认案例或显示友好提示

6. **页面适配**：
   - ✅ 页面在移动端（最大宽度414px）能够正常显示
   - ✅ 底部联系按钮在iPhone X等设备上能够正确适配安全区域
   - ✅ 页面在不同屏幕尺寸下布局正常，无内容溢出或显示异常

7. **性能要求**：
   - ✅ 页面加载时间不超过2秒
   - ✅ 图片支持懒加载或预加载优化
   - ✅ 页面滚动流畅，无卡顿现象