立即供奉弹窗获取动态套餐数据

api/memorial/memorial.js

@@ -50,3 +50,11 @@ export function checkIsCollected(memorialId) {
     },
   });
 }
+
+// 获取套餐列表
+export function getPackageList() {
+  return request({
+    url: "/app/thali/list",
+    method: "get",
+  });
+}

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.id)"
-            @click="selectDuration(option.value)"
           >
-            <text class="duration-text">{{ option.label }}</text>
+            <text class="duration-text">{{ option.name }}</text>
-            <text class="duration-price">¥{{ option.price }}</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,47 +52,48 @@
 </template>
 
 <script>
+import { object } from "../../../uni_modules/uv-ui-tools/libs/function/test";
+
 export default {
-    name: 'OfferingModal',
+  name: "OfferingModal",
   props: {
     visible: {
       type: Boolean,
       default: false,
     },
+    durationOptions: {
+      type: object(),
+      default: {},
+    },
   },
   data() {
     return {
-        selectedDuration: '3', // 默认选择3天
+      selectedDuration: null, // 默认选择3天
-        offererName: '',
+      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' },
-        ],
-      }
   },
   computed: {
     totalPrice() {
-        const selectedOption = this.durationOptions.find(
+      // 未选择或options为空时返回0
-          option => option.value === this.selectedDuration
+      if (!this.selectedDuration || !this.durationOptions.length) return 0;
-        )
-        if (!selectedOption) return '99.9'
 
-        // 根据设计图，显示的价格可能需要调整
+      const selectedOption = this.durationOptions.find(
-        // 这里可以根据实际需求调整价格计算逻辑
+        (option) => option.id === this.selectedDuration,
-        return selectedOption.price
+      );
+
+      // 当未找到选项时返回空值
+      return selectedOption?.amount ?? null;
     },
   },
   methods: {
     // 关闭弹窗
     handleClose() {
-        this.$emit('close')
+      this.$emit("close");
     },
 
     // 选择供奉时长
     selectDuration(value) {
-        this.selectedDuration = value
+      this.selectedDuration = value;
     },
 
     // 确认供奉
@@ -100,27 +101,27 @@
       // 验证供奉人姓名
       if (!this.offererName.trim()) {
         uni.showToast({
-            title: '请填写供奉人姓名',
+          title: "请填写供奉人姓名",
-            icon: 'none',
+          icon: "none",
-          })
+        });
-          return
+        return;
       }
 
       // 获取选中的时长选项
       const selectedOption = this.durationOptions.find(
-          option => option.value === this.selectedDuration
+        (option) => option.value === this.selectedDuration,
-        )
+      );
 
       // 触发确认事件
-        this.$emit('confirm', {
+      this.$emit("confirm", {
         duration: this.selectedDuration,
         durationLabel: selectedOption.label,
         price: selectedOption.price,
         offererName: this.offererName.trim(),
-        })
+      });
     },
   },
-  }
+};
 </script>
 
 <style lang="scss" scoped>

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="location"
-          <view :class="['collection-btn', { collected: isCollected }]" @click="handleCollect">
+            >{{ memorialDetail ? memorialDetail.name : "加载中..." }}
-            {{ isCollected ? '已收藏' : '收藏牌位' }}
+          </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,26 +66,29 @@
               </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.contactName || "暂无" }}（{{
-                memorialDetail.contactPhone || '暂无'
+                memorialDetail.contactPhone || "暂无"
               }}）
             </view>
             <view v-if="memorialDetail && memorialDetail.address">
@@ -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,17 +131,19 @@
 </template>
 
 <script>
