ykt-wxapp/pages/case/search.vue

<template>
  <view class="search-container">
    <!-- Search Header -->
    <view class="search-header">
      <view class="search-bar">
        <uni-icons type="search" size="18" color="#999" class="search-icon"></uni-icons>
        <input 
          class="search-input" 
          placeholder="搜索患者名称/手机号/院内ID号" 
          v-model="searchQuery"
          confirm-type="search"
          focus
          @input="handleSearch"
        />
        <uni-icons v-if="searchQuery" type="clear" size="18" color="#ccc" @click="clearSearch" class="clear-icon"></uni-icons>
      </view>
      <text class="cancel-btn" @click="goBack">取消</text>
    </view>

    <!-- Search Results -->
    <scroll-view v-if="searchQuery" scroll-y class="search-results">
      <view v-if="searchResults.length === 0" class="empty-state">
        <text class="empty-text">暂无搜索结果</text>
      </view>
      
      <view v-else>
        <view v-for="(patient, index) in searchResults" :key="index" class="patient-card">
          <!-- Row 1 -->
          <view class="card-row-top">
            <view class="patient-info">
              <text class="patient-name">{{ patient.name }}</text>
              <text class="patient-meta">{{ patient.gender }}/{{ patient.age }}岁</text>
            </view>
            <view class="patient-tags">
              <view v-for="(tag, tIndex) in patient.tags" :key="tIndex" class="tag">
                {{ tag }}
              </view>
            </view>
          </view>
          
          <!-- Row 2 -->
          <view class="card-row-bottom">
            <text v-if="patient.record" class="record-text">
              {{ patient.record.type }} / {{ patient.record.date }} / {{ patient.record.diagnosis }}
            </text>
            <text v-else class="no-record">暂无病历记录</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- History or Suggestions (when no search) -->
    <view v-else class="search-tips">
      <text class="tips-text">输入患者名称、手机号或院内ID号进行搜索</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// State
const searchQuery = ref('');

// Mock all patients data (same as case.vue)
const allPatients = [
  {
    letter: 'A',
    data: [
      { 
        name: '安乐', gender: '男', age: 45, tags: ['糖尿病'], 
        record: { type: '门诊', date: '2026.1.10', diagnosis: '2型糖尿病' },
        createTime: '2026.1.19 14:30', creator: '李医生', phone: '13888888888', hospitalId: '1001'
      },
      { 
        name: '奥利奥', gender: '女', age: 22, tags: [], record: null,
        createTime: '2026.1.15 09:00', creator: '王医生', phone: '13999999999', hospitalId: '1002'
      }
    ]
  },
  {
    letter: 'L',
    data: [
      { 
        name: '李珊珊', gender: '女', age: 37, tags: ['糖尿病', '高血压'], 
        record: { type: '门诊', date: '2026.1.10', diagnosis: '急性上呼吸道感染' },
        createTime: '2026.1.10 10:20', creator: '张医生', phone: '13666666666', hospitalId: '1003'
      },
      { 
        name: '李珊珊', gender: '女', age: 37, tags: [], 
        record: { type: '住院', date: '2026.1.10', diagnosis: '急性上呼吸道感染' },
        createTime: '2025.12.30 11:00', creator: '张医生', phone: '13666666666', hospitalId: '1003'
      },
      { 
        name: '李某某', gender: '女', age: 37, tags: [], record: null,
        createTime: '2025.12.01 08:30', creator: '系统导入', phone: '13555555555', hospitalId: '1004'
      },
      { 
        name: '李四', gender: '男', age: 50, tags: ['高血压'], record: null,
        createTime: '2026.1.18 16:45', creator: '管理员', phone: '13444444444', hospitalId: '1005'
      }
    ]
  },
  {
    letter: 'Z',
    data: [
      { 
        name: '张三', gender: '男', age: 28, tags: [], record: null,
        createTime: '2026.1.19 10:00', creator: '赵医生', phone: '13333333333', hospitalId: '1006'
      },
      { 
        name: '张敏', gender: '女', age: 32, tags: ['高血压'], 
        record: { type: '门诊', date: '2025.12.15', diagnosis: '高血压' },
        createTime: '2025.11.20 15:15', creator: '孙医生', phone: '13222222222', hospitalId: '1007'
      }
    ]
  }
];

// Computed
const searchResults = computed(() => {
  if (!searchQuery.value) return [];
  
  const q = searchQuery.value.toLowerCase();
  let results = [];
  
  allPatients.forEach(group => {
    group.data.forEach(p => {
      if (p.name.includes(q) || 
          (p.phone && p.phone.includes(q)) || 
          (p.hospitalId && p.hospitalId.includes(q))) {
        results.push(p);
      }
    });
  });
  
  return results;
});

// Methods
const handleSearch = () => {
  // Search logic handled by computed property
};

const clearSearch = () => {
  searchQuery.value = '';
};

const goBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.search-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f7f8fa;
}

.search-header {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  
  .search-bar {
    flex: 1;
    height: 36px;
    background-color: #f5f5f5;
    border-radius: 18px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    margin-right: 10px;
    
    .search-icon {
      margin-right: 8px;
    }
    
    .search-input {
      flex: 1;
      font-size: 14px;
      color: #333;
    }

    .clear-icon {
      margin-left: 8px;
    }
  }
  
  .cancel-btn {
    font-size: 14px;
    color: #5d8aff;
  }
}

.search-results {
  flex: 1;
  
  .empty-state {
    padding: 80px 20px;
    text-align: center;
    
    .empty-text {
      font-size: 14px;
      color: #999;
    }
  }
}

.search-tips {
  flex: 1;
  padding: 20px;
  
  .tips-text {
    font-size: 14px;
    color: #999;
  }
}

.patient-card {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 1px;
  border-bottom: 1px solid #f0f0f0;

  .card-row-top {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;

    .patient-info {
      display: flex;
      align-items: flex-end;
      margin-right: 10px;

      .patient-name {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin-right: 8px;
      }

      .patient-meta {
        font-size: 12px;
        color: #999;
        margin-bottom: 2px;
      }
    }

    .patient-tags {
      display: flex;
      gap: 5px;
      
      .tag {
        font-size: 10px;
        color: #5d8aff;
        border: 1px solid #5d8aff;
        padding: 0 4px;
        border-radius: 8px;
        height: 16px;
        line-height: 14px;
      }
    }
  }

  .card-row-bottom {
    font-size: 14px;
    
    .record-text {
      color: #666;
    }
    
    .no-record {
      color: #bdc3c7;
    }
  }
}
</style>