HarmonyOS ArkTS 实战：实现一个校园心理测评预约咨询应用

项目效果

本文使用 HarmonyOS 和 ArkTS 实现一个校园心理测评预约咨询应用。

应用可以进行心理测评，预约心理咨询，查看测评报告，咨询记录，并提供心理科普、情绪打卡、咨询师介绍、危机干预等完整功能。

项目使用 DevEco Studio 开发，适配 API 23 及以上版本。

运行效果

功能介绍

• 心理测评量表
• 在线测评答题
• 测评报告生成
• 心理咨询预约
• 咨询师选择
• 时间段选择
• 我的预约
• 咨询记录
• 心理科普文章
• 情绪打卡
• 危机干预热线
• 心情日记

定义数据结构

interface Scale {
  id: number;
  name: string;
  description: string;
  questionCount: number;
  duration: number;
  category: string;
}

interface Counselor {
  id: number;
  name: string;
  title: string;
  specialty: string;
  avatar: string;
  available: boolean;
  introduction: string;
}

interface Appointment {
  id: number;
  counselorId: number;
  counselorName: string;
  date: string;
  time: string;
  type: string; // 线上/线下
  status: string; // 待确认/已确认/已完成/已取消
  problem: string;
}

interface AssessmentResult {
  id: number;
  scaleId: number;
  scaleName: string;
  score: number;
  level: string;
  suggestion: string;
  testTime: string;
}

初始化页面状态

@State private tabIndex: number = 0;

@State private scales: Scale[] = [
  { id: 1, name: 'SCL-90症状自评量表', description: '从多个角度反映心理健康状况', questionCount: 90, duration: 15, category: '综合' },
  { id: 2, name: '抑郁自评量表SDS', description: '评估抑郁程度的常用量表', questionCount: 20, duration: 5, category: '情绪' },
  { id: 3, name: '焦虑自评量表SAS', description: '评估焦虑程度的常用量表', questionCount: 20, duration: 5, category: '情绪' },
  { id: 4, name: '大学生人格问卷UPI', description: '大学生心理健康筛查', questionCount: 60, duration: 10, category: '人格' },
];

@State private counselors: Counselor[] = [
  { id: 1, name: '陈老师', title: '心理咨询中心主任', specialty: '情绪管理、人际关系', avatar: '', available: true, introduction: '从事心理咨询15年' },
  { id: 2, name: '刘老师', title: '专职心理咨询师', specialty: '学业压力、恋爱心理', avatar: '', available: true, introduction: '国家二级心理咨询师' },
  { id: 3, name: '周老师', title: '兼职心理咨询师', specialty: '职业规划、自我成长', avatar: '', available: false, introduction: '心理学博士' },
];

@State private appointments: Appointment[] = [
  { id: 1, counselorId: 1, counselorName: '陈老师', date: '2026-07-25', time: '14:00-15:00', type: '线下', status: '已确认', problem: '学业压力咨询' },
];

@State private results: AssessmentResult[] = [];
@State private nextId: number = 10;

预约咨询

private bookAppointment(counselorId: number, date: string, time: string, type: string, problem: string): void {
  const counselor = this.counselors.find(c => c.id === counselorId);
  if (!counselor) return;
  
  const app: Appointment = {
    id: this.nextId, counselorId, counselorName: counselor.name,
    date, time, type, status: '待确认', problem
  };
  this.appointments = [app, ...this.appointments];
  this.nextId += 1;
}

取消预约

private cancelAppointment(appointmentId: number): void {
  this.appointments = this.appointments.map(a => a.id === appointmentId ? { ...a, status: '已取消' } : a);
}

咨询师卡片组件

@Builder
CounselorCard(counselor: Counselor) {
  Row({ space: 12 }) {
    Column()
      .width(60)
      .height(60)
      .backgroundColor('#FEF9C3')
      .borderRadius(30)
    
    Column({ space: 4 }) {
      Row() {
        Text(counselor.name)
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .fontColor('#451A03')
        Text(counselor.title)
          .fontSize(11)
          .fontColor('#A16207')
          .margin({ left: 8 })
      }
      Text(`擅长：${counselor.specialty}`)
        .fontSize(12)
        .fontColor('#854D0E')
      Text(counselor.introduction)
        .fontSize(11)
        .fontColor('#A16207')
        .maxLines(1)
      
      if (counselor.available) {
        Button('预约咨询')
          .fontSize(12)
          .height(32)
          .backgroundColor('#451A03')
          .margin({ top: 4 })
          .onClick(() => this.bookAppointment(counselor.id, '2026-07-28', '15:00-16:00', '线下', '心理咨询'))
      } else {
        Text('已约满')
          .fontSize(12)
          .fontColor('#94A3B8')
          .margin({ top: 4 })
      }
    }
    .layoutWeight(1)
    .alignItems(HorizontalAlign.Start)
  }
  .width('100%')
  .padding(16)
  .backgroundColor('#FEFCE8')
  .borderRadius(12)
}