-  import { CommonEnum } from '@/enum/common.js'
+import { CommonEnum } from "@/enum/common.js";
-  import { getDeceasedList, getMemorialDetail } from '@/api/memorial/index.js'
+import { getDeceasedList, getMemorialDetail } from "@/api/memorial/index.js";
-  import { getEnshrinedList, collectMemorial, checkIsCollected } from '@/api/memorial/memorial.js'
+import { checkIsCollected, collectMemorial } from "@/api/memorial/memorial.js";
-  import BaseBackground from '../../components/base-background/base-background.vue'
+import BaseBackground from "../../components/base-background/base-background.vue";
-  import CustomNavbar from '../../components/custom-navbar/custom-navbar.vue'
+import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
-  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 StatusDisplay from "../../components/status-display/status-display.vue";
-  import EnshrinedList from './compositons/enshrinedList.vue'
+import EnshrinedList from "./compositons/enshrinedList.vue";
-  import StatusBar from './compositons/statusBar.vue'
+import StatusBar from "./compositons/statusBar.vue";
-  import BottomButton from '../../components/bottom-button/bottom-button.vue'
+import BottomButton from "../../components/bottom-button/bottom-button.vue";
-  import OfferingModal from './compositons/offeringModal.vue'
+import OfferingModal from "./compositons/offeringModal.vue";
+
+import { getPackageList } from "../../api/memorial/memorial";
 
 export default {
   components: {
@@ -148,10 +159,10 @@
   data() {
     return {
       CommonEnum,
-        searchName: '',
+      searchName: "",
       loading: false,
       // 当前选中的单元ID，用于状态栏查询
-        selectedUnitId: '',
+      selectedUnitId: "",
       // 往生者列表数据
       deceasedList: [],
       // 分页参数
@@ -167,69 +178,81 @@
       showOfferingModal: false,
       // 收藏状态
       isCollected: false,
-      }
+      //套餐列表
+      PackageList: {},
+    };
   },
   onLoad(options) {
-      console.log('memorialHall页面接收到的参数:', options)
+    console.log("memorialHall页面接收到的参数:", options);
     // 从路由参数获取往生殿ID
     if (options.id) {
-        this.selectedUnitId = options.id
+      this.selectedUnitId = options.id;
-        console.log('区域ID:', this.selectedUnitId)
+      console.log("区域ID:", this.selectedUnitId);
     } else {
-        console.warn('未接收到区域ID，使用默认ID:', this.selectedUnitId)
+      console.warn("未接收到区域ID，使用默认ID:", this.selectedUnitId);
     }
-      this.initPage()
+    this.initPage();
   },
   // 下拉刷新
   onPullDownRefresh() {
-      this.refreshData()
+    this.refreshData();
   },
   methods: {
     // 初始化页面
     async initPage() {
-        this.loading = true
+      this.loading = true;
       try {
         // 页面初始化逻辑
-          console.log('往生大殿页面初始化，ID:', this.selectedUnitId)
+        console.log("往生大殿页面初始化，ID:", this.selectedUnitId);
         // 获取往生殿详情
-          await this.getMemorialDetail()
+        await this.getMemorialDetail();
         // 获取往生者列表
-          await this.getDeceasedList()
+        await this.getDeceasedList();
         // 检查收藏状态
-          await this.checkCollectionStatus()
+        await this.checkCollectionStatus();
+        //获取订单套餐
+        await this.fetchPackageList();
       } catch (error) {
-          console.error('页面初始化失败:', error)
+        console.error("页面初始化失败:", error);
         uni.showToast({
-            title: '页面加载失败',
+          title: "页面加载失败",
-            icon: 'none',
+          icon: "none",
-          })
+        });
       } finally {
-          this.loading = false
+        this.loading = false;
       }
     },
+    //获取订单套餐
+    async fetchPackageList() {
+      const response = await getPackageList();
+
+      this.PackageList = response.data;
+
+      console.log("获取的套餐数据:", this.PackageList);
+    },
 
     // 获取往生殿详情
     async getMemorialDetail() {
       try {
-          const response = await getMemorialDetail(this.selectedUnitId)
+        const response = await getMemorialDetail(this.selectedUnitId);
-          console.log('往生殿详情响应:', response)
+        console.log("往生殿详情响应:", response);
 
         if (response.code === 200) {
-            this.memorialDetail = response.data
+          this.memorialDetail = response.data;
-            console.log('往生殿详情数据:', this.memorialDetail)
+          console.log("往生殿详情数据:", this.memorialDetail);
         } else {
-            console.error('获取往生殿详情失败:', response.msg)
+          console.error("获取往生殿详情失败:", response.msg);
           uni.showToast({
-              title: response.msg || '获取往生殿信息失败',
+            title: response.msg || "获取往生殿信息失败",
-              icon: 'none',
+            icon: "none",
-            })
+          });
         }
       } catch (error) {
-          console.error('获取往生殿详情异常:', error)
+        console.error("获取往生殿详情异常:", error);
         uni.showToast({
-            title: '获取往生殿信息失败',
+          title: "获取往生殿信息失败",
-            icon: 'none',
+          icon: "none",
-          })
+        });
       }
     },
 
