buddhism/pages/memorial/memorial.vue

<template>
  <view class="page">
    <base-background />
    <!-- 使用自定义导航栏组件 -->
    <custom-navbar ref="customNavbar" title="往生殿" />
    <view class="header">
      <!-- 状态展示 -->
      <status-display v-if="loading" type="loading" loading-text="加载中..." />
      <!-- 搜索框 -->
      <search-box
        v-model="searchName"
        :width="'682rpx'"
        :search-icon="CommonEnum.SEARCH"
        placeholder="请输入姓名或分区进行查找"
        btn-text="搜索"
        @search="handleSearch"
      />

      <!-- 供奉列表 -->
      <enshrined-list
        v-if="!loading"
        :memorial-id="memorialId"
        :search-keyword="searchName"
        @item-click="handleItemClick"
        ref="enshrinedList"
      />
      <!-- 状态栏 -->
      <StatusBar
        v-if="selectedUnitId"
        :unit-id="selectedUnitId"
        @view-details="handleViewDetails"
      />

      <!-- 楼层选择器 -->
      <view class="floor-selector-container">
        <FloorSelector
          ref="floorSelector"
          :default-floor-id="defaultFloorId"
          :default-area-id="defaultAreaId"
          :default-unit-id="defaultUnitId"
          @selection-change="handleSelectionChange"
        />
      </view>
    </view>
    <view class="bottom">
      <bottom-button title="供奉" type="primary" @click="submitPrayer" />
    </view>
  </view>
</template>

<script>
  import { CommonEnum } from '@/enum/common.js'
  import SearchBox from '../../components/search-box/search-box.vue'
  import StatusDisplay from '../../components/status-display/status-display.vue'
  import EnshrinedList from './compositons/enshrinedListIndex.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,
        memorialId: '16', // 默认往生殿ID，可以从路由参数获取
        // 楼层选择器默认值
        defaultFloorId: '',
        defaultAreaId: '',
        defaultUnitId: '',
        // 当前选中的楼层信息
        currentSelection: {
          floor: null,
          area: null,
          unit: null,
        },
        // 当前选中的单元ID，用于状态栏查询
        selectedUnitId: '',
      }
    },
    onLoad(options) {
      // 从路由参数获取往生殿ID
      if (options.id) {
        this.memorialId = options.id
      }
      this.initPage()
    },
    methods: {
      // 初始化页面
      async initPage() {
        this.loading = true
        try {
          // 页面初始化逻辑
          console.log('往生殿页面初始化，ID:', this.memorialId)
        } catch (error) {
          console.error('页面初始化失败:', error)
          uni.showToast({
            title: '页面加载失败',
            icon: 'none',
          })
        } finally {
          this.loading = false
        }
      },

      // 处理搜索
      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',
            })
          },
        })
      },

      // 处理列表项点击
      handleItemClick(item) {
        console.log('点击供奉记录:', item)
        // 可以跳转到详情页或执行其他操作
        uni.showToast({
          title: `查看 ${item.worshiperName} 的供奉记录`,
          icon: 'none',
        })
      },

      // 处理楼层选择变化
      handleSelectionChange(selection) {
        console.log('楼层选择变化:', selection)
        this.currentSelection = selection

        // 当选中单元时，更新selectedUnitId触发状态栏查询
        if (selection.unit) {
          console.log('选中单元:', selection.unit.label, 'ID:', selection.unit.id)
          this.selectedUnitId = selection.unit.id
        } else {
          // 如果没有选中单元，清空状态栏
          this.selectedUnitId = ''
        }
      },

      // 跳转到往生大殿页面的通用方法
      navigateToMemorialHall(unitId) {
        console.log('跳转到往生大殿页面，ID:', unitId)

        uni.navigateTo({
          url: `/pages/memorial/memorialHall?id=${unitId}`,
          success: () => {
            console.log('跳转成功')
          },
          fail: error => {
            console.error('跳转失败:', error)
            uni.showToast({
              title: '页面跳转失败',
              icon: 'none',
            })
          },
        })
      },

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

      // 提交供奉 - 跳转到往生大殿页面
      submitPrayer() {
        console.log('提交供奉，跳转到往生大殿页面，ID:', this.selectedUnitId)
        this.navigateToMemorialHall(this.selectedUnitId)
      },
    },
  }
</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;
  }

  .floor-selector-container {
    margin-bottom: 30rpx;
    display: flex;
    justify-content: center;
  }

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

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