提交内容的备注信息

src/app/app-routing.module.ts

@@ -18,6 +18,10 @@ const routes: Routes = [
   {
     path: 'details',
     loadChildren: () => import('./details/details.module').then( m => m.DetailsPageModule)
+  },
+  {
+    path: 'edit-profile',
+    loadChildren: () => import('./edit-profile/edit-profile.module').then( m => m.EditProfilePageModule)
   }
 ];
 

src/app/app.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouteReuseStrategy } from '@angular/router';
 
+
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 
 import { AppRoutingModule } from './app-routing.module';

src/app/appointment/appointment.page.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { NavController } from '@ionic/angular';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-appointment',
@@ -10,7 +11,7 @@ export class AppointmentPage {
   // 初始化 selectedService 属性
   selectedService: string = '';
 
-  constructor(private navCtrl: NavController) {}
+  constructor(private navCtrl: NavController,private router: Router) {}
 
   onServiceChange(event: any) {
     console.log('Selected service:', event.detail.value);
@@ -18,6 +19,14 @@ export class AppointmentPage {
 
   makeAppointment() {
     // 这里可以添加实际的预约逻辑
+    if (this.selectedService === 'service2') {
+      // 导航到 tab2 页面
+      this.router.navigate(['/tabs/tab2']);
+    } else {
+      // 处理其他服务类型的逻辑
+      alert('您选择了其他服务类型，请完成相关信息填写。');
+    }
+
     console.log('Making appointment for service:', this.selectedService);
     // 你可以在这里进行导航或显示成功消息等
   }

src/app/edit-profile/edit-profile-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { EditProfilePage } from './edit-profile.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EditProfilePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class EditProfilePageRoutingModule {}

src/app/edit-profile/edit-profile.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+
+import { EditProfilePageRoutingModule } from './edit-profile-routing.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'; // 导入 FormsModule 和 ReactiveFormsModule
+
+import { EditProfilePage } from './edit-profile.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    EditProfilePageRoutingModule,
+    ReactiveFormsModule, // 添加 ReactiveFormsModule
+  ],
+  declarations: [EditProfilePage]
+})
+export class EditProfilePageModule {}

src/app/edit-profile/edit-profile.page.html

@@ -0,0 +1,49 @@
+<!-- src/app/edit-profile/edit-profile.page.html -->
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab3"></ion-back-button>
+    </ion-buttons>
+    <ion-title>编辑资料</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+  <form [formGroup]="profileForm" (ngSubmit)="saveProfile()">
+    <ion-item>
+      <ion-label position="floating">用户名</ion-label>
+      <ion-input formControlName="username" type="text" required></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label position="floating">邮箱</ion-label>
+      <ion-input formControlName="email" type="email" required></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label position="floating">手机号</ion-label>
+      <ion-input formControlName="phone" type="tel" required></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label position="floating">性别</ion-label>
+      <ion-select formControlName="gender" required>
+        <ion-select-option value="male">男</ion-select-option>
+        <ion-select-option value="female">女</ion-select-option>
+        <ion-select-option value="other">其他</ion-select-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label position="floating">生日</ion-label>
+      <ion-datetime formControlName="birthday" displayFormat="YYYY-MM-DD" required></ion-datetime>
+    </ion-item>
+
+    <ion-item>
+      <ion-label position="floating">头像</ion-label>
+      <input type="file" accept="image/*" (change)="onFileSelected($event)">
+    </ion-item>
+
+    <ion-button expand="block" type="submit" [disabled]="!profileForm.valid">保存</ion-button>
+  </form>
+</ion-content>

src/app/edit-profile/edit-profile.page.scss

@@ -0,0 +1,66 @@
+/* src/app/edit-profile/edit-profile.page.scss */
+ion-header ion-toolbar {
+    --background: var(--ion-color-primary);
+    --color: var(--ion-color-light);
+  }
+  
+  ion-content {
+    --padding-top: 0;
+    --padding-bottom: 0;
+  }
+  
+  form {
+    display: flex;
+    flex-direction: column;
+  
+    ion-item {
+      margin-bottom: 25px; // 增加每个表单项之间的间距
+    }
+  
+    ion-button {
+      margin-top: 20px;
+    }
+  }
+  
+  
+  ion-item {
+    --highlight-color: var(--ion-color-primary);
+    --padding-start: 16px; // 默认内边距
+    --padding-end: 16px;
+  }
+  
+  ion-select {
+    --placeholder-color: var(--ion-color-medium);
+  }
+  
+  ion-datetime {
+    --placeholder-color: var(--ion-color-medium);
+ 
+    --padding-start: 24px; // 增加内边距以避免重叠
+    --padding-end: 24px;
+    --font-size: 16px; // 调整字体大小
+    text-align: center; // 居中文本
+    width: 100%; // 确保宽度占满父元素
+  }
+  
+  /* 自定义文件输入框的样式 */
+  input[type="file"] {
+    width: 100%;
+    padding: 12px; // 增加内边距
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: #fff;
+    font-size: 14px;
+    color: #555;
+    cursor: pointer;
+  }
+  /* 确保文件输入框不与其它元素重叠 */
+  ion-item input[type="file"] {
+    margin-top: 35px; // 增加上边距
+  }
+
+  
+
+
+  

