buddhism/pages/memorial/deceasedSearch.vue

<template>
  <view class="page">
    <base-background />
    <!-- 使用自定义导航栏组件 -->
    <custom-navbar
        ref="customNavbar"
        title="供奉记录"/>
    <view class="container">
      <!-- 状态展示 -->
      <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"
      />
      <view class="body">
        <view class="center-files">
          <image :src="CommonEnum.CENTER_TILES" mode="aspectFit" class="files"></image>
        </view>
      </view>
    </view> 

    <view class="bottom-files">
      <image :src="CommonEnum.BOTTOM_TILES_2" mode="aspectFit" class="files"></image>
    </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/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,
      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
      // 搜索逻辑由 enshrinedList 组件处理
    },



  }
}
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 100vh;
}

.container {
  width: 100%;
  //min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-bottom: 180rpx;
  box-sizing: border-box;
  .body{
    position: relative;
    height:1100rpx;
    left: 0;
    top: 18rpx;
    background: #fff;
    .center-files {
      position: relative;
      width: 100%; // 确保占满宽度
      z-index: 10; // 防止被内容覆盖
      .files {
        width: 750rpx; // 图片宽度适配容器
        height: 47rpx; // 根据设计图调整高度

      }
    }
  }
}



.bottom-files {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%; // 确保占满宽度
  z-index: 10; // 防止被内容覆盖
  background-color: #ffffff;
  .files {
    width: 750rpx; // 图片宽度适配容器
    height: 90rpx; // 根据设计图调整高度

  }
}
</style>