buddhism/README_ancientTourById.md

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

新增API接口

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

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

请求参数：

• id (string): 巡礼ID

返回数据：

{
  "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

返回数据：

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

页面功能

主要特性

1. 文章详情展示

   • 显示文章标题
   • 显示创建时间
   • 显示封面图片
   • 支持HTML内容渲染

2. 相关阅读推荐

   • 显示相关文章列表
   • 支持点击跳转到相关文章（通过文章ID）
   • 显示文章标题、副标题和时间
   • 自动获取文章ID用于跳转

3. 响应式设计

   • 适配不同屏幕尺寸
   • 现代化的卡片式布局
   • 优雅的加载状态

使用方法

1. 页面跳转

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

2. 获取数据

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. 用户体验

   • 加载状态提示
   • 点击反馈效果
   • 响应式布局适配