src/app/edit-profile/edit-profile.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { EditProfilePage } from './edit-profile.page';
+
+describe('EditProfilePage', () => {
+  let component: EditProfilePage;
+  let fixture: ComponentFixture<EditProfilePage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditProfilePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/edit-profile/edit-profile.page.ts

@@ -0,0 +1,42 @@
+// src/app/edit-profile/edit-profile.page.ts
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { NavController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-edit-profile',
+  templateUrl: './edit-profile.page.html',
+  styleUrls: ['./edit-profile.page.scss'],
+})
+export class EditProfilePage implements OnInit {
+  // 在声明时初始化 profileForm
+  profileForm: FormGroup = new FormGroup({});
+
+  constructor(private fb: FormBuilder, private navCtrl: NavController) {}
+
+  ngOnInit() {
+    this.profileForm = this.fb.group({
+      username: ['', [Validators.required]],
+      email: ['', [Validators.required, Validators.email]],
+      phone: ['', [Validators.required, Validators.pattern('^[0-9]*$')]],
+      gender: ['', [Validators.required]],
+      birthday: ['', [Validators.required]]
+    });
+  }
+
+  onFileSelected(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (input.files && input.files[0]) {
+      // 这里可以添加处理文件的逻辑，例如上传到服务器
+      console.log('Selected file:', input.files[0]);
+    }
+  }
+
+  saveProfile() {
+    if (this.profileForm.valid) {
+      // 这里可以添加保存用户资料的逻辑，例如发送到后端
+      console.log('Profile saved:', this.profileForm.value);
+      this.navCtrl.pop(); // 保存成功后返回上一页
+    }
+  }
+}

src/app/tab2/tab2.module.ts

@@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { Tab2Page } from './tab2.page';
 import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
+import { RouterModule } from '@angular/router';
 
 import { Tab2PageRoutingModule } from './tab2-routing.module';
 
@@ -13,7 +14,13 @@ import { Tab2PageRoutingModule } from './tab2-routing.module';
     CommonModule,
     FormsModule,
     ExploreContainerComponentModule,
-    Tab2PageRoutingModule
+    Tab2PageRoutingModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: Tab2Page
+      }
+    ])
   ],
   declarations: [Tab2Page]
 })

src/app/tab2/tab2.page.html

@@ -1,17 +1,45 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
+<!-- src/app/tab2/tab2.page.html -->
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-title class="center-title">AI 问诊</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>
-
-  <app-explore-container name="Tab 2 page"></app-explore-container>
+<ion-content padding>
+  <ion-list>
+    <ion-item *ngFor="let message of messages" [class.user]="message.sender === 'user'" [class.ai]="message.sender === 'ai'">
+      <div class="message-container" [class.user-message]="message.sender === 'user'" [class.ai-message]="message.sender === 'ai'">
+        <div class="avatar-container" *ngIf="message.sender === 'user'">
+          <ion-avatar class="user-avatar">
+            <img [src]="'../../assets/images/user-avatar.png'" />
+          </ion-avatar>
+        </div>
+        <div class="message-text">
+          <h3>{{ message.sender === 'user' ? '您' : 'AI 医生' }}</h3>
+          <p>{{ message.text }}</p>
+        </div>
+        <div class="avatar-container" *ngIf="message.sender === 'ai'">
+          <ion-avatar class="ai-avatar">
+            <img [src]="'../../assets/images/AI医生.png'" />
+          </ion-avatar>
+        </div>
+      </div>
+    </ion-item>
+  </ion-list>
 </ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-grid>
