166 lines
4.1 KiB
Vue
166 lines
4.1 KiB
Vue
<template>
|
||
<view class="page">
|
||
<base-background />
|
||
<!-- 使用自定义导航栏组件 -->
|
||
<custom-navbar title="往生殿"
|
||
ref="customNavbar"/>
|
||
<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"
|
||
/>
|
||
<!-- 楼层选择器 -->
|
||
<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>
|
||
<bottom-button
|
||
title="供奉"
|
||
type="primary"
|
||
@click="submitPrayer"
|
||
/>
|
||
</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 BottomButton from "../../components/bottom-button/bottom-button.vue";
|
||
|
||
export default {
|
||
components: {
|
||
BottomButton,
|
||
SearchBox,
|
||
StatusDisplay,
|
||
EnshrinedList,
|
||
FloorSelector
|
||
},
|
||
data() {
|
||
return {
|
||
CommonEnum,
|
||
searchName: '',
|
||
loading: false,
|
||
memorialId: '16', // 默认往生殿ID，可以从路由参数获取
|
||
// 楼层选择器默认值
|
||
defaultFloorId: '',
|
||
defaultAreaId: '',
|
||
defaultUnitId: '',
|
||
// 当前选中的楼层信息
|
||
currentSelection: {
|
||
floor: null,
|
||
area: null,
|
||
unit: null
|
||
}
|
||
}
|
||
},
|
||
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 组件处理
|
||
},
|
||
|
||
// 处理列表项点击
|
||
handleItemClick(item) {
|
||
console.log('点击供奉记录:', item)
|
||
// 可以跳转到详情页或执行其他操作
|
||
uni.showToast({
|
||
title: `查看 ${item.worshiperName} 的供奉记录`,
|
||
icon: 'none'
|
||
})
|
||
},
|
||
|
||
// 处理楼层选择变化
|
||
handleSelectionChange(selection) {
|
||
console.log('楼层选择变化:', selection)
|
||
this.currentSelection = selection
|
||
|
||
// 可以根据选中的楼层信息进行相关操作
|
||
// 例如：根据选中的单元ID查询对应的供奉记录
|
||
if (selection.unit) {
|
||
console.log('选中单元:', selection.unit.label, 'ID:', selection.unit.id)
|
||
// 这里可以触发查询该单元的供奉记录
|
||
// this.queryEnshrinedByUnit(selection.unit.id)
|
||
}
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.header {
|
||
width: 100%;
|
||
min-height: 200vh;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
padding-bottom: 40rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.floor-selector-container {
|
||
margin: 30rpx 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
</style> |