Ver Fonte

feat:new tab2 page

cainiao-hue há 4 meses atrás
pai
commit
0cd4dc46ef

+ 1 - 1
soul-app/src/app/consult-picture/consult-picture.component.ts

@@ -16,7 +16,7 @@ import { DalleOptions, ImagineWork,FmodeChatCompletion } from 'fmode-ng';
 })
 export class ConsultPictureComponent  implements OnInit {
 
-  userPrompt:string = "app名称为心语的logo,一个爱心,聊天气泡,易于识别,颜色方案应体现温暖感和清晰感,建议使用黄色和绿色等色调,极具美观性,可爱风格"
+  userPrompt:string = "app名称为...的logo,一个爱心,聊天气泡,易于识别,颜色方案应体现温暖感和清晰感,建议使用...色和...色等色调,极具美观性,可爱风格"
   promptInput(ev:any){
     this.userPrompt = ev.detail.value;
   }

+ 1 - 1
soul-app/src/app/tab1/tab1.page.html

@@ -11,8 +11,8 @@
     </ion-item>
   </ion-toolbar>
 </ion-header>
-<ion-content [fullscreen]="true">
 
+<ion-content [fullscreen]="true">
   <section>
   <ion-card>
     <ion-card-header>

+ 3 - 0
soul-app/src/app/tab1/tab1.page.scss

@@ -9,6 +9,9 @@ ion-content {
     border-radius: 10px; /* 圆角效果 */
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
   }
+  ion-card-title {
+    font-weight:bold;
+  }
   
   /* 设置列表项的样式 */
   ion-item {

+ 64 - 11
soul-app/src/app/tab2/tab2.page.html

@@ -1,17 +1,70 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      聊天
-    </ion-title>
+    <ion-title>心理健康服务</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 2</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>
 
-  <app-explore-container name="Tab 2 page"></app-explore-container>
+  <!-- 陪聊服务区 -->
+  <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)="startChat()">开始陪聊</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>

+ 53 - 3
soul-app/src/app/tab2/tab2.page.ts

@@ -1,16 +1,66 @@
-import { Component } from '@angular/core';
+import { Component,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonItem, IonLabel,
+   IonList,IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent]
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
+    IonCard,IonCardHeader,IonCardTitle,IonCardContent,
+    IonItem,IonLabel,
+    IonSelect,IonSelectOption,
+    IonButton,IonList,
+    CommonModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class Tab2Page {
 
-  constructor() {}
+  constructor() {
+    this.selectedIssue = ''; // 或者其他合适的默认值
+  }
+  selectedIssue:string;
+  matchedCounselor: { name: string; specialty: string } | null = null;
+
+  questions = [
+    {
+      title: '如何应对焦虑?',
+      advice: '尝试深呼吸和正念冥想,保持规律的作息。',
+      expanded: false,
+    },
+    {
+      title: '如何提高自信心?',
+      advice: '设定小目标并逐步实现,进行积极自我对话。',
+      expanded: false,
+    },
+    {
+      title: '如何改善人际关系?',
+      advice: '多与他人沟通,倾听对方的感受。',
+      expanded: false,
+    },
+  ];
+
+  matchCounselor() {
+    // 这里可以根据selectedIssue进行匹配逻辑
+    if (this.selectedIssue === 'anxiety') {
+      this.matchedCounselor = { name: '张医生', specialty: '焦虑' };
+    } else if (this.selectedIssue === 'depression') {
+      this.matchedCounselor = { name: '李医生', specialty: '抑郁' };
+    } else if (this.selectedIssue === 'relationship') {
+      this.matchedCounselor = { name: '王医生', specialty: '人际关系' };
+    } else {
+      this.matchedCounselor = null;
+    }
+  }
+
+  startChat() {
+    // 开始陪聊的逻辑
+    console.log('开始陪聊服务');
+  }
 
 }