+      <ion-row>
+        <ion-col size="10">
+          <ion-input [(ngModel)]="userInput" placeholder="请输入您的问题..." (keyup.enter)="sendMessage()"></ion-input>
+        </ion-col>
+        <ion-col size="2" class="send-button-container">
+          <ion-button (click)="sendMessage()" expand="block" [disabled]="isLoading">发送</ion-button>
+          <ion-spinner *ngIf="isLoading" name="crescent"></ion-spinner>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </ion-toolbar>
+</ion-footer>

src/app/tab2/tab2.page.scss

@@ -0,0 +1,113 @@
+/* src/app/tab2/tab2.page.scss */
+.message-container {
+    display: flex;
+    align-items: center; /* 垂直居中 */
+    margin-bottom: 10px;
+  }
+  
+  .user-message,
+  .ai-message {
+    width: 100%;
+  }
+  
+  .user-message .message-text,
+  .ai-message .message-text {
+    max-width: 75%; /* 消息内容的最大宽度 */
+    word-wrap: break-word; /* 防止文字溢出 */
+  }
+  
+  .avatar-container {
+    display: flex;
+    align-items: center; /* 垂直居中 */
+  }
+  
+  .full-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    overflow: hidden; /* 确保图片超出部分被隐藏 */
+  }
+  
+  .full-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* 保持图片比例并填充容器 */
+    border-radius: 50%; /* 保持圆形 */
+  }
+  
+  .user-message .avatar-container {
+    margin-right: 10px; /* 头像和文本之间的间距 */
+  }
+  
+  .ai-message .avatar-container {
+    margin-left: 10px; /* 头像和文本之间的间距 */
+  }
+  
+  .user-message .message-text {
+    text-align: left; /* 用户消息左对齐 */
+    margin-left: 10px; /* 文本和头像之间的间距 */
+    color:rgb(7, 7, 15); /* 用户消息的文字颜色 */
+    
+  }
+  
+  .ai-message .message-text {
+    text-align: right; /* AI 消息右对齐 */
+    margin-right: 10px; /* 文本和头像之间的间距 */
+    color: #333; /* AI 医生消息的文字颜色 */
+  }
+  
+  .user-message {
+    justify-content: flex-start; /* 用户消息固定在左边 */
+    background-color:#f1f1f1; /* 用户消息的背景色 */
+    
+  }
+  
+  .ai-message {
+    justify-content: flex-end; /* AI 消息固定在右边 */
+    background-color: #f1f1f1; /* AI 医生消息的背景色 */
+  }
+  
+  /* 确保头像和消息在同一行内 */
+  .user-message .message-container,
+  .ai-message .message-container {
+    display: flex;
+    align-items: center; /* 垂直居中 */
+  }
+  
+  /* 确保消息容器占据整个宽度 */
+  .user-message .message-container,
+  .ai-message .message-container {
+    width: 100%;
+  }
+  
+  ion-footer ion-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+  }
+  
+  ion-footer .send-button-container {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  
+  ion-footer ion-input {
+    flex: 1;
+    margin-right: 10px;
+  }
+  
+  ion-footer ion-button {
+    width: 80px;
+  }
+  
+  ion-spinner {
+    margin-left: 10px;
+  }
+  
+  /* 居中显示标题 */
+  .center-title {
+    text-align: center;
+    width: 100%; /* 确保标题占据整个工具栏的宽度 */
+  }

src/app/tab2/tab2.page.ts

@@ -1,12 +1,54 @@
-import { Component } from '@angular/core';
+// src/app/tab2/tab2.page.ts
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'app-tab2',
-  templateUrl: 'tab2.page.html',
-  styleUrls: ['tab2.page.scss']
+  templateUrl: './tab2.page.html',
+  styleUrls: ['./tab2.page.scss'],
 })
