134 lines
3.2 KiB
Markdown
134 lines
3.2 KiB
Markdown
# 供奉记录页面使用说明
|
||
|
||
## 功能概述
|
||
|
||
`enshrinedList.vue` 是一个供奉记录展示页面，通过调用两个API接口来获取和展示数据：
|
||
|
||
1. **牌位详情API**: `GET /app/memorial/{id}` - 获取牌位基本信息
|
||
2. **供奉记录API**: `GET /app/enshrined/list` - 获取该牌位的供奉记录列表
|
||
|
||
## 页面特性
|
||
|
||
### 🎨 界面设计
|
||
- **牌位信息卡片**: 显示牌位名称和介绍信息
|
||
- **供奉记录表格**: 展示供奉人、时间、类型等信息
|
||
- **响应式布局**: 适配不同屏幕尺寸
|
||
- **传统风格**: 使用佛教主题色彩和设计元素
|
||
|
||
### 📱 交互功能
|
||
- **下拉刷新**: 重新加载最新数据
|
||
- **上拉加载**: 分页加载更多记录
|
||
- **姓名脱敏**: 保护用户隐私
|
||
- **错误处理**: 网络错误时显示重试选项
|
||
|
||
### 🔧 技术特性
|
||
- **并行API调用**: 同时请求两个接口提高加载速度
|
||
- **数据格式化**: 日期格式化和姓名脱敏处理
|
||
- **状态管理**: 加载状态、错误状态、空状态处理
|
||
- **分页支持**: 支持大量数据的分页展示
|
||
|
||
## API接口说明
|
||
|
||
### 1. 牌位详情接口
|
||
```javascript
|
||
GET /app/memorial/{id}
|
||
```
|
||
|
||
**响应数据结构:**
|
||
```json
|
||
{
|
||
"msg": "操作成功",
|
||
"code": 200,
|
||
"data": {
|
||
"id": "16",
|
||
"name": "牌位名字",
|
||
"code": "A01",
|
||
"introduced": "牌位介绍信息",
|
||
"extinguishTime": "2025-07-16 14:06:58",
|
||
"state": "1",
|
||
"contactName": "黄绍春",
|
||
"address": "广西壮族自治区南宁市西乡塘区"
|
||
}
|
||
}
|
||
```
|
||
|
||
### 2. 供奉记录接口
|
||
```javascript
|
||
GET /app/enshrined/list?memorialId={id}&pageNum=1&pageSize=10
|
||
```
|
||
|
||
**响应数据结构:**
|
||
```json
|
||
{
|
||
"total": 2,
|
||
"rows": [
|
||
{
|
||
"id": "1",
|
||
"memorialId": "16",
|
||
"worshiperName": "黄绍春",
|
||
"thaliName": "贡献三天",
|
||
"startDate": "2025-07-08 00:00:00",
|
||
"endDate": "2025-07-31 00:00:00",
|
||
"isShow": "1"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 使用方法
|
||
|
||
### 1. 页面跳转
|
||
```javascript
|
||
// 跳转到供奉记录页面
|
||
uni.navigateTo({
|
||
url: '/pages/memorial/enshrinedList?id=16'
|
||
})
|
||
```
|
||
|
||
### 2. 参数说明
|
||
- `id`: 牌位ID，必填参数
|
||
|
||
### 3. 测试页面
|
||
访问 `/pages/memorial/test-enshrined` 可以测试API调用和页面功能。
|
||
|
||
## 文件结构
|
||
|
||
```
|
||
pages/memorial/
|
||
├── enshrinedList.vue # 主页面
|
||
├── test-enshrined.vue # 测试页面
|
||
└── README.md # 说明文档
|
||
|
||
api/memorial/
|
||
└── memorial.js # API接口定义
|
||
```
|
||
|
||
## 样式定制
|
||
|
||
### 颜色主题
|
||
- 主色调: `#A24242` (深红棕色)
|
||
- 背景色: `#F5F0E7` (米色)
|
||
- 卡片背景: `#FFF1DD` (浅米色)
|
||
- 文字颜色: `#522510` (深棕色)
|
||
|
||
### 布局调整
|
||
可以通过修改CSS变量来调整页面样式：
|
||
```scss
|
||
// 修改主色调
|
||
$primary-color: #A24242;
|
||
$background-color: #F5F0E7;
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. **网络请求**: 确保API接口可正常访问
|
||
2. **参数验证**: 传入的牌位ID必须有效
|
||
3. **数据格式**: API返回的数据格式必须符合预期
|
||
4. **错误处理**: 网络错误时会显示重试按钮
|
||
5. **性能优化**: 大量数据时建议调整分页大小
|
||
|
||
## 更新日志
|
||
|
||
- **v1.0.0**: 初始版本，支持基本的供奉记录展示
|
||
- **v1.1.0**: 添加下拉刷新和上拉加载功能
|
||
- **v1.2.0**: 优化UI设计和错误处理 |