From 6d6ee3c2b5446cefdc98d08daf6f5d7d709d278c Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Wed, 27 Aug 2025 15:46:27 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AB=8B=E5=8D=B3=E4=BE=9B=E5=A5=89=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E8=8E=B7=E5=8F=96=E5=8A=A8=E6=80=81=E5=A5=97=E9=A4=90?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/memorial/memorial.js                     |    8 +
 pages/memorial/compositons/offeringModal.vue |  453 ++++----
 pages/memorial/memorialHall.vue              | 1018 +++++++++---------
 3 files changed, 760 insertions(+), 719 deletions(-)

diff --git a/api/memorial/memorial.js b/api/memorial/memorial.js
index 5dbd499..ab6adb9 100644
--- a/api/memorial/memorial.js
+++ b/api/memorial/memorial.js
@@ -50,3 +50,11 @@ export function checkIsCollected(memorialId) {
     },
   });
 }
+
+// 获取套餐列表
+export function getPackageList() {
+  return request({
+    url: "/app/thali/list",
+    method: "get",
+  });
+}
diff --git a/pages/memorial/compositons/offeringModal.vue b/pages/memorial/compositons/offeringModal.vue
index db74c54..14db4cd 100644
--- a/pages/memorial/compositons/offeringModal.vue
+++ b/pages/memorial/compositons/offeringModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="offering-modal" v-if="visible" @click="handleClose">
+  <view v-if="visible" class="offering-modal" @click="handleClose">
     <view class="modal-overlay" @click="handleClose"></view>
     <view class="modal-content" @click.stop>
       <!-- 关闭按钮 -->
@@ -15,13 +15,13 @@
         <view class="duration-grid">
           <view
             v-for="option in durationOptions"
-            :key="option.value"
+            :key="option.id"
+            :class="{ selected: selectedDuration === option.id }"
             class="duration-option"
-            :class="{ selected: selectedDuration === option.value }"
-            @click="selectDuration(option.value)"
+            @click="selectDuration(option.id)"
           >
-            <text class="duration-text">{{ option.label }}</text>
-            <text class="duration-price">¥{{ option.price }}</text>
+            <text class="duration-text">{{ option.name }}</text>
+            <text class="duration-price">¥{{ option.amount }}</text>
           </view>
         </view>
       </view>
@@ -30,10 +30,10 @@
       <view class="offerer-section">
         <view class="section-label">供奉人</view>
         <input
-          class="offerer-input"
-          placeholder="请填写供奉人姓名"
           v-model="offererName"
+          class="offerer-input"
           maxlength="20"
+          placeholder="请填写供奉人姓名"
         />
       </view>
       <view class="input-tip">将在供奉名单上展现供奉人的姓名，此为必填</view>
@@ -52,251 +52,252 @@
 </template>
 
 <script>
-  export default {
-    name: 'OfferingModal',
-    props: {
-      visible: {
-        type: Boolean,
-        default: false,
-      },
+import { object } from "../../../uni_modules/uv-ui-tools/libs/function/test";
+
+export default {
+  name: "OfferingModal",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
     },
-    data() {
-      return {
-        selectedDuration: '3', // 默认选择3天
-        offererName: '',
-        durationOptions: [
-          { label: '供奉3天', value: '3', price: '99.9' },
-          { label: '供奉1周', value: '7', price: '129.9' },
-          { label: '供奉1月', value: '30', price: '299.9' },
-          { label: '供奉1年', value: '365', price: '499.9' },
-        ],
+    durationOptions: {
+      type: object(),
+      default: {},
+    },
+  },
+  data() {
+    return {
+      selectedDuration: null, // 默认选择3天
+      offererName: "",
+    };
+  },
+  computed: {
+    totalPrice() {
+      // 未选择或options为空时返回0
+      if (!this.selectedDuration || !this.durationOptions.length) return 0;
+
+      const selectedOption = this.durationOptions.find(
+        (option) => option.id === this.selectedDuration,
+      );
+
+      // 当未找到选项时返回空值
+      return selectedOption?.amount ?? null;
+    },
+  },
+  methods: {
+    // 关闭弹窗
+    handleClose() {
+      this.$emit("close");
+    },
+
+    // 选择供奉时长
+    selectDuration(value) {
+      this.selectedDuration = value;
+    },
+
+    // 确认供奉
+    handleConfirm() {
+      // 验证供奉人姓名
+      if (!this.offererName.trim()) {
+        uni.showToast({
+          title: "请填写供奉人姓名",
+          icon: "none",
+        });
+        return;
       }
+
+      // 获取选中的时长选项
+      const selectedOption = this.durationOptions.find(
+        (option) => option.value === this.selectedDuration,
+      );
+
+      // 触发确认事件
+      this.$emit("confirm", {
+        duration: this.selectedDuration,
+        durationLabel: selectedOption.label,
+        price: selectedOption.price,
+        offererName: this.offererName.trim(),
+      });
     },
-    computed: {
-      totalPrice() {
-        const selectedOption = this.durationOptions.find(
-          option => option.value === this.selectedDuration
-        )
-        if (!selectedOption) return '99.9'
-
-        // 根据设计图，显示的价格可能需要调整
-        // 这里可以根据实际需求调整价格计算逻辑
-        return selectedOption.price
-      },
-    },
-    methods: {
-      // 关闭弹窗
-      handleClose() {
-        this.$emit('close')
-      },
-
-      // 选择供奉时长
-      selectDuration(value) {
-        this.selectedDuration = value
-      },
-
-      // 确认供奉
-      handleConfirm() {
-        // 验证供奉人姓名
-        if (!this.offererName.trim()) {
-          uni.showToast({
-            title: '请填写供奉人姓名',
-            icon: 'none',
-          })
-          return
-        }
-
-        // 获取选中的时长选项
-        const selectedOption = this.durationOptions.find(
-          option => option.value === this.selectedDuration
-        )
-
-        // 触发确认事件
-        this.$emit('confirm', {
-          duration: this.selectedDuration,
-          durationLabel: selectedOption.label,
-          price: selectedOption.price,
-          offererName: this.offererName.trim(),
-        })
-      },
-    },
-  }
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .offering-modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1000;
-    display: flex;
-    align-items: flex-end;
-  }
+.offering-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  display: flex;
+  align-items: flex-end;
+}
 
-  .modal-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-  }
+.modal-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
 