-export class Tab2Page {
+export class Tab2Page implements OnInit {
+  messages: any[] = [];
+  userInput: string = '';
+  isLoading: boolean = false;
 
-  constructor() {}
+  constructor(private http: HttpClient) {}
 
-}
+  ngOnInit() {
+    // 页面加载时自动发送一条随机的欢迎消息
+    const welcomeMessages = [
+      '我是您的AI医生小爱，有什么可以帮到您的吗？',
+      '今天天气不错，可以出去散步哦。',
+      '您好！我是您的健康助手，有什么我可以帮助您的吗？',
+      '很高兴见到您！请告诉我您需要什么帮助。',
+      '欢迎您！请问有什么健康方面的问题需要咨询吗？'
+    ];
+
+    const randomMessage = welcomeMessages[Math.floor(Math.random() * welcomeMessages.length)];
+    this.sendMessageFromAI(randomMessage);
+  }
+
+  sendMessage() {
+    if (this.userInput.trim() === '') return;
+
+    this.messages.push({ text: this.userInput, sender: 'user' });
+    this.isLoading = true;
+    this.userInput = '';
+
+    // 发送请求到 AI 服务
+    this.http.post('https://your-ai-service-endpoint.com/api/chat', { message: this.userInput })
+      .subscribe((response: any) => {
+        this.messages.push({ text: response.message, sender: 'ai' });
+        this.isLoading = false;
+      }, (error) => {
+        console.error('Error:', error);
+        this.messages.push({ text: '抱歉，系统出现错误，请稍后再试。', sender: 'ai' });
+        this.isLoading = false;
+      });
+  }
+
+  // 定义 sendMessageFromAI 方法
+  sendMessageFromAI(message: string) {
+    this.messages.push({ text: message, sender: 'ai' });
+  }
+}

src/app/tab3/tab3.page.html

@@ -1,17 +1,80 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 3
-    </ion-title>
+<!-- src/app/tab3/tab3.page.html -->
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-title class="center-title">个人中心</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 3</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content padding>
+  <!-- 用户信息区 -->
+  <div class="user-info" (click)="editProfile()">
+    <ion-avatar>
+      <img [src]="userAvatar" alt="用户头像">
+    </ion-avatar>
+    <div class="user-details">
+      <h2>{{ username }}</h2>
+      <p>{{ userType }}</p>
+    </div>
+  </div>
 
-  <app-explore-container name="Tab 3 page"></app-explore-container>
-</ion-content>
+  <!-- 主要功能区域 -->
+  <ion-list>
+    <!-- 健康档案区 -->
+    <ion-item>
+      <ion-label>健康档案</ion-label>
+      <ion-button fill="outline" size="small" (click)="viewHealthRecord()">查看/编辑</ion-button>
+    </ion-item>
+
+    <!-- 医疗服务区 -->
+    <ion-item>
+      <ion-label>医疗服务</ion-label>
+      <ion-button fill="outline" size="small" (click)="viewMedicalServices()">查看</ion-button>
+    </ion-item>
+
+    <!-- 积分与优惠区 -->
+    <ion-item>
+      <ion-label>积分与优惠</ion-label>
+      <ion-button fill="outline" size="small" (click)="viewPointsAndCoupons()">查看</ion-button>
+    </ion-item>
+
+    <!-- 订单管理区 -->
+    <ion-item>
+      <ion-label>订单管理</ion-label>
+      <ion-button fill="outline" size="small" (click)="viewOrders()">查看</ion-button>
+    </ion-item>
+  </ion-list>
+
+  <!-- 活动与推广区 -->
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>最新活动</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <p>这里显示最新的医疗健康活动或优惠信息。</p>
+      <ion-button expand="full" (click)="viewPromotions()">查看详情</ion-button>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 底部功能区域 -->
+  <ion-list>
+    <ion-item button (click)="goToFaq()">
+      <ion-icon name="help-circle" slot="start"></ion-icon>
+      <ion-label>常见问题</ion-label>
+    </ion-item>
+
+    <ion-item button (click)="goToFeedback()">
+      <ion-icon name="chatbox-ellipses" slot="start"></ion-icon>
+      <ion-label>意见反馈</ion-label>
+    </ion-item>
+
+    <ion-item button (click)="inviteFriends()">
+      <ion-icon name="people" slot="start"></ion-icon>
+      <ion-label>邀请好友</ion-label>
+    </ion-item>
+
+    <ion-item button (click)="manageFamily()">
+      <ion-icon name="people-circle" slot="start"></ion-icon>
+      <ion-label>家人管理</ion-label>
+    </ion-item>
+  </ion-list>
+</ion-content>

src/app/tab3/tab3.page.scss

@@ -0,0 +1,55 @@
+/* src/app/tab3/tab3.page.scss */
+ion-header ion-toolbar {
+    --background: var(--ion-color-primary);
+    --color: var(--ion-color-light);
+  }
+  
+  ion-content {
+    --padding-top: 0;
+    --padding-bottom: 0;
+  }
+  
+  .user-info {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    background-color: #f8f8f8;
+    border-bottom: 1px solid #ddd;
+  
+    & .user-details {
+      margin-left: 16px;
+    }
+  
+    & h2 {
+      font-size: 18px;
+      margin: 0;
+      color: #333;
+    }
+  
+    & p {
+      font-size: 14px;
+      margin: 0;
+      color: #777;
+    }
+  }
+  
+  ion-list {
+    margin: 0;
+    padding: 0;
+  }
+  
+  ion-item {
+    --padding-start: 16px;
+    --padding-end: 16px;
+  }
+  
+  ion-card {
+    margin: 16px 0;
+  }
+  
+  ion-button {
+    margin: 20px 16px;
+  }
+  .center-title{
+    text-align: center;
+  }

