diff --git a/api/memorial/memorial.js b/api/memorial/memorial.js
index f5a13f6..dc94267 100644
--- a/api/memorial/memorial.js
+++ b/api/memorial/memorial.js
@@ -15,4 +15,13 @@ export function getEnshrinedList(params) {
method: 'get',
params
})
+}
+
+// 搜索往生者
+export function searchDeceased(params) {
+ return request({
+ url: '/app/deceased/search',
+ method: 'get',
+ params
+ })
}
\ No newline at end of file
diff --git a/pages/memorial/README.md b/pages/memorial/README.md
index 3e5385c..e79e03a 100644
--- a/pages/memorial/README.md
+++ b/pages/memorial/README.md
@@ -1,27 +1,38 @@
-# 供奉记录页面使用说明
+# 牌位相关页面使用说明
## 功能概述
-`enshrinedList.vue` 是一个供奉记录展示页面,通过调用两个API接口来获取和展示数据:
+本项目包含两个主要页面:
-1. **牌位详情API**: `GET /app/memorial/{id}` - 获取牌位基本信息
-2. **供奉记录API**: `GET /app/enshrined/list` - 获取该牌位的供奉记录列表
+### 1. 往生者搜索页面 (`deceasedSearch.vue`)
+通过调用搜索API来查找往生者信息:
+- **搜索API**: `GET /app/deceased/search` - 根据姓名搜索往生者
+
+### 2. 供奉记录页面 (`enshrinedList.vue`)
+通过调用两个API接口来获取和展示数据:
+- **牌位详情API**: `GET /app/memorial/{id}` - 获取牌位基本信息
+- **供奉记录API**: `GET /app/enshrined/list` - 获取该牌位的供奉记录列表
## 页面特性
### 🎨 界面设计
+- **搜索结果卡片**: 显示牌位名称、编号和姓名标签
- **牌位信息卡片**: 显示牌位名称和介绍信息
- **供奉记录表格**: 展示供奉人、时间、类型等信息
- **响应式布局**: 适配不同屏幕尺寸
- **传统风格**: 使用佛教主题色彩和设计元素
### 📱 交互功能
+- **姓名搜索**: 根据姓名搜索往生者信息
+- **查看详情**: 跳转到牌位详情页面
+- **姓名选择**: 点击姓名标签查看具体信息
- **下拉刷新**: 重新加载最新数据
- **上拉加载**: 分页加载更多记录
- **姓名脱敏**: 保护用户隐私
- **错误处理**: 网络错误时显示重试选项
### 🔧 技术特性
+- **搜索API集成**: 调用往生者搜索接口
- **并行API调用**: 同时请求两个接口提高加载速度
- **数据格式化**: 日期格式化和姓名脱敏处理
- **状态管理**: 加载状态、错误状态、空状态处理
@@ -29,7 +40,36 @@
## 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
GET /app/memorial/{id}
```
@@ -52,7 +92,7 @@ GET /app/memorial/{id}
}
```
-### 2. 供奉记录接口
+### 3. 供奉记录接口
```javascript
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
// 跳转到供奉记录页面
uni.navigateTo({
@@ -85,18 +133,22 @@ uni.navigateTo({
})
```
-### 2. 参数说明
+### 3. 参数说明
- `id`: 牌位ID,必填参数
+- `name`: 姓名参数(可选,用于筛选特定姓名)
-### 3. 测试页面
-访问 `/pages/memorial/test-enshrined` 可以测试API调用和页面功能。
+### 4. 测试页面
+- 访问 `/pages/memorial/test-search` 可以测试搜索API调用
+- 访问 `/pages/memorial/test-enshrined` 可以测试供奉记录API调用
## 文件结构
```
pages/memorial/
-├── enshrinedList.vue # 主页面
-├── test-enshrined.vue # 测试页面
+├── deceasedSearch.vue # 往生者搜索页面
+├── enshrinedList.vue # 供奉记录页面
+├── test-search.vue # 搜索测试页面
+├── test-enshrined.vue # 供奉记录测试页面
└── README.md # 说明文档
api/memorial/
@@ -131,4 +183,5 @@ $background-color: #F5F0E7;
- **v1.0.0**: 初始版本,支持基本的供奉记录展示
- **v1.1.0**: 添加下拉刷新和上拉加载功能
-- **v1.2.0**: 优化UI设计和错误处理
\ No newline at end of file
+- **v1.2.0**: 优化UI设计和错误处理
+- **v2.0.0**: 新增往生者搜索功能,支持姓名搜索和结果展示
\ No newline at end of file
diff --git a/pages/memorial/compositons/enshrinedList.vue b/pages/memorial/compositons/enshrinedList.vue
index 3bf1fa3..b728e16 100644
--- a/pages/memorial/compositons/enshrinedList.vue
+++ b/pages/memorial/compositons/enshrinedList.vue
@@ -42,7 +42,7 @@
+
+
\ No newline at end of file
diff --git a/pages/memorial/deceasedSearch.vue b/pages/memorial/deceasedSearch.vue
index 79d298a..c8094da 100644
--- a/pages/memorial/deceasedSearch.vue
+++ b/pages/memorial/deceasedSearch.vue
@@ -4,14 +4,15 @@
+ title="往生供奉"/>
+
-
-
+
+
+
+
+
+
+
+
+
+ {{ name }}
+
+
+
+
+
+
+
+ 未找到相关往生者信息
+
+
+
+
+ 请输入姓名进行搜索
+
+
+
@@ -38,74 +80,81 @@
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";
+import { searchDeceased } from '@/api/memorial/memorial.js'
export default {
components: {
- BottomButton,
SearchBox,
- StatusDisplay,
- EnshrinedList,
- FloorSelector,
- StatusBar
+ StatusDisplay
},
data() {
return {
CommonEnum,
searchName: '',
loading: false,
- memorialId: '16', // 默认往生殿ID,可以从路由参数获取
- // 楼层选择器默认值
- defaultFloorId: '',
- defaultAreaId: '',
- defaultUnitId: '',
- // 当前选中的楼层信息
- currentSelection: {
- floor: null,
- area: null,
- unit: null
- },
- // 当前选中的单元ID,用于状态栏查询
- selectedUnitId: ''
+ searchResults: [],
+ hasSearched: false
}
},
- 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)
+ // 处理搜索
+ async handleSearch(value) {
+ if (!value || value.trim() === '') {
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'
})
} finally {
this.loading = false
}
},
-
- // 处理搜索
- handleSearch(value) {
- console.log('搜索内容:', value)
- this.searchName = value
- // 搜索逻辑由 enshrinedList 组件处理
+
+ // 查看详情
+ viewDetails(item) {
+ console.log('查看详情:', item)
+ // 跳转到详情页面
+ 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)}`
+ })
+ }
}
}
@@ -124,12 +173,17 @@ export default {
flex-direction: column;
padding-bottom: 180rpx;
box-sizing: border-box;
- .body{
+
+
+
+ .body {
+ border-radius: 18rpx;
position: relative;
- height:1100rpx;
+ height: 1400rpx;
left: 0;
top: 18rpx;
background: #fff;
+
.center-files {
position: relative;
width: 100%; // 确保占满宽度
@@ -137,25 +191,141 @@ export default {
.files {
width: 750rpx; // 图片宽度适配容器
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 {
position: fixed;
left: 0;
bottom: 0;
- width: 100%; // 确保占满宽度
- z-index: 10; // 防止被内容覆盖
+ width: 100%;
+ z-index: 10;
background-color: #ffffff;
+
.files {
- width: 750rpx; // 图片宽度适配容器
- height: 90rpx; // 根据设计图调整高度
-
+ width: 750rpx;
+ height: 90rpx;
}
}
\ No newline at end of file
diff --git a/pages/memorial/memorial.vue b/pages/memorial/memorial.vue
index b37d07d..124daa5 100644
--- a/pages/memorial/memorial.vue
+++ b/pages/memorial/memorial.vue
@@ -55,7 +55,6 @@
@click="submitPrayer"
/>
-
@@ -63,7 +62,7 @@
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 EnshrinedList from "./compositons/enshrinedListIndex.vue"
import FloorSelector from "./compositons/floorSelector.vue"
import StatusBar from "./compositons/statusBar.vue"
import BottomButton from "../../components/bottom-button/bottom-button.vue";
diff --git a/pages/memorial/memorialHall.vue b/pages/memorial/memorialHall.vue
index c3d8014..97fed70 100644
--- a/pages/memorial/memorialHall.vue
+++ b/pages/memorial/memorialHall.vue
@@ -98,6 +98,15 @@
:unit-id="selectedUnitId"
@view-details="handleViewDetails"
/>
+
+
+
@@ -121,6 +130,7 @@