鸿蒙HarmonyOS 5 医院医生查询小程序实现方案（使用仓颉编程）

应用概述

基于HarmonyOS 5和仓颉编程语言的医院医生查询小程序，主要功能包括：

• 科室医生分类浏览
• 医生详细信息查询
• 智能搜索功能
• 预约挂号快捷入口
• 医生排班信息展示

技术架构

1. ​​前端​​：仓颉语言开发HarmonyOS应用
2. ​​数据存储​​：使用HarmonyOS轻量级数据库
3. ​​网络请求​​：HarmonyOS网络能力
4. ​​UI组件​​：HarmonyOS ArkUI仓颉适配组件

核心功能实现

1. 数据模型定义

// 科室数据模型
class Department {
    id: number;
    name: string;
    icon: Resource;
}

// 医生数据模型
class Doctor {
    id: number;
    name: string;
    departmentId: number;
    title: string; // 职称
    specialty: string; // 专长
    avatar: Resource;
    schedule: Schedule[];
}

// 排班信息
class Schedule {
    day: string; // 星期几
    time: string; // 时间段
    available: boolean; // 是否可预约
}

2. 主页面布局

@Component
struct DoctorListPage {
    @State departments: Department[] = [];
    @State currentDept: number = 0;
    @State doctors: Doctor[] = [];

    build() {
        Column() {
            // 顶部搜索栏
            SearchBar({ placeholder: '输入医生姓名或科室' })
                .onSearch((text) => this.searchDoctors(text))
            
            // 科室横向滚动列表
            DepartmentTabs({
                departments: this.departments,
                current: this.currentDept,
                onTabChange: (id) => this.changeDepartment(id)
            })
            
            // 医生列表
            DoctorList({
                doctors: this.doctors,
                onDoctorSelect: (doctor) => this.viewDoctorDetail(doctor)
            })
        }
    }
    
    // 初始化数据
    aboutToAppear() {
        this.loadDepartments();
        this.loadDoctors();
    }
    
    // 加载科室数据
    async loadDepartments() {
        this.departments = await HospitalService.getDepartments();
    }
    
    // 加载医生数据
    async loadDoctors() {
        this.doctors = await HospitalService.getDoctorsByDepartment(this.currentDept);
    }
    
    // 切换科室
    async changeDepartment(id: number) {
        this.currentDept = id;
        this.doctors = await HospitalService.getDoctorsByDepartment(id);
    }
    
    // 搜索医生
    async searchDoctors(keyword: string) {
        this.doctors = await HospitalService.searchDoctors(keyword);
    }
    
    // 查看医生详情
    viewDoctorDetail(doctor: Doctor) {
        router.push({ url: 'pages/DoctorDetail', params: { doctorId: doctor.id } });
    }
}

3. 医生详情页实现

@Component
struct DoctorDetailPage {
    @State doctor: Doctor | null = null;
    
    build() {
        Column() {
            if (this.doctor) {
                // 医生基本信息
                DoctorInfoCard({
                    doctor: this.doctor
                })
                
                // 排班信息
                Text('出诊时间')
                    .fontSize(18)
                    .margin({ top: 20 })
                
                ScheduleTable({
                    schedule: this.doctor.schedule,
                    onScheduleSelect: (time) => this.makeAppointment(time)
                })
                
                // 医生简介
                Text('医生简介')
                    .fontSize(18)
                    .margin({ top: 20 })
                
                Text(this.doctor.specialty)
                    .fontSize(14)
                    .margin({ top: 10 })
            } else {
                Text('加载中...')
            }
        }
    }
    
    aboutToAppear() {
        const params = router.getParams();
        if (params?.doctorId) {
            this.loadDoctorDetail(params.doctorId);
        }
    }
    
    async loadDoctorDetail(id: number) {
        this.doctor = await HospitalService.getDoctorDetail(id);
    }
    
    makeAppointment(time: Schedule) {
        if (time.available) {
            router.push({ url: 'pages/Appointment', params: { 
                doctorId: this.doctor.id,
                schedule: time 
            } });
        } else {
            prompt.showToast({ message: '该时段已约满' });
        }
    }
}

4. 数据服务实现

