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 } from '@/api/memorial/memorial.js'
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: {
    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()
      } 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 handleCollect() {
      if (!this.selectedUnitId) {
        uni.showToast({
          title: '无法获取牌位信息',
          icon: 'none'
        })
        return
      }

      // 如果已经收藏，提示用户
      if (this.isCollected) {
        uni.showToast({
          title: '已经收藏过了',
          icon: 'none'
        })
        return
      }

      try {
        uni.showLoading({
          title: '收藏中...'
        })

        const data = {
          messageId: this.selectedUnitId.toString()
        }

        const response = await collectMemorial(data)
        
        if (response.code === 200) {
          this.isCollected = true
          uni.showToast({
            title: '收藏成功',
            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()
        // 停止下拉刷新
        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>