@@ -240,57 +263,57 @@
           memorialId: this.selectedUnitId,
           pageNum: this.pageParams.pageNum,
           pageSize: this.pageParams.pageSize,
-          }
+        };
 
         // 如果有搜索关键词，添加到参数中
         //  if (this.searchName) {
         //    params.keyword = this.searchName
         //  }
 
-          const response = await getDeceasedList(params) //api
+        const response = await getDeceasedList(params); //api
 
         if (response.code === 200) {
-            this.deceasedList = response.rows || []
+          this.deceasedList = response.rows || [];
-            console.log('往生者列表数据:', this.deceasedList)
+          console.log("往生者列表数据:", this.deceasedList);
         } else {
-            console.error('获取往生者列表失败:', response.msg)
+          console.error("获取往生者列表失败:", response.msg);
           uni.showToast({
-              title: response.msg || '获取数据失败',
+            title: response.msg || "获取数据失败",
-              icon: 'none',
+            icon: "none",
-            })
+          });
         }
       } catch (error) {
-          console.error('获取往生者列表异常:', error)
+        console.error("获取往生者列表异常:", error);
         uni.showToast({
-            title: '网络请求失败',
+          title: "网络请求失败",
-            icon: 'none',
+          icon: "none",
-          })
+        });
       }
     },
 
     // 检查收藏状态
     async checkCollectionStatus() {
       if (!this.selectedUnitId) {
-          console.warn('未获取到牌位ID，无法检查收藏状态')
+        console.warn("未获取到牌位ID，无法检查收藏状态");
-          return
+        return;
       }
 
       try {
-          const response = await checkIsCollected(this.selectedUnitId)
+        const response = await checkIsCollected(this.selectedUnitId);
-          console.log('收藏状态检查响应:', response)
+        console.log("收藏状态检查响应:", response);
 
         if (response.code === 200) {
-            this.isCollected = response.data === true
+          this.isCollected = response.data === true;
-            console.log('当前收藏状态:', this.isCollected)
+          console.log("当前收藏状态:", this.isCollected);
         } else {
-            console.error('检查收藏状态失败:', response.msg)
+          console.error("检查收藏状态失败:", response.msg);
           // 检查失败时默认为未收藏状态
-            this.isCollected = false
+          this.isCollected = false;
         }
       } catch (error) {
-          console.error('检查收藏状态异常:', error)
+        console.error("检查收藏状态异常:", error);
         // 异常时默认为未收藏状态
-          this.isCollected = false
+        this.isCollected = false;
       }
     },
 
@@ -298,141 +321,141 @@
     async handleCollect() {
       if (!this.selectedUnitId) {
         uni.showToast({
-            title: '无法获取牌位信息',
+          title: "无法获取牌位信息",
-            icon: 'none',
+          icon: "none",
-          })
+        });
-          return
+        return;
       }
 
       try {
-          const loadingText = this.isCollected ? '取消收藏中...' : '收藏中...'
+        const loadingText = this.isCollected ? "取消收藏中..." : "收藏中...";
         uni.showLoading({
           title: loadingText,
-          })
+        });
 
         const data = {
           messageId: this.selectedUnitId.toString(),
-          }
+        };
 