src/app/tab3/tab3.page.ts

@@ -1,4 +1,6 @@
+// src/app/tab3/tab3.page.ts
 import { Component } from '@angular/core';
+import { NavController } from '@ionic/angular';
 
 @Component({
   selector: 'app-tab3',
@@ -6,7 +8,79 @@ import { Component } from '@angular/core';
   styleUrls: ['tab3.page.scss']
 })
 export class Tab3Page {
+  username: string = '金以纯'; // 示例用户名
+  userAvatar: string = '../../assets/images/user-avatar.png'; // 示例头像URL
+  userType: string = '普通用户'; // 示例用户类型
 
-  constructor() {}
+  constructor(private navCtrl: NavController) {}
 
-}
+  editProfile() {
+    // 处理编辑用户资料的逻辑
+    console.log('编辑用户资料');
+    // 可以导航到编辑资料页面
+    this.navCtrl.navigateForward('/edit-profile');
+  }
+
+  viewHealthRecord() {
+    // 处理查看/编辑健康档案的逻辑
+    console.log('查看/编辑健康档案');
+    // 可以导航到健康档案页面
+    this.navCtrl.navigateForward('/health-record');
+  }
+
+  viewMedicalServices() {
+    // 处理查看医疗服务的逻辑
+    console.log('查看医疗服务');
+    // 可以导航到医疗服务页面
+    this.navCtrl.navigateForward('/medical-services');
+  }
+
+  viewPointsAndCoupons() {
+    // 处理查看积分与优惠的逻辑
+    console.log('查看积分与优惠');
+    // 可以导航到积分与优惠页面
+    this.navCtrl.navigateForward('/points-and-coupons');
+  }
+
+  viewOrders() {
+    // 处理查看订单管理的逻辑
+    console.log('查看订单管理');
+    // 可以导航到订单管理页面
+    this.navCtrl.navigateForward('/orders');
+  }
+
+  viewPromotions() {
+    // 处理查看活动与推广的逻辑
+    console.log('查看详情');
+    // 可以导航到活动与推广页面
+    this.navCtrl.navigateForward('/promotions');
+  }
+
+  goToFaq() {
+    // 处理跳转到常见问题页面的逻辑
+    console.log('跳转到常见问题页面');
+    // 可以导航到常见问题页面
+    this.navCtrl.navigateForward('/faq');
+  }
+
+  goToFeedback() {
+    // 处理跳转到意见反馈页面的逻辑
+    console.log('跳转到意见反馈页面');
+    // 可以导航到意见反馈页面
+    this.navCtrl.navigateForward('/feedback');
+  }
+
+  inviteFriends() {
+    // 处理邀请好友的逻辑
+    console.log('邀请好友');
+    // 可以弹出分享对话框或导航到邀请好友页面
+    this.navCtrl.navigateForward('/invite-friends');
+  }
+
+  manageFamily() {
+    // 处理家人管理的逻辑
+    console.log('家人管理');
+    // 可以导航到家人管理页面
+    this.navCtrl.navigateForward('/family-management');
+  }
+}

src/app/tabs/tabs.page.html

@@ -2,18 +2,18 @@
 
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <ion-icon aria-hidden="true" name="triangle"></ion-icon>
-      <ion-label>Tab 1</ion-label>
+      <ion-icon aria-hidden="true" name="home"></ion-icon>
+      <ion-label>首页</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab2" href="/tabs/tab2">
-      <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
-      <ion-label>Tab 2</ion-label>
+      <ion-icon aria-hidden="true" name="medkit"></ion-icon>
+      <ion-label>AI问诊</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab3" href="/tabs/tab3">
-      <ion-icon aria-hidden="true" name="square"></ion-icon>
-      <ion-label>Tab 3</ion-label>
+      <ion-icon aria-hidden="true" name="person-circle"></ion-icon>
+      <ion-label>我的</ion-label>
     </ion-tab-button>
   </ion-tab-bar>