buddhism/MEMORIAL_NAVIGATION_TEST.md

# 往生殿页面跳转功能测试

## 功能描述

从memorial页面点击"供奉"按钮后，跳转到memorialHall页面，并传递往生殿ID进行页面渲染。memorialHall页面具有固定容器高度和可滚动的内容区域。

## 跳转流程

### 1. 起始页面：memorial.vue

- **路径**: `/pages/memorial/memorial`
- **功能**: 往生殿列表页面
- **触发方式**: 点击底部"供奉"按钮

### 2. 目标页面：memorialHall.vue

- **路径**: `/pages/memorial/memorialHall`
- **功能**: 往生大殿详情页面
- **接收参数**: `id` - 往生殿ID
- **特色功能**: 固定容器高度，内容区域可滚动

## 实现细节

### memorial.vue 中的跳转逻辑

```javascript
// 提交供奉 - 跳转到往生大殿页面
submitPrayer()
{
    console.log('提交供奉，跳转到往生大殿页面，ID:', this.memorialId)

    // 跳转到往生大殿页面，传递往生殿ID
    uni.navigateTo({
        url: `/pages/memorial/memorialHall?id=${this.memorialId}`,
        success: () => {
            console.log('跳转成功')
        },
        fail: (error) => {
            console.error('跳转失败:', error)
            uni.showToast({
                title: '页面跳转失败',
                icon: 'none'
            })
        }
    })
}
```

### memorialHall.vue 中的参数接收和滚动功能

```javascript
onLoad(options)
{
    console.log('memorialHall页面接收到的参数:', options)
    // 从路由参数获取往生殿ID
    if (options.id) {
        this.selectedUnitId = options.id
        console.log('区域ID:', this.selectedUnitId)
    } else {
        console.warn('未接收到区域ID，使用默认ID:', this.selectedUnitId)
    }
    this.initPage()
}
,

// 滚动事件处理
onScroll(e)
{
    console.log('滚动位置:', e.detail.scrollTop)
    this.scrollTop = e.detail.scrollTop
}
```

## 测试步骤

### 1. 进入memorial页面

```javascript
// 可以通过以下方式进入memorial页面
uni.navigateTo({
    url: '/pages/memorial/memorial?id=16',
})
```

### 2. 点击供奉按钮

- 在memorial页面底部找到"供奉"按钮
- 点击按钮触发跳转

### 3. 验证跳转结果

- 页面应该跳转到memorialHall页面
- 控制台应该显示接收到的参数
- 页面应该根据传递的ID加载对应的往生殿信息
- 内容区域应该可以垂直滚动

### 4. 测试滚动功能

- 当往生者列表内容超出容器高度时，可以上下滚动查看
- 滚动时控制台会显示滚动位置信息
- 容器高度保持固定，不会随内容变化

## 预期结果

### 成功跳转时：

1. 页面从memorial跳转到memorialHall
2. 控制台显示：
   ```
   memorialHall页面接收到的参数: {id: "16"}
   设置往生殿ID: 16
   往生殿页面初始化，ID: 16
   ```
3. memorialHall页面根据ID加载对应的往生殿详情和往生者列表

### 跳转失败时：

1. 显示错误提示："页面跳转失败"
2. 控制台显示具体错误信息

## 调试信息

### 控制台日志

- `memorialHall页面接收到的参数:` - 显示接收到的所有参数
- `区域ID:` - 显示设置的往生殿ID
- `往生大殿页面初始化，ID:` - 显示页面初始化时的ID
- `往生殿详情响应:` - 显示API响应数据
- `往生者列表数据:` - 显示往生者列表数据
- `滚动位置:` - 显示当前滚动位置

### 网络请求

- `GET /app/memorial/{id}` - 获取往生殿详情
- `GET /app/deceased/list` - 获取往生者列表

## 注意事项

1. **ID传递**: 确保memorial页面的memorialId变量有正确的值
2. **页面配置**: 确保pages.json中两个页面都已正确配置
3. **API接口**: 确保后端API接口正常工作
4. **网络连接**: 确保网络连接正常，能够访问API

## 错误排查

### 常见问题：

1. **页面跳转失败**: 检查pages.json配置
2. **ID未传递**: 检查memorial页面的memorialId变量
3. **数据加载失败**: 检查API接口和网络连接
4. **页面显示异常**: 检查memorialHall页面的模板和样式

### 调试方法：

1. 查看控制台日志
2. 检查网络请求
3. 验证API响应数据
4. 检查页面参数传递