buddhism/pages/memorial

牌位相关页面使用说明

功能概述

本项目包含两个主要页面：

1. 往生者搜索页面 (deceasedSearch.vue)

通过调用搜索API来查找往生者信息：

• 搜索API: GET /app/deceased/search - 根据姓名搜索往生者

2. 供奉记录页面 (enshrinedList.vue)

通过调用两个API接口来获取和展示数据：

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

页面特性

🎨 界面设计

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

📱 交互功能

• 姓名搜索: 根据姓名搜索往生者信息
• 查看详情: 跳转到牌位详情页面
• 姓名选择: 点击姓名标签查看具体信息
• 下拉刷新: 重新加载最新数据
• 上拉加载: 分页加载更多记录
• 姓名脱敏: 保护用户隐私
• 错误处理: 网络错误时显示重试选项

🔧 技术特性

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

API接口说明

1. 往生者搜索接口

GET /app/deceased/search?fullName={name}

响应数据结构:

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

2. 牌位详情接口

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": "广西壮族自治区南宁市西乡塘区"
  }
}

3. 供奉记录接口

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/deceasedSearch',
})

2. 供奉记录页面

// 跳转到供奉记录页面
uni.navigateTo({
  url: '/pages/memorial/enshrinedList?id=16',
})

3. 参数说明

• id: 牌位ID，必填参数
• name: 姓名参数（可选，用于筛选特定姓名）

4. 测试页面

• 访问 /pages/memorial/test-search 可以测试搜索API调用
• 访问 /pages/memorial/test-enshrined 可以测试供奉记录API调用

文件结构

pages/memorial/
├── deceasedSearch.vue         # 往生者搜索页面
├── enshrinedList.vue          # 供奉记录页面
├── test-search.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设计和错误处理
• v2.0.0: 新增往生者搜索功能，支持姓名搜索和结果展示