buddhism/pages/memorial/memorialHall.vue

<template>
  <view class="page">
    <base-background />
    <!-- 使用自定义导航栏组件 -->
    <custom-navbar ref="customNavbar" title="往生大殿" />
    <view class="header">
      <!-- 搜索框 -->
      <search-box
        v-model="searchName"
        :search-icon="CommonEnum.SEARCH"
        :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>
        </view>

        <!-- 刻铭标题 -->
        <view class="title">刻铭</view>

        <!-- 滚动内容区域 -->
        <scroll-view
          :scroll-top="scrollTop"
          class="scroll-content"
          scroll-y="true"
          @scroll="onScroll"
        >
          <!-- 加载状态 -->
          <view v-if="loading" class="loading-container">
            <view class="loading-text">加载中...</view>
          </view>

          <!-- 动态渲染往生者信息 -->
          <view
            v-for="(deceased, index) in deceasedList"
            v-else-if="deceasedList.length > 0"
            :key="deceased.id"
            class="memorial-text"
          >
            <view class="name">
              <view class="honorific">{{ deceased.honorific }}</view>
              <view class="fullName">{{ deceased.fullName }}</view>
            </view>
            <view class="date">
              <view class="bornDate">
                <view>生</view>
                <view>{{ deceased.bornYear }}</view>
                <view class="time">年</view>
                <view>{{ deceased.bornMonths }}</view>
                <view class="time">月</view>
                <view>{{ deceased.bornDay }}</view>
                <view class="time">日</view>
              </view>
              <view class="diedDate">
                <view>卒</view>
                <view>{{ deceased.diedYear || "吉" }}</view>
                <view class="time">年</view>
                <view>{{ deceased.diedMonths || "吉利" }}</view>
                <view class="time">月</view>
                <view>{{ deceased.diedDay || "吉" }}</view>
                <view class="time">日</view>
              </view>
            </view>
          </view>

          <!-- 空数据提示 -->
          <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 || "暂无"
              }}）
            </view>
            <view v-if="memorialDetail && memorialDetail.address">
              地址：{{ memorialDetail.address }}
            </view>
            <view v-else> 联系人：暂无联系信息</view>
          </view>
        </scroll-view>
      </view>

      <!-- 状态栏 -->
      <StatusBar
        v-if="selectedUnitId"
        :showDetailLink="false"
        :unit-id="selectedUnitId"
        @view-details="handleViewDetails"
      />
      <view class="placeholder"></view>
      <!-- 供奉列表 -->
      <enshrined-list
        v-if="!loading"
        ref="enshrinedList"
        :memorial-id="selectedUnitId"
        :search-keyword="searchName"
        @item-click="handleItemClick"
      />
    </view>
    <view class="bottom">
      <bottom-button title="立即供奉" type="primary" @click="submitPrayer" />
    </view>

    <!-- 供奉弹窗 -->
    <OfferingModal
      :durationOptions="PackageList"
      :visible="showOfferingModal"
      @close="closeOfferingModal"
      @confirm="handleOfferingConfirm"
    />
  </view>
</template>

<script>
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";

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;
      }
    },
    //获取订单套餐
    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",
        });
      }
    },

    // 获取往生者列表
    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
      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;
}

.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;
    //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;
    }

    .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;
    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;
      }
    }

    .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;
      }
    }
  }

  .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;
}

.bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fffbf5;
  height: 180rpx;
}

.placeholder {
  height: 20rpx;
}
</style>