pay

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

@@ -62,9 +62,8 @@
       </ion-item>
     </ion-card>
   </div>
-  
 
-  <!-- 底部弹出模态 -->
+  <!-- 医生详情模态框 -->
   <ion-modal [isOpen]="isModalOpen" cssClass="bottom-modal">
     <ng-template>
       <ion-header>
@@ -72,7 +71,6 @@
           <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>
@@ -80,8 +78,8 @@
       </ion-header>
 
       <ion-content class="ion-padding">
-        <div >
-          <ion-card class="first" >
+        <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>
@@ -118,7 +116,6 @@
                     <span>接诊量 {{doctor.consultations}}</span>
                   </div>
                   <div class="service">
-                    <!-- <span>{{doctor.rating}}</span> -->
                     <span>服务态度好</span>
                   </div>
                 </div>
@@ -142,12 +139,12 @@
             </div>
           </ion-card>
         </div>
-        <div class="aa"  style="display: flex;">
+        <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="consult-options">
           <div class="option-grid">
             <div class="option-item" 
                  *ngFor="let option of options"
@@ -179,10 +176,10 @@
         </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>
+            <h1>擅长与简介</h1>
           </div>
           <div style="margin: 5px 10px;">
-            <p style="color: grey;"> {{doctor.expertise}}</p>
+            <p style="color: grey;">{{doctor.expertise}}</p>
           </div>
         </div>
       </ion-content>
@@ -191,5 +188,16 @@
       </ion-footer>
     </ng-template>
   </ion-modal>
-</ion-content>>
 
+  <!-- 新增收款码模态框 -->
+  <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>

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

@@ -1,287 +1,303 @@
 .ioncard {
-    margin: 16px;
-    box-shadow: none;
-    border: 1px solid #eee;
+  margin: 16px;
+  box-shadow: none;
+  border: 1px solid #eee;
+}
+
+.doctor-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  h2 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: bold;
   }