-  .modal-content {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    background: #fffbf5;
-    border-radius: 24rpx 24rpx 0 0;
-    padding: 40rpx 32rpx 60rpx 32rpx;
-    box-sizing: border-box;
-    max-height: 80vh;
-    overflow-y: auto;
-  }
+.modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: #fffbf5;
+  border-radius: 24rpx 24rpx 0 0;
+  padding: 40rpx 32rpx 60rpx 32rpx;
+  box-sizing: border-box;
+  max-height: 80vh;
+  overflow-y: auto;
+}
 
-  .close-btn {
-    position: absolute;
-    top: 20rpx;
-    right: 20rpx;
-    width: 60rpx;
-    height: 60rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10;
-  }
+.close-btn {
+  position: absolute;
+  top: 20rpx;
+  right: 20rpx;
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
 
-  .close-icon {
-    font-size: 40rpx;
-    color: #999;
-    font-weight: bold;
-  }
+.close-icon {
+  font-size: 40rpx;
+  color: #999;
+  font-weight: bold;
+}
 
-  .modal-title {
-    color: #695347;
-    text-align: left;
-    margin-bottom: 40rpx;
-    padding-top: 20rpx;
-    font-weight: 400;
-    font-size: 32rpx;
-    line-height: 44rpx;
-  }
+.modal-title {
+  color: #695347;
+  text-align: left;
+  margin-bottom: 40rpx;
+  padding-top: 20rpx;
+  font-weight: 400;
+  font-size: 32rpx;
+  line-height: 44rpx;
+}
 
-  .duration-section {
-    margin-bottom: 40rpx;
-  }
+.duration-section {
+  margin-bottom: 40rpx;
+}
 
-  .duration-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 20rpx;
-  }
+.duration-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20rpx;
+}
 
