提交内容的备注信息

src/app/annual-checkup/annual-checkup-routing.module.ts

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

src/app/annual-checkup/annual-checkup.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AnnualCheckupPageRoutingModule } from './annual-checkup-routing.module';
+
+import { AnnualCheckupPage } from './annual-checkup.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    AnnualCheckupPageRoutingModule
+  ],
+  declarations: [AnnualCheckupPage]
+})
+export class AnnualCheckupPageModule {}

src/app/annual-checkup/annual-checkup.page.html

@@ -0,0 +1,45 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/health-record"></ion-back-button>
+    </ion-buttons>
+    <ion-title>{{ checkupData.title }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+  <!-- 体检基本信息 -->
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>基本信息</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <p><strong>日期:</strong> {{ checkupData.date | date: 'yyyy-MM-dd' }}</p>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 体检结果 -->
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>体检结果</ion-card-title>
+    </ion-card-header>
+    <ion-list>
+      <ion-item *ngFor="let result of checkupData.results">
+        <ion-label>
+          <h2>{{ result.name }}</h2>
+          <p>{{ result.value }} - {{ result.status }}</p>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-card>
+
+  <!-- 备注 -->
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>备注</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <p>{{ checkupData.notes }}</p>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

src/app/annual-checkup/annual-checkup.page.scss

@@ -0,0 +1,88 @@
+/* 基本样式 */
+ion-content {
+    --background: #f9f9f9; /* 背景颜色 */
+  }
+  
+  /* 卡片样式 */
+  ion-card {
+    margin: 24px;
+    border-radius: 16px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    background-color: white;
+    overflow: hidden;
+  }
+  
+  ion-card-header {
+    background: linear-gradient(135deg, #007bff, #00c6ff); /* 渐变背景色 */
+    color: white;
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+    padding: 16px;
+  }
+  
+  ion-card-title {
+    font-size: 1.4rem;
+    font-weight: bold;
+    margin: 0;
+  }
+  
+  ion-card-subtitle {
+    font-size: 1rem;
+    opacity: 0.8;
+  }
+  
+  ion-card-content {
+    padding: 24px;
+  }
+  
+  /* 列表项样式 */
+  ion-list {
+    --background: transparent;
+  }
+  
+  ion-item {
+    --background: white;
+    --padding-start: 24px;
+    --padding-end: 24px;
+    --min-height: 70px;
+    border-bottom: 1px solid #e0e0e0;
+    transition: background 0.3s ease;
+  }
+  
+  ion-item:last-child {
+    border-bottom: none;
+  }
+  
+  ion-item:hover {
+    --background: #f0f0f0; /* 鼠标悬停时的背景色 */
+  }
+  
+  /* 标题样式 */
+  p strong {
+    font-weight: bold;
+    color: #333; /* 更深的文字颜色 */
+  }
+  
+  /* 文字样式 */
+  p {
+    font-size: 1rem;
+    line-height: 1.5;
+    color: #555; /* 较浅的文字颜色 */
+  }
+  
+  /* 按钮样式 */
+  ion-button {
+    --background: #007bff;
+    --color: white;
+    --border-radius: 16px;
+    --padding-start: 24px;
+    --padding-end: 24px;
+    --padding-top: 12px;
+    --padding-bottom: 12px;
+    --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: background 0.3s ease;
+  }
+  
+  ion-button:hover {
+    --background: #0056b3; /* 鼠标悬停时的背景色 */
+  }

src/app/annual-checkup/annual-checkup.page.spec.ts

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

src/app/annual-checkup/annual-checkup.page.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-annual-checkup',
+  templateUrl: './annual-checkup.page.html',
+  styleUrls: ['./annual-checkup.page.scss'],
+})
+export class AnnualCheckupPage implements OnInit {
+  checkupData: any;
+
+  constructor(private route: ActivatedRoute) {}
+
+  ngOnInit() {
+    // 假设从服务中获取数据
+    this.checkupData = {
+      title: '年度体检',
+      date: new Date(),
+      results: [
+        { name: '血压', value: '120/80 mmHg', status: '正常' },
+        { name: '血糖', value: '5.6 mmol/L', status: '正常' },
+        { name: '胆固醇', value: '4.5 mmol/L', status: '正常' },
+        { name: '体重', value: '70 kg', status: '正常' },
+        { name: '身高', value: '175 cm', status: '正常' }
+      ],
+      notes: '总体健康状况良好，建议继续保持良好的生活习惯。'
+    };
+  }
+}

