# 牌位相关页面使用说明

## 功能概述

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

### 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. 往生者搜索接口

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

**响应数据结构:**

```json
{
  "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. 牌位详情接口

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

### 3. 供奉记录接口

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

### 2. 供奉记录页面

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

```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设计和错误处理
- **v2.0.0**: 新增往生者搜索功能，支持姓名搜索和结果展示