class HospitalService {
    // 获取所有科室
    static async getDepartments(): Promise<Department[]> {
        try {
            const response = await http.get('/api/departments');
            return response.data;
        } catch (error) {
            console.error('获取科室失败:', error);
            return [];
        }
    }
    
    // 按科室获取医生
    static async getDoctorsByDepartment(deptId: number): Promise<Doctor[]> {
        try {
            const response = await http.get(`/api/doctors?department=${deptId}`);
            return response.data;
        } catch (error) {
            console.error('获取医生列表失败:', error);
            return [];
        }
    }
    
    // 搜索医生
    static async searchDoctors(keyword: string): Promise<Doctor[]> {
        try {
            const response = await http.get(`/api/doctors?q=${encodeURIComponent(keyword)}`);
            return response.data;
        } catch (error) {
            console.error('搜索医生失败:', error);
            return [];
        }
    }
    
    // 获取医生详情
    static async getDoctorDetail(id: number): Promise<Doctor | null> {
        try {
            const response = await http.get(`/api/doctors/${id}`);
            return response.data;
        } catch (error) {
            console.error('获取医生详情失败:', error);
            return null;
        }
    }
}

5. 自定义组件实现

科室标签组件

@Component
struct DepartmentTabs {
    @Prop departments: Department[];
    @Prop current: number;
    @Prop onTabChange: (id: number) => void;
    
    build() {
        Scroll() {
            Row() {
                ForEach(this.departments, (dept) => {
                    Column() {
                        Image(dept.icon)
                            .width(40)
                            .height(40)
                        Text(dept.name)
                            .fontSize(12)
                    }
                    .padding(10)
                    .backgroundColor(this.current === dept.id ? '#e6f7ff' : '#fff')
                    .onClick(() => this.onTabChange(dept.id))
                })
            }
        }
        .height(80)
        .scrollable(ScrollDirection.Horizontal)
    }
}

医生列表组件

@Component
struct DoctorList {
    @Prop doctors: Doctor[];
    @Prop onDoctorSelect: (doctor: Doctor) => void;
    
    build() {
        List() {
            ForEach(this.doctors, (doctor) => {
                ListItem() {
                    DoctorCard({
                        doctor: doctor,
                        onClick: () => this.onDoctorSelect(doctor)
                    })
                }
            })
        }
        .divider({ strokeWidth: 1, color: '#f0f0f0' })
    }
}

@Component
struct DoctorCard {
    @Prop doctor: Doctor;
    @Prop onClick: () => void;
    
    build() {
        Row() {
            Image(this.doctor.avatar)
                .width(60)
                .height(60)
                .borderRadius(30)
            
            Column() {
                Text(this.doctor.name)
                    .fontSize(16)
                    .fontWeight(FontWeight.Bold)
                Text(`${this.doctor.title} | ${this.doctor.specialty}`)
                    .fontSize(12)
                    .textOverflow({ overflow: TextOverflow.Ellipsis })
            }
            .margin({ left: 10 })
        }
        .width('100%')
        .padding(10)
        .onClick(this.onClick)
    }
}

项目结构

hospital-doctor-app/
├── entry/
│   ├── src/
│   │   ├── main/
│   │   │   ├── ets/
│   │   │   │   ├── pages/
│   │   │   │   │   ├── DoctorListPage.ets    # 医生列表页
│   │   │   │   │   ├── DoctorDetailPage.ets  # 医生详情页
│   │   │   │   │   └── AppointmentPage.ets   # 预约页面
│   │   │   │   ├── components/
│   │   │   │   │   ├── DepartmentTabs.ets    # 科室标签组件
│   │   │   │   │   ├── DoctorCard.ets        # 医生卡片组件
│   │   │   │   │   └── ScheduleTable.ets     # 排班表格组件
│   │   │   │   ├── model/
│   │   │   │   │   ├── Doctor.ets            # 医生数据模型
│   │   │   │   │   └── Department.ets        # 科室数据模型
│   │   │   │   ├── services/
│   │   │   │   │   └── HospitalService.ets   # 医院数据服务
│   │   │   │   ├── app.ets                   # 应用入口
│   │   │   │   └── resources/                # 资源文件
│   │   │   └── module.json5                  # 模块配置