buddhism/pages/memorial

供奉记录页面使用说明

功能概述

enshrinedList.vue 是一个供奉记录展示页面，通过调用两个API接口来获取和展示数据：

1. 牌位详情API: GET /app/memorial/{id} - 获取牌位基本信息
2. 供奉记录API: GET /app/enshrined/list - 获取该牌位的供奉记录列表

页面特性

🎨 界面设计

• 牌位信息卡片: 显示牌位名称和介绍信息
• 供奉记录表格: 展示供奉人、时间、类型等信息
• 响应式布局: 适配不同屏幕尺寸
• 传统风格: 使用佛教主题色彩和设计元素

📱 交互功能

• 下拉刷新: 重新加载最新数据
• 上拉加载: 分页加载更多记录
• 姓名脱敏: 保护用户隐私
• 错误处理: 网络错误时显示重试选项

🔧 技术特性

• 并行API调用: 同时请求两个接口提高加载速度
• 数据格式化: 日期格式化和姓名脱敏处理
• 状态管理: 加载状态、错误状态、空状态处理
• 分页支持: 支持大量数据的分页展示

API接口说明

1. 牌位详情接口

GET /app/memorial/{id}

响应数据结构:

{
  "msg": "操作成功",
  "code": 200,
  "data": {
    "id": "16",
    "name": "牌位名字",
    "code": "A01",
    "introduced": "牌位介绍信息",
    "extinguishTime": "2025-07-16 14:06:58",
    "state": "1",
    "contactName": "黄绍春",
    "address": "广西壮族自治区南宁市西乡塘区"
  }
}

2. 供奉记录接口

GET /app/enshrined/list?memorialId={id}&pageNum=1&pageSize=10

响应数据结构:

{
  "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. 页面跳转

// 跳转到供奉记录页面
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变量来调整页面样式：

// 修改主色调
$primary-color: #A24242;
$background-color: #F5F0E7;

注意事项

1. 网络请求: 确保API接口可正常访问
2. 参数验证: 传入的牌位ID必须有效
3. 数据格式: API返回的数据格式必须符合预期
4. 错误处理: 网络错误时会显示重试按钮
5. 性能优化: 大量数据时建议调整分页大小

更新日志

• v1.0.0: 初始版本，支持基本的供奉记录展示
• v1.1.0: 添加下拉刷新和上拉加载功能
• v1.2.0: 优化UI设计和错误处理