搜索昵称显示问题

This commit is contained in:
WindowBird 2025-10-16 16:02:24 +08:00
parent 89cf6ec570
commit b068d82b21

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,28 +57,35 @@
</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: {
@ -80,87 +95,87 @@
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>