页面布局

build() {
  Column() {
    // 顶部温馨提示
    Column({ space: 8 }) {
      Text('💛 心灵驿站')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .fontColor('#451A03')
      Text('关爱自己，从心开始。咨询保密，安全放心。')
        .fontSize(13)
        .fontColor('#A16207')
    }
    .width('100%')
    .padding(20)
    .backgroundColor('#FEF9C3')
    
    // 危机热线
    Row() {
      Text('🆘 24小时心理危机热线：400-161-9995')
        .fontSize(13)
        .fontColor(Color.White)
    }
    .width('100%')
    .padding(12)
    .backgroundColor('#DC2626')
    .justifyContent(FlexAlign.Center)
    
    // Tab
    Row({ space: 20 }) {
      Text('心理测评')
        .fontSize(16)
        .fontWeight(this.tabIndex === 0 ? FontWeight.Bold : FontWeight.Normal)
        .fontColor(this.tabIndex === 0 ? '#451A03' : '#94A3B8')
        .onClick(() => this.tabIndex = 0)
      Text('预约咨询')
        .fontSize(16)
        .fontWeight(this.tabIndex === 1 ? FontWeight.Bold : FontWeight.Normal)
        .fontColor(this.tabIndex === 1 ? '#451A03' : '#94A3B8')
        .onClick(() => this.tabIndex = 1)
      Text('我的预约')
        .fontSize(16)
        .fontWeight(this.tabIndex === 2 ? FontWeight.Bold : FontWeight.Normal)
        .fontColor(this.tabIndex === 2 ? '#451A03' : '#94A3B8')
        .onClick(() => this.tabIndex = 2)
    }
    .width('100%')
    .padding({ left: 20, right: 20, top: 16 })
    
    if (this.tabIndex === 0) {
      List({ space: 12 }) {
        ForEach(this.scales, (s: Scale) => {
          ListItem() {
            Column({ space: 8 }) {
              Text(s.name)
                .fontSize(15)
                .fontWeight(FontWeight.Medium)
                .fontColor('#451A03')
              Text(s.description)
                .fontSize(12)
                .fontColor('#854D0E')
              Row() {
                Text(`${s.questionCount}题 | 约${s.duration}分钟`)
                  .fontSize(11)
                  .fontColor('#A16207')
                Blank()
                Button('开始测评')
                  .fontSize(12)
                  .height(32)
                  .backgroundColor('#451A03')
              }
              .width('100%')
              .margin({ top: 4 })
            }
            .width('100%')
            .padding(16)
            .backgroundColor('#FEFCE8')
            .borderRadius(12)
          }
        })
      }
      .width('100%')
      .padding(20)
      .layoutWeight(1)
    } else if (this.tabIndex === 1) {
      List({ space: 12 }) {
        ForEach(this.counselors, (c: Counselor) => {
          ListItem() { this.CounselorCard(c) }
        })
      }
      .width('100%')
      .padding(20)
      .layoutWeight(1)
    } else {
      List({ space: 12 }) {
        ForEach(this.appointments, (a: Appointment) => {
          ListItem() {
            Column({ space: 8 }) {
              Row() {
                Text(`${a.counselorName}老师`)
                  .fontSize(15)
                  .fontWeight(FontWeight.Medium)
                Blank()
                Text(a.status)
                  .fontSize(12)
                  .fontColor(a.status === '已确认' ? '#059669' : '#F59E0B')
              }
              Text(`${a.date} ${a.time} | ${a.type}`)
                .fontSize(12)
                .fontColor('#854D0E')
              Text(a.problem)
                .fontSize(12)
                .fontColor('#A16207')
              if (a.status !== '已取消' && a.status !== '已完成') {
                Button('取消预约')
                  .width('100%')
                  .height(34)
                  .fontSize(13)
                  .backgroundColor('#DC2626')
                  .onClick(() => this.cancelAppointment(a.id))
              }
            }
            .width('100%')
            .padding(16)
            .backgroundColor('#FEFCE8')
            .borderRadius(12)
          }
        })
      }
      .width('100%')
      .padding(20)
      .layoutWeight(1)
    }
  }
  .width('100%')
  .height('100%')
  .backgroundColor(Color.White)
}

页面设计说明

主题色采用yellow-950#451A03，深黄色体现心理咨询的温暖、关怀、治愈。黄色系背景给人温馨感，红色危机热线醒目突出，整体氛围温暖安全。

SDK配置

API 24，compatibleSdkVersion: “6.1.1(24)”

运行项目

将代码复制到 entry/src/main/ets/pages/Index.ets 即可运行。

项目总结

实现了心理测评、咨询师预约、预约管理、危机干预等功能。掌握了温馨配色、卡片布局、状态管理、热线提示等。后续可加入在线答题、测评报告生成、心情日记、情绪打卡、线上咨询、心理科普文章推送等功能。