fix: 找医生

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

@@ -13,7 +13,7 @@
 
 <ion-content>
   <div>
-    <ion-card class="ioncard" *ngFor="let doctor of doctors" (click)="goToDoctorDetail(doctor)">
+    <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="医生头像">
@@ -27,11 +27,6 @@
             <ion-badge color="primary">可开处方</ion-badge>
           </div>
           
-          <!-- <div class="doctor-info">
-            <span>{{doctor.title}}</span>
-            <span>{{doctor.department}}</span>
-          </div> -->
-          
           <div class="hospital-info">
             <span>{{doctor.hospital}}</span>
             <ion-badge color="success">{{doctor.hospitalLevel}}</ion-badge>
@@ -67,34 +62,134 @@
       </ion-item>
     </ion-card>
   </div>
-  <!-- <div>
-    <ion-grid>
-      <ion-row>
-        <ion-col size="6" *ngFor="let doctor of doctors1">
-          <ion-card class="ioncard">
-            <ion-item class="ionitem" lines="none">
-              <ion-avatar slot="start">
-                <img [src]="doctor.avatar" />
-              </ion-avatar>
-              <ion-label>
-                <h2>{{doctor.name}}</h2>
-                <p>{{doctor.title}} {{doctor.department}}</p>
-              </ion-label>
-            </ion-item>
-            
-            <ion-item lines="none" class="hospital-infom">
-              <ion-label>
-                <p>{{doctor.hospital}}</p>
-                <div class="badges">
+  
+
+  <!-- 底部弹出模态 -->
+  <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-title>{{}}</ion-title> -->
+          <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>
-                  <span>{{doctor.hospitalType}}</span>
                 </div>
-              </ion-label>
-            </ion-item>
+          
+                <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>{{doctor.rating}}</span> -->
+                    <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>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-  </div> -->
+        </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>
+      </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-content>>
 

wisdom-app/src/app/page/inquiry-human/inquiry-human.component.scss

@@ -67,4 +67,221 @@
     }
   }
 
-  
+
+
+
+  .first {
+    margin: 5px 16px;
+    padding: 12px;
+    box-shadow: none;
+    border: 1px solid #eee;
+  }
+  
+  .doctor-header1 {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    font-size: 12px;
+    color: #666;
+  
+    .verification-badge {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      
+      ion-icon {
+        color: #52c41a;
+      }
+    }
+  }
+  
+  .doctor-info1 {
+    display: flex;
+    justify-content: space-between;
+    
+    .left-section {
+      flex: 1;
+      
+      .name-title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 8px;
+  
+        h2 {
+          margin: 0;
+          font-size: 16px;
+          font-weight: 500;
+        }
+  
+        ion-badge {
+          --padding-start: 4px;
+          --padding-end: 4px;
+        }
+      }
+  
+      .position, .hospital {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 6px;
+        color: #666;
+        font-size: 14px;
+      }
+  
+      .stats {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        margin: 8px 0;
+        font-size: 14px;
+  
+        .rating {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          
+          .number {
+            color: #f90;
+            font-weight: 500;
+          }
+        }
+      }
+  
+      .tags {
+        color: blue;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        
+        ion-chip {
+          margin: 0;
+          height: 24px;
+          --background: rgb(0, 255, 0);
+          --color: #666;
+        }
+      }
+    }
+  
+    .right-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+      margin-left: 16px;
+  
+      ion-avatar {
+        width: 64px;
+        height: 64px;
+      }
+  
+      ion-button {
+        --border-color: #666;
+        --color: #666;
+        font-size: 12px;
+      }
+    }
+  }
+  .aa{
+    margin: 2px auto;
+    padding: 0;
+  }
+  .aaa{
+    font-size: 12px;
+    color: gray;
+    margin-top: 0px;
+    margin-right: 15px;
+    margin-left: 35px;
+  }
+
+  .consult-options {
+    padding: 16px;
+    background: #fff;
+    margin: 0 10px
+  }
+  
+  .option-grid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 12px;
+  }
+  
+  .option-item {
+    position: relative;
+    border: 1px solid #e8e8e8;
+    border-radius: 8px;
+    padding: 12px;
+    cursor: pointer;
+    transition: all 0.3s;
+  
+    &.selected {
+      border-color: var(--ion-color-primary);
+      background-color: var(--ion-color-primary-tint);
+  
+      .icon-wrapper {
+        ion-icon {
+          color: var(--ion-color-primary);
+        }
+      }
+  
+      .title {
+        color: var(--ion-color-primary);
+      }
+    }
+  
+    &.disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+  
+      .icon-wrapper ion-icon {
+        color: #999;
+      }
+  
+      .title {
+        color: #999;
+      }
+    }
+  }
+  
+  .option-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  
+  .icon-wrapper {
+    position: relative;
+    margin-bottom: 8px;
+  
+    ion-icon {
+      font-size: 24px;
+      color: #666;
+    }
+  
+    .check-icon {
+      position: absolute;
+      top: -4px;
+      right: -4px;
+      font-size: 16px;
+      color: var(--ion-color-primary);
+      background: #fff;
+      border-radius: 50%;
+    }
+  }
+  
+  .title1 {
+    font-size: 14px;
+    color: #333;
+    margin-bottom: 4px;
+  }
+  
+  .price {
+    font-size: 12px;
+    color: var(--ion-color-primary);
+  }
+  
+  .status {
+    font-size: 12px;
+    color: #999;
+  }

