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">收藏牌位</view>
        </view>

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

        <!-- 加载状态 -->
        <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>
      </view>

      <!-- 状态栏 -->
      <StatusBar
          v-if="selectedUnitId"
          :unit-id="selectedUnitId"
          @view-details="handleViewDetails"
      />

    </view>
    <view class="bottom">
      <bottom-button
          title="立即供奉"
          type="primary"
          @click="submitPrayer"
      />
    </view>

  </view>
</template>

<script>
import {CommonEnum} from '@/enum/common.js'
import { getDeceasedList, getMemorialDetail } from '@/api/memorial/index.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 FloorSelector from "./compositons/floorSelector.vue"
import StatusBar from "./compositons/statusBar.vue"
import BottomButton from "../../components/bottom-button/bottom-button.vue";

export default {
  components: {
    BottomButton,
    SearchBox,
    StatusDisplay,
    EnshrinedList,
    FloorSelector,
    StatusBar
  },
  data() {
    return {
      CommonEnum,
      searchName: '',
      loading: false,
      // 楼层选择器默认值
      defaultFloorId: '',
      defaultAreaId: '',
      defaultUnitId: '',
      // 当前选中的楼层信息
      currentSelection: {
        floor: null,
        area: null,
        unit: null
      },
      // 当前选中的单元ID，用于状态栏查询
      selectedUnitId: '16',
      // 往生者列表数据
      deceasedList: [],
      // 分页参数
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 往生殿详情数据
      memorialDetail: null
    }
  },
  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 handleSearch(value) {
      console.log('搜索内容:', value)
      this.searchName = value
      // 重置页码
      this.pageParams.pageNum = 1
      // 重新获取数据
      await this.getDeceasedList()
    },

    // 处理查看详情
    handleViewDetails(unitData) {
      console.log('查看单元详情:', unitData)
    },

    // 提交供奉
    submitPrayer() {
      console.log('提交供奉')
      // 这里可以添加供奉逻辑
    },

    // 刷新数据
    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'
        })
      }
    }
  }
}
</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;
  .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;
    }
  }
  .title {
    margin-bottom: 22rpx;
    font-weight: 500;
    font-size: 40rpx;
    color: #522510;
    line-height: 54rpx;
    text-align: left;
    //border: 1px  red solid;
  }

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

}




// 状态栏容器样式
:deep(.status-bar) {
  width: 100%;
  max-width: 750rpx;
}

.bottom{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #FFFBF5;
  height: 180rpx;
}
</style>