src/app/app-routing.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 
-
 const routes: Routes = [
   {
     path: '',
@@ -13,15 +12,43 @@ const routes: Routes = [
   },
   {
     path: 'consultation',
-    loadChildren: () => import('./consultation/consultation.module').then( m => m.ConsultationPageModule)
+    loadChildren: () => import('./consultation/consultation.module').then(m => m.ConsultationPageModule)
   },
   {
     path: 'details',
-    loadChildren: () => import('./details/details.module').then( m => m.DetailsPageModule)
+    loadChildren: () => import('./details/details.module').then(m => m.DetailsPageModule)
   },
   {
     path: 'edit-profile',
-    loadChildren: () => import('./edit-profile/edit-profile.module').then( m => m.EditProfilePageModule)
+    loadChildren: () => import('./edit-profile/edit-profile.module').then(m => m.EditProfilePageModule)
+  },
+  {
+    path: 'health-record',
+    loadChildren: () => import('./health-record/health-record.module').then(m => m.HealthRecordPageModule)
+  },
+  {
+    path: 'annual-checkup/:index', // 添加 :index 参数
+    loadChildren: () => import('./annual-checkup/annual-checkup.module').then(m => m.AnnualCheckupPageModule)
+  },
+  {
+    path: 'eye-exam/:index', // 添加 :index 参数
+    loadChildren: () => import('./eye-exam/eye-exam.module').then(m => m.EyeExamPageModule)
+  },
+  {
+    path: 'faq',
+    loadChildren: () => import('./faq/faq.module').then( m => m.FaqPageModule)
+  },
+  {
+    path: 'feedback',
+    loadChildren: () => import('./feedback/feedback.module').then( m => m.FeedbackPageModule)
+  },
+  {
+    path: 'invite-friends',
+    loadChildren: () => import('./invite-friends/invite-friends.module').then( m => m.InviteFriendsPageModule)
+  },
+  {
+    path: 'manage-family',
+    loadChildren: () => import('./manage-family/manage-family.module').then( m => m.ManageFamilyPageModule)
   }
 ];
 

src/app/eye-exam/eye-exam-routing.module.ts

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

src/app/eye-exam/eye-exam.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { EyeExamPageRoutingModule } from './eye-exam-routing.module';
+
+import { EyeExamPage } from './eye-exam.page'; // 确保这里正确导入了 EyeExamPage
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    EyeExamPageRoutingModule
+  ],
+  declarations: [EyeExamPage] // 确保这里正确声明了 EyeExamPage
+})
+export class EyeExamPageModule {}

src/app/eye-exam/eye-exam.page.html

