往生大殿逝者记录4.0-内容区域可滑动
This commit is contained in:
minimaxagent1
parent
932ee52441
commit
2a7e874ae3
|
|
@ -1,7 +1,7 @@
|
|||
# 往生殿页面跳转功能测试
|
||||
|
||||
## 功能描述
|
||||
从memorial页面点击"供奉"按钮后，跳转到memorialHall页面，并传递往生殿ID进行页面渲染。
|
||||
从memorial页面点击"供奉"按钮后，跳转到memorialHall页面，并传递往生殿ID进行页面渲染。memorialHall页面具有固定容器高度和可滚动的内容区域。
|
||||
|
||||
## 跳转流程
|
||||
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
- **路径**: `/pages/memorial/memorialHall`
|
||||
- **功能**: 往生大殿详情页面
|
||||
- **接收参数**: `id` - 往生殿ID
|
||||
- **特色功能**: 固定容器高度，内容区域可滚动
|
||||
|
||||
## 实现细节
|
||||
|
||||
|
|
@ -40,18 +41,24 @@ submitPrayer() {
|
|||
}
|
||||
```
|
||||
|
||||
### memorialHall.vue 中的参数接收
|
||||
### memorialHall.vue 中的参数接收和滚动功能
|
||||
```javascript
|
||||
onLoad(options) {
|
||||
console.log('memorialHall页面接收到的参数:', options)
|
||||
// 从路由参数获取往生殿ID
|
||||
if (options.id) {
|
||||
this.memorialId = options.id
|
||||
console.log('设置往生殿ID:', this.memorialId)
|
||||
this.selectedUnitId = options.id
|
||||
console.log('区域ID:', this.selectedUnitId)
|
||||
} else {
|
||||
console.warn('未接收到往生殿ID，使用默认ID:', this.memorialId)
|
||||
console.warn('未接收到区域ID，使用默认ID:', this.selectedUnitId)
|
||||
}
|
||||
this.initPage()
|
||||
},
|
||||
|
||||
// 滚动事件处理
|
||||
onScroll(e) {
|
||||
console.log('滚动位置:', e.detail.scrollTop)
|
||||
this.scrollTop = e.detail.scrollTop
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -73,6 +80,12 @@ uni.navigateTo({
|
|||
- 页面应该跳转到memorialHall页面
|
||||
- 控制台应该显示接收到的参数
|
||||
- 页面应该根据传递的ID加载对应的往生殿信息
|
||||
- 内容区域应该可以垂直滚动
|
||||
|
||||
### 4. 测试滚动功能
|
||||
- 当往生者列表内容超出容器高度时，可以上下滚动查看
|
||||
- 滚动时控制台会显示滚动位置信息
|
||||
- 容器高度保持固定，不会随内容变化
|
||||
|
||||
## 预期结果
|
||||
|
||||
|
|
@ -94,10 +107,11 @@ uni.navigateTo({
|
|||
|
||||
### 控制台日志
|
||||
- `memorialHall页面接收到的参数:` - 显示接收到的所有参数
|
||||
- `设置往生殿ID:` - 显示设置的往生殿ID
|
||||
- `往生殿页面初始化，ID:` - 显示页面初始化时的ID
|
||||
- `区域ID:` - 显示设置的往生殿ID
|
||||
- `往生大殿页面初始化，ID:` - 显示页面初始化时的ID
|
||||
- `往生殿详情响应:` - 显示API响应数据
|
||||
- `往生者列表数据:` - 显示往生者列表数据
|
||||
- `滚动位置:` - 显示当前滚动位置
|
||||
|
||||
### 网络请求
|
||||
- `GET /app/memorial/{id}` - 获取往生殿详情
|
||||
|
|
|
|||
|
|
@ -27,61 +27,69 @@
|
|||
<!-- 刻铭标题 -->
|
||||
<view class="title">刻铭</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<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"
|
||||
<!-- 滚动内容区域 -->
|
||||
<scroll-view
|
||||
class="scroll-content"
|
||||
scroll-y="true"
|
||||
:scroll-top="scrollTop"
|
||||
@scroll="onScroll"
|
||||
>
|
||||
<view class="name">
|
||||
<view class="honorific">{{ deceased.honorific }}</view>
|
||||
<view class="fullName">{{ deceased.fullName }}</view>
|
||||
<!-- 加载状态 -->
|
||||
<view v-if="loading" class="loading-container">
|
||||
<view class="loading-text">加载中...</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
|
||||
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="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 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>
|
||||
|
||||
<!-- 空数据提示 -->
|
||||
<view v-else-if="!loading && deceasedList.length === 0" class="empty-container">
|
||||
<view class="empty-text">暂无往生者信息</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 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>
|
||||
<view v-if="memorialDetail && memorialDetail.address">
|
||||
地址：{{ memorialDetail.address }}
|
||||
</view>
|
||||
<view v-else>
|
||||
联系人：暂无联系信息
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 状态栏 -->
|
||||
|
|
@ -138,7 +146,7 @@ export default {
|
|||
unit: null
|
||||
},
|
||||
// 当前选中的单元ID，用于状态栏查询
|
||||
selectedUnitId: '16',
|
||||
selectedUnitId: '',
|
||||
// 往生者列表数据
|
||||
deceasedList: [],
|
||||
// 分页参数
|
||||
|
|
@ -147,7 +155,9 @@ export default {
|
|||
pageSize: 10
|
||||
},
|
||||
// 往生殿详情数据
|
||||
memorialDetail: null
|
||||
memorialDetail: null,
|
||||
// 滚动相关
|
||||
scrollTop: 0
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
|
|
@ -291,6 +301,12 @@ export default {
|
|||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 滚动事件处理
|
||||
onScroll(e) {
|
||||
console.log('滚动位置:', e.detail.scrollTop)
|
||||
this.scrollTop = e.detail.scrollTop
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -317,6 +333,8 @@ export default {
|
|||
//border: 1px red solid;
|
||||
height: 862rpx;
|
||||
padding:34rpx 32rpx 0 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.memorial-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -355,6 +373,12 @@ export default {
|
|||
//border: 1px red solid;
|
||||
}
|
||||
|
||||
.scroll-content {
|
||||
flex: 1;
|
||||
height: 0; // 让flex: 1生效
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -450,6 +474,7 @@ export default {
|
|||
line-height: 38rpx;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
padding-bottom: 32rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user