s202226701018/wisdom-app/src/app/page/inquiry-human/inquiry-human.component.html

<ion-header [translucent]="true">
  <ion-toolbar class="searchbar">
    <div>
      <ion-button (click)="backhome()" color="primary" slot="start">{{back}}</ion-button>
    </div>
    <ion-segment [(ngModel)]="selectedSegment" (ionChange)="segmentChanged($event)">
      <ion-segment-button *ngFor="let segment of segments" [value]="segment">
        {{segment}}
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div>
    <ion-card class="ioncard" *ngFor="let doctor of doctors" (click)="openDetailModal(doctor)">
      <ion-item lines="none">
        <ion-avatar slot="start">
          <img [src]="doctor.avatar" alt="医生头像">
        </ion-avatar>
        
        <ion-label>
          <div class="doctor-header">
            <h2>{{doctor.name}}</h2>
            <span>{{doctor.title}}</span>
            <span>{{doctor.department}}</span>
            <ion-badge color="primary">可开处方</ion-badge>
          </div>
          
          <div class="hospital-info">
            <span>{{doctor.hospital}}</span>
            <ion-badge color="success">{{doctor.hospitalLevel}}</ion-badge>
            <ion-badge color="warning">{{doctor.hospitalType}}</ion-badge>
          </div>
        </ion-label>
      </ion-item>
    
      <ion-item lines="none">
        <ion-text color="medium" class="expertise">
          {{doctor.expertise}}
        </ion-text>
      </ion-item>
    
      <ion-item lines="none">
        <div class="stats">
          <div>
            <ion-text color="warning">{{doctor.rating}}</ion-text>
            <ion-icon name="star" color="warning"></ion-icon>
          </div>
          <div>接诊量 {{doctor.consultations}}</div>
          <div>同行认可 {{doctor.recommendations}}</div>
        </div>
      </ion-item>
    
      <ion-item lines="none">
        <div class="consultation-types">
          <ion-button fill="outline">图文 ¥{{doctor.prices.text}}</ion-button>
          <ion-button fill="outline">电话 ¥{{doctor.prices.voice}}</ion-button>
          <ion-button fill="outline">视频 ¥{{doctor.prices.video}}</ion-button>
          <ion-button color="success">年度好医生</ion-button>
        </div>
      </ion-item>
    </ion-card>
  </div>

  <!-- 医生详情模态框 -->
  <ion-modal [isOpen]="isModalOpen" cssClass="bottom-modal">
    <ng-template>
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-button (click)="closeDetailModal()">关闭</ion-button>
          </ion-buttons>
          <ion-buttons slot="end">
            <ion-button>分享</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>

      <ion-content class="ion-padding">
        <div>
          <ion-card class="first">
            <div class="doctor-header1" style="display: flex; background-color: rgb(213, 205, 144); border-radius: 5px;">
              <div class="verification-badge" *ngIf="doctor.isVerified">
                <ion-icon name="checkmark-circle"></ion-icon>
                已通过实名认证
              </div>
              <div class="qualification-badge">
                执业资质已审核通过
              </div>
            </div>
          
            <div class="doctor-info1">
              <div class="left-section">
                <div class="name-title">
                  <h2>{{doctor.name}}</h2>
                  <ion-badge *ngIf="doctor.isExpert" color="warning">知名专家</ion-badge>
                </div>
                
                <div class="position">
                  <span>{{doctor.department}}</span>
                  <span>{{doctor.title}}</span>
                </div>
                
                <div class="hospital">
                  <span>{{doctor.hospital}}</span>
                  <ion-badge color="success">{{doctor.hospitalLevel}}</ion-badge>
                </div>
          
                <div class="stats">
                  <div class="rating">
                    <span class="number">{{doctor.rating}}</span>
                    <ion-icon name="star" color="warning"></ion-icon>
                  </div>
                  <div class="consult">
                    <span>接诊量 {{doctor.consultations}}</span>
                  </div>
                  <div class="service">
                    <span>服务态度好</span>
                  </div>
                </div>
              </div>
          
              <div class="right-section">
                <ion-avatar>
                  <img [src]="doctor.avatar" alt="医生头像">
                </ion-avatar>
                <ion-button style="color: rgb(0, 255, 0);" fill="outline" size="small">
                  + 关注
                </ion-button>
              </div>
            </div>
            <div>
              <div class="tags">
                <ion-chip style="color: blue; border-radius: 10px; background-color: rgba(230, 230, 243, 0.671);" *ngFor="let tag of doctor.tags" outline>
                  {{tag}}
                </ion-chip>
              </div>
            </div>
          </ion-card>
        </div>
        <div class="aa" style="display: flex;">
          <p class="aaa">保证医生真实</p>
          <p class="aaa">未使用随时退</p>
          <p class="aaa">不满意可申诉</p>
        </div>
        <div class="consult-options">
          <div class="option-grid">
            <div class="option-item" 
                 *ngFor="let option of options"
                 [class.selected]="option.isSelected"
                 [class.disabled]="!option.isAvailable"
                 (click)="selectOption(option)">
              
              <div class="option-content">
                <div class="icon-wrapper">
                  <ion-icon [name]="option.icon"></ion-icon>
                  <ion-icon *ngIf="option.isSelected" 
                            name="checkmark-circle" 
                            class="check-icon">
                  </ion-icon>
                </div>
                
                <div class="title1">{{option.title}}</div>
                
                <div class="price" *ngIf="option.price > 0">
                  ¥{{option.price}}/{{option.unit}}
                </div>
                <div class="status" *ngIf="!option.isAvailable">
                  暂未开通
                </div>
              </div>
              
            </div>
          </div>
        </div>
        <div class="info" style="margin:0 20px;box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.163), -1px -1px 1px 0px rgba(0, 0, 0, 0.148);">
          <div style="margin: 5px 10px;">
            <h1>擅长与简介</h1>
          </div>
          <div style="margin: 5px 10px;">
            <p style="color: grey;">{{doctor.expertise}}</p>
          </div>
        </div>
        <div>
          <ion-buttons>
            <ion-button (click)="appoint(doctor.id)">立即预约</ion-button>
          </ion-buttons>
        </div>
      </ion-content>
      <ion-footer>
        <ion-button style="border-radius: 10px;" expand="block" color="success" (click)="openConsult()">立即咨询（￥120/次）</ion-button>
      </ion-footer>
    </ng-template>
  </ion-modal>

  <!-- 新增收款码模态框 -->
  <ion-modal [isOpen]="isPaymentModalOpen" cssClass="payment-modal" (ionBackdropTap)="closePaymentModal()">
    <ng-template>
      <ion-content class="ion-padding payment-content">
        <div class="payment-codes">
          <img src="../../../assets/image/paya.png" alt="收款码A" class="payment-image">
          <img src="../../../assets/image/payb.png" alt="收款码B" class="payment-image">
        </div>
      </ion-content>
    </ng-template>
  </ion-modal>
</ion-content>