@@ -0,0 +1,50 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/health-record"></ion-back-button>
+    </ion-buttons>
+    <ion-title>{{ report.title }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>基本信息</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <p><strong>日期:</strong> {{ report.date | date: 'yyyy-MM-dd' }}</p>
+      <p><strong>详情:</strong> {{ report.details }}</p>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 体检报告详细信息 -->
+  <ion-card *ngIf="report.details">
+    <ion-card-header>
+      <ion-card-title>详细信息</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <p [innerHTML]="report.details"></p>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 体检报告图片或附件 -->
+  <ion-card *ngIf="report.attachments && report.attachments.length > 0">
+    <ion-card-header>
+      <ion-card-title>附件</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-grid>
+        <ion-row>
+          <ion-col size="6" *ngFor="let attachment of report.attachments">
+            <img [src]="attachment.url" alt="Attachment" style="width: 100%; height: auto;"/>
+            <p>{{ attachment.name }}</p>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 操作按钮 -->
+  <ion-button expand="block" (click)="goBack()">返回个人中心</ion-button>
+</ion-content>

src/app/eye-exam/eye-exam.page.scss

@@ -0,0 +1,88 @@
+/* 基本样式 */
+ion-content {
+    --background: #f9f9f9; /* 背景颜色 */
+  }
+  
+  /* 卡片样式 */
+  ion-card {
+    margin: 24px;
+    border-radius: 16px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    background-color: white;
+    overflow: hidden;
+  }
+  
+  ion-card-header {
+    background: linear-gradient(135deg, #007bff, #00c6ff); /* 渐变背景色 */
+    color: white;
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+    padding: 16px;
+  }
+  
+  ion-card-title {
+    font-size: 1.4rem;
+    font-weight: bold;
+    margin: 0;
+  }
+  
+  ion-card-subtitle {
+    font-size: 1rem;
+    opacity: 0.8;
+  }
+  
+  ion-card-content {
+    padding: 24px;
+  }
+  
+  /* 列表项样式 */
+  ion-list {
+    --background: transparent;
+  }
+  
+  ion-item {
+    --background: white;
+    --padding-start: 24px;
+    --padding-end: 24px;
+    --min-height: 70px;
+    border-bottom: 1px solid #e0e0e0;
+    transition: background 0.3s ease;
+  }
+  
+  ion-item:last-child {
+    border-bottom: none;
+  }
+  
+  ion-item:hover {
+    --background: #f0f0f0; /* 鼠标悬停时的背景色 */
+  }
+  
+  /* 标题样式 */
+  p strong {
+    font-weight: bold;
+    color: #333; /* 更深的文字颜色 */
+  }
+  
+  /* 文字样式 */
+  p {
+    font-size: 1rem;
+    line-height: 1.5;
+    color: #555; /* 较浅的文字颜色 */
+  }
+  
+  /* 按钮样式 */
+  ion-button {
+    --background: #007bff;
+    --color: white;
+    --border-radius: 16px;
+    --padding-start: 24px;
+    --padding-end: 24px;
+    --padding-top: 12px;
+    --padding-bottom: 12px;
+    --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: background 0.3s ease;
+  }
+  
+  ion-button:hover {
+    --background: #0056b3; /* 鼠标悬停时的背景色 */
+  }

src/app/eye-exam/eye-exam.page.spec.ts

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

src/app/eye-exam/eye-exam.page.ts

@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { NavController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-eye-exam',
+  templateUrl: './eye-exam.page.html', // 确保这里使用了正确的模板文件路径
+  styleUrls: ['./eye-exam.page.scss']
+})
+export class EyeExamPage implements OnInit {
+  index: number = -1; // 给 index 一个默认值
+  report: any;
+
+  constructor(private route: ActivatedRoute, private navController: NavController) {}
+
+  ngOnInit() {
+    const paramMap = this.route.snapshot.paramMap;
+    if (paramMap) {
+      const indexParam = paramMap.get('index');
+      if (indexParam !== null) {
+        this.index = +indexParam;
+        // 假设你有一个方法来获取报告数据
+        this.report = this.getReportData(this.index);
+      } else {
+        console.error('Invalid index parameter.');
+      }
+    } else {
+      console.error('Route snapshot paramMap is null or undefined.');
+    }
+  }
+
+  getReportData(index: number): any {
+    // 这里模拟从服务中获取报告数据
+    return {
+      title: '眼科检查报告',
+      date: new Date(),
+      details: '<p>视力良好，无异常。</p><p>建议定期复查。</p>',
+      attachments: [
+        { url: 'https://example.com/attachment1.jpg', name: '附件1' },
+        { url: 'https://example.com/attachment2.jpg', name: '附件2' }
+      ]
+    };
+  }
+
+  goBack() {
+    this.navController.navigateBack('/tabs/tab3'); // 返回到 tab3
+  }
+}

src/app/faq/faq-routing.module.ts

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

src/app/faq/faq.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { FaqPageRoutingModule } from './faq-routing.module';
+
+import { FaqPage } from './faq.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    FaqPageRoutingModule
+  ],
+  declarations: [FaqPage]
+})
+export class FaqPageModule {}

src/app/faq/faq.page.html

