buddhism/MEMORIAL_NAVIGATION_TEST.md

往生殿页面跳转功能测试

功能描述

从memorial页面点击"供奉"按钮后，跳转到memorialHall页面，并传递往生殿ID进行页面渲染。

跳转流程

1. 起始页面：memorial.vue

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

2. 目标页面：memorialHall.vue

• 路径: /pages/memorial/memorialHall
• 功能: 往生大殿详情页面
• 接收参数: id - 往生殿ID

实现细节

memorial.vue 中的跳转逻辑

// 提交供奉 - 跳转到往生大殿页面
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 中的参数接收

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

测试步骤

1. 进入memorial页面

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

2. 点击供奉按钮

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

3. 验证跳转结果

• 页面应该跳转到memorialHall页面
• 控制台应该显示接收到的参数
• 页面应该根据传递的ID加载对应的往生殿信息

预期结果

成功跳转时：

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. 检查页面参数传递