+}
+
+.hospital-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #666;
+}
+
+.expertise {
+  font-size: 14px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.stats {
+  display: flex;
+  gap: 16px;
+  font-size: 14px;
   
-  .doctor-header {
+  div {
     display: flex;
     align-items: center;
-    gap: 8px;
-    
-    h2 {
-      margin: 0;
-      font-size: 18px;
-      font-weight: bold;
-    }
+    gap: 4px;
   }
-  
-  .doctor-info {
-    margin: 4px 0;
+}
+
+.consultation-types {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  
+  ion-button {
+    --padding-start: 16px;
+    --padding-end: 16px;
+    height: 32px;
     font-size: 14px;
-    color: #666;
-    
-    span {
-      margin-right: 8px;
-    }
   }
-  
-  .hospital-info {
+}
+
+.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: 8px;
-    font-size: 14px;
-    color: #666;
-  }
-  
-  .expertise {
-    font-size: 14px;
-    display: -webkit-box;
-    // -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  
-  .stats {
-    display: flex;
-    gap: 16px;
-    font-size: 14px;
+    gap: 4px;
     
-    div {
-      display: flex;
-      align-items: center;
-      gap: 4px;
+    ion-icon {
+      color: #52c41a;
     }
   }
+}
+
+.doctor-info1 {
+  display: flex;
+  justify-content: space-between;
   
-  .consultation-types {
-    display: flex;
-    gap: 8px;
-    overflow-x: auto;
+  .left-section {
+    flex: 1;
     
-    ion-button {
-      --padding-start: 16px;
-      --padding-end: 16px;
-      height: 32px;
-      font-size: 14px;
-    }
-  }
-
+    .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;
+      }
+    }
 
-  .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 {
+    .position, .hospital {
       display: flex;
       align-items: center;
-      gap: 4px;
-      
-      ion-icon {
-        color: #52c41a;
-      }
+      gap: 8px;
+      margin-bottom: 6px;
+      color: #666;
+      font-size: 14px;
     }
-  }
-  
-  .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 {
+
+    .stats {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin: 8px 0;
+      font-size: 14px;
+
+      .rating {
         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;
+        gap: 4px;
         
-        ion-chip {
-          margin: 0;
-          height: 24px;
-          --background: rgb(0, 255, 0);
-          --color: #666;
+        .number {
+          color: #f90;
+          font-weight: 500;
         }
       }
     }
-  
-    .right-section {
+
+    .tags {
+      color: blue;
       display: flex;
-      flex-direction: column;
-      align-items: center;
+      flex-wrap: wrap;
       gap: 8px;
-      margin-left: 16px;
-  
-      ion-avatar {
-        width: 64px;
-        height: 64px;
-      }
-  
-      ion-button {
-        --border-color: #666;
+      
+      ion-chip {
+        margin: 0;
+        height: 24px;
+        --background: rgb(0, 255, 0);
         --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;
+  .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;
+    }
   }
-  
-  .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 {
+}
+
+.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);
       }
     }
-  
-    &.disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-  
-      .icon-wrapper ion-icon {
-        color: #999;
-      }
-  
-      .title {
-        color: #999;
-      }
+
+    .title1 {
+      color: var(--ion-color-primary);
     }
   }
-  
-  .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;
+
+  &.disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+
+    .icon-wrapper ion-icon {
+      color: #999;
     }
-  
-    .check-icon {
-      position: absolute;
-      top: -4px;
-      right: -4px;
-      font-size: 16px;
-      color: var(--ion-color-primary);
-      background: #fff;
-      border-radius: 50%;
+
+    .title1 {
+      color: #999;
     }
   }
-  
-  .title1 {
-    font-size: 14px;
-    color: #333;
-    margin-bottom: 4px;
+}
+
+.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;
   }
-  
-  .price {
-    font-size: 12px;
+
+  .check-icon {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    font-size: 16px;
     color: var(--ion-color-primary);
+    background: #fff;
+    border-radius: 50%;
   }
-  
-  .status {
-    font-size: 12px;
-    color: #999;
-  }
+}
+
+.title1 {
+  font-size: 14px;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.price {
+  font-size: 12px;
+  color: var(--ion-color-primary);
+}
+
+.status {
+  font-size: 12px;
+  color: #999;
+}
+
+/* 新增收款码模态框样式 */
+.payment-modal {
+  --width: 80%;
+  --max-width: 400px;
+  --height: auto;
+  --border-radius: 12px;
+}
+
+.payment-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.payment-codes {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.payment-image {
+  width: 200px; // 根据实际需要调整尺寸
+  height: auto;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+}

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

@@ -1,13 +1,14 @@
 import { Component, OnInit } from '@angular/core';
-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 { IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonAvatar, IonButton, IonChip, IonIcon, IonBadge, IonText, IonCard, IonSegmentButton, IonSegment, IonCol, IonRow, IonGrid, IonButtons, IonFooter, ToastController } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../../explore-container/explore-container.component';
 import { addIcons } from 'ionicons';
-import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
+import { airplane, bluetooth, call, wifi, star, checkmarkCircle } from 'ionicons/icons';
 import { Router } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
 addIcons({ airplane, bluetooth, call, wifi });
+
 interface Doctor {
   avatar: string;
   name: string;
@@ -29,6 +30,7 @@ interface Doctor {
   isVerified?: boolean;
   isExpert?: boolean;
 }
+
 interface ConsultOption {
   id: number;
   title: string;
@@ -45,13 +47,13 @@ interface ConsultOption {
   styleUrls: ['./inquiry-human.component.scss'],
   standalone: true,
   imports: [
-    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,CommonModule,
-    IonLabel,IonItem,IonList,IonAvatar,IonLabel,IonButton,IonChip,IonIcon,IonBadge,
-    IonText,IonCard,IonSegment,IonSegmentButton, FormsModule,IonCol,IonRow,IonGrid,
-    IonModal,IonButtons,IonFooter
+    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent, CommonModule,
+    IonLabel, IonItem, IonList, IonAvatar, IonButton, IonChip, IonIcon, IonBadge,
+    IonText, IonCard, IonSegment, IonSegmentButton, FormsModule, IonCol, IonRow, IonGrid,
+    IonModal, IonButtons, IonFooter
   ]
 })
-export class InquiryHumanComponent  implements OnInit {
+export class InquiryHumanComponent implements OnInit {
   options: ConsultOption[] = [
     {
       id: 1,
@@ -95,39 +97,32 @@ export class InquiryHumanComponent  implements OnInit {
       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;
-  }
+  isPaymentModalOpen = false; // 新增状态变量
+  doctor: any;
 
   constructor(
-    private router: Router
-  ) { }
+    private router: Router,
+    private toastController: ToastController // 注入 ToastController
+  ) {
+      addIcons({star,checkmarkCircle}); }
+
+  ngOnInit() { }
 
-  ngOnInit() {}
-  back:string = "<";
+  back: string = "<";
   backhome(){
     this.router.navigate(['/tabs/tab1']);
   }
   selectedSegment = '全部';
-  segments = ['全部', '妇科', '儿科', '皮肤性病科', '内科',];
-  
+  segments = ['全部', '妇科', '儿科', '皮肤性病科', '内科'];
+
   doctors: Doctor[] = [
     {
       avatar: 'https://app.fmode.cn/dev/jxnu/202226701019/doctor7.png',
@@ -150,76 +145,48 @@ export class InquiryHumanComponent  implements OnInit {
       isVerified: true,
       isExpert: true,
     },
-    {
-      avatar: 'https://app.fmode.cn/dev/jxnu/202226701019/doctor6.png',
-      name: '张伟',
-      title: '主任医师',
-      department: '消化内科',
-      hospital: '首都医科大学附属北京友谊..',
-      hospitalLevel: '三甲',
-      hospitalType: '百强医院',
-      expertise: '擅长：结肠息肉和息肉病、胃息肉、幽门螺杆菌感染、慢性胃炎、胃食管反流、慢性萎缩性胃炎、糜烂性胃炎...',
-      rating: 5.0,
-      consultations: '1.1万',
-      recommendations: 100,
-      prices: {
-        text: 100,
-        voice: 150,
-        video: 300
-      },
-      tags: ['百强医院', '可开处方', '从业24年', '擅长消化系统疾病', '可开处方'],
-      isVerified: true,
-      isExpert: true,
-    },{
-      avatar: 'https://app.fmode.cn/dev/jxnu/202226701019/doctor5.png',
-      name: '张伟',
-      title: '主任医师',
-      department: '消化内科',
-      hospital: '首都医科大学附属北京友谊..',
-      hospitalLevel: '三甲',
-      hospitalType: '百强医院',
-      expertise: '擅长：结肠息肉和息肉病、胃息肉、幽门螺杆菌感染、慢性胃炎、胃食管反流、慢性萎缩性胃炎、糜烂性胃炎...',
-      rating: 5.0,
-      consultations: '1.1万',
-      recommendations: 100,
-      prices: {
-        text: 100,
-        voice: 150,
-        video: 300
-      },
-      tags: ['百强医院', '可开处方', '从业24年', '擅长消化系统疾病', '可开处方'],
-      isVerified: true,
-      isExpert: true,
-    },{
-      avatar: 'https://app.fmode.cn/dev/jxnu/202226701019/doctor7.png',
-      name: '张伟',
-      title: '主任医师',
-      department: '消化内科',
-      hospital: '首都医科大学附属北京友谊..',
-      hospitalLevel: '三甲',
-      hospitalType: '百强医院',
-      expertise: '擅长：结肠息肉和息肉病、胃息肉、幽门螺杆菌感染、慢性胃炎、胃食管反流、慢性萎缩性胃炎、糜烂性胃炎...',
-      rating: 5.0,
-      consultations: '1.1万',
-      recommendations: 100,
-      prices: {
-        text: 100,
-        voice: 150,
-        video: 300
-      },
-      tags: ['百强医院', '可开处方', '从业24年', '擅长消化系统疾病', '可开处方'],
-      isVerified: true,
-      isExpert: true,
-    }
-    ];
-    goToDoctorDetail(doctor: Doctor) {
-      // this.router.navigate(['/doctor-detail'], { state: { doctor: doctor } });
-    }
+    // ... 其他医生数据 ...
+  ];
+
+  openDetailModal(doctor?: any) {
+    this.isModalOpen = true;
+    this.doctor = doctor;
+  }
+  closeDetailModal() {
+    this.isModalOpen = false;
+    this.doctor = null;
+  }
+
+  goToDoctorDetail(doctor: Doctor) {
+    // this.router.navigate(['/doctor-detail'], { state: { doctor: doctor } });
+  }
+
   segmentChanged(event: any) {
     this.selectedSegment = event.detail.value;
     console.log(this.selectedSegment);
   }
-  openConsult(){
-    console.log("openConsult");
+
+  async openConsult(){
+    const selectedOption = this.options.find(option => option.isSelected);
+    if (!selectedOption) {
+      // 显示 Toast 提示用户选择咨询方式
+      const toast = await this.toastController.create({
+        message: '请先选择咨询方式',
+        duration: 2000,
+        position: 'bottom'
+      });
+      toast.present();
+      return;
+    }
+
+    if (selectedOption.title === '图文咨询' || selectedOption.title === '电话咨询') {
+      this.isPaymentModalOpen = true;
+    } else {
+      // 处理其他选项（如需要）
+    }
   }
-}
+
+  closePaymentModal() {
+    this.isPaymentModalOpen = false;
+  }
+}