@@ -0,0 +1,52 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tab3"></ion-back-button>
+    </ion-buttons>
+    <ion-title>常见问题</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list>
+    <ion-accordion-group>
+      <ion-accordion value="first">
+        <ion-item slot="header" color="light">
+          <ion-label>问题 1: 如何注册账户？</ion-label>
+        </ion-item>
+        <div class="ion-padding" slot="content">
+          <p>要注册账户，请点击应用首页的“注册”按钮，然后按照提示填写相关信息并提交。</p>
+        </div>
+      </ion-accordion>
+
+      <ion-accordion value="second">
+        <ion-item slot="header" color="light">
+          <ion-label>问题 2: 如何找回密码？</ion-label>
+        </ion-item>
+        <div class="ion-padding" slot="content">
+          <p>如果您忘记了密码，可以在登录页面点击“忘记密码？”链接，然后按照提示操作来重置您的密码。</p>
+        </div>
+      </ion-accordion>
+
+      <ion-accordion value="third">
+        <ion-item slot="header" color="light">
+          <ion-label>问题 3: 如何联系客服？</ion-label>
+        </ion-item>
+        <div class="ion-padding" slot="content">
+          <p>您可以通过应用内的“联系我们”功能或发送电子邮件至 support&#64;example.com 联系我们的客服团队。</p>
+        </div>
+      </ion-accordion>
+
+      <ion-accordion value="fourth">
+        <ion-item slot="header" color="light">
+          <ion-label>问题 4: 如何修改个人信息？</ion-label>
+        </ion-item>
+        <div class="ion-padding" slot="content">
+          <p>您可以在应用的设置页面找到“个人信息”选项，点击后即可编辑和保存您的个人信息。</p>
+        </div>
+      </ion-accordion>
+
+      <!-- 添加更多问题 -->
+    </ion-accordion-group>
+  </ion-list>
+</ion-content>

src/app/faq/faq.page.scss

@@ -0,0 +1,15 @@
+ion-accordion {
+    --background: var(--ion-item-background, var(--ion-background-color, #fff));
+  }
+  
+  ion-accordion[expanded] {
+    --background: var(--ion-item-background, var(--ion-background-color, #f0f0f0));
+  }
+  
+  ion-accordion ion-item[slot="header"] {
+    --color: var(--ion-text-color, #000);
+  }
+  
+  ion-accordion[expanded] ion-item[slot="header"] {
+    --color: var(--ion-color-primary, #3880ff);
+  }

src/app/faq/faq.page.spec.ts

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

src/app/faq/faq.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-faq',
+  templateUrl: './faq.page.html',
+  styleUrls: ['./faq.page.scss'],
+})
+export class FaqPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/feedback/feedback-routing.module.ts

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

src/app/feedback/feedback.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+import { RouterModule } from '@angular/router';
+
+import { FeedbackPage } from './feedback.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    IonicModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: FeedbackPage
+      }
+    ])
+  ],
+  declarations: [FeedbackPage]
+})
+export class FeedbackPageModule {}

src/app/feedback/feedback.page.html

@@ -0,0 +1,29 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/home"></ion-back-button>
+    </ion-buttons>
+    <ion-title>意见反馈</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <form [formGroup]="feedbackForm" (ngSubmit)="submitFeedback()">
+    <ion-list>
+      <ion-item>
+        <ion-label position="floating">您的姓名</ion-label>
+        <ion-input formControlName="name" 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-textarea formControlName="message" rows="6" required></ion-textarea>
+      </ion-item>
+    </ion-list>
+
+    <ion-button expand="block" type="submit" [disabled]="!feedbackForm.valid">提交</ion-button>
+  </form>
+</ion-content>

src/app/feedback/feedback.page.scss

@@ -0,0 +1,19 @@
+ion-header {
+    --background: var(--ion-color-primary);
+  }
+  
+  ion-toolbar {
+    --color: var(--ion-color-light);
+  }
+  
+  ion-content {
+    padding: 20px;
+  }
+  
+  ion-item {
+    margin-bottom: 10px;
+  }
+  
+  ion-button {
+    margin-top: 20px;
+  }

src/app/feedback/feedback.page.spec.ts

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

src/app/feedback/feedback.page.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AlertController, NavController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-feedback',
+  templateUrl: './feedback.page.html',
+  styleUrls: ['./feedback.page.scss'],
+})
+export class FeedbackPage implements OnInit {
+  feedbackForm: FormGroup = new FormGroup({});
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private alertController: AlertController,
+    private navCtrl: NavController
+  ) {}
+
+  ngOnInit() {
+    this.feedbackForm = this.formBuilder.group({
+      name: ['', [Validators.required]],
+      email: ['', [Validators.required, Validators.email]],
+      message: ['', [Validators.required]]
+    });
+  }
+
+  async submitFeedback() {
+    if (this.feedbackForm.valid) {
+      const { name, email, message } = this.feedbackForm.value;
+
+      // 在这里处理反馈提交的逻辑
+      // 例如，发送到服务器或显示成功消息
+
+      // 显示成功消息
+      const alert = await this.alertController.create({
+        header: '提交成功',
+        message: '感谢您的反馈！我们会尽快处理。',
+        buttons: ['确定']
+      });
+
+      await alert.present();
+
+      // 清空表单
+      this.feedbackForm.reset();
+
+      // 返回上一个页面
+      this.navCtrl.back();
+    }
+  }
+}

