161 lines
3.3 KiB
Markdown
161 lines
3.3 KiB
Markdown
# 古刹巡礼详情页面使用说明
|
||
|
||
## 新增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. **用户体验**
|
||
- 加载状态提示
|
||
- 点击反馈效果
|
||
- 响应式布局适配
|