-          const response = await collectMemorial(data)
+        const response = await collectMemorial(data);
 
         if (response.code === 200) {
           // 切换收藏状态
-            this.isCollected = !this.isCollected
+          this.isCollected = !this.isCollected;
-            const successText = this.isCollected ? '收藏成功' : '取消收藏成功'
+          const successText = this.isCollected ? "收藏成功" : "取消收藏成功";
           uni.showToast({
             title: successText,
-              icon: 'success',
+            icon: "success",
-            })
+          });
         } else {
-            throw new Error(response.msg || '操作失败')
+          throw new Error(response.msg || "操作失败");
         }
       } catch (error) {
-          console.error('收藏操作失败:', error)
+        console.error("收藏操作失败:", error);
         uni.showToast({
-            title: error.message || '操作失败',
+          title: error.message || "操作失败",
-            icon: 'none',
+          icon: "none",
-          })
+        });
       } finally {
-          uni.hideLoading()
+        uni.hideLoading();
       }
     },
 
     // 处理搜索
     async handleSearch(value) {
-        console.log('搜索内容:', value)
+      console.log("搜索内容:", value);
-        this.searchName = value
+      this.searchName = value;
 
       // 跳转到往生者搜索页面并传递搜索关键词
       uni.navigateTo({
         url: `/pages/memorial/deceasedSearch?keyword=${encodeURIComponent(value)}`,
         success: () => {
-            console.log('跳转到搜索页面成功')
+          console.log("跳转到搜索页面成功");
         },
-          fail: error => {
+        fail: (error) => {
-            console.error('跳转失败:', error)
+          console.error("跳转失败:", error);
           uni.showToast({
-              title: '页面跳转失败',
+            title: "页面跳转失败",
-              icon: 'none',
+            icon: "none",
-            })
+          });
         },
-        })
+      });
     },
 
     // 处理查看详情
     handleViewDetails(unitData) {
-        console.log('查看单元详情:', unitData)
+      console.log("查看单元详情:", unitData);
     },
 
     // 提交供奉
     submitPrayer() {
-        console.log('显示供奉弹窗')
+      console.log("显示供奉弹窗");
-        this.showOfferingModal = true
+      this.showOfferingModal = true;
     },
 
     // 关闭供奉弹窗
     closeOfferingModal() {
-        this.showOfferingModal = false
+      this.showOfferingModal = false;
     },
 
     // 确认供奉
     handleOfferingConfirm(offeringData) {
-        console.log('确认供奉:', offeringData)
+      console.log("确认供奉:", offeringData);
 
       // 这里可以调用供奉API
       uni.showLoading({
-          title: '正在提交供奉...',
+        title: "正在提交供奉...",
-        })
+      });
 
       // 模拟API调用
       setTimeout(() => {
-          uni.hideLoading()
+        uni.hideLoading();
         uni.showToast({
-            title: '供奉成功！',
+          title: "供奉成功！",
-            icon: 'success',
+          icon: "success",
-          })
+        });
 
         // 关闭弹窗
-          this.closeOfferingModal()
+        this.closeOfferingModal();
 
         // 可以在这里刷新数据或跳转到其他页面
-        }, 2000)
+      }, 2000);
     },
 
     // 刷新数据
     async refreshData() {
       try {
         // 重置页码
-          this.pageParams.pageNum = 1
+        this.pageParams.pageNum = 1;
         // 重新获取数据
-          await this.getMemorialDetail()
+        await this.getMemorialDetail();
-          await this.getDeceasedList()
+        await this.getDeceasedList();
         // 重新检查收藏状态
-          await this.checkCollectionStatus()
+        await this.checkCollectionStatus();
         // 停止下拉刷新
-          uni.stopPullDownRefresh()
+        uni.stopPullDownRefresh();
         uni.showToast({
-            title: '刷新成功',
+          title: "刷新成功",
-            icon: 'success',
+          icon: "success",
           duration: 1500,
-          })
+        });
       } catch (error) {
-          console.error('刷新数据失败:', error)
+        console.error("刷新数据失败:", error);
-          uni.stopPullDownRefresh()
+        uni.stopPullDownRefresh();
         uni.showToast({
-            title: '刷新失败',
+          title: "刷新失败",
-            icon: 'none',
+          icon: "none",
-          })
+        });
       }
     },
 
     // 滚动事件处理
     onScroll(e) {
-        console.log('滚动位置:', e.detail.scrollTop)
+      console.log("滚动位置:", e.detail.scrollTop);
-        this.scrollTop = e.detail.scrollTop
+      this.scrollTop = e.detail.scrollTop;
     },
   },
-  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -458,6 +481,7 @@
   padding: 34rpx 32rpx 0 32rpx;
   display: flex;
   flex-direction: column;
+
   .memorial-header {
     display: flex;
     justify-content: space-between;
@@ -466,6 +490,7 @@
     padding-left: 2rpx;
     height: 54rpx;
     margin-bottom: 26rpx;
+
     .location {
       font-weight: 500;
       font-size: 40rpx;
@@ -513,6 +538,7 @@
       }
     }
   }
+
   .title {
     margin-bottom: 22rpx;
     font-weight: 500;
@@ -566,10 +592,12 @@
     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;
@@ -579,6 +607,7 @@
         text-align: left;
         margin-right: 16rpx;
       }
+
       .fullName {
         font-weight: 400;
         font-size: 28rpx;
@@ -588,8 +617,10 @@
         text-align: left;
       }
     }
+
     .date {
       color: #522510;
+
       .bornDate {
         gap: 16rpx;
         display: flex;
@@ -599,6 +630,7 @@
         letter-spacing: 1px;
         text-align: left;
       }
+
       .diedDate {
         gap: 16rpx;
         display: flex;