buddhism/pages/memorial/memorialHall.vue

<template>
  <view class="page">
    <base-background />
    <!-- 使用自定义导航栏组件 -->
    <custom-navbar ref="customNavbar" title="往生大殿" />
    <view class="header">
      <!-- 搜索框 -->
      <search-box
        v-model="searchName"
        :width="'682rpx'"
        :search-icon="CommonEnum.SEARCH"
        placeholder="请输入姓名或分区进行查找"
        btn-text="搜索"
        @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
          class="scroll-content"
          scroll-y="true"
          :scroll-top="scrollTop"
          @scroll="onScroll"
        >
          <!-- 加载状态 -->
          <view v-if="loading" class="loading-container">
            <view class="loading-text">加载中...</view>
          </view>

          <!-- 动态渲染往生者信息 -->
          <view
            v-else-if="deceasedList.length > 0"
            v-for="(deceased, index) in deceasedList"
            :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"
        :unit-id="selectedUnitId"
        @view-details="handleViewDetails"
        :showDetailLink="false"
      />
      <view class="placeholder"></view>
      <!-- 供奉列表 -->
      <enshrined-list
        v-if="!loading"
        :memorial-id="selectedUnitId"
        :search-keyword="searchName"
        @item-click="handleItemClick"
        ref="enshrinedList"
      />
    </view>
    <view class="bottom">
      <bottom-button title="立即供奉" type="primary" @click="submitPrayer" />
    </view>

    <!-- 供奉弹窗 -->
    <OfferingModal
      :visible="showOfferingModal"
      @close="closeOfferingModal"
      @confirm="handleOfferingConfirm"
    />
  </view>
</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'

  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,
      }
    },
    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()
        } catch (error) {
          console.error('页面初始化失败:', error)
          uni.showToast({
            title: '页面加载失败',
            icon: 'none',
          })
        } finally {
          this.loading = false
        }
      },

      // 获取往生殿详情
      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>