wisdom-app/src/app/page/inquiry-human/inquiry-human.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonAvatar, IonButton, IonChip, IonIcon, IonBadge, IonText, IonCard, IonSegmentButton, IonSegment, IonCol, IonRow, IonGrid } from '@ionic/angular/standalone';
+import { IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonAvatar, IonButton, IonChip, IonIcon, IonBadge, IonText, IonCard, IonSegmentButton, IonSegment, IonCol, IonRow, IonGrid, IonButtons, IonFooter } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../../explore-container/explore-container.component';
 import { addIcons } from 'ionicons';
 import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
@@ -20,13 +20,24 @@ interface Doctor {
   rating: number;
   consultations: string;
   recommendations: number;
+  tags?: string[];
   prices: {
     text: number;
     voice: number;
     video: number;
   }
+  isVerified?: boolean;
+  isExpert?: boolean;
+}
+interface ConsultOption {
+  id: number;
+  title: string;
+  icon: string;
+  price: number;
+  unit: string;
+  isAvailable: boolean;
+  isSelected?: boolean;
 }
-
 
 @Component({
   selector: 'inquiry-human',
@@ -36,10 +47,74 @@ interface Doctor {
   imports: [
     IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,CommonModule,
     IonLabel,IonItem,IonList,IonAvatar,IonLabel,IonButton,IonChip,IonIcon,IonBadge,
-    IonText,IonCard,IonSegment,IonSegmentButton, FormsModule,IonCol,IonRow,IonGrid
+    IonText,IonCard,IonSegment,IonSegmentButton, FormsModule,IonCol,IonRow,IonGrid,
+    IonModal,IonButtons,IonFooter
   ]
 })
 export class InquiryHumanComponent  implements OnInit {
+  options: ConsultOption[] = [
+    {
+      id: 1,
+      title: '图文咨询',
+      icon: 'chatbubbles',
+      price: 120,
+      unit: '次',
+      isAvailable: true,
+      isSelected: true
+    },
+    {
+      id: 2,
+      title: '电话咨询',
+      icon: 'call',
+      price: 200,
+      unit: '次起',
+      isAvailable: true
+    },
+    {
+      id: 3,
+      title: '视频问诊',
+      icon: 'videocam',
+      price: 0,
+      unit: '',
+      isAvailable: false
+    },
+    {
+      id: 4,
+      title: '私人医生',
+      icon: 'person',
+      price: 0,
+      unit: '',
+      isAvailable: false
+    },
+    {
+      id: 5,
+      title: '预约',
+      icon: 'calendar',
+      price: 0,
+      unit: '',
+      isAvailable: false
+    }
+  ];
+  selectOption(option: ConsultOption) {
+    if (!option.isAvailable) return;
+    
+    this.options.forEach(opt => opt.isSelected = false);
+    option.isSelected = true;
+  }
+
+
+
+  isModalOpen = false;
+  doctor: any;    
+
+  openDetailModal(doctor?: any) {
+    this.isModalOpen = true;
+    this.doctor = doctor;
+  }
+  closeDetailModal() {
+    this.isModalOpen = false;
+    this.doctor = null;
+  }
 
   constructor(
     private router: Router
@@ -71,6 +146,9 @@ export class InquiryHumanComponent  implements OnInit {
         voice: 150,
         video: 300
       },
+      tags: ['百强医院', '可开处方', '从业24年', '擅长消化系统疾病', '可开处方'],
+      isVerified: true,
+      isExpert: true,
     },
     {
       avatar: 'https://app.fmode.cn/dev/jxnu/202226701019/doctor6.png',
@@ -89,6 +167,9 @@ export class InquiryHumanComponent  implements OnInit {
         voice: 150,
         video: 300
       },
+      tags: ['百强医院', '可开处方', '从业24年', '擅长消化系统疾病', '可开处方'],
+      isVerified: true,
+      isExpert: true,
     },{
       avatar: 'https://app.fmode.cn/dev/jxnu/202226701019/doctor5.png',
       name: '张伟',
@@ -106,6 +187,9 @@ export class InquiryHumanComponent  implements OnInit {
         voice: 150,
         video: 300
       },
+      tags: ['百强医院', '可开处方', '从业24年', '擅长消化系统疾病', '可开处方'],
+      isVerified: true,
+      isExpert: true,
     },{
       avatar: 'https://app.fmode.cn/dev/jxnu/202226701019/doctor7.png',
       name: '张伟',
@@ -123,6 +207,9 @@ export class InquiryHumanComponent  implements OnInit {
         voice: 150,
         video: 300
       },
+      tags: ['百强医院', '可开处方', '从业24年', '擅长消化系统疾病', '可开处方'],
+      isVerified: true,
+      isExpert: true,
     }
     ];
     goToDoctorDetail(doctor: Doctor) {
@@ -132,5 +219,7 @@ export class InquiryHumanComponent  implements OnInit {
     this.selectedSegment = event.detail.value;
     console.log(this.selectedSegment);
   }
-  
+  openConsult(){
+    console.log("openConsult");
+  }
 }

wisdom-app/src/app/tab2/tab2.page.html

@@ -187,6 +187,14 @@
           </div>
         </div>
       </ion-content>
+      <ion-footer>
+        <ion-item>
+          <!-- <ion-label position="stacked">评论</ion-label> -->
+          <ion-input [value]="comment" (ionInput)="onCommentInput($event)" placeholder="请输入评论"></ion-input>
+          <ion-button (click)="postComment()">发布</ion-button>
+        </ion-item>
+        
+      </ion-footer>
     </ng-template>
   </ion-modal>
 
@@ -206,5 +214,14 @@
         </ion-item>
         <ion-button expand="block" (click)="copyLink()">复制链接</ion-button>
     </ion-content>
+    <!-- 评论 -->
+    <ion-footer>
+      <ion-item>
+        <!-- <ion-label position="stacked">评论</ion-label> -->
+        <ion-input [value]="comment" (ionInput)="onCommentInput($event)" placeholder="请输入评论"></ion-input>
+        <ion-button (click)="postComment()">发布</ion-button>
+      </ion-item>
+      
+    </ion-footer>
   </ion-modal>
 </ion-content>

wisdom-app/src/app/tab2/tab2.page.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ModalController, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonAvatar, IonButton, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonIcon, IonButtons, IonSearchbar, IonFab, IonFabButton, IonFabList } from '@ionic/angular/standalone';
+import { ModalController, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonAvatar, IonButton, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonIcon, IonButtons, IonSearchbar, IonFab, IonFabButton, IonFabList, IonFooter, IonInput } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { addIcons } from 'ionicons';
 import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
