deceasedSearch.vue 动态页面修正
This commit is contained in:
parent
814d622295
commit
66ffd2cbac
|
|
@ -15,4 +15,13 @@ export function getEnshrinedList(params) {
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params
|
params
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 搜索往生者
|
||||||
|
export function searchDeceased(params) {
|
||||||
|
return request({
|
||||||
|
url: '/app/deceased/search',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -1,27 +1,38 @@
|
||||||
# 供奉记录页面使用说明
|
# 牌位相关页面使用说明
|
||||||
|
|
||||||
## 功能概述
|
## 功能概述
|
||||||
|
|
||||||
`enshrinedList.vue` 是一个供奉记录展示页面,通过调用两个API接口来获取和展示数据:
|
本项目包含两个主要页面:
|
||||||
|
|
||||||
1. **牌位详情API**: `GET /app/memorial/{id}` - 获取牌位基本信息
|
### 1. 往生者搜索页面 (`deceasedSearch.vue`)
|
||||||
2. **供奉记录API**: `GET /app/enshrined/list` - 获取该牌位的供奉记录列表
|
通过调用搜索API来查找往生者信息:
|
||||||
|
- **搜索API**: `GET /app/deceased/search` - 根据姓名搜索往生者
|
||||||
|
|
||||||
|
### 2. 供奉记录页面 (`enshrinedList.vue`)
|
||||||
|
通过调用两个API接口来获取和展示数据:
|
||||||
|
- **牌位详情API**: `GET /app/memorial/{id}` - 获取牌位基本信息
|
||||||
|
- **供奉记录API**: `GET /app/enshrined/list` - 获取该牌位的供奉记录列表
|
||||||
|
|
||||||
## 页面特性
|
## 页面特性
|
||||||
|
|
||||||
### 🎨 界面设计
|
### 🎨 界面设计
|
||||||
|
- **搜索结果卡片**: 显示牌位名称、编号和姓名标签
|
||||||
- **牌位信息卡片**: 显示牌位名称和介绍信息
|
- **牌位信息卡片**: 显示牌位名称和介绍信息
|
||||||
- **供奉记录表格**: 展示供奉人、时间、类型等信息
|
- **供奉记录表格**: 展示供奉人、时间、类型等信息
|
||||||
- **响应式布局**: 适配不同屏幕尺寸
|
- **响应式布局**: 适配不同屏幕尺寸
|
||||||
- **传统风格**: 使用佛教主题色彩和设计元素
|
- **传统风格**: 使用佛教主题色彩和设计元素
|
||||||
|
|
||||||
### 📱 交互功能
|
### 📱 交互功能
|
||||||
|
- **姓名搜索**: 根据姓名搜索往生者信息
|
||||||
|
- **查看详情**: 跳转到牌位详情页面
|
||||||
|
- **姓名选择**: 点击姓名标签查看具体信息
|
||||||
- **下拉刷新**: 重新加载最新数据
|
- **下拉刷新**: 重新加载最新数据
|
||||||
- **上拉加载**: 分页加载更多记录
|
- **上拉加载**: 分页加载更多记录
|
||||||
- **姓名脱敏**: 保护用户隐私
|
- **姓名脱敏**: 保护用户隐私
|
||||||
- **错误处理**: 网络错误时显示重试选项
|
- **错误处理**: 网络错误时显示重试选项
|
||||||
|
|
||||||
### 🔧 技术特性
|
### 🔧 技术特性
|
||||||
|
- **搜索API集成**: 调用往生者搜索接口
|
||||||
- **并行API调用**: 同时请求两个接口提高加载速度
|
- **并行API调用**: 同时请求两个接口提高加载速度
|
||||||
- **数据格式化**: 日期格式化和姓名脱敏处理
|
- **数据格式化**: 日期格式化和姓名脱敏处理
|
||||||
- **状态管理**: 加载状态、错误状态、空状态处理
|
- **状态管理**: 加载状态、错误状态、空状态处理
|
||||||
|
|
@ -29,7 +40,36 @@
|
||||||
|
|
||||||
## API接口说明
|
## API接口说明
|
||||||
|
|
||||||
### 1. 牌位详情接口
|
### 1. 往生者搜索接口
|
||||||
|
```javascript
|
||||||
|
GET /app/deceased/search?fullName={name}
|
||||||
|
```
|
||||||
|
|
||||||
|
**响应数据结构:**
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"msg": "操作成功",
|
||||||
|
"code": 200,
|
||||||
|
"data": [
|
||||||
|
{
|
||||||
|
"id": "16",
|
||||||
|
"name": "牌位名字",
|
||||||
|
"code": "A01",
|
||||||
|
"introduced": "牌位介绍信息",
|
||||||
|
"extinguishTime": "2025-07-16 14:06:58",
|
||||||
|
"state": "1",
|
||||||
|
"contactName": "黄绍春",
|
||||||
|
"address": "广西壮族自治区南宁市西乡塘区",
|
||||||
|
"names": [
|
||||||
|
"姓名002",
|
||||||
|
"姓名001"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 牌位详情接口
|
||||||
```javascript
|
```javascript
|
||||||
GET /app/memorial/{id}
|
GET /app/memorial/{id}
|
||||||
```
|
```
|
||||||
|
|
@ -52,7 +92,7 @@ GET /app/memorial/{id}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### 2. 供奉记录接口
|
### 3. 供奉记录接口
|
||||||
```javascript
|
```javascript
|
||||||
GET /app/enshrined/list?memorialId={id}&pageNum=1&pageSize=10
|
GET /app/enshrined/list?memorialId={id}&pageNum=1&pageSize=10
|
||||||
```
|
```
|
||||||
|
|
@ -77,7 +117,15 @@ GET /app/enshrined/list?memorialId={id}&pageNum=1&pageSize=10
|
||||||
|
|
||||||
## 使用方法
|
## 使用方法
|
||||||
|
|
||||||
### 1. 页面跳转
|
### 1. 往生者搜索页面
|
||||||
|
```javascript
|
||||||
|
// 跳转到搜索页面
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/memorial/deceasedSearch'
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 供奉记录页面
|
||||||
```javascript
|
```javascript
|
||||||
// 跳转到供奉记录页面
|
// 跳转到供奉记录页面
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
|
|
@ -85,18 +133,22 @@ uni.navigateTo({
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
### 2. 参数说明
|
### 3. 参数说明
|
||||||
- `id`: 牌位ID,必填参数
|
- `id`: 牌位ID,必填参数
|
||||||
|
- `name`: 姓名参数(可选,用于筛选特定姓名)
|
||||||
|
|
||||||
### 3. 测试页面
|
### 4. 测试页面
|
||||||
访问 `/pages/memorial/test-enshrined` 可以测试API调用和页面功能。
|
- 访问 `/pages/memorial/test-search` 可以测试搜索API调用
|
||||||
|
- 访问 `/pages/memorial/test-enshrined` 可以测试供奉记录API调用
|
||||||
|
|
||||||
## 文件结构
|
## 文件结构
|
||||||
|
|
||||||
```
|
```
|
||||||
pages/memorial/
|
pages/memorial/
|
||||||
├── enshrinedList.vue # 主页面
|
├── deceasedSearch.vue # 往生者搜索页面
|
||||||
├── test-enshrined.vue # 测试页面
|
├── enshrinedList.vue # 供奉记录页面
|
||||||
|
├── test-search.vue # 搜索测试页面
|
||||||
|
├── test-enshrined.vue # 供奉记录测试页面
|
||||||
└── README.md # 说明文档
|
└── README.md # 说明文档
|
||||||
|
|
||||||
api/memorial/
|
api/memorial/
|
||||||
|
|
@ -131,4 +183,5 @@ $background-color: #F5F0E7;
|
||||||
|
|
||||||
- **v1.0.0**: 初始版本,支持基本的供奉记录展示
|
- **v1.0.0**: 初始版本,支持基本的供奉记录展示
|
||||||
- **v1.1.0**: 添加下拉刷新和上拉加载功能
|
- **v1.1.0**: 添加下拉刷新和上拉加载功能
|
||||||
- **v1.2.0**: 优化UI设计和错误处理
|
- **v1.2.0**: 优化UI设计和错误处理
|
||||||
|
- **v2.0.0**: 新增往生者搜索功能,支持姓名搜索和结果展示
|
||||||
|
|
@ -42,7 +42,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getEnshrinedList } from '@/api/memorial/index.js'
|
import { getEnshrinedList } from '@/api/memorial/memorial.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'EnshrinedList',
|
name: 'EnshrinedList',
|
||||||
|
|
@ -105,7 +105,7 @@ export default {
|
||||||
|
|
||||||
if (response && response.code === 200) {
|
if (response && response.code === 200) {
|
||||||
// API成功响应
|
// API成功响应
|
||||||
rows = response.data || []
|
rows = response.rows || []
|
||||||
total = rows.length // 如果没有分页信息,使用数组长度
|
total = rows.length // 如果没有分页信息,使用数组长度
|
||||||
console.log('API 返回数据:', rows)
|
console.log('API 返回数据:', rows)
|
||||||
} else {
|
} else {
|
||||||
|
|
|
||||||
370
pages/memorial/compositons/enshrinedListIndex.vue
Normal file
370
pages/memorial/compositons/enshrinedListIndex.vue
Normal file
|
|
@ -0,0 +1,370 @@
|
||||||
|
<template>
|
||||||
|
<view class="enshrined-list">
|
||||||
|
<!-- 表格头部 -->
|
||||||
|
<view class="table-header">
|
||||||
|
<view class="header-cell worshiper-col">供奉人</view>
|
||||||
|
<view class="header-cell time-col">供奉时间</view>
|
||||||
|
<view class="header-cell time-col">结束时间</view>
|
||||||
|
<view class="header-cell type-col">供奉类型</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 表格内容 -->
|
||||||
|
<view class="table-body">
|
||||||
|
<view
|
||||||
|
v-for="(item, index) in enshrinedList"
|
||||||
|
:key="item.id || index"
|
||||||
|
class="table-row"
|
||||||
|
@click="handleItemClick(item)"
|
||||||
|
>
|
||||||
|
<view class="table-cell worshiper-col">{{ item.worshiperName || '未知' }}</view>
|
||||||
|
<view class="table-cell time-col">{{ formatDate(item.startDate) }}</view>
|
||||||
|
<view class="table-cell time-col">{{ formatDate(item.endDate) }}</view>
|
||||||
|
<view class="table-cell type-col">{{ item.thaliName || '未知类型' }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<view v-if="!loading && enshrinedList.length === 0" class="empty-state">
|
||||||
|
<view class="empty-icon">📝</view>
|
||||||
|
<view class="empty-text">暂无供奉记录</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 加载更多 -->
|
||||||
|
<view v-if="hasMore && !loading" class="load-more" @click="loadMore">
|
||||||
|
<text>加载更多</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 加载状态 -->
|
||||||
|
<view v-if="loading" class="loading-state">
|
||||||
|
<text>加载中...</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getEnshrinedList } from '@/api/memorial/index.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'EnshrinedList',
|
||||||
|
props: {
|
||||||
|
memorialId: {
|
||||||
|
type: [String, Number],
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
searchKeyword: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
enshrinedList: [],
|
||||||
|
loading: false,
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
hasMore: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
searchKeyword: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.resetList()
|
||||||
|
this.loadData()
|
||||||
|
},
|
||||||
|
immediate: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.loadData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 加载数据
|
||||||
|
async loadData() {
|
||||||
|
if (this.loading) return
|
||||||
|
|
||||||
|
this.loading = true
|
||||||
|
try {
|
||||||
|
const params = {
|
||||||
|
memorialId: this.memorialId,
|
||||||
|
pageNum: this.pageNum,
|
||||||
|
pageSize: this.pageSize
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暂时注释搜索功能,等后续实现
|
||||||
|
// if (this.searchKeyword) {
|
||||||
|
// params.keyword = this.searchKeyword
|
||||||
|
// }
|
||||||
|
|
||||||
|
const response = await getEnshrinedList(params)
|
||||||
|
console.log('API 响应数据:', response) // 调试日志
|
||||||
|
|
||||||
|
// 新的API响应格式: { code: 200, msg: "操作成功", data: [...] }
|
||||||
|
let total = 0
|
||||||
|
let rows = []
|
||||||
|
|
||||||
|
if (response && response.code === 200) {
|
||||||
|
// API成功响应
|
||||||
|
rows = response.data || []
|
||||||
|
total = rows.length // 如果没有分页信息,使用数组长度
|
||||||
|
console.log('API 返回数据:', rows)
|
||||||
|
} else {
|
||||||
|
console.log('API 响应异常:', response)
|
||||||
|
// API响应异常时使用模拟数据
|
||||||
|
rows = this.getMockData()
|
||||||
|
total = rows.length
|
||||||
|
}
|
||||||
|
|
||||||
|
this.total = total
|
||||||
|
|
||||||
|
if (this.pageNum === 1) {
|
||||||
|
this.enshrinedList = rows || []
|
||||||
|
} else {
|
||||||
|
this.enshrinedList = [...this.enshrinedList, ...(rows || [])]
|
||||||
|
}
|
||||||
|
|
||||||
|
this.hasMore = this.enshrinedList.length < total
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载供奉列表失败:', error)
|
||||||
|
// 错误时使用模拟数据(仅用于测试)
|
||||||
|
console.log('API 调用失败,使用模拟数据')
|
||||||
|
const mockData = this.getMockData()
|
||||||
|
if (this.pageNum === 1) {
|
||||||
|
this.enshrinedList = mockData
|
||||||
|
} else {
|
||||||
|
this.enshrinedList = [...this.enshrinedList, ...mockData]
|
||||||
|
}
|
||||||
|
this.total = mockData.length
|
||||||
|
this.hasMore = false
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
title: '网络异常,请稍后重试',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取模拟数据(仅用于测试)
|
||||||
|
getMockData() {
|
||||||
|
return [
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// 重置列表
|
||||||
|
resetList() {
|
||||||
|
this.enshrinedList = []
|
||||||
|
this.pageNum = 1
|
||||||
|
this.total = 0
|
||||||
|
this.hasMore = true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 加载更多
|
||||||
|
loadMore() {
|
||||||
|
if (this.hasMore && !this.loading) {
|
||||||
|
this.pageNum++
|
||||||
|
this.loadData()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 格式化日期
|
||||||
|
formatDate(dateStr) {
|
||||||
|
if (!dateStr) return '未知'
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 如果已经是 YYYY-MM-DD 格式,直接返回
|
||||||
|
if (/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) {
|
||||||
|
return dateStr
|
||||||
|
}
|
||||||
|
|
||||||
|
const date = new Date(dateStr)
|
||||||
|
if (isNaN(date.getTime())) {
|
||||||
|
return dateStr
|
||||||
|
}
|
||||||
|
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||||
|
const day = String(date.getDate()).padStart(2, '0')
|
||||||
|
|
||||||
|
return `${year}-${month}-${day}`
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('日期格式化失败:', dateStr, error)
|
||||||
|
return dateStr
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理项目点击
|
||||||
|
handleItemClick(item) {
|
||||||
|
this.$emit('item-click', item)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 刷新列表
|
||||||
|
refresh() {
|
||||||
|
this.resetList()
|
||||||
|
this.loadData()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.enshrined-list {
|
||||||
|
padding: 46rpx 0 30rpx 44rpx;
|
||||||
|
width: 680rpx;
|
||||||
|
height: 858rpx;
|
||||||
|
background-color: #FFFBF5;
|
||||||
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||||
|
border: 1rpx solid #C7A26D;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-header {
|
||||||
|
display: flex;
|
||||||
|
border-radius: 12rpx 12rpx 0 0;
|
||||||
|
overflow: hidden;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-cell {
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #695347;
|
||||||
|
line-height: 38rpx;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.worshiper-col {
|
||||||
|
flex: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.time-col {
|
||||||
|
flex: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.type-col {
|
||||||
|
flex: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-body {
|
||||||
|
|
||||||
|
border-radius: 0 0 12rpx 12rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row {
|
||||||
|
display: flex;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
//&:last-child {
|
||||||
|
// border-bottom: none;
|
||||||
|
//}
|
||||||
|
//
|
||||||
|
//&:hover {
|
||||||
|
// background-color: #f9f9f9;
|
||||||
|
//}
|
||||||
|
//
|
||||||
|
//&:active {
|
||||||
|
// background-color: #f0f0f0;
|
||||||
|
//}
|
||||||
|
//
|
||||||
|
//&:nth-child(even) {
|
||||||
|
// background-color: #fafafa;
|
||||||
|
//
|
||||||
|
// &:hover {
|
||||||
|
// background-color: #f5f5f5;
|
||||||
|
// }
|
||||||
|
//}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-cell {
|
||||||
|
//padding: 20rpx 16rpx;
|
||||||
|
word-break: break-all;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #522510;
|
||||||
|
line-height: 32rpx;
|
||||||
|
text-align: left;
|
||||||
|
//border: 1rpx solid #C7A26D;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.worshiper-col {
|
||||||
|
flex: 1;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.time-col {
|
||||||
|
flex: 1;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.type-col {
|
||||||
|
flex: 1;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 100rpx 0;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-icon {
|
||||||
|
font-size: 80rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-more {
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
padding: 16rpx 32rpx;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-state {
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -4,14 +4,15 @@
|
||||||
<!-- 使用自定义导航栏组件 -->
|
<!-- 使用自定义导航栏组件 -->
|
||||||
<custom-navbar
|
<custom-navbar
|
||||||
ref="customNavbar"
|
ref="customNavbar"
|
||||||
title="供奉记录"/>
|
title="往生供奉"/>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<!-- 状态展示 -->
|
<!-- 状态展示 -->
|
||||||
<status-display
|
<status-display
|
||||||
v-if="loading"
|
v-if="loading"
|
||||||
type="loading"
|
type="loading"
|
||||||
loading-text="加载中..."
|
loading-text="搜索中..."
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 搜索框 -->
|
<!-- 搜索框 -->
|
||||||
<search-box
|
<search-box
|
||||||
v-model="searchName"
|
v-model="searchName"
|
||||||
|
|
@ -25,8 +26,49 @@
|
||||||
<view class="center-files">
|
<view class="center-files">
|
||||||
<image :src="CommonEnum.CENTER_TILES" mode="aspectFit" class="files"></image>
|
<image :src="CommonEnum.CENTER_TILES" mode="aspectFit" class="files"></image>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
<!-- 搜索结果 -->
|
||||||
</view>
|
<view class="search-results" v-if="searchResults.length > 0">
|
||||||
|
<view
|
||||||
|
class="result-card"
|
||||||
|
v-for="(item, index) in searchResults"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<!-- 卡片头部 -->
|
||||||
|
<view class="card-header">
|
||||||
|
<view class="header-info">
|
||||||
|
<text class="label">牌位名称</text>
|
||||||
|
<text class="label">编号(分区)</text>
|
||||||
|
</view>
|
||||||
|
<view class="view-details" @click="viewDetails(item)">
|
||||||
|
<text class="details-text">查看详情 ></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 姓名标签区域 -->
|
||||||
|
<view class="names-section">
|
||||||
|
<view
|
||||||
|
class="name-tag"
|
||||||
|
v-for="(name, nameIndex) in item.names"
|
||||||
|
:key="nameIndex"
|
||||||
|
@click="selectName(item, name)"
|
||||||
|
>
|
||||||
|
<text class="name-text">{{ name }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<view class="empty-state" v-if="hasSearched && searchResults.length === 0">
|
||||||
|
<text class="empty-text">未找到相关往生者信息</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 初始状态提示 -->
|
||||||
|
<view class="initial-state" v-if="!hasSearched">
|
||||||
|
<text class="initial-text">请输入姓名进行搜索</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<view class="bottom-files">
|
<view class="bottom-files">
|
||||||
<image :src="CommonEnum.BOTTOM_TILES_2" mode="aspectFit" class="files"></image>
|
<image :src="CommonEnum.BOTTOM_TILES_2" mode="aspectFit" class="files"></image>
|
||||||
|
|
@ -38,74 +80,81 @@
|
||||||
import {CommonEnum} from '@/enum/common.js'
|
import {CommonEnum} from '@/enum/common.js'
|
||||||
import SearchBox from "../../components/search-box/search-box.vue"
|
import SearchBox from "../../components/search-box/search-box.vue"
|
||||||
import StatusDisplay from "../../components/status-display/status-display.vue"
|
import StatusDisplay from "../../components/status-display/status-display.vue"
|
||||||
import EnshrinedList from "./compositons/enshrinedList.vue"
|
import { searchDeceased } from '@/api/memorial/memorial.js'
|
||||||
import FloorSelector from "./compositons/floorSelector.vue"
|
|
||||||
import StatusBar from "./compositons/statusBar.vue"
|
|
||||||
import BottomButton from "../../components/bottom-button/bottom-button.vue";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
BottomButton,
|
|
||||||
SearchBox,
|
SearchBox,
|
||||||
StatusDisplay,
|
StatusDisplay
|
||||||
EnshrinedList,
|
|
||||||
FloorSelector,
|
|
||||||
StatusBar
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
CommonEnum,
|
CommonEnum,
|
||||||
searchName: '',
|
searchName: '',
|
||||||
loading: false,
|
loading: false,
|
||||||
memorialId: '16', // 默认往生殿ID,可以从路由参数获取
|
searchResults: [],
|
||||||
// 楼层选择器默认值
|
hasSearched: false
|
||||||
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: {
|
methods: {
|
||||||
// 初始化页面
|
// 处理搜索
|
||||||
async initPage() {
|
async handleSearch(value) {
|
||||||
this.loading = true
|
if (!value || value.trim() === '') {
|
||||||
try {
|
|
||||||
// 页面初始化逻辑
|
|
||||||
console.log('往生殿页面初始化,ID:', this.memorialId)
|
|
||||||
} catch (error) {
|
|
||||||
console.error('页面初始化失败:', error)
|
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '页面加载失败',
|
title: '请输入搜索内容',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.loading = true
|
||||||
|
this.hasSearched = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await searchDeceased({
|
||||||
|
fullName: value.trim()
|
||||||
|
})
|
||||||
|
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.searchResults = res.data || []
|
||||||
|
if (this.searchResults.length === 0) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '未找到相关结果',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
throw new Error(res.msg || '搜索失败')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('搜索失败:', error)
|
||||||
|
this.searchResults = []
|
||||||
|
uni.showToast({
|
||||||
|
title: error.message || '搜索失败',
|
||||||
icon: 'none'
|
icon: 'none'
|
||||||
})
|
})
|
||||||
} finally {
|
} finally {
|
||||||
this.loading = false
|
this.loading = false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// 处理搜索
|
// 查看详情
|
||||||
handleSearch(value) {
|
viewDetails(item) {
|
||||||
console.log('搜索内容:', value)
|
console.log('查看详情:', item)
|
||||||
this.searchName = value
|
// 跳转到详情页面
|
||||||
// 搜索逻辑由 enshrinedList 组件处理
|
uni.navigateTo({
|
||||||
|
url: `/pages/memorial/enshrinedList?id=${item.id}`
|
||||||
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 选择姓名
|
||||||
|
selectName(item, name) {
|
||||||
|
console.log('选择姓名:', name, '来自牌位:', item)
|
||||||
|
// 可以跳转到该姓名的详情页面或执行其他操作
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/memorial/enshrinedList?id=${item.id}&name=${encodeURIComponent(name)}`
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -124,12 +173,17 @@ export default {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding-bottom: 180rpx;
|
padding-bottom: 180rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
.body{
|
|
||||||
|
|
||||||
|
|
||||||
|
.body {
|
||||||
|
border-radius: 18rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
height:1100rpx;
|
height: 1400rpx;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 18rpx;
|
top: 18rpx;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
||||||
.center-files {
|
.center-files {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%; // 确保占满宽度
|
width: 100%; // 确保占满宽度
|
||||||
|
|
@ -137,25 +191,141 @@ export default {
|
||||||
.files {
|
.files {
|
||||||
width: 750rpx; // 图片宽度适配容器
|
width: 750rpx; // 图片宽度适配容器
|
||||||
height: 47rpx; // 根据设计图调整高度
|
height: 47rpx; // 根据设计图调整高度
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 搜索结果区域
|
||||||
|
.search-results {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 22rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// 结果卡片
|
||||||
|
.result-card {
|
||||||
|
padding: 40rpx;
|
||||||
|
width: 676rpx;
|
||||||
|
height: 248rpx;
|
||||||
|
background: #FFFBF5;
|
||||||
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||||
|
border: 1rpx solid #C7A26D;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// 卡片头部
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
//border:1px #13c2da solid;
|
||||||
|
.header-info {
|
||||||
|
display: flex;
|
||||||
|
gap: 60rpx;
|
||||||
|
//border:1px red solid;
|
||||||
|
|
||||||
|
|
||||||
|
.label {
|
||||||
|
//border:1px #11ff00 solid;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #522510;
|
||||||
|
line-height: 50rpx;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-details {
|
||||||
|
.details-text {
|
||||||
|
cursor: pointer;
|
||||||
|
//border:1px #11ff00 solid;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #AD9B91;
|
||||||
|
line-height: 32rpx;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #A24242;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 姓名标签区域
|
||||||
|
.names-section {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20rpx 22rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// 姓名标签
|
||||||
|
.name-tag {
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
background: #FFF1DD;
|
||||||
|
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
||||||
|
padding:7rpx 29rpx;
|
||||||
|
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #FFD700;
|
||||||
|
border-color: #DAA520;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name-text {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #695347;
|
||||||
|
line-height: 32rpx;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 空状态
|
||||||
|
.empty-state {
|
||||||
|
margin-top: 100rpx;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始状态
|
||||||
|
.initial-state {
|
||||||
|
margin-top: 100rpx;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.initial-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.bottom-files {
|
.bottom-files {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 100%; // 确保占满宽度
|
width: 100%;
|
||||||
z-index: 10; // 防止被内容覆盖
|
z-index: 10;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
|
|
||||||
.files {
|
.files {
|
||||||
width: 750rpx; // 图片宽度适配容器
|
width: 750rpx;
|
||||||
height: 90rpx; // 根据设计图调整高度
|
height: 90rpx;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -55,7 +55,6 @@
|
||||||
@click="submitPrayer"
|
@click="submitPrayer"
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -63,7 +62,7 @@
|
||||||
import {CommonEnum} from '@/enum/common.js'
|
import {CommonEnum} from '@/enum/common.js'
|
||||||
import SearchBox from "../../components/search-box/search-box.vue"
|
import SearchBox from "../../components/search-box/search-box.vue"
|
||||||
import StatusDisplay from "../../components/status-display/status-display.vue"
|
import StatusDisplay from "../../components/status-display/status-display.vue"
|
||||||
import EnshrinedList from "./compositons/enshrinedList.vue"
|
import EnshrinedList from "./compositons/enshrinedListIndex.vue"
|
||||||
import FloorSelector from "./compositons/floorSelector.vue"
|
import FloorSelector from "./compositons/floorSelector.vue"
|
||||||
import StatusBar from "./compositons/statusBar.vue"
|
import StatusBar from "./compositons/statusBar.vue"
|
||||||
import BottomButton from "../../components/bottom-button/bottom-button.vue";
|
import BottomButton from "../../components/bottom-button/bottom-button.vue";
|
||||||
|
|
|
||||||
|
|
@ -98,6 +98,15 @@
|
||||||
:unit-id="selectedUnitId"
|
:unit-id="selectedUnitId"
|
||||||
@view-details="handleViewDetails"
|
@view-details="handleViewDetails"
|
||||||
/>
|
/>
|
||||||
|
<view class="placeholder"></view>
|
||||||
|
<!-- 供奉列表 -->
|
||||||
|
<enshrined-list
|
||||||
|
v-if="!loading"
|
||||||
|
:memorial-id="selectedUnitId"
|
||||||
|
:search-keyword="searchName"
|
||||||
|
@item-click="handleItemClick"
|
||||||
|
ref="enshrinedList"
|
||||||
|
/>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<view class="bottom">
|
<view class="bottom">
|
||||||
|
|
@ -121,6 +130,7 @@
|
||||||
<script>
|
<script>
|
||||||
import {CommonEnum} from '@/enum/common.js'
|
import {CommonEnum} from '@/enum/common.js'
|
||||||
import { getDeceasedList, getMemorialDetail } from '@/api/memorial/index.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 SearchBox from "../../components/search-box/search-box.vue"
|
||||||
import StatusDisplay from "../../components/status-display/status-display.vue"
|
import StatusDisplay from "../../components/status-display/status-display.vue"
|
||||||
import EnshrinedList from "./compositons/enshrinedList.vue"
|
import EnshrinedList from "./compositons/enshrinedList.vue"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user