284 lines
6.8 KiB
Vue
284 lines
6.8 KiB
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>
|