# 古刹巡礼详情页面使用说明

## 新增API接口

### 1. 获取巡礼详情 - `/app/article/tourById`

**接口地址：** `GET /app/article/tourById`

**请求参数：**

- `id` (string): 巡礼ID

**返回数据：**

```json
{
  "msg": "操作成功",
  "code": 200,
  "data": {
    "title": "寒山寺",
    "content": "<p>内容内容内容...</p>",
    "createTime": "2025-07-21 17:33:32",
    "coverUrl": "https://example.com/image.jpg"
  }
}
```

### 2. 获取相关文章 - `/app/article/relevant`

**接口地址：** `GET /app/article/relevant`

**请求参数：**

- `articleId` (string): 当前文章ID

**返回数据：**

```json
{
  "msg": "操作成功",
  "code": 200,
  "data": [
    {
      "id": "25",
      "title": "我是标题",
      "subtitle": "我是副标题",
      "createTime": "2025-07-21 17:33:32"
    }
  ]
}
```

## 页面功能

### 主要特性

1. **文章详情展示**
   - 显示文章标题
   - 显示创建时间
   - 显示封面图片
   - 支持HTML内容渲染

2. **相关阅读推荐**
   - 显示相关文章列表
   - 支持点击跳转到相关文章（通过文章ID）
   - 显示文章标题、副标题和时间
   - 自动获取文章ID用于跳转

3. **响应式设计**
   - 适配不同屏幕尺寸
   - 现代化的卡片式布局
   - 优雅的加载状态

### 使用方法

#### 1. 页面跳转

```javascript
// 跳转到指定巡礼详情页
uni.navigateTo({
  url: `/pages/ancient/ancientTourById?id=24`,
})
```

#### 2. 获取数据

```javascript
import { getTourById, getRelevantArticles } from '@/api/article/article.js'

// 获取巡礼详情
const tourDetail = await getTourById('24')

// 获取相关文章
const relevantArticles = await getRelevantArticles('24')
```

### 页面结构

```
页面布局：
├── 自定义导航栏
├── 测试按钮（开发时显示）
├── 文章头部信息
│   ├── 文章标题
│   └── 创建时间
├── 封面图片
├── 文章内容
│   └── HTML内容渲染
└── 相关阅读区域
    ├── 区域标题
    └── 相关文章列表
        ├── 文章标题
        ├── 副标题
        ├── 创建时间
        └── 文章ID（用于跳转）
```

### 样式特点

1. **卡片式设计**
   - 白色背景卡片
   - 圆角边框
   - 阴影效果

2. **颜色搭配**
   - 主色调：白色背景
   - 文字颜色：深灰色
   - 辅助色：浅灰色

3. **交互效果**
   - 点击反馈
   - 平滑过渡动画
   - 加载状态提示

### 开发说明

1. **API接口已添加到 `api/article/article.js`**
2. **页面路径：`pages/ancient/ancientTourById.vue`**
3. **支持参数传递：通过 `options.id` 获取巡礼ID，默认为24**
4. **测试功能：页面包含测试按钮，方便开发调试**
5. **相关文章跳转：自动获取文章ID，支持无限级跳转**

### 注意事项

1. **HTML内容安全**
   - 使用 `rich-text` 组件渲染HTML
   - 添加基本样式确保显示效果

2. **错误处理**
   - API调用失败时显示友好提示
   - 相关文章获取失败不影响主页面

3. **性能优化**
   - 使用计算属性处理HTML内容
   - 合理的时间格式化处理

4. **用户体验**
   - 加载状态提示
   - 点击反馈效果
   - 响应式布局适配