往生大殿index1.0
This commit is contained in:
minimaxagent1
parent
80730ba006
commit
fabfe1daf9
|
|
@ -146,6 +146,13 @@
|
||||||
"style": {
|
"style": {
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/memorial/memorialHall",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"subPackages": [
|
"subPackages": [
|
||||||
|
|
|
||||||
308
pages/memorial/memorialHall.vue
Normal file
308
pages/memorial/memorialHall.vue
Normal file
|
|
@ -0,0 +1,308 @@
|
||||||
|
<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">中875 东10-29</view>
|
||||||
|
<view class="collection-btn">收藏牌位</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 刻铭标题 -->
|
||||||
|
<view class="title">刻铭</view>
|
||||||
|
|
||||||
|
<!-- <!– 牌位正文（重复两次） –>-->
|
||||||
|
<!-- <view class="memorial-text">-->
|
||||||
|
<!-- 显妣 陈秀恋 生吉年吉月吉日<br>-->
|
||||||
|
<!-- adfadsfi-->
|
||||||
|
|
||||||
|
<!-- </view>-->
|
||||||
|
|
||||||
|
<view class="memorial-text">
|
||||||
|
<view class="name">
|
||||||
|
<view class="honorific">显妣</view>
|
||||||
|
<view class="fullName">陈秀恋</view>
|
||||||
|
</view>
|
||||||
|
<view class="date">
|
||||||
|
<view class="bornDate">生吉年吉月吉日</view>
|
||||||
|
<view class="diedDate">卒吉年吉月吉日</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="memorial-text">
|
||||||
|
<view class="name">
|
||||||
|
<view class="honorific">显妣</view>
|
||||||
|
<view class="fullName">陈秀恋</view>
|
||||||
|
</view>
|
||||||
|
<view class="date">
|
||||||
|
<view class="bornDate">生吉年吉月吉日</view>
|
||||||
|
<view class="diedDate">卒吉年吉月吉日</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 联系人信息 -->
|
||||||
|
<view class="contact-info">
|
||||||
|
<view>联系人：陈惠玲（13356989666）</view>
|
||||||
|
<view>地址：福建省泉州市惠安县平山是旧路256号</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 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: '16'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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 组件处理
|
||||||
|
},
|
||||||
|
// 处理查看详情
|
||||||
|
handleViewDetails(unitData) {
|
||||||
|
console.log('查看单元详情:', unitData)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #4C382E;
|
||||||
|
line-height: 38rpx;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.diedDate {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #4C382E;
|
||||||
|
line-height: 38rpx;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
Loading…
Reference in New Issue
Block a user