web3-202226701052/src/app/tab1/tab1.page.html

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-avatar (click)="openLoginModal()">
        <img [src]="userAvatar" alt="User Avatar" />
      </ion-avatar>
      <ion-button fill="clear" (click)="openLoginModal()">
        <ion-label>登录/注册</ion-label>
      </ion-button>
    </ion-buttons>
    <ion-title>
      1分钟了解健康服务
    </ion-title>
    <ion-buttons slot="end">
      <ion-button fill="clear" routerLink="/appointment">
        <ion-icon name="medical"></ion-icon>
        <ion-label>预约服务</ion-label>
        <ion-icon name="chevron-forward-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<!-- 登录/注册模态框 -->
<ion-modal [isOpen]="isLoginModalOpen" (ionDidDismiss)="onLoginModalDismissed($event)">
  <ng-template>
    <ion-header>
      <ion-toolbar>
        <ion-title>登录/注册</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="closeLoginModal()" fill="clear">关闭</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <form #loginForm="ngForm" (ngSubmit)="onLoginFormSubmit(loginForm.value)" novalidate>
        <ion-item>
          <ion-label position="floating">用户名</ion-label>
          <ion-input type="text" [(ngModel)]="user.username" name="username" required></ion-input>
          <ion-text *ngIf="user.username.length > 0 && user.username.length < 3" color="danger" style="position: absolute; top: 50%; right: 16px; transform: translateY(-50%); opacity: 0.7;">
            还差 {{ 3 - user.username.length }} 位
          </ion-text>
        </ion-item>
        <ion-item>
          <ion-label position="floating">密码</ion-label>
          <ion-input type="password" [(ngModel)]="user.password" name="password" required></ion-input>
          <ion-text *ngIf="user.password.length > 0 && user.password.length < 6" color="danger" style="position: absolute; top: 50%; right: 16px; transform: translateY(-50%); opacity: 0.7;">
            还差 {{ 6 - user.password.length }} 位
          </ion-text>
        </ion-item>
        <ion-row>
          <ion-col>
            <ion-button expand="block" type="submit" [disabled]="!loginForm.form.valid">登录</ion-button>
          </ion-col>
          <ion-col>
            <ion-button expand="block" (click)="registerUser()">注册</ion-button>
          </ion-col>
        </ion-row>
      </form>
      <div *ngIf="errorMessage" class="error-message">{{ errorMessage }}</div>
    </ion-content>
  </ng-template>
</ion-modal>


<ion-content>

  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="chevron-down-circle" pullingText="下拉刷新" refreshingSpinner="circles" refreshingText="正在刷新..."></ion-refresher-content>
  </ion-refresher>
  
  <div class="health-banner">
    <div class="banner-content">
      <div class="banner-header">
        获取健康礼包，开启健康生活
      </div>
      <div class="banner-body">
        <div class="avatar-stack">
          <img src="../../assets/images/doctor.png" alt="Doctor 1" class="avatar" />
          <img src="../../assets/images/doctor.png" alt="Doctor 2" class="avatar" />
          <img src="../../assets/images/doctor.png" alt="Doctor 3" class="avatar" />
        </div>
        <div class="expert-info">
          10位专家在线等待咨询
        </div>
      </div>
      <div class="banner-footer">
        <ion-button expand="block" color="danger" (click)="onConsultNow()">立即咨询</ion-button>
      </div>
      <div class="banner-bottom">
        <div class="bottom-content">
          <div class="left-content">
            昨天 下午3点 张医生 正在提供咨询服务
          </div>
          <div class="right-content">
            <ion-button fill="clear" color="light" (click)="onLearnMore()">点击了解更多</ion-button>
          </div>
        </div>
      </div>
    </div>
  </div>

<!-- 推荐医生区域 -->
<div class="recommended-doctors">
  <div class="header">
    <div class="title">今日推荐医生</div>
    <div class="subtitle">每日更新</div>
  </div>
  <div class="scroll-container" id="carousel" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" (touchend)="onTouchEnd($event)" [ngStyle]="{ transform: 'translateX(' + currentTranslate + 'px)' }">
    <ng-container *ngFor="let doctor of doctors; let i = index">
      <div class="card">
        <div class="tag">专家</div>
        <img src="{{ doctor.avatar }}" alt="Doctor Avatar" class="avatar" />
        <div class="name">{{ doctor.name }}</div>
        <div class="specialty">{{ doctor.specialty }}</div>
        <ion-button expand="block" (click)="onlineConsultNow(doctor)">在线咨询</ion-button>
      </div>
    </ng-container>
  </div>
</div>


<!-- 功能区 -->
<div class="function-area">
  <!-- 第一行功能按钮 -->
  <div class="function-row">
    <div class="function-item" *ngFor="let item of functionItems1" (click)="navigateTo(item.route)">
      <div class="icon">
        <ion-icon [name]="item.icon"></ion-icon>
      </div>
      <div class="label">{{ item.label }}</div>
    </div>
  </div>

  <!-- 第二行功能按钮 -->
  <div class="function-row">
    <div class="function-item" *ngFor="let item of functionItems2" (click)="navigateTo(item.route)">
      <div class="icon">
        <ion-icon [name]="item.icon"></ion-icon>
      </div>
      <div class="label">{{ item.label }}</div>
    </div>
  </div>

</div>
</ion-content>