From f701bed6aae96997a489dc1799be4da7f4372dd3 Mon Sep 17 00:00:00 2001
From: minimaxagent1 <minimaxagent1@gmail.com>
Date: Fri, 8 Aug 2025 11:45:52 +0800
Subject: [PATCH] =?UTF-8?q?memorial.vue=20=E9=A6=96=E9=A1=B5=E8=B4=A1?=
 =?UTF-8?q?=E7=8C=AE=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/memorial/index.js                        |  76 ++++
 pages/memorial/compositons/enshrinedList.vue | 369 +++++++++++++++++++
 pages/memorial/memorial.vue                  |  69 +++-
 3 files changed, 506 insertions(+), 8 deletions(-)
 create mode 100644 api/memorial/index.js
 create mode 100644 pages/memorial/compositons/enshrinedList.vue

diff --git a/api/memorial/index.js b/api/memorial/index.js
new file mode 100644
index 0000000..21c052d
--- /dev/null
+++ b/api/memorial/index.js
@@ -0,0 +1,76 @@
+// 往生殿相关API
+import { get, post, put, del } from '@/utils/request'
+
+/**
+ * 获取供奉列表
+ * @param {Object} params - 查询参数
+ * @param {string} params.memorialId - 往生殿ID
+ * @param {number} params.pageNum - 页码
+ * @param {number} params.pageSize - 每页数量
+ * @param {string} params.keyword - 搜索关键词
+ * @returns {Promise} 返回供奉列表数据
+ */
+export function getEnshrinedList(params) {
+  return get('/app/enshrined/indexList', params, {
+    timeout: 10000,
+    showLoading: false
+  })
+}
+
+/**
+ * 创建供奉记录
+ * @param {Object} data - 供奉数据
+ * @param {string} data.memorialId - 往生殿ID
+ * @param {string} data.worshiperName - 供奉人姓名
+ * @param {string} data.thaliName - 供奉类型
+ * @param {string} data.startDate - 开始时间
+ * @param {string} data.endDate - 结束时间
+ * @returns {Promise} 返回创建结果
+ */
+export function createEnshrined(data) {
+  return post('/app/enshrined', data, {
+    showLoading: true,
+    loadingText: '创建中...'
+  })
+}
+
+/**
+ * 更新供奉记录
+ * @param {Object} data - 供奉数据
+ * @param {string} data.id - 记录ID
+ * @param {string} data.worshiperName - 供奉人姓名
+ * @param {string} data.thaliName - 供奉类型
+ * @param {string} data.startDate - 开始时间
+ * @param {string} data.endDate - 结束时间
+ * @param {string} data.isShow - 是否显示
+ * @returns {Promise} 返回更新结果
+ */
+export function updateEnshrined(data) {
+  return put('/app/enshrined', data, {
+    showLoading: true,
+    loadingText: '更新中...'
+  })
+}
+
+/**
+ * 删除供奉记录
+ * @param {string} id - 供奉记录ID
+ * @returns {Promise} 返回删除结果
+ */
+export function deleteEnshrined(id) {
+  return del(`/app/enshrined/${id}`, {
+    showLoading: true,
+    loadingText: '删除中...'
+  })
+}
+
+/**
+ * 获取往生殿详情
+ * @param {string} id - 往生殿ID
+ * @returns {Promise} 返回往生殿详情
+ */
+export function getMemorialDetail(id) {
+  return get(`/app/memorial/${id}`, {}, {
+    showLoading: false
+  })
+} 
\ No newline at end of file
diff --git a/pages/memorial/compositons/enshrinedList.vue b/pages/memorial/compositons/enshrinedList.vue
new file mode 100644
index 0000000..3bfac34
--- /dev/null
+++ b/pages/memorial/compositons/enshrinedList.vue
@@ -0,0 +1,369 @@
+<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;
+}
+
+.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>
\ No newline at end of file
diff --git a/pages/memorial/memorial.vue b/pages/memorial/memorial.vue
index ae09ab2..679d2f3 100644
--- a/pages/memorial/memorial.vue
+++ b/pages/memorial/memorial.vue
@@ -11,7 +11,7 @@
           type="loading"
           loading-text="加载中..."
       />
-      <!-- 页面内容将在这里添加 -->
+      <!-- 搜索框 -->
       <search-box
           v-model="searchName"
           :width="'682rpx'"
@@ -20,38 +20,90 @@
           btn-text="搜索"
           @search="handleSearch"
       />
+      
+      <!-- 供奉列表 -->
+      <enshrined-list
+        v-if="!loading"
+        :memorial-id="memorialId"
+        :search-keyword="searchName"
+        @item-click="handleItemClick"
+        ref="enshrinedList"
+      />
     </view>
   </view>
 </template>
 
 <script>
 import {CommonEnum} from '@/enum/common.js'
-import SearchBox from "../../components/search-box/search-box.vue";
+import SearchBox from "../../components/search-box/search-box.vue"
+import StatusDisplay from "../../components/status-display/status-display.vue"
+import EnshrinedList from "./compositons/enshrinedList.vue"
+
 export default {
   components: {
     SearchBox,
-    MonkSearchBox: SearchBox
+    StatusDisplay,
+    EnshrinedList
   },
   data() {
     return {
-      bgc: {
-        backgroundColor: "#F5F0E7"
-      },
       CommonEnum,
-      searchName: ''
+      searchName: '',
+      loading: false,
+      memorialId: '16' // 默认往生殿ID，可以从路由参数获取
     }
   },
-  onLoad() {
+  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)
+        uni.showToast({
+          title: '页面加载失败',
+          icon: 'none'
+        })
+      } finally {
+        this.loading = false
+      }
+    },
+    
+    // 处理搜索
+    handleSearch(value) {
+      console.log('搜索内容:', value)
+      this.searchName = value
+      // 搜索逻辑由 enshrinedList 组件处理
+    },
+    
+    // 处理列表项点击
+    handleItemClick(item) {
+      console.log('点击供奉记录:', item)
+      // 可以跳转到详情页或执行其他操作
+      uni.showToast({
+        title: `查看 ${item.worshiperName} 的供奉记录`,
+        icon: 'none'
+      })
+    }
   }
 }
 </script>
+
 <style lang="scss" scoped>
 .page {
   width: 100%;
   min-height: 100vh;
 }
+
 .header {
   width: 100%;
   min-height: 100vh;
@@ -59,5 +111,6 @@ export default {
   align-items: center;
   flex-direction: column;
   padding: 0 15rpx 40rpx 15rpx;
+  box-sizing: border-box;
 }
 </style>
\ No newline at end of file