往生大殿逝者记录3.0

MEMORIAL_HALL_USAGE.md

@@ -0,0 +1,95 @@
+# 往生殿功能使用说明
+
+## 功能概述
+往生殿页面展示往生者信息，支持动态数据加载、搜索功能和下拉刷新。
+
+## 主要功能
+
+### 1. 动态数据加载
+- 页面加载时自动获取往生殿详情和往生者列表
+- 支持从路由参数获取往生殿ID
+- 完善的加载状态和错误处理
+
+### 2. 往生殿信息显示
+- **往生殿名称**: 动态显示从API获取的往生殿名称
+- **联系人信息**: 动态显示联系人和联系电话
+- **地址信息**: 动态显示往生殿地址
+
+### 3. 往生者信息展示
+- 显示往生者的尊称和姓名
+- 显示出生日期（年月日）
+- 显示逝世日期（年月日），如果数据为空则显示"吉"或"吉利"
+
+### 4. 搜索功能
+- 支持按姓名或分区搜索往生者
+- 实时更新搜索结果
+- 支持清空搜索条件
+
+### 5. 下拉刷新
+- 支持下拉刷新数据
+- 同时刷新往生殿详情和往生者列表
+- 显示刷新成功/失败提示
+
+## API接口
+
+### 获取往生殿详情
+- **接口**: `/app/memorial/{id}`
+- **方法**: GET
+- **参数**: `id` - 往生殿ID
+- **响应示例**:
+```json
+{
+  "msg": "操作成功",
+  "code": 200,
+  "data": {
+    "id": "16",
+    "name": "牌位名字",
+    "contactPhone": "13768722834",
+    "contactName": "黄绍春",
+    "address": "广西壮族自治区南宁市西乡塘区"
+  }
+}
+```
+
+### 获取往生者列表
+- **接口**: `/app/deceased/list`
+- **方法**: GET
+- **参数**: 
+  - `memorialId`: 往生殿ID
+  - `pageNum`: 页码（可选）
+  - `pageSize`: 每页数量（可选）
+  - `keyword`: 搜索关键词（可选）
+
+## 使用方法
+
+### 1. 页面跳转
+```javascript
+// 跳转到往生殿页面
+uni.navigateTo({
+  url: `/pages/memorial/memorialHall?id=16`
+})
+```
+
+### 2. 数据刷新
+- 下拉页面即可刷新数据
+- 或调用 `refreshData()` 方法
+
+### 3. 搜索功能
+- 在搜索框中输入姓名或分区关键词
+- 点击搜索按钮或按回车键进行搜索
+
+## 错误处理
+- 网络请求失败时显示友好提示
+- API返回错误时显示具体错误信息
+- 数据为空时显示"暂无往生者信息"
+
+## 样式特性
+- 响应式设计，适配不同屏幕尺寸
+- 加载状态和空数据状态的友好提示
+- 统一的视觉风格和交互体验
+
+## 注意事项
+1. 确保网络连接正常
+2. 往生殿ID必须有效
+3. 搜索功能需要后端支持
+4. 下拉刷新功能需要页面配置支持 

pages/memorial/memorialHall.vue

@@ -20,15 +20,21 @@
       <view class="container">
         <!-- 顶部信息 -->
         <view class="memorial-header">
-          <view class="location">中875 东10-29</view>
+          <view class="location">{{ memorialDetail ? memorialDetail.name : '加载中...' }}</view>
           <view class="collection-btn">收藏牌位</view>
         </view>
 
         <!-- 刻铭标题 -->
         <view class="title">刻铭</view>
 
+        <!-- 加载状态 -->
+        <view v-if="loading" class="loading-container">
+          <view class="loading-text">加载中...</view>
+        </view>
+
         <!-- 动态渲染往生者信息 -->
         <view 
+          v-else-if="deceasedList.length > 0"
           v-for="(deceased, index) in deceasedList" 
           :key="deceased.id"
           class="memorial-text"
@@ -59,10 +65,22 @@
           </view>
         </view>
 
+        <!-- 空数据提示 -->
+        <view v-else-if="!loading && deceasedList.length === 0" class="empty-container">
+          <view class="empty-text">暂无往生者信息</view>
+        </view>
+
         <!-- 联系人信息 -->
         <view class="contact-info">
-          <view>联系人：陈惠玲（13356989666）</view>
-          <view>地址：福建省泉州市惠安县平山是旧路256号</view>
+          <view v-if="memorialDetail">
+            联系人：{{ memorialDetail.contactName || '暂无' }}（{{ memorialDetail.contactPhone || '暂无' }}）
+          </view>
+          <view v-if="memorialDetail && memorialDetail.address">
+            地址：{{ memorialDetail.address }}
+          </view>
+          <view v-else>
+            联系人：暂无联系信息
+          </view>
         </view>
       </view>
 
@@ -87,7 +105,7 @@
 
 <script>
 import {CommonEnum} from '@/enum/common.js'
-import { getDeceasedList } from '@/api/memorial/index.js'
+import { getDeceasedList, getMemorialDetail } from '@/api/memorial/index.js'
 import SearchBox from "../../components/search-box/search-box.vue"
 import StatusDisplay from "../../components/status-display/status-display.vue"
 import EnshrinedList from "./compositons/enshrinedList.vue"
@@ -128,7 +146,9 @@ export default {
       pageParams: {
         pageNum: 1,
         pageSize: 10
-      }
+      },
+      // 往生殿详情数据
+      memorialDetail: null
     }
   },
   onLoad(options) {
@@ -138,6 +158,10 @@ export default {
     }
     this.initPage()
   },
+  // 下拉刷新
+  onPullDownRefresh() {
+    this.refreshData()
+  },
   methods: {
     // 初始化页面
     async initPage() {
@@ -145,6 +169,8 @@ export default {
       try {
         // 页面初始化逻辑
         console.log('往生殿页面初始化，ID:', this.memorialId)
+        // 获取往生殿详情
+        await this.getMemorialDetail()
         // 获取往生者列表
         await this.getDeceasedList()
       } catch (error) {
@@ -158,6 +184,31 @@ export default {
       }
     },
 
+    // 获取往生殿详情
+    async getMemorialDetail() {
+      try {
+        const response = await getMemorialDetail(this.memorialId)
+        console.log('往生殿详情响应:', response)
+        
+        if (response.code === 200) {
+          this.memorialDetail = response.data
+          console.log('往生殿详情数据:', this.memorialDetail)
+        } else {
+          console.error('获取往生殿详情失败:', response.msg)
+          uni.showToast({
+            title: response.msg || '获取往生殿信息失败',
+            icon: 'none'
+          })
+        }
+      } catch (error) {
+        console.error('获取往生殿详情异常:', error)
+        uni.showToast({
+          title: '获取往生殿信息失败',
+          icon: 'none'
+        })
+      }
+    },
+
     // 获取往生者列表
     async getDeceasedList() {
       try {
@@ -212,6 +263,31 @@ export default {
     submitPrayer() {
       console.log('提交供奉')
       // 这里可以添加供奉逻辑
+    },
+
+    // 刷新数据
+    async refreshData() {
+      try {
+        // 重置页码
+        this.pageParams.pageNum = 1
+        // 重新获取数据
+        await this.getMemorialDetail()
+        await this.getDeceasedList()
+        // 停止下拉刷新
+        uni.stopPullDownRefresh()
+        uni.showToast({
+          title: '刷新成功',
+          icon: 'success',
+          duration: 1500
+        })
+      } catch (error) {
+        console.error('刷新数据失败:', error)
+        uni.stopPullDownRefresh()
+        uni.showToast({
+          title: '刷新失败',
+          icon: 'none'
+        })
+      }
     }
   }
 }
@@ -276,6 +352,32 @@ export default {
     //border: 1px  red solid;
   }
 
+  .loading-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100rpx; /* Adjust height as needed */
+    margin-bottom: 22rpx;
+  }
+
+  .loading-text {
+    font-size: 28rpx;
+    color: #522510;
+  }
+
+  .empty-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100rpx;
+    margin-bottom: 22rpx;
+  }
+
+  .empty-text {
+    font-size: 28rpx;
+    color: #999;
+  }
+
   .memorial-text {
     display: flex;
     margin-bottom: 38rpx;