workspace/soul-app/src/app/tab2/tab2.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>心理陪聊服务</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 智能匹配区 -->
  <section>
    <ion-card>
      <ion-card-header>
        <ion-card-title>智能匹配</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>根据您与陪聊机器人的问答情况，分析你的心理问题类型，再为您智能匹配合适的心理陪聊师。</p>
        <!--<ion-item>
          <ion-label>选择心理问题类型</ion-label>
          <ion-select [(ngModel)]="selectedIssue">
            <ion-select-option value="anxiety">焦虑</ion-select-option>
            <ion-select-option value="depression">抑郁</ion-select-option>
            <ion-select-option value="relationship">人际关系</ion-select-option>
          </ion-select>
        </ion-item>
      -->
        <ion-button expand="full" (click)="matchCounselor()">开始匹配</ion-button>
        <div *ngIf="matchedCounselor" class="match-result">
          <p>为您推荐的心理咨询师是：{{ matchedCounselor.name }}，擅长{{ matchedCounselor.specialty }}。</p>
        </div>
      </ion-card-content>
    </ion-card>
  </section>

  <!-- 陪聊服务区 -->
  <section>
    <ion-card>
      <ion-card-header>
        <ion-card-title>陪聊服务</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>在这里，我们的陪聊服务宗旨是为您提供情感支持和倾诉的机会，无论是生活上的开心，还是工作上的糟糕，你都可以跟我分享，这里是属于你一个人的空间，你可以大胆放心的使用。</p>
        <ion-button expand="full" (click)="goChat()">开始陪聊</ion-button>
        <!--<ol>
          <li>选择陪聊时间</li>
          <li>与陪聊师匹配</li>
          <li>开始聊天</li>
        </ol>-->
      </ion-card-content>
    </ion-card>
  </section>

  <!-- 普通心理问题的专业性建议区 -->
  <section>
    <ion-card>
      <ion-card-header>
        <ion-card-title>心理问题建议</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-list>
          <ion-item *ngFor="let question of questions" (click)="question.expanded = !question.expanded">
            <ion-label>
              <h2>{{ question.title }}</h2>
              <p *ngIf="question.expanded">{{ question.advice }}</p>
            </ion-label>
            <ion-icon name="chevron-down" slot="end" *ngIf="!question.expanded"></ion-icon>
            <ion-icon name="chevron-up" slot="end" *ngIf="question.expanded"></ion-icon>
          </ion-item>
        </ion-list>
      </ion-card-content>
    </ion-card>
  </section>
</ion-content>