搜索昵称显示问题

pages/memorial/deceasedSearch.vue

@@ -5,29 +5,37 @@
     <custom-navbar ref="customNavbar" title="往生供奉" />
     <view class="container">
       <!-- 状态展示 -->
-      <status-display v-if="loading" type="loading" loading-text="搜索中..." />
+      <status-display v-if="loading" loading-text="搜索中..." type="loading" />
 
       <!-- 搜索框 -->
       <search-box
         v-model="searchName"
-        :width="'682rpx'"
         :search-icon="CommonEnum.SEARCH"
-        placeholder="请输入姓名进行查找"
+        :width="'682rpx'"
         btn-text="搜索"
+        placeholder="请输入姓名进行查找"
         @search="handleSearch"
       />
       <view class="body">
         <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 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="header-info">
-                <text class="label">牌位名称</text>
+                <!--                <text class="label">牌位名称</text>-->
-                <text class="label">编号(分区)</text>
+                <text class="label">编号{{ item.code }}</text>
               </view>
               <view class="view-details" @click="viewDetails(item)">
                 <text class="details-text">查看详情 ></text>
@@ -37,9 +45,9 @@
             <!-- 姓名标签区域 -->
             <view class="names-section">
               <view
-                class="name-tag"
                 v-for="(name, nameIndex) in item.names"
                 :key="nameIndex"
+                class="name-tag"
                 @click="selectName(item, name)"
               >
                 <text class="name-text">{{ name }}</text>
@@ -49,276 +57,283 @@
         </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>
         </view>
 
         <!-- 初始状态提示 -->
-        <view class="initial-state" v-if="!hasSearched">
+        <view v-if="!hasSearched" class="initial-state">
           <text class="initial-text">请输入姓名进行搜索</text>
         </view>
       </view>
     </view>
 
     <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>
 </template>
 
 <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,