@@ -28,7 +28,8 @@ addIcons({ chevronDownCircle, chevronForwardCircle, chevronUpCircle, colorPalett
     IonLabel,IonItem,IonList,IonAvatar,ArticleCardComponent,CommonModule,IonButton,
     IonSegment, IonSegmentButton,NavigationLanComponent,
     IonSegmentContent,IonSegmentView,IonCardContent, IonCardTitle, IonCardHeader,IonCard,
-    IonModal,IonIcon, IonButtons, IonSearchbar, IonFab, IonFabButton,IonFabList,
+    IonModal,IonIcon, IonButtons, IonSearchbar, IonFab, IonFabButton,IonFabList,IonFooter,
+    IonInput
   ]
 })
 
@@ -38,12 +39,12 @@ export class Tab2Page {
   * 轮播图
   */
  images = [
-  'https://picsum.photos/800/400?random=1',
-  'https://picsum.photos/800/400?random=2',
-  'https://picsum.photos/800/400?random=3',
-  'https://picsum.photos/800/400?random=4',
-  'https://picsum.photos/800/400?random=5',
-  'https://picsum.photos/800/400?random=6',
+  'https://picsum.photos/800/400?random=7',
+  'https://picsum.photos/800/400?random=8',
+  'https://picsum.photos/800/400?random=9',
+  'https://picsum.photos/800/400?random10',
+  'https://picsum.photos/800/400?random=11',
+  'https://picsum.photos/800/400?random=12',
 ];
 
 currentSlide = 0;
@@ -157,5 +158,12 @@ startAutoSlide() {
   ngOnInit() {
 
   }
-
+  comment:string = ''
+  onCommentInput(e:any){
+    this.comment = e.detail.value
+    console.log(this.comment);
+  }
+  postComment(){
+    console.log('发布评论');
+  }
 }

wisdom-app/src/app/tabs/tabs.page.ts

@@ -10,7 +10,7 @@ import {
   scanOutline, settingsOutline, heartCircleOutline, walletOutline, bagRemoveOutline,
   folderOutline, readerOutline, cartOutline, thumbsUpOutline, ticketOutline, documentTextOutline,
   timeOutline, cloudDownloadOutline, bagCheckOutline, cardOutline, searchOutline, menuOutline,
-  addCircleOutline, addOutline, optionsOutline
+  addCircleOutline, addOutline, optionsOutline,checkmarkCircle
 } from 'ionicons/icons';
 import { CloudUser } from 'src/lib/ncloud';
 @Component({
@@ -33,7 +33,7 @@ export class TabsPage {
         giftOutline, scanOutline, settingsOutline, heartCircleOutline, walletOutline,
         bagRemoveOutline, folderOutline, readerOutline, cartOutline, thumbsUpOutline,
         ticketOutline, documentTextOutline, timeOutline, cloudDownloadOutline, bagCheckOutline,
-        cardOutline, searchOutline, menuOutline, addCircleOutline, addOutline, optionsOutline
+        cardOutline, searchOutline, menuOutline, addCircleOutline, addOutline, optionsOutline,checkmarkCircle
       });
   }