src/app/health-record/health-record-routing.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { HealthRecordPage } from './health-record.page';
+
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HealthRecordPage
+  },
+  {
+    path: 'annual-checkup',
+    loadChildren: () => import('../annual-checkup/annual-checkup.module').then( m => m.AnnualCheckupPageModule)
+  }
+
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class HealthRecordPageRoutingModule {}

src/app/health-record/health-record.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+
+import { HealthRecordPage } from './health-record.page';
+import { GenderPipe } from '../pipes/gender.pipe'; // 确保路径正确
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: HealthRecordPage
+      }
+    ])
+  ],
+  declarations: [HealthRecordPage, GenderPipe] // 声明管道
+})
+export class HealthRecordPageModule {}

src/app/health-record/health-record.page.html

@@ -0,0 +1,43 @@
+<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>
+  <!-- 基本信息 -->
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>基本信息</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <p><strong>姓名:</strong> {{ healthRecord.name }}</p>
+      <p><strong>性别:</strong> {{ healthRecord.gender | genderPipe }}</p>
+      <p><strong>年龄:</strong> {{ healthRecord.age }}</p>
+      <p><strong>联系方式:</strong> {{ healthRecord.contact }}</p>
+      <p><strong>病史:</strong> {{ healthRecord.medicalHistory || '无' }}</p>
+      <ion-button expand="block" (click)="editBasicInfo()">编辑基本信息</ion-button>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 体检报告列表 -->
+  <ion-card *ngIf="healthRecord.reports && healthRecord.reports.length > 0">
+    <ion-card-header>
+      <ion-card-title>体检报告</ion-card-title>
+    </ion-card-header>
+    <ion-list>
+      <ion-item *ngFor="let report of healthRecord.reports; let i = index" button (click)="viewReport(i)">
+        <ion-label>
+          <h2>{{ report.title }}</h2>
+          <p>{{ report.date | date: 'yyyy-MM-dd' }}</p>
+        </ion-label>
+        <ion-icon name="arrow-forward" slot="end"></ion-icon>
+      </ion-item>
+    </ion-list>
+  </ion-card>
+
+  <ion-button expand="block" (click)="addNewReport()">添加新体检报告</ion-button>
+</ion-content>

src/app/health-record/health-record.page.scss

@@ -0,0 +1,64 @@
+/* src/app/health-record/health-record.page.scss */
+
+/* 基本样式 */
+ion-content {
+    --background: #f4f4f4; /* 背景颜色 */
+  }
+  
+  /* 卡片样式 */
+  ion-card {
+    margin: 16px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    background-color: white;
+  }
+  
+  ion-card-header {
+    background-color: #007bff; /* 主题色 */
+    color: white;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+  
+  ion-card-title {
+    font-size: 1.2rem;
+    font-weight: bold;
+  }
+  
+  ion-card-content {
+    padding: 16px;
+  }
+  
+  /* 按钮样式 */
+  .custom-button {
+    --background: #007bff; /* 主题色 */
+    --color: white;
+    --border-radius: 8px;
+    --padding-start: 16px;
+    --padding-end: 16px;
+    --height: 50px;
+    --font-weight: 500;
+    margin: 16px 0;
+  }
+  
+  /* 列表项样式 */
+  ion-list {
+    --background: transparent;
+  }
+  
+  ion-item {
+    --background: white;
+    --padding-start: 16px;
+    --padding-end: 16px;
+    --min-height: 70px;
+    border-bottom: 1px solid #e0e0e0;
+  }
+  
+  ion-item:last-child {
+    border-bottom: none;
+  }
+  
+  /* 标题样式 */
+  p strong {
+    font-weight: bold;
+  }

src/app/health-record/health-record.page.spec.ts

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

src/app/health-record/health-record.page.ts

@@ -0,0 +1,76 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NavController } from '@ionic/angular';
+
+// 定义接口
+interface HealthReport {
+  title: string;
+  date: Date;
+  details: string;
+  type: 'annual' | 'eye'; // 添加类型字段
+}
+
+@Component({
+  selector: 'app-health-record',
+  templateUrl: './health-record.page.html',
+  styleUrls: ['./health-record.page.scss'],
+})
+export class HealthRecordPage implements OnInit {
+  healthRecord = {
+    name: '',
+    gender: '',
+    age: null as number | null,
+    contact: '',
+    medicalHistory: '',
+    reports: [] as HealthReport[] // 使用 HealthReport 接口定义 reports 数组的类型
+  };
+
+  constructor(private route: ActivatedRoute, private router: Router, private navCtrl: NavController) {}
+
+  ngOnInit() {
+    // 初始化健康档案数据
+    this.loadHealthRecord();
+  }
+
+  loadHealthRecord() {
+    // 这里可以加载用户健康档案数据
+    // 例如从服务中获取或从本地存储读取
+    // 示例数据
+    this.healthRecord = {
+      name: '张三',
+      gender: 'male',
+      age: 30,
+      contact: '12345678901',
+      medicalHistory: '高血压',
+      reports: [
+        { title: '年度体检', date: new Date(), details: '血压正常，血糖略高', type: 'annual' },
+        { title: '眼科检查', date: new Date('2024-01-01'), details: '视力良好，无异常', type: 'eye' }
+      ] as HealthReport[] // 显式指定类型
+    };
+  }
+
+  editBasicInfo() {
+    // 导航到编辑基本信息页面
+    this.navCtrl.navigateForward('/edit-profile');
+  }
+
+  addNewReport() {
+    // 导航到添加新体检报告页面
+    this.navCtrl.navigateForward('/add-checkup');
+  }
+
+  viewReport(index: number) {
+    // 查看具体的体检报告
+    const report = this.healthRecord.reports[index];
+    console.log('Viewing report:', report);
+
+    // 根据报告类型导航到相应的页面
+    if (report.type === 'annual') {
+      this.navCtrl.navigateForward(`/annual-checkup/${index}`);
+    } else if (report.type === 'eye') {
+      this.navCtrl.navigateForward(`/eye-exam/${index}`);
+    } else {
+      console.error('Unknown report type:', report.type);
+    }
+  }
+}