-  .duration-option {
-    background: #fff1dd;
-    border-radius: 12rpx;
-    padding: 24rpx 20rpx;
-    text-align: center;
-    border: 2rpx solid transparent;
-    transition: all 0.3s ease;
-    cursor: pointer;
+.duration-option {
+  background: #fff1dd;
+  border-radius: 12rpx;
+  padding: 24rpx 20rpx;
+  text-align: center;
+  border: 2rpx solid transparent;
+  transition: all 0.3s ease;
+  cursor: pointer;
 
-    &.selected {
-      background: #a24242;
-      border-color: #a24242;
+  &.selected {
+    background: #a24242;
+    border-color: #a24242;
 
-      .duration-text,
-      .duration-price {
-        color: #fff;
-      }
+    .duration-text,
+    .duration-price {
+      color: #fff;
     }
   }
+}
 
-  .duration-text {
-    display: block;
-    font-size: 28rpx;
-    color: #c7a26d;
-    margin-bottom: 8rpx;
-    font-weight: 500;
-  }
+.duration-text {
+  display: block;
+  font-size: 28rpx;
+  color: #c7a26d;
+  margin-bottom: 8rpx;
+  font-weight: 500;
+}
 
-  .duration-price {
-    display: block;
-    font-size: 32rpx;
-    color: #c7a26d;
-    font-weight: 600;
-  }
+.duration-price {
+  display: block;
+  font-size: 32rpx;
+  color: #c7a26d;
+  font-weight: 600;
+}
 
-  .offerer-section {
-    display: flex;
-    margin-bottom: 40rpx;
-    align-items: center;
-    width: 686rpx;
-    height: 112rpx;
-    border-radius: 16rpx 16rpx 16rpx 16rpx;
-    border: 2rpx solid #a24242;
-  }
+.offerer-section {
+  display: flex;
+  margin-bottom: 40rpx;
+  align-items: center;
+  width: 686rpx;
+  height: 112rpx;
+  border-radius: 16rpx 16rpx 16rpx 16rpx;
+  border: 2rpx solid #a24242;
+}
 
-  .section-label {
-    font-size: 32rpx;
-    color: #522510;
-    font-weight: 500;
-    margin: 34rpx 70rpx 34rpx 54rpx;
-    width: 196rpx;
-  }
+.section-label {
+  font-size: 32rpx;
+  color: #522510;
+  font-weight: 500;
+  margin: 34rpx 70rpx 34rpx 54rpx;
+  width: 196rpx;
+}
 
-  .offerer-input {
-    width: 100%;
-    height: 80rpx;
-    border-radius: 8rpx;
-    font-size: 28rpx;
-    color: #acacac;
-    box-sizing: border-box;
-    margin: 34rpx 0 34rpx 0;
-  }
+.offerer-input {
+  width: 100%;
+  height: 80rpx;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+  color: #acacac;
+  box-sizing: border-box;
+  margin: 34rpx 0 34rpx 0;
+}
 
-  .input-tip {
-    font-weight: 400;
-    font-size: 28rpx;
-    color: #695347;
-    line-height: 38rpx;
-    text-align: center;
-    margin-bottom: 30rpx;
-  }
+.input-tip {
+  font-weight: 400;
+  font-size: 28rpx;
+  color: #695347;
+  line-height: 38rpx;
+  text-align: center;
+  margin-bottom: 30rpx;
+}
 
-  .confirm-section {
-    display: flex;
-    align-items: center;
-    padding: 24rpx 51rpx;
-    width: 100%;
-    height: 90rpx;
-    background: #a24242;
-    border-radius: 45rpx 45rpx 45rpx 45rpx;
-    gap: 20rpx;
-  }
+.confirm-section {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 51rpx;
+  width: 100%;
+  height: 90rpx;
+  background: #a24242;
+  border-radius: 45rpx 45rpx 45rpx 45rpx;
+  gap: 20rpx;
+}
 
-  .price-info {
-    flex: 1;
-    text-align: right;
-  }
+.price-info {
+  flex: 1;
+  text-align: right;
+}
 
-  .total-price {
-    font-size: 36rpx;
-    color: #fff;
-    font-weight: 600;
-  }
+.total-price {
+  font-size: 36rpx;
+  color: #fff;
+  font-weight: 600;
+}
 
-  .confirm-btn {
-    flex: 1;
-    text-align: left;
-  }
+.confirm-btn {
+  flex: 1;
+  text-align: left;
+}
 
-  .btn-text {
-    font-size: 32rpx;
-    color: #fff;
-    font-weight: 500;
-  }
+.btn-text {
+  font-size: 32rpx;
+  color: #fff;
+  font-weight: 500;
+}
 </style>
diff --git a/pages/memorial/memorialHall.vue b/pages/memorial/memorialHall.vue
index 3e41f9f..c2f9ab9 100644
--- a/pages/memorial/memorialHall.vue
+++ b/pages/memorial/memorialHall.vue
@@ -7,19 +7,24 @@
       <!-- 搜索框 -->
       <search-box
         v-model="searchName"
-        :width="'682rpx'"
         :search-icon="CommonEnum.SEARCH"
-        placeholder="请输入姓名或分区进行查找"
+        :width="'682rpx'"
         btn-text="搜索"
+        placeholder="请输入姓名或分区进行查找"
         @search="handleSearch"
       />
 
       <view class="container">
         <!-- 顶部信息 -->
         <view class="memorial-header">
-          <view class="location">{{ memorialDetail ? memorialDetail.name : '加载中...' }}</view>
-          <view :class="['collection-btn', { collected: isCollected }]" @click="handleCollect">
-            {{ isCollected ? '已收藏' : '收藏牌位' }}
+          <view class="location"
+            >{{ memorialDetail ? memorialDetail.name : "加载中..." }}
+          </view>
+          <view
+            :class="['collection-btn', { collected: isCollected }]"
+            @click="handleCollect"
+          >
+            {{ isCollected ? "已收藏" : "收藏牌位" }}
           </view>
         </view>
 
@@ -28,9 +33,9 @@
 
         <!-- 滚动内容区域 -->
         <scroll-view
+          :scroll-top="scrollTop"
           class="scroll-content"
           scroll-y="true"
-          :scroll-top="scrollTop"
           @scroll="onScroll"
         >
           <!-- 加载状态 -->
@@ -40,8 +45,8 @@
 
           <!-- 动态渲染往生者信息 -->
           <view
-            v-else-if="deceasedList.length > 0"
             v-for="(deceased, index) in deceasedList"
+            v-else-if="deceasedList.length > 0"
             :key="deceased.id"
             class="memorial-text"
           >
@@ -61,32 +66,35 @@
               </view>
               <view class="diedDate">
                 <view>卒</view>
-                <view>{{ deceased.diedYear || '吉' }}</view>
+                <view>{{ deceased.diedYear || "吉" }}</view>
                 <view class="time">年</view>
-                <view>{{ deceased.diedMonths || '吉利' }}</view>
+                <view>{{ deceased.diedMonths || "吉利" }}</view>
                 <view class="time">月</view>
-                <view>{{ deceased.diedDay || '吉' }}</view>
+                <view>{{ deceased.diedDay || "吉" }}</view>
                 <view class="time">日</view>
               </view>
             </view>
           </view>
 
           <!-- 空数据提示 -->
-          <view v-else-if="!loading && deceasedList.length === 0" class="empty-container">
+          <view
+            v-else-if="!loading && deceasedList.length === 0"
+            class="empty-container"
+          >
             <view class="empty-text">暂无往生者信息</view>
           </view>
 
           <!-- 联系人信息 -->
           <view class="contact-info">
             <view v-if="memorialDetail">
-              联系人：{{ memorialDetail.contactName || '暂无' }}（{{
-                memorialDetail.contactPhone || '暂无'
+              联系人：{{ memorialDetail.contactName || "暂无" }}（{{
+                memorialDetail.contactPhone || "暂无"
               }}）
             </view>
             <view v-if="memorialDetail && memorialDetail.address">
               地址：{{ memorialDetail.address }}
             </view>
-            <view v-else> 联系人：暂无联系信息 </view>
+            <view v-else> 联系人：暂无联系信息</view>
           </view>
         </scroll-view>
       </view>
@@ -94,18 +102,18 @@
       <!-- 状态栏 -->
       <StatusBar
         v-if="selectedUnitId"
+        :showDetailLink="false"
         :unit-id="selectedUnitId"
         @view-details="handleViewDetails"
-        :showDetailLink="false"
       />
       <view class="placeholder"></view>
       <!-- 供奉列表 -->
       <enshrined-list
         v-if="!loading"
+        ref="enshrinedList"
         :memorial-id="selectedUnitId"
         :search-keyword="searchName"
         @item-click="handleItemClick"
-        ref="enshrinedList"
       />
     </view>
     <view class="bottom">
@@ -114,6 +122,7 @@
 
     <!-- 供奉弹窗 -->
     <OfferingModal
+      :durationOptions="PackageList"
       :visible="showOfferingModal"
       @close="closeOfferingModal"
       @confirm="handleOfferingConfirm"
@@ -122,527 +131,550 @@
 </template>
 
 <script>
-  import { CommonEnum } from '@/enum/common.js'
-  import { getDeceasedList, getMemorialDetail } from '@/api/memorial/index.js'
-  import { getEnshrinedList, collectMemorial, checkIsCollected } from '@/api/memorial/memorial.js'
-  import BaseBackground from '../../components/base-background/base-background.vue'
-  import CustomNavbar from '../../components/custom-navbar/custom-navbar.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'
-  import StatusBar from './compositons/statusBar.vue'
-  import BottomButton from '../../components/bottom-button/bottom-button.vue'
-  import OfferingModal from './compositons/offeringModal.vue'
+import { CommonEnum } from "@/enum/common.js";
+import { getDeceasedList, getMemorialDetail } from "@/api/memorial/index.js";
+import { checkIsCollected, collectMemorial } from "@/api/memorial/memorial.js";
+import BaseBackground from "../../components/base-background/base-background.vue";
+import CustomNavbar from "../../components/custom-navbar/custom-navbar.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";
+import StatusBar from "./compositons/statusBar.vue";
+import BottomButton from "../../components/bottom-button/bottom-button.vue";
+import OfferingModal from "./compositons/offeringModal.vue";
 
-  export default {
-    components: {
-      BaseBackground,
-      CustomNavbar,
-      BottomButton,
-      SearchBox,
-      StatusDisplay,
-      EnshrinedList,
-      StatusBar,
-      OfferingModal,
-    },
-    data() {
-      return {
-        CommonEnum,
-        searchName: '',
-        loading: false,
-        // 当前选中的单元ID，用于状态栏查询
-        selectedUnitId: '',
-        // 往生者列表数据
-        deceasedList: [],
-        // 分页参数
-        pageParams: {
-          pageNum: 1,
-          pageSize: 10,
-        },
-        // 往生殿详情数据
-        memorialDetail: null,
-        // 滚动相关
-        scrollTop: 0,
-        // 供奉弹窗显示状态
-        showOfferingModal: false,
-        // 收藏状态
-        isCollected: false,
+import { getPackageList } from "../../api/memorial/memorial";
+
+export default {
+  components: {
+    BaseBackground,
+    CustomNavbar,
+    BottomButton,
+    SearchBox,
+    StatusDisplay,
+    EnshrinedList,
+    StatusBar,
+    OfferingModal,
+  },
+  data() {
+    return {
+      CommonEnum,
+      searchName: "",
+      loading: false,
+      // 当前选中的单元ID，用于状态栏查询
+      selectedUnitId: "",
+      // 往生者列表数据
+      deceasedList: [],
+      // 分页参数
+      pageParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      // 往生殿详情数据
+      memorialDetail: null,
+      // 滚动相关
+      scrollTop: 0,
+      // 供奉弹窗显示状态
+      showOfferingModal: false,
+      // 收藏状态
+      isCollected: false,
+      //套餐列表
+      PackageList: {},
+    };
+  },
+  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();
+  },
+  // 下拉刷新
+  onPullDownRefresh() {
+    this.refreshData();
+  },
+  methods: {
+    // 初始化页面
+    async initPage() {
+      this.loading = true;
+      try {
+        // 页面初始化逻辑
+        console.log("往生大殿页面初始化，ID:", this.selectedUnitId);
+        // 获取往生殿详情
+        await this.getMemorialDetail();
+        // 获取往生者列表
+        await this.getDeceasedList();
+        // 检查收藏状态
+        await this.checkCollectionStatus();
+        //获取订单套餐
+        await this.fetchPackageList();
+      } catch (error) {
+        console.error("页面初始化失败:", error);
+        uni.showToast({
+          title: "页面加载失败",
+          icon: "none",
+        });
+      } finally {
+        this.loading = false;
       }
     },
-    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)
+    //获取订单套餐
+    async fetchPackageList() {
+      const response = await getPackageList();
+
+      this.PackageList = response.data;
+
+      console.log("获取的套餐数据:", this.PackageList);
+    },
+
+    // 获取往生殿详情
+    async getMemorialDetail() {
+      try {
+        const response = await getMemorialDetail(this.selectedUnitId);
+        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",
+        });
       }
-      this.initPage()
     },
-    // 下拉刷新
-    onPullDownRefresh() {
-      this.refreshData()
+
+    // 获取往生者列表
+    async getDeceasedList() {
+      try {
+        const params = {
+          memorialId: this.selectedUnitId,
+          pageNum: this.pageParams.pageNum,
+          pageSize: this.pageParams.pageSize,
+        };
+
+        // 如果有搜索关键词，添加到参数中
+        //  if (this.searchName) {
+        //    params.keyword = this.searchName
+        //  }
+
+        const response = await getDeceasedList(params); //api
+
+        if (response.code === 200) {
+          this.deceasedList = response.rows || [];
+          console.log("往生者列表数据:", this.deceasedList);
+        } else {
+          console.error("获取往生者列表失败:", response.msg);
+          uni.showToast({
+            title: response.msg || "获取数据失败",
+            icon: "none",
+          });
+        }
+      } catch (error) {
+        console.error("获取往生者列表异常:", error);
+        uni.showToast({
+          title: "网络请求失败",
+          icon: "none",
+        });
+      }
     },
-    methods: {
-      // 初始化页面
-      async initPage() {
-        this.loading = true
-        try {
-          // 页面初始化逻辑
-          console.log('往生大殿页面初始化，ID:', this.selectedUnitId)
-          // 获取往生殿详情
-          await this.getMemorialDetail()
-          // 获取往生者列表
-          await this.getDeceasedList()
-          // 检查收藏状态
-          await this.checkCollectionStatus()
-        } catch (error) {
-          console.error('页面初始化失败:', error)
-          uni.showToast({
-            title: '页面加载失败',
-            icon: 'none',
-          })
-        } finally {
-          this.loading = false
+
+    // 检查收藏状态
+    async checkCollectionStatus() {
+      if (!this.selectedUnitId) {
+        console.warn("未获取到牌位ID，无法检查收藏状态");
+        return;
+      }
+
+      try {
+        const response = await checkIsCollected(this.selectedUnitId);
+        console.log("收藏状态检查响应:", response);
+
+        if (response.code === 200) {
+          this.isCollected = response.data === true;
+          console.log("当前收藏状态:", this.isCollected);
+        } else {
+          console.error("检查收藏状态失败:", response.msg);
+          // 检查失败时默认为未收藏状态
+          this.isCollected = false;
         }
-      },
+      } catch (error) {
+        console.error("检查收藏状态异常:", error);
+        // 异常时默认为未收藏状态
+        this.isCollected = false;
+      }
+    },
 
-      // 获取往生殿详情
-      async getMemorialDetail() {
-        try {
-          const response = await getMemorialDetail(this.selectedUnitId)
-          console.log('往生殿详情响应:', response)
+    // 处理收藏/取消收藏
+    async handleCollect() {
+      if (!this.selectedUnitId) {
+        uni.showToast({
+          title: "无法获取牌位信息",
+          icon: "none",
+        });
+        return;
+      }
 
-          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 {
-          const params = {
-            memorialId: this.selectedUnitId,
-            pageNum: this.pageParams.pageNum,
-            pageSize: this.pageParams.pageSize,
-          }
-
-          // 如果有搜索关键词，添加到参数中
-          //  if (this.searchName) {
-          //    params.keyword = this.searchName
-          //  }
-
-          const response = await getDeceasedList(params) //api
-
-          if (response.code === 200) {
-            this.deceasedList = response.rows || []
-            console.log('往生者列表数据:', this.deceasedList)
-          } else {
-            console.error('获取往生者列表失败:', response.msg)
-            uni.showToast({
-              title: response.msg || '获取数据失败',
-              icon: 'none',
-            })
-          }
-        } catch (error) {
-          console.error('获取往生者列表异常:', error)
-          uni.showToast({
-            title: '网络请求失败',
-            icon: 'none',
-          })
-        }
-      },
-
-      // 检查收藏状态
-      async checkCollectionStatus() {
-        if (!this.selectedUnitId) {
-          console.warn('未获取到牌位ID，无法检查收藏状态')
-          return
-        }
-
-        try {
-          const response = await checkIsCollected(this.selectedUnitId)
-          console.log('收藏状态检查响应:', response)
-
-          if (response.code === 200) {
-            this.isCollected = response.data === true
-            console.log('当前收藏状态:', this.isCollected)
-          } else {
-            console.error('检查收藏状态失败:', response.msg)
-            // 检查失败时默认为未收藏状态
-            this.isCollected = false
-          }
-        } catch (error) {
-          console.error('检查收藏状态异常:', error)
-          // 异常时默认为未收藏状态
-          this.isCollected = false
-        }
-      },
-
-      // 处理收藏/取消收藏
-      async handleCollect() {
-        if (!this.selectedUnitId) {
-          uni.showToast({
-            title: '无法获取牌位信息',
-            icon: 'none',
-          })
-          return
-        }
-
-        try {
-          const loadingText = this.isCollected ? '取消收藏中...' : '收藏中...'
-          uni.showLoading({
-            title: loadingText,
-          })
-
-          const data = {
-            messageId: this.selectedUnitId.toString(),
-          }
-
-          const response = await collectMemorial(data)
-
-          if (response.code === 200) {
-            // 切换收藏状态
-            this.isCollected = !this.isCollected
-            const successText = this.isCollected ? '收藏成功' : '取消收藏成功'
-            uni.showToast({
-              title: successText,
-              icon: 'success',
-            })
-          } else {
-            throw new Error(response.msg || '操作失败')
-          }
-        } catch (error) {
-          console.error('收藏操作失败:', error)
-          uni.showToast({
-            title: error.message || '操作失败',
-            icon: 'none',
-          })
-        } finally {
-          uni.hideLoading()
-        }
-      },
-
-      // 处理搜索
-      async handleSearch(value) {
-        console.log('搜索内容:', value)
-        this.searchName = value
-
-        // 跳转到往生者搜索页面并传递搜索关键词
-        uni.navigateTo({
-          url: `/pages/memorial/deceasedSearch?keyword=${encodeURIComponent(value)}`,
-          success: () => {
-            console.log('跳转到搜索页面成功')
-          },
-          fail: error => {
-            console.error('跳转失败:', error)
-            uni.showToast({
-              title: '页面跳转失败',
-              icon: 'none',
-            })
-          },
-        })
-      },
-
-      // 处理查看详情
-      handleViewDetails(unitData) {
-        console.log('查看单元详情:', unitData)
-      },
-
-      // 提交供奉
-      submitPrayer() {
-        console.log('显示供奉弹窗')
-        this.showOfferingModal = true
-      },
-
-      // 关闭供奉弹窗
-      closeOfferingModal() {
-        this.showOfferingModal = false
-      },
-
-      // 确认供奉
-      handleOfferingConfirm(offeringData) {
-        console.log('确认供奉:', offeringData)
-
-        // 这里可以调用供奉API
+      try {
+        const loadingText = this.isCollected ? "取消收藏中..." : "收藏中...";
         uni.showLoading({
-          title: '正在提交供奉...',
-        })
+          title: loadingText,
+        });
 
-        // 模拟API调用
-        setTimeout(() => {
-          uni.hideLoading()
+        const data = {
+          messageId: this.selectedUnitId.toString(),
+        };
+
+        const response = await collectMemorial(data);
+
+        if (response.code === 200) {
+          // 切换收藏状态
+          this.isCollected = !this.isCollected;
+          const successText = this.isCollected ? "收藏成功" : "取消收藏成功";
           uni.showToast({
-            title: '供奉成功！',
-            icon: 'success',
-          })
-
-          // 关闭弹窗
-          this.closeOfferingModal()
-
-          // 可以在这里刷新数据或跳转到其他页面
-        }, 2000)
-      },
-
-      // 刷新数据
-      async refreshData() {
-        try {
-          // 重置页码
-          this.pageParams.pageNum = 1
-          // 重新获取数据
-          await this.getMemorialDetail()
-          await this.getDeceasedList()
-          // 重新检查收藏状态
-          await this.checkCollectionStatus()
-          // 停止下拉刷新
-          uni.stopPullDownRefresh()
-          uni.showToast({
-            title: '刷新成功',
-            icon: 'success',
-            duration: 1500,
-          })
-        } catch (error) {
-          console.error('刷新数据失败:', error)
-          uni.stopPullDownRefresh()
-          uni.showToast({
-            title: '刷新失败',
-            icon: 'none',
-          })
+            title: successText,
+            icon: "success",
+          });
+        } else {
+          throw new Error(response.msg || "操作失败");
         }
-      },
-
-      // 滚动事件处理
-      onScroll(e) {
-        console.log('滚动位置:', e.detail.scrollTop)
-        this.scrollTop = e.detail.scrollTop
-      },
+      } catch (error) {
+        console.error("收藏操作失败:", error);
+        uni.showToast({
+          title: error.message || "操作失败",
+          icon: "none",
+        });
+      } finally {
+        uni.hideLoading();
+      }
     },
-  }
+
+    // 处理搜索
+    async handleSearch(value) {
+      console.log("搜索内容:", value);
+      this.searchName = value;
+
+      // 跳转到往生者搜索页面并传递搜索关键词
+      uni.navigateTo({
+        url: `/pages/memorial/deceasedSearch?keyword=${encodeURIComponent(value)}`,
+        success: () => {
+          console.log("跳转到搜索页面成功");
+        },
+        fail: (error) => {
+          console.error("跳转失败:", error);
+          uni.showToast({
+            title: "页面跳转失败",
+            icon: "none",
+          });
+        },
+      });
+    },
+
+    // 处理查看详情
+    handleViewDetails(unitData) {
+      console.log("查看单元详情:", unitData);
+    },
+
+    // 提交供奉
+    submitPrayer() {
+      console.log("显示供奉弹窗");
+      this.showOfferingModal = true;
+    },
+
+    // 关闭供奉弹窗
+    closeOfferingModal() {
+      this.showOfferingModal = false;
+    },
+
+    // 确认供奉
+    handleOfferingConfirm(offeringData) {
+      console.log("确认供奉:", offeringData);
+
+      // 这里可以调用供奉API
+      uni.showLoading({
+        title: "正在提交供奉...",
+      });
+
+      // 模拟API调用
+      setTimeout(() => {
+        uni.hideLoading();
+        uni.showToast({
+          title: "供奉成功！",
+          icon: "success",
+        });
+
+        // 关闭弹窗
+        this.closeOfferingModal();
+
+        // 可以在这里刷新数据或跳转到其他页面
+      }, 2000);
+    },
+
+    // 刷新数据
+    async refreshData() {
+      try {
+        // 重置页码
+        this.pageParams.pageNum = 1;
+        // 重新获取数据
+        await this.getMemorialDetail();
+        await this.getDeceasedList();
+        // 重新检查收藏状态
+        await this.checkCollectionStatus();
+        // 停止下拉刷新
+        uni.stopPullDownRefresh();
+        uni.showToast({
+          title: "刷新成功",
+          icon: "success",
+          duration: 1500,
+        });
+      } catch (error) {
+        console.error("刷新数据失败:", error);
+        uni.stopPullDownRefresh();
+        uni.showToast({
+          title: "刷新失败",
+          icon: "none",
+        });
+      }
+    },
+
+    // 滚动事件处理
+    onScroll(e) {
+      console.log("滚动位置:", e.detail.scrollTop);
+      this.scrollTop = e.detail.scrollTop;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .page {
-    width: 100%;
-    min-height: 100vh;
-  }
+.page {
+  width: 100%;
+  min-height: 100vh;
+}
 
-  .header {
-    width: 100%;
-    min-height: 100vh;
+.header {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding-bottom: 180rpx;
+  box-sizing: border-box;
+}
+
+.container {
+  width: 100%;
+  //border: 1px  red solid;
+  height: 862rpx;
+  padding: 34rpx 32rpx 0 32rpx;
+  display: flex;
+  flex-direction: column;
+
+  .memorial-header {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    flex-direction: column;
-    padding-bottom: 180rpx;
-    box-sizing: border-box;
-  }
-
-  .container {
-    width: 100%;
     //border: 1px  red solid;
-    height: 862rpx;
-    padding: 34rpx 32rpx 0 32rpx;
-    display: flex;
-    flex-direction: column;
-    .memorial-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      //border: 1px  red solid;
-      padding-left: 2rpx;
-      height: 54rpx;
-      margin-bottom: 26rpx;
-      .location {
-        font-weight: 500;
-        font-size: 40rpx;
-        color: #522510;
-        line-height: 54rpx;
-        text-align: left;
-      }
+    padding-left: 2rpx;
+    height: 54rpx;
+    margin-bottom: 26rpx;
 
-      .collection-btn {
-        color: white;
-        padding: 5px 10px;
-        font-size: 14px;
-        text-align: center;
-        align-items: center;
-        width: 180rpx;
-        height: 56rpx;
-        background: #a24242;
-        border-radius: 8rpx 8rpx 8rpx 8rpx;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        &:active {
-          background: #8b3a3a;
-          transform: scale(0.95);
-        }
-
-        &:hover {
-          background: #b85a5a;
-        }
-
-        // 已收藏状态样式
-        &.collected {
-          background: #4caf50;
-
-          &:hover {
-            background: #45a049;
-          }
-
-          &:active {
-            background: #3d8b40;
-          }
-        }
-      }
-    }
-    .title {
-      margin-bottom: 22rpx;
+    .location {
       font-weight: 500;
       font-size: 40rpx;
       color: #522510;
       line-height: 54rpx;
       text-align: left;
-      //border: 1px  red solid;
     }
 
-    .scroll-content {
-      flex: 1;
-      height: 0; // 让flex: 1生效
-      overflow: hidden;
-    }
-
-    .loading-container {
+    .collection-btn {
+      color: white;
+      padding: 5px 10px;
+      font-size: 14px;
+      text-align: center;
+      align-items: center;
+      width: 180rpx;
+      height: 56rpx;
+      background: #a24242;
+      border-radius: 8rpx 8rpx 8rpx 8rpx;
+      cursor: pointer;
+      transition: all 0.3s ease;
       display: flex;
       justify-content: center;
       align-items: center;
-      height: 100rpx; /* Adjust height as needed */
-      margin-bottom: 22rpx;
+
+      &:active {
+        background: #8b3a3a;
+        transform: scale(0.95);
+      }
+
+      &:hover {
+        background: #b85a5a;
+      }
+
+      // 已收藏状态样式
+      &.collected {
+        background: #4caf50;
+
+        &:hover {
+          background: #45a049;
+        }
+
+        &:active {
+          background: #3d8b40;
+        }
+      }
+    }
+  }
+
+  .title {
+    margin-bottom: 22rpx;
+    font-weight: 500;
+    font-size: 40rpx;
+    color: #522510;
+    line-height: 54rpx;
+    text-align: left;
+    //border: 1px  red solid;
+  }
+
+  .scroll-content {
+    flex: 1;
+    height: 0; // 让flex: 1生效
+    overflow: hidden;
+  }
+
+  .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;
+    font-weight: 400;
+    font-size: 24rpx;
+    color: #4c382e;
+    line-height: 32rpx;
+    letter-spacing: 1px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+
+    .name {
+      margin-top: 4rpx;
+      display: flex;
+      margin-right: 34rpx;
+
+      .honorific {
+        font-weight: 400;
+        font-size: 24rpx;
+        color: #4c382e;
+        line-height: 32rpx;
+        letter-spacing: 1px;
+        text-align: left;
+        margin-right: 16rpx;
+      }
+
+      .fullName {
+        font-weight: 400;
+        font-size: 28rpx;
+        color: #4c382e;
+        line-height: 32rpx;
+        letter-spacing: 1px;
+        text-align: left;
+      }
     }
 
-    .loading-text {
-      font-size: 28rpx;
+    .date {
       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;
-      font-weight: 400;
-      font-size: 24rpx;
-      color: #4c382e;
-      line-height: 32rpx;
-      letter-spacing: 1px;
-      text-align: left;
-      font-style: normal;
-      text-transform: none;
-      .name {
-        margin-top: 4rpx;
+      .bornDate {
+        gap: 16rpx;
         display: flex;
-        margin-right: 34rpx;
-        .honorific {
-          font-weight: 400;
-          font-size: 24rpx;
-          color: #4c382e;
-          line-height: 32rpx;
-          letter-spacing: 1px;
-          text-align: left;
-          margin-right: 16rpx;
-        }
-        .fullName {
-          font-weight: 400;
-          font-size: 28rpx;
-          color: #4c382e;
-          line-height: 32rpx;
-          letter-spacing: 1px;
-          text-align: left;
-        }
+        font-weight: 400;
+        font-size: 28rpx;
+        line-height: 38rpx;
+        letter-spacing: 1px;
+        text-align: left;
       }
-      .date {
-        color: #522510;
-        .bornDate {
-          gap: 16rpx;
-          display: flex;
-          font-weight: 400;
-          font-size: 28rpx;
-          line-height: 38rpx;
-          letter-spacing: 1px;
-          text-align: left;
-        }
-        .diedDate {
-          gap: 16rpx;
-          display: flex;
-          font-weight: 400;
-          font-size: 28rpx;
-          line-height: 38rpx;
-          letter-spacing: 1px;
-          text-align: left;
-        }
+
+      .diedDate {
+        gap: 16rpx;
+        display: flex;
+        font-weight: 400;
+        font-size: 28rpx;
+        line-height: 38rpx;
+        letter-spacing: 1px;
+        text-align: left;
       }
     }
-
-    .time {
-      font-weight: 500;
-      font-size: 32rpx;
-    }
-
-    .contact-info {
-      font-weight: 400;
-      font-size: 28rpx;
-      color: #4c382e;
-      line-height: 38rpx;
-      letter-spacing: 1px;
-      text-align: left;
-      padding-bottom: 32rpx;
-    }
   }
 
-  // 状态栏容器样式
-  :deep(.status-bar) {
-    width: 100%;
-    max-width: 750rpx;
+  .time {
+    font-weight: 500;
+    font-size: 32rpx;
   }
 
-  .bottom {
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    background: #fffbf5;
-    height: 180rpx;
+  .contact-info {
+    font-weight: 400;
+    font-size: 28rpx;
+    color: #4c382e;
+    line-height: 38rpx;
+    letter-spacing: 1px;
+    text-align: left;
+    padding-bottom: 32rpx;
   }
+}
 
-  .placeholder {
-    height: 20rpx;
-  }
+// 状态栏容器样式
+:deep(.status-bar) {
+  width: 100%;
+  max-width: 750rpx;
+}
+
+.bottom {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background: #fffbf5;
+  height: 180rpx;
+}
+
+.placeholder {
+  height: 20rpx;
+}
 </style>