WindowBird/buddhism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

搜索昵称显示问题

Browse Source
This commit is contained in:
WindowBird 2025-10-16 16:02:24 +08:00
parent 89cf6ec570
commit b068d82b21
1 changed files with 249 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
pages/memorial/deceasedSearch.vue
View File

@ -5,29 +5,37 @@
<custom-navbar ref="customNavbar" title="往生供奉" /> <custom-navbar ref="customNavbar" title="往生供奉" />
<view class="container"> <view class="container">
<!-- 状态展示 --> <!-- 状态展示 -->
<status-display v-if="loading" type="loading" loading-text="搜索中..." /> <status-display v-if="loading" loading-text="搜索中..." type="loading" />
<!-- 搜索框 --> <!-- 搜索框 -->
<search-box <search-box
v-model="searchName" v-model="searchName"
:width="'682rpx'"
:search-icon="CommonEnum.SEARCH" :search-icon="CommonEnum.SEARCH"
placeholder="请输入姓名进行查找" :width="'682rpx'"
btn-text="搜索" btn-text="搜索"
placeholder="请输入姓名进行查找"
@search="handleSearch" @search="handleSearch"
/> />
<view class="body"> <view class="body">
<view class="center-files"> <view class="center-files">
<image :src="CommonEnum.CENTER_TILES" mode="aspectFit" class="files"></image> <image
:src="CommonEnum.CENTER_TILES"
class="files"
mode="aspectFit"
></image>
</view> </view>
<!-- 搜索结果 --> <!-- 搜索结果 -->
<view class="search-results" v-if="searchResults.length > 0"> <view v-if="searchResults.length > 0" class="search-results">
<view class="result-card" v-for="(item, index) in searchResults" :key="index"> <view
v-for="(item, index) in searchResults"
:key="index"
class="result-card"
>
<!-- 卡片头部 --> <!-- 卡片头部 -->
<view class="card-header"> <view class="card-header">
<view class="header-info"> <view class="header-info">
<text class="label">牌位名称</text> <!-- <text class="label">牌位名称</text>-->
<text class="label">编号(分区)</text> <text class="label">编号{{ item.code }}</text>
</view> </view>
<view class="view-details" @click="viewDetails(item)"> <view class="view-details" @click="viewDetails(item)">
<text class="details-text">查看详情 ></text> <text class="details-text">查看详情 ></text>
@ -37,9 +45,9 @@
<!-- 姓名标签区域 --> <!-- 姓名标签区域 -->
<view class="names-section"> <view class="names-section">
<view <view
class="name-tag"
v-for="(name, nameIndex) in item.names" v-for="(name, nameIndex) in item.names"
:key="nameIndex" :key="nameIndex"
class="name-tag"
@click="selectName(item, name)" @click="selectName(item, name)"
> >
<text class="name-text">{{ name }}</text> <text class="name-text">{{ name }}</text>
@ -49,30 +57,37 @@
</view> </view>
<!-- 空状态 --> <!-- 空状态 -->
<view class="empty-state" v-if="hasSearched && searchResults.length === 0"> <view
v-if="hasSearched && searchResults.length === 0"
class="empty-state"
>
<text class="empty-text">未找到相关往生者信息</text> <text class="empty-text">未找到相关往生者信息</text>
</view> </view>
<!-- 初始状态提示 --> <!-- 初始状态提示 -->
<view class="initial-state" v-if="!hasSearched"> <view v-if="!hasSearched" class="initial-state">
<text class="initial-text">请输入姓名进行搜索</text> <text class="initial-text">请输入姓名进行搜索</text>
</view> </view>
</view> </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"
class="files"
mode="aspectFit"
></image>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
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 { searchDeceased } from '@/api/memorial/memorial.js' import { searchDeceased } from "@/api/memorial/memorial.js";
export default { export default {
components: { components: {
SearchBox, SearchBox,
StatusDisplay, StatusDisplay,
@ -80,96 +95,96 @@
data() { data() {
return { return {
CommonEnum, CommonEnum,
searchName: '', searchName: "",
loading: false, loading: false,
searchResults: [], searchResults: [],
hasSearched: false, hasSearched: false,
} };
}, },
onLoad(options) { onLoad(options) {
console.log('deceasedSearch页面接收到的参数:', options) console.log("deceasedSearch页面接收到的参数:", options);
// 从路由参数获取搜索关键词 // 从路由参数获取搜索关键词
if (options.keyword) { if (options.keyword) {
this.searchName = decodeURIComponent(options.keyword) this.searchName = decodeURIComponent(options.keyword);
console.log('接收到搜索关键词:', this.searchName) console.log("接收到搜索关键词:", this.searchName);
// 自动执行搜索 // 自动执行搜索
this.$nextTick(() => { this.$nextTick(() => {
this.handleSearch(this.searchName) this.handleSearch(this.searchName);
}) });
} }
}, },
methods: { methods: {
// 处理搜索 // 处理搜索
async handleSearch(value) { async handleSearch(value) {
if (!value || value.trim() === '') { if (!value || value.trim() === "") {
uni.showToast({ uni.showToast({
title: '请输入搜索内容', title: "请输入搜索内容",
icon: 'none', icon: "none",
}) });
return return;
} }
this.loading = true this.loading = true;
this.hasSearched = true this.hasSearched = true;
try { try {
const res = await searchDeceased({ const res = await searchDeceased({
fullName: value.trim(), fullName: value.trim(),
}) });
if (res.code === 200) { if (res.code === 200) {
this.searchResults = res.data || [] this.searchResults = res.data || [];
if (this.searchResults.length === 0) { if (this.searchResults.length === 0) {
uni.showToast({ uni.showToast({
title: '未找到相关结果', title: "未找到相关结果",
icon: 'none', icon: "none",
}) });
} }
} else { } else {
throw new Error(res.msg || '搜索失败') throw new Error(res.msg || "搜索失败");
} }
} catch (error) { } catch (error) {
console.error('搜索失败:', error) console.error("搜索失败:", error);
this.searchResults = [] this.searchResults = [];
uni.showToast({ uni.showToast({
title: error.message || '搜索失败', title: error.message || "搜索失败",
icon: 'none', icon: "none",
}) });
} finally { } finally {
this.loading = false this.loading = false;
} }
}, },
// 查看详情 // 查看详情
viewDetails(item) { viewDetails(item) {
console.log('查看详情:', item) console.log("查看详情:", item);
// 跳转到往生大殿页面 // 跳转到往生大殿页面
uni.navigateTo({ uni.navigateTo({
url: `/pages/memorial/memorialHall?id=${item.id}`, url: `/pages/memorial/memorialHall?id=${item.id}`,
}) });
}, },
// 选择姓名 // 选择姓名
selectName(item, name) { selectName(item, name) {
console.log('选择姓名:', name, '来自牌位:', item) console.log("选择姓名:", name, "来自牌位:", item);
// 可以跳转到该姓名的详情页面或执行其他操作 // 可以跳转到该姓名的详情页面或执行其他操作
uni.navigateTo({ uni.navigateTo({
url: `/pages/memorial/enshrinedList?id=${item.id}&name=${encodeURIComponent(name)}`, url: `/pages/memorial/enshrinedList?id=${item.id}&name=${encodeURIComponent(name)}`,
}) });
}, },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page { .page {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
} }
.container { .container {
width: 100%; width: 100%;
//min-height: 100vh; //min-height: 100vh;
display: flex; display: flex;
@ -196,30 +211,30 @@
} }
} }
} }
} }
// 搜索结果区域 // 搜索结果区域
.search-results { .search-results {
display: flex; display: flex;
width: 100%; width: 100%;
margin-top: 20rpx; margin-top: 20rpx;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
gap: 22rpx; gap: 22rpx;
} }
// 结果卡片 // 结果卡片
.result-card { .result-card {
padding: 40rpx; padding: 40rpx;
width: 676rpx; width: 676rpx;
height: 248rpx; height: 248rpx;
background: #fffbf5; background: #fffbf5;
border-radius: 12rpx 12rpx 12rpx 12rpx; border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 1rpx solid #c7a26d; border: 1rpx solid #c7a26d;
} }
// 卡片头部 // 卡片头部
.card-header { .card-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -255,17 +270,17 @@
} }
} }
} }
} }
// 姓名标签区域 // 姓名标签区域
.names-section { .names-section {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 20rpx 22rpx; gap: 20rpx 22rpx;
} }
// 姓名标签 // 姓名标签
.name-tag { .name-tag {
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
background: #fff1dd; background: #fff1dd;
@ -284,10 +299,10 @@
line-height: 32rpx; line-height: 32rpx;
text-align: center; text-align: center;
} }
} }
// 空状态 // 空状态
.empty-state { .empty-state {
margin-top: 100rpx; margin-top: 100rpx;
text-align: center; text-align: center;
@ -295,10 +310,10 @@
font-size: 28rpx; font-size: 28rpx;
color: #999; color: #999;
} }
} }
// 初始状态 // 初始状态
.initial-state { .initial-state {
margin-top: 100rpx; margin-top: 100rpx;
text-align: center; text-align: center;
@ -306,9 +321,9 @@
font-size: 28rpx; font-size: 28rpx;
color: #666; color: #666;
} }
} }
.bottom-files { .bottom-files {
position: fixed; position: fixed;
left: 0; left: 0;
bottom: 0; bottom: 0;
@ -320,5 +335,5 @@
width: 750rpx; width: 750rpx;
height: 90rpx; height: 90rpx;
} }
} }
</style> </style>