deceasedSearch.vue 动态页面修正

2025-08-11 17:00:43 +08:00 · 2025-08-11 17:00:43 +08:00 · 66ffd2cbac
commit 66ffd2cbac
parent 814d622295
7 changed files with 686 additions and 75 deletions
--- a/api/memorial/memorial.js
+++ b/api/memorial/memorial.js
@ -15,4 +15,13 @@ export function getEnshrinedList(params) {
    method: 'get',
    params
  })
+}
+
+// 搜索往生者
+export function searchDeceased(params) {
+  return request({
+    url: '/app/deceased/search',
+    method: 'get',
+    params
+  })
 } 
--- a/pages/memorial/README.md
+++ b/pages/memorial/README.md
@ -1,27 +1,38 @@
-# 供奉记录页面使用说明
+# 牌位相关页面使用说明

 ## 功能概述

-`enshrinedList.vue` 是一个供奉记录展示页面，通过调用两个API接口来获取和展示数据：
+本项目包含两个主要页面：

-1. **牌位详情API**: `GET /app/memorial/{id}` - 获取牌位基本信息
-2. **供奉记录API**: `GET /app/enshrined/list` - 获取该牌位的供奉记录列表
+### 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调用**: 同时请求两个接口提高加载速度
 - **数据格式化**: 日期格式化和姓名脱敏处理
 - **状态管理**: 加载状态、错误状态、空状态处理
@ -29,7 +40,36 @@

 ## API接口说明

-### 1. 牌位详情接口
+### 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}
 ```
@ -52,7 +92,7 @@ GET /app/memorial/{id}
 }
 ```

-### 2. 供奉记录接口
+### 3. 供奉记录接口
 ```javascript
 GET /app/enshrined/list?memorialId={id}&pageNum=1&pageSize=10
 ```
@ -77,7 +117,15 @@ GET /app/enshrined/list?memorialId={id}&pageNum=1&pageSize=10

 ## 使用方法

-### 1. 页面跳转
+### 1. 往生者搜索页面
+```javascript
+// 跳转到搜索页面
+uni.navigateTo({
+  url: '/pages/memorial/deceasedSearch'
+})
+```
+
+### 2. 供奉记录页面
 ```javascript
 // 跳转到供奉记录页面
 uni.navigateTo({
@ -85,18 +133,22 @@ uni.navigateTo({
 })
 ```

-### 2. 参数说明
+### 3. 参数说明
 - `id`: 牌位ID，必填参数
+- `name`: 姓名参数（可选，用于筛选特定姓名）