src/app/invite-friends/invite-friends-routing.module.ts

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

src/app/invite-friends/invite-friends.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { InviteFriendsPageRoutingModule } from './invite-friends-routing.module';
+
+import { InviteFriendsPage } from './invite-friends.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    InviteFriendsPageRoutingModule
+  ],
+  declarations: [InviteFriendsPage]
+})
+export class InviteFriendsPageModule {}

src/app/invite-friends/invite-friends.page.html

@@ -0,0 +1,13 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>invite-friends</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">invite-friends</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

src/app/invite-friends/invite-friends.page.spec.ts

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

src/app/invite-friends/invite-friends.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-invite-friends',
+  templateUrl: './invite-friends.page.html',
+  styleUrls: ['./invite-friends.page.scss'],
+})
+export class InviteFriendsPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/manage-family/manage-family-routing.module.ts

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

src/app/manage-family/manage-family.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ManageFamilyPageRoutingModule } from './manage-family-routing.module';
+
+import { ManageFamilyPage } from './manage-family.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ManageFamilyPageRoutingModule
+  ],
+  declarations: [ManageFamilyPage]
+})
+export class ManageFamilyPageModule {}

src/app/manage-family/manage-family.page.html

@@ -0,0 +1,13 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>manage-family</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">manage-family</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

src/app/manage-family/manage-family.page.spec.ts

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

src/app/manage-family/manage-family.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-manage-family',
+  templateUrl: './manage-family.page.html',
+  styleUrls: ['./manage-family.page.scss'],
+})
+export class ManageFamilyPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pipes/gender.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { GenderPipe } from './gender.pipe';
+
+describe('GenderPipe', () => {
+  it('create an instance', () => {
+    const pipe = new GenderPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/pipes/gender.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'genderPipe'
+})
+export class GenderPipe implements PipeTransform {
+  transform(value: string): string {
+    switch (value) {
+      case 'male':
+        return '男';
+      case 'female':
+        return '女';
+      default:
+        return '未知';
+    }
+  }
+}

src/app/tab3/tab3.page.html

@@ -22,7 +22,7 @@
     <!-- 健康档案区 -->
     <ion-item>
       <ion-label>健康档案</ion-label>
-      <ion-button fill="outline" size="small" (click)="viewHealthRecord()">查看/编辑</ion-button>
+      <ion-button fill="outline" size="small" (click)="viewHealthRecord()">查看</ion-button>
     </ion-item>
 
     <!-- 医疗服务区 -->