From 66ffd2cbac1b0c67a82ab8c869564a9e75630485 Mon Sep 17 00:00:00 2001 From: minimaxagent1 Date: Mon, 11 Aug 2025 17:00:43 +0800 Subject: [PATCH] =?UTF-8?q?deceasedSearch.vue=20=E5=8A=A8=E6=80=81?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/memorial/memorial.js | 9 + pages/memorial/README.md | 79 +++- pages/memorial/compositons/enshrinedList.vue | 4 +- .../compositons/enshrinedListIndex.vue | 370 ++++++++++++++++++ pages/memorial/deceasedSearch.vue | 286 +++++++++++--- pages/memorial/memorial.vue | 3 +- pages/memorial/memorialHall.vue | 10 + 7 files changed, 686 insertions(+), 75 deletions(-) create mode 100644 pages/memorial/compositons/enshrinedListIndex.vue 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 @@