539 lines
13 KiB
Vue
539 lines
13 KiB
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>
|
||
|
||
<!-- 滚动内容区域 -->
|
||
<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 } 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
|
||
}
|
||
},
|
||
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('显示供奉弹窗')
|
||
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;
|
||
}
|
||
}
|
||
.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> |