-    },
+  },
-    data() {
+  data() {
-      return {
+    return {
-        CommonEnum,
+      CommonEnum,
-        searchName: '',
+      searchName: "",
-        loading: false,
+      loading: false,
-        searchResults: [],
+      searchResults: [],
-        hasSearched: false,
+      hasSearched: false,
+    };
+  },
+  onLoad(options) {
+    console.log("deceasedSearch页面接收到的参数:", options);
+
+    // 从路由参数获取搜索关键词
+    if (options.keyword) {
+      this.searchName = decodeURIComponent(options.keyword);
+      console.log("接收到搜索关键词:", this.searchName);
+
+      // 自动执行搜索
+      this.$nextTick(() => {
+        this.handleSearch(this.searchName);
+      });
+    }
+  },
+  methods: {
+    // 处理搜索
+    async handleSearch(value) {
+      if (!value || value.trim() === "") {
+        uni.showToast({
+          title: "请输入搜索内容",
+          icon: "none",
+        });
+        return;
       }
-    },
-    onLoad(options) {
-      console.log('deceasedSearch页面接收到的参数:', options)
 
-      // 从路由参数获取搜索关键词
+      this.loading = true;
-      if (options.keyword) {
+      this.hasSearched = true;
-        this.searchName = decodeURIComponent(options.keyword)
-        console.log('接收到搜索关键词:', this.searchName)
 
-        // 自动执行搜索
+      try {
-        this.$nextTick(() => {
+        const res = await searchDeceased({
-          this.handleSearch(this.searchName)
+          fullName: value.trim(),
-        })
+        });
-      }
-    },
-    methods: {
-      // 处理搜索
-      async handleSearch(value) {
-        if (!value || value.trim() === '') {
-          uni.showToast({
-            title: '请输入搜索内容',
-            icon: 'none',
-          })
-          return
-        }
 
-        this.loading = true
+        if (res.code === 200) {
-        this.hasSearched = true
+          this.searchResults = res.data || [];
-
+          if (this.searchResults.length === 0) {
-        try {
+            uni.showToast({
-          const res = await searchDeceased({
+              title: "未找到相关结果",
-            fullName: value.trim(),
+              icon: "none",
-          })
+            });
-
-          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) {
+        } else {
-          console.error('搜索失败:', error)
+          throw new Error(res.msg || "搜索失败");
-          this.searchResults = []
-          uni.showToast({
-            title: error.message || '搜索失败',
-            icon: 'none',
-          })
-        } finally {
-          this.loading = false
         }
-      },
+      } catch (error) {
-
+        console.error("搜索失败:", error);
-      // 查看详情
+        this.searchResults = [];
-      viewDetails(item) {
+        uni.showToast({
-        console.log('查看详情:', item)
+          title: error.message || "搜索失败",
-        // 跳转到往生大殿页面
+          icon: "none",
-        uni.navigateTo({
+        });
-          url: `/pages/memorial/memorialHall?id=${item.id}`,
+      } finally {
-        })
+        this.loading = false;
-      },
+      }
-
-      // 选择姓名
-      selectName(item, name) {
-        console.log('选择姓名:', name, '来自牌位:', item)
-        // 可以跳转到该姓名的详情页面或执行其他操作
-        uni.navigateTo({
-          url: `/pages/memorial/enshrinedList?id=${item.id}&name=${encodeURIComponent(name)}`,
-        })
-      },
     },
-  }
+
+    // 查看详情
+    viewDetails(item) {
+      console.log("查看详情:", item);
+      // 跳转到往生大殿页面
+      uni.navigateTo({
+        url: `/pages/memorial/memorialHall?id=${item.id}`,
+      });
+    },
+
+    // 选择姓名
+    selectName(item, name) {
+      console.log("选择姓名:", name, "来自牌位:", item);
+      // 可以跳转到该姓名的详情页面或执行其他操作
+      uni.navigateTo({
+        url: `/pages/memorial/enshrinedList?id=${item.id}&name=${encodeURIComponent(name)}`,
+      });
+    },
+  },
+};
 </script>
 
 <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;
-    align-items: center;
+  align-items: center;
-    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;
+    border-radius: 18rpx;
+    position: relative;
+    height: 1400rpx;
+    left: 0;
+    top: 18rpx;
+    background: #fff;
+
+    .center-files {
       position: relative;
-      height: 1400rpx;
+      width: 100%; // 确保占满宽度
-      left: 0;
+      z-index: 10; // 防止被内容覆盖
-      top: 18rpx;
+      .files {
-      background: #fff;
+        width: 750rpx; // 图片宽度适配容器
-
+        height: 47rpx; // 根据设计图调整高度
-      .center-files {
-        position: relative;
-        width: 100%; // 确保占满宽度
-        z-index: 10; // 防止被内容覆盖
-        .files {
-          width: 750rpx; // 图片宽度适配容器
-          height: 47rpx; // 根据设计图调整高度
-        }
       }
     }
   }
+}
 
-  // 搜索结果区域
+// 搜索结果区域
-  .search-results {
+.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;
-    width: 100%;
+    gap: 60rpx;
-    margin-top: 20rpx;
+    //border:1px red solid;
-    align-items: center;
-    flex-direction: column;
-    gap: 22rpx;
-  }
 
-  // 结果卡片
+    .label {
-  .result-card {
+      //border:1px #11ff00 solid;
-    padding: 40rpx;
+      font-weight: 500;
-    width: 676rpx;
+      font-size: 36rpx;
-    height: 248rpx;
+      color: #522510;
-    background: #fffbf5;
+      line-height: 50rpx;
-    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;
     }
   }
 
-  // 空状态
+  .view-details {
-  .empty-state {
+    .details-text {
-    margin-top: 100rpx;
+      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-text {
-      font-size: 28rpx;
-      color: #999;
-    }
   }
+}
 
-  // 初始状态
+// 空状态
-  .initial-state {
+.empty-state {
-    margin-top: 100rpx;
+  margin-top: 100rpx;
-    text-align: center;
+  text-align: center;
 
-    .initial-text {
+  .empty-text {
-      font-size: 28rpx;
+    font-size: 28rpx;
-      color: #666;
+    color: #999;
-    }
   }
+}
 
-  .bottom-files {
+// 初始状态
-    position: fixed;
+.initial-state {
-    left: 0;
+  margin-top: 100rpx;
-    bottom: 0;
+  text-align: center;
-    width: 100%;
-    z-index: 10;
-    background-color: #ffffff;
 
-    .files {
+  .initial-text {
-      width: 750rpx;
+    font-size: 28rpx;
-      height: 90rpx;
+    color: #666;
-    }
   }
+}
+
+.bottom-files {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 10;
+  background-color: #ffffff;
+
+  .files {
+    width: 750rpx;
+    height: 90rpx;
+  }
+}
 </style>