buddhism/pages/memorial/deceasedSearch.vue

<template>
  <view class="page">
    <base-background />
    <!-- 使用自定义导航栏组件 -->
    <custom-navbar ref="customNavbar" title="往生供奉" />
    <view class="container">
      <!-- 状态展示 -->
      <status-display v-if="loading" type="loading" loading-text="搜索中..." />

      <!-- 搜索框 -->
      <search-box
        v-model="searchName"
        :width="'682rpx'"
        :search-icon="CommonEnum.SEARCH"
        placeholder="请输入姓名进行查找"
        btn-text="搜索"
        @search="handleSearch"
      />
      <view class="body">
        <view class="center-files">
          <image :src="CommonEnum.CENTER_TILES" mode="aspectFit" class="files"></image>
        </view>
        <!-- 搜索结果 -->
        <view class="search-results" v-if="searchResults.length > 0">
          <view class="result-card" v-for="(item, index) in searchResults" :key="index">
            <!-- 卡片头部 -->
            <view class="card-header">
              <view class="header-info">
                <text class="label">牌位名称</text>
                <text class="label">编号(分区)</text>
              </view>
              <view class="view-details" @click="viewDetails(item)">
                <text class="details-text">查看详情 ></text>
              </view>
            </view>

            <!-- 姓名标签区域 -->
            <view class="names-section">
              <view
                class="name-tag"
                v-for="(name, nameIndex) in item.names"
                :key="nameIndex"
                @click="selectName(item, name)"
              >
                <text class="name-text">{{ name }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 空状态 -->
        <view class="empty-state" v-if="hasSearched && searchResults.length === 0">
          <text class="empty-text">未找到相关往生者信息</text>
        </view>

        <!-- 初始状态提示 -->
        <view class="initial-state" v-if="!hasSearched">
          <text class="initial-text">请输入姓名进行搜索</text>
        </view>
      </view>
    </view>

    <view class="bottom-files">
      <image :src="CommonEnum.BOTTOM_TILES_2" mode="aspectFit" class="files"></image>
    </view>
  </view>
</template>

<script>
  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 { searchDeceased } from '@/api/memorial/memorial.js'

  export default {
    components: {
      SearchBox,
      StatusDisplay,
    },
    data() {
      return {
        CommonEnum,
        searchName: '',
        loading: false,
        searchResults: [],
        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
        }

        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
        }
      },

      // 查看详情
      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 {
    width: 100%;
    min-height: 100vh;
  }

  .container {
    width: 100%;
    //min-height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-bottom: 180rpx;
    box-sizing: border-box;

    .body {
      border-radius: 18rpx;
      position: relative;
      height: 1400rpx;
      left: 0;
      top: 18rpx;
      background: #fff;

      .center-files {
        position: relative;
        width: 100%; // 确保占满宽度
        z-index: 10; // 防止被内容覆盖
        .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;
    background-color: #ffffff;

    .files {
      width: 750rpx;
      height: 90rpx;
    }
  }
</style>