-### 3. 测试页面
-访问 `/pages/memorial/test-enshrined` 可以测试API调用和页面功能。
+### 4. 测试页面
+- 访问 `/pages/memorial/test-search` 可以测试搜索API调用
+- 访问 `/pages/memorial/test-enshrined` 可以测试供奉记录API调用

 ## 文件结构

 ```
 pages/memorial/
-├── enshrinedList.vue          # 主页面
-├── test-enshrined.vue         # 测试页面
+├── deceasedSearch.vue         # 往生者搜索页面
+├── enshrinedList.vue          # 供奉记录页面
+├── test-search.vue            # 搜索测试页面
+├── test-enshrined.vue         # 供奉记录测试页面
 └── README.md                  # 说明文档

 api/memorial/
@ -131,4 +183,5 @@ $background-color: #F5F0E7;

 - **v1.0.0**: 初始版本，支持基本的供奉记录展示
 - **v1.1.0**: 添加下拉刷新和上拉加载功能
- **v1.2.0**: 优化UI设计和错误处理 
+- **v1.2.0**: 优化UI设计和错误处理
+- **v2.0.0**: 新增往生者搜索功能，支持姓名搜索和结果展示 
--- a/pages/memorial/compositons/enshrinedList.vue
+++ b/pages/memorial/compositons/enshrinedList.vue
@ -42,7 +42,7 @@
 </template>

 <script>
-import { getEnshrinedList } from '@/api/memorial/index.js'
+import { getEnshrinedList } from '@/api/memorial/memorial.js'

 export default {
  name: 'EnshrinedList',
@ -105,7 +105,7 @@ export default {

        if (response && response.code === 200) {
          // API成功响应
-          rows = response.data || []
+          rows = response.rows || []
          total = rows.length // 如果没有分页信息，使用数组长度
          console.log('API 返回数据:', rows)
        } else {
--- a/pages/memorial/compositons/enshrinedListIndex.vue
+++ b/pages/memorial/compositons/enshrinedListIndex.vue
@ -0,0 +1,370 @@
+<template>
+  <view class="enshrined-list">
+    <!-- 表格头部 -->
+    <view class="table-header">
+      <view class="header-cell worshiper-col">供奉人</view>
+      <view class="header-cell time-col">供奉时间</view>
+      <view class="header-cell time-col">结束时间</view>
+      <view class="header-cell type-col">供奉类型</view>
+    </view>
+
+    <!-- 表格内容 -->
+    <view class="table-body">
+      <view
+          v-for="(item, index) in enshrinedList"
+          :key="item.id || index"
+          class="table-row"
+          @click="handleItemClick(item)"
+      >
+        <view class="table-cell worshiper-col">{{ item.worshiperName || '未知' }}</view>
+        <view class="table-cell time-col">{{ formatDate(item.startDate) }}</view>
+        <view class="table-cell time-col">{{ formatDate(item.endDate) }}</view>
+        <view class="table-cell type-col">{{ item.thaliName || '未知类型' }}</view>
+      </view>
+    </view>
+
+    <!-- 空状态 -->
+    <view v-if="!loading && enshrinedList.length === 0" class="empty-state">
+      <view class="empty-icon">📝</view>
+      <view class="empty-text">暂无供奉记录</view>
+    </view>
+
+    <!-- 加载更多 -->
+    <view v-if="hasMore && !loading" class="load-more" @click="loadMore">
+      <text>加载更多</text>
+    </view>
+
+    <!-- 加载状态 -->
+    <view v-if="loading" class="loading-state">
+      <text>加载中...</text>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getEnshrinedList } from '@/api/memorial/index.js'
+
+export default {
+  name: 'EnshrinedList',
+  props: {
+    memorialId: {
+      type: [String, Number],
+      required: true
+    },
+    searchKeyword: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      enshrinedList: [],
+      loading: false,
+      pageNum: 1,
+      pageSize: 10,
+      total: 0,
+      hasMore: true
+    }
+  },
+  watch: {
+    searchKeyword: {
+      handler(newVal) {
+        this.resetList()
+        this.loadData()
+      },
+      immediate: false
+    }
+  },
+  mounted() {
+    this.loadData()
+  },
+  methods: {
+    // 加载数据
+    async loadData() {
+      if (this.loading) return
+
+      this.loading = true
+      try {
+        const params = {
+          memorialId: this.memorialId,
+          pageNum: this.pageNum,
+          pageSize: this.pageSize
+        }
+
+        // 暂时注释搜索功能，等后续实现
+        // if (this.searchKeyword) {
+        //   params.keyword = this.searchKeyword
+        // }
+
+        const response = await getEnshrinedList(params)
+        console.log('API 响应数据:', response) // 调试日志
+
+        // 新的API响应格式: { code: 200, msg: "操作成功", data: [...] }
+        let total = 0
+        let rows = []
+
+        if (response && response.code === 200) {
+          // API成功响应
+          rows = response.data || []
+          total = rows.length // 如果没有分页信息，使用数组长度
+          console.log('API 返回数据:', rows)
+        } else {
+          console.log('API 响应异常:', response)
+          // API响应异常时使用模拟数据
+          rows = this.getMockData()
+          total = rows.length
+        }
+
+        this.total = total
+
+        if (this.pageNum === 1) {
+          this.enshrinedList = rows || []
+        } else {
+          this.enshrinedList = [...this.enshrinedList, ...(rows || [])]
+        }
+
+        this.hasMore = this.enshrinedList.length < total
+
+      } catch (error) {
+        console.error('加载供奉列表失败:', error)
+        // 错误时使用模拟数据（仅用于测试）
+        console.log('API 调用失败，使用模拟数据')
+        const mockData = this.getMockData()
+        if (this.pageNum === 1) {
+          this.enshrinedList = mockData
+        } else {
+          this.enshrinedList = [...this.enshrinedList, ...mockData]
+        }
+        this.total = mockData.length
+        this.hasMore = false
+
+        uni.showToast({
+          title: '网络异常，请稍后重试',
+          icon: 'none'
+        })
+      } finally {
+        this.loading = false
+      }
+    },
+
+    // 获取模拟数据（仅用于测试）
+    getMockData() {
+      return [
+      ]
+    },
+
+    // 重置列表
+    resetList() {
+      this.enshrinedList = []
+      this.pageNum = 1
+      this.total = 0
+      this.hasMore = true
+    },
+
+    // 加载更多
+    loadMore() {
+      if (this.hasMore && !this.loading) {
+        this.pageNum++
+        this.loadData()
+      }
+    },
+
+    // 格式化日期
+    formatDate(dateStr) {
+      if (!dateStr) return '未知'
+
+      try {
+        // 如果已经是 YYYY-MM-DD 格式，直接返回
+        if (/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) {
+          return dateStr
+        }
+
+        const date = new Date(dateStr)
+        if (isNaN(date.getTime())) {
+          return dateStr
+        }
+
+        const year = date.getFullYear()
+        const month = String(date.getMonth() + 1).padStart(2, '0')
+        const day = String(date.getDate()).padStart(2, '0')
+
+        return `${year}-${month}-${day}`
+      } catch (error) {
+        console.warn('日期格式化失败:', dateStr, error)
+        return dateStr
+      }
+    },
+
+    // 处理项目点击
+    handleItemClick(item) {
+      this.$emit('item-click', item)
+    },
+
+    // 刷新列表
+    refresh() {
+      this.resetList()
+      this.loadData()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.enshrined-list {
+  padding: 46rpx 0 30rpx 44rpx;
+  width: 680rpx;
+  height: 858rpx;
+  background-color: #FFFBF5;
+  border-radius: 20rpx 20rpx 20rpx 20rpx;
+  border: 1rpx solid #C7A26D;
+  margin-bottom: 12rpx;
+}
+
+.table-header {
+  display: flex;
+  border-radius: 12rpx 12rpx 0 0;
+  overflow: hidden;
+  justify-content: space-between;
+}
+
+.header-cell {
+
+  position: relative;
+  font-weight: 400;
+  font-size: 28rpx;
+  color: #695347;
+  line-height: 38rpx;
+  text-align: left;
+
+  &:last-child {
+    border-right: none;
+  }
+
+  &.worshiper-col {
+    flex: 2;
+  }
+
+  &.time-col {
+    flex: 2;
+  }
+
+  &.type-col {
+    flex: 2;
+  }
+}
+
+.table-body {
+
+  border-radius: 0 0 12rpx 12rpx;
+  overflow: hidden;
+}
+
+.table-row {
+  display: flex;
+  transition: background-color 0.2s ease;
+  margin-top: 30rpx;
+  //&:last-child {
+  //  border-bottom: none;
+  //}
+  //
+  //&:hover {
+  //  background-color: #f9f9f9;
+  //}
+  //
+  //&:active {
+  //  background-color: #f0f0f0;
+  //}
+  //
+  //&:nth-child(even) {
+  //  background-color: #fafafa;
+  //
+  //  &:hover {
+  //    background-color: #f5f5f5;
+  //  }
+  //}
+}
+
+.table-cell {
+  //padding: 20rpx 16rpx;
+  word-break: break-all;
+  display: flex;
+  align-items: center;
+  font-weight: 400;
+  font-size: 24rpx;
+  color: #522510;
+  line-height: 32rpx;
+  text-align: left;
+  //border: 1rpx solid #C7A26D;
+
+  &:last-child {
+
+    border-right: none;
+  }
+
+  &.worshiper-col {
+    flex: 1;
+    font-weight: 500;
+    color: #333333;
+  }
+
+  &.time-col {
+    flex: 1;
+    color: #666666;
+  }
+
+  &.type-col {
+    flex: 1;
+    color: #666666;
+  }
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 100rpx 0;
+  background: #ffffff;
+  border-radius: 12rpx;
+  margin-top: 20rpx;
+}
+
+.empty-icon {
+  font-size: 80rpx;
+  margin-bottom: 20rpx;
+  opacity: 0.5;
+}
+
+.empty-text {
+  font-size: 28rpx;
+  color: #999999;
+}
+
+.load-more {
+  text-align: center;
+  padding: 30rpx 0;
+  margin-top: 20rpx;
+
+  text {  
+    font-size: 28rpx;
+    color: #666666;
+    padding: 16rpx 32rpx;
+    background: #ffffff;
+    border-radius: 24rpx;
+
+  }
+}
+
+.loading-state {
+  text-align: center;
+  padding: 30rpx 0;
+  background: #ffffff;
+  border-radius: 12rpx;
+  margin-top: 20rpx;
+
+  text {
+    font-size: 28rpx;
+    color: #999999;
+  }
+}
+</style>
--- a/pages/memorial/deceasedSearch.vue
+++ b/pages/memorial/deceasedSearch.vue
@ -4,14 +4,15 @@
    <!-- 使用自定义导航栏组件 -->
    <custom-navbar
        ref="customNavbar"
-        title="供奉记录"/>
+        title="往生供奉"/>
    <view class="container">
      <!-- 状态展示 -->
      <status-display
          v-if="loading"
          type="loading"
-          loading-text="加载中..."
+          loading-text="搜索中..."
      />
+      
      <!-- 搜索框 -->
      <search-box
          v-model="searchName"
@ -25,8 +26,49 @@
        <view class="center-files">
          <image :src="CommonEnum.CENTER_TILES" mode="aspectFit" class="files"></image>
        </view>
-      </view>
-    </view> 
+        <!-- 搜索结果 -->
+        <view class="search-results" v-if="searchResults.length > 0">
+          <view 
+            class="result-card" 
+            v-for="(item, index) in searchResults" 
+            :key="index"
+          >
+            <!-- 卡片头部 -->
+            <view class="card-header">
+              <view class="header-info">
+                <text class="label">牌位名称</text>
+                <text class="label">编号(分区)</text>
+              </view>
+              <view class="view-details" @click="viewDetails(item)">
+                <text class="details-text">查看详情 ></text>
+              </view>
+            </view>
+            
+            <!-- 姓名标签区域 -->
+            <view class="names-section">
+              <view 
+                class="name-tag" 
+                v-for="(name, nameIndex) in item.names" 
+                :key="nameIndex"
+                @click="selectName(item, name)"
+              >
+                <text class="name-text">{{ name }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+        
+        <!-- 空状态 -->
+        <view class="empty-state" v-if="hasSearched && searchResults.length === 0">
+          <text class="empty-text">未找到相关往生者信息</text>
+        </view>
+        
+        <!-- 初始状态提示 -->
+        <view class="initial-state" v-if="!hasSearched">
+          <text class="initial-text">请输入姓名进行搜索</text>
+        </view>
+      </view> 
+    </view>

    <view class="bottom-files">
      <image :src="CommonEnum.BOTTOM_TILES_2" mode="aspectFit" class="files"></image>
@ -38,74 +80,81 @@
 import {CommonEnum} from '@/enum/common.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"
-import FloorSelector from "./compositons/floorSelector.vue"
-import StatusBar from "./compositons/statusBar.vue"
-import BottomButton from "../../components/bottom-button/bottom-button.vue";
+import { searchDeceased } from '@/api/memorial/memorial.js'

 export default {
  components: {
-    BottomButton,
    SearchBox,
-    StatusDisplay,
-    EnshrinedList,
-    FloorSelector,
-    StatusBar
+    StatusDisplay
  },
  data() {
    return {
      CommonEnum,
      searchName: '',
      loading: false,
-      memorialId: '16', // 默认往生殿ID，可以从路由参数获取
-      // 楼层选择器默认值
-      defaultFloorId: '',
-      defaultAreaId: '',
-      defaultUnitId: '',
-      // 当前选中的楼层信息
-      currentSelection: {
-        floor: null,
-        area: null,
-        unit: null
-      },
-      // 当前选中的单元ID，用于状态栏查询
-      selectedUnitId: ''
+      searchResults: [],
+      hasSearched: false
    }
  },
-  onLoad(options) {
-    // 从路由参数获取往生殿ID
-    if (options.id) {
-      this.memorialId = options.id
-    }
-    this.initPage()
-  },
  methods: {
-    // 初始化页面
-    async initPage() {
-      this.loading = true
-      try {
-        // 页面初始化逻辑
-        console.log('往生殿页面初始化，ID:', this.memorialId)
-      } catch (error) {
-        console.error('页面初始化失败:', error)
+    // 处理搜索
+    async handleSearch(value) {
+      if (!value || value.trim() === '') {
        uni.showToast({
-          title: '页面加载失败',
+          title: '请输入搜索内容',
+          icon: 'none'
+        })
+        return
+      }
+      
+      this.loading = true
+      this.hasSearched = true
+      
+      try {
+        const res = await searchDeceased({
+          fullName: value.trim()
+        })
+        
+        if (res.code === 200) {
+          this.searchResults = res.data || []
+          if (this.searchResults.length === 0) {
+            uni.showToast({
+              title: '未找到相关结果',
+              icon: 'none'
+            })
+          }
+        } else {
+          throw new Error(res.msg || '搜索失败')
+        }
+      } catch (error) {
+        console.error('搜索失败:', error)
+        this.searchResults = []
+        uni.showToast({
+          title: error.message || '搜索失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
-
-    // 处理搜索
-    handleSearch(value) {
-      console.log('搜索内容:', value)
-      this.searchName = value
-      // 搜索逻辑由 enshrinedList 组件处理
+    
+    // 查看详情
+    viewDetails(item) {
+      console.log('查看详情:', item)
+      // 跳转到详情页面
+      uni.navigateTo({
+        url: `/pages/memorial/enshrinedList?id=${item.id}`
+      })
    },
-
-
-
+    
+    // 选择姓名
+    selectName(item, name) {
+      console.log('选择姓名:', name, '来自牌位:', item)
+      // 可以跳转到该姓名的详情页面或执行其他操作
+      uni.navigateTo({
+        url: `/pages/memorial/enshrinedList?id=${item.id}&name=${encodeURIComponent(name)}`
+      })
+    }
  }
 }
 </script>
@ -124,12 +173,17 @@ export default {
  flex-direction: column;
  padding-bottom: 180rpx;
  box-sizing: border-box;
-  .body{
+
+
+
+  .body {
+    border-radius: 18rpx;
    position: relative;
-    height:1100rpx;
+    height: 1400rpx;
    left: 0;
    top: 18rpx;
    background: #fff;
+
    .center-files {
      position: relative;
      width: 100%; // 确保占满宽度
@ -137,25 +191,141 @@ export default {
      .files {
        width: 750rpx; // 图片宽度适配容器
        height: 47rpx; // 根据设计图调整高度
+      }
+    }
+  }
+}
+
+// 搜索结果区域
+.search-results {
+  display: flex;
+  width: 100%;
+  margin-top: 20rpx;
+  align-items: center;
+  flex-direction: column;
+  gap: 22rpx;
+
+}
+
+// 结果卡片
+.result-card {
+  padding: 40rpx;
+  width: 676rpx;
+  height: 248rpx;
+  background: #FFFBF5;
+  border-radius: 12rpx 12rpx 12rpx 12rpx;
+  border: 1rpx solid #C7A26D;
+
+}
+
+// 卡片头部
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30rpx;
+  //border:1px #13c2da solid;
+  .header-info {
+    display: flex;
+    gap: 60rpx;
+    //border:1px red solid;
+
+
+    .label {
+      //border:1px #11ff00 solid;
+      font-weight: 500;
+      font-size: 36rpx;
+      color: #522510;
+      line-height: 50rpx;
+      text-align: center;
+
+    }
+  }
+  
+  .view-details {
+    .details-text {
+      cursor: pointer;
+      //border:1px #11ff00 solid;
+      font-weight: 400;
+      font-size: 24rpx;
+      color: #AD9B91;
+      line-height: 32rpx;
+      text-align: left;
+      
+      &:hover {
+        color: #A24242;

      }
    }
  }
 }

+// 姓名标签区域
+.names-section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20rpx 22rpx;

+}
+
+// 姓名标签
+.name-tag {
+
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background: #FFF1DD;
+  border-radius: 6rpx 6rpx 6rpx 6rpx;
+  padding:7rpx 29rpx;
+
+  
+  &:hover {
+    background: #FFD700;
+    border-color: #DAA520;
+  }
+  
+  .name-text {
+    font-weight: 400;
+    font-size: 24rpx;
+    color: #695347;
+    line-height: 32rpx;
+    text-align: center;
+
+  }
+}
+
+// 空状态
+.empty-state {
+  margin-top: 100rpx;
+  text-align: center;
+  
+  .empty-text {
+    font-size: 28rpx;
+    color: #999;
+  }
+}
+
+// 初始状态
+.initial-state {
+  margin-top: 100rpx;
+  text-align: center;
+  
+  .initial-text {
+    font-size: 28rpx;
+    color: #666;
+  }
+}

 .bottom-files {
  position: fixed;
  left: 0;
  bottom: 0;
-  width: 100%; // 确保占满宽度
-  z-index: 10; // 防止被内容覆盖
+  width: 100%;
+  z-index: 10;
  background-color: #ffffff;
+  
  .files {
-    width: 750rpx; // 图片宽度适配容器
-    height: 90rpx; // 根据设计图调整高度
-
+    width: 750rpx;
+    height: 90rpx;
  }
 }
 </style>
--- a/pages/memorial/memorial.vue
+++ b/pages/memorial/memorial.vue
@ -55,7 +55,6 @@
          @click="submitPrayer"
      />
    </view>
-
  </view>
 </template>

@ -63,7 +62,7 @@
 import {CommonEnum} from '@/enum/common.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"
+import EnshrinedList from "./compositons/enshrinedListIndex.vue"
 import FloorSelector from "./compositons/floorSelector.vue"
 import StatusBar from "./compositons/statusBar.vue"
 import BottomButton from "../../components/bottom-button/bottom-button.vue";
--- a/pages/memorial/memorialHall.vue
+++ b/pages/memorial/memorialHall.vue
@ -98,6 +98,15 @@
          :unit-id="selectedUnitId"
          @view-details="handleViewDetails"
      />
+      <view class="placeholder"></view>
+      <!-- 供奉列表 -->
+      <enshrined-list
+          v-if="!loading"
+          :memorial-id="selectedUnitId"
+          :search-keyword="searchName"
+          @item-click="handleItemClick"
+          ref="enshrinedList"
+      />

    </view>
    <view class="bottom">
@ -121,6 +130,7 @@
 <script>
 import {CommonEnum} from '@/enum/common.js'
 import { getDeceasedList, getMemorialDetail } from '@/api/memorial/index.js'
+import { getEnshrinedList } from '@/api/memorial/memorial.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"