inquiry-human.component.ts 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. import { Component, OnInit } from '@angular/core';
  2. 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';
  3. import { ExploreContainerComponent } from '../../explore-container/explore-container.component';
  4. import { addIcons } from 'ionicons';
  5. import { airplane, bluetooth, call, wifi, star, checkmarkCircle } from 'ionicons/icons';
  6. import { Router } from '@angular/router';
  7. import { CommonModule } from '@angular/common';
  8. import { FormsModule } from '@angular/forms';
  9. import { CloudObject, CloudUser } from 'src/lib/ncloud';
  10. addIcons({ airplane, bluetooth, call, wifi });
  11. interface Doctor {
  12. avatar: string;
  13. name: string;
  14. title: string;
  15. department: string;
  16. hospital: string;
  17. hospitalLevel: string;
  18. hospitalType: string;
  19. expertise: string;
  20. rating: number;
  21. consultations: string;
  22. recommendations: number;
  23. tags?: string[];
  24. prices: {
  25. text: number;
  26. voice: number;
  27. video: number;
  28. }
  29. isVerified?: boolean;
  30. isExpert?: boolean;
  31. }
  32. interface ConsultOption {
  33. id: number;
  34. title: string;
  35. icon: string;
  36. price: number;
  37. unit: string;
  38. isAvailable: boolean; // 是否可用
  39. isSelected?: boolean; // 是否被选中
  40. }
  41. @Component({
  42. selector: 'inquiry-human',
  43. templateUrl: './inquiry-human.component.html',
  44. styleUrls: ['./inquiry-human.component.scss'],
  45. standalone: true,
  46. imports: [
  47. IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent, CommonModule,
  48. IonLabel, IonItem, IonList, IonAvatar, IonButton, IonChip, IonIcon, IonBadge,
  49. IonText, IonCard, IonSegment, IonSegmentButton, FormsModule, IonCol, IonRow, IonGrid,
  50. IonModal, IonButtons, IonFooter
  51. ]
  52. })
  53. export class InquiryHumanComponent implements OnInit {
  54. options: ConsultOption[] = [
  55. {
  56. id: 1,
  57. title: '图文咨询',
  58. icon: 'chatbubbles',
  59. price: 120,
  60. unit: '次',
  61. isAvailable: true,
  62. isSelected: true
  63. },
  64. {
  65. id: 2,
  66. title: '电话咨询',
  67. icon: 'call',
  68. price: 200,
  69. unit: '次起',
  70. isAvailable: true
  71. },
  72. {
  73. id: 3,
  74. title: '视频问诊',
  75. icon: 'videocam',
  76. price: 0,
  77. unit: '',
  78. isAvailable: false
  79. },
  80. {
  81. id: 4,
  82. title: '私人医生',
  83. icon: 'person',
  84. price: 0,
  85. unit: '',
  86. isAvailable: false
  87. },
  88. {
  89. id: 5,
  90. title: '预约',
  91. icon: 'calendar',
  92. price: 0,
  93. unit: '',
  94. isAvailable: false
  95. }
  96. ];
  97. selectOption(option: ConsultOption) {
  98. if (!option.isAvailable) return;
  99. this.options.forEach(opt => opt.isSelected = false);
  100. option.isSelected = true;
  101. }
  102. isModalOpen = false;
  103. isPaymentModalOpen = false; // 新增状态变量
  104. doctor: any;
  105. currentUser: CloudUser
  106. constructor(
  107. private router: Router,
  108. private toastController: ToastController // 注入 ToastController
  109. ) {
  110. addIcons({star,checkmarkCircle});
  111. this.currentUser = new CloudUser();
  112. }
  113. ngOnInit() { }
  114. back: string = "<";
  115. backhome(){
  116. this.router.navigate(['/tabs/tab1']);
  117. }
  118. selectedSegment = '全部';
  119. segments = ['全部', '妇科', '儿科', '皮肤性病科', '内科'];
  120. doctors: Doctor[] = [
  121. {
  122. avatar: 'https://app.fmode.cn/dev/jxnu/202226701019/doctor7.png',
  123. name: '张伟',
  124. title: '主任医师',
  125. department: '消化内科',
  126. hospital: '首都医科大学附属北京友谊..',
  127. hospitalLevel: '三甲',
  128. hospitalType: '百强医院',
  129. expertise: '擅长:结肠息肉和息肉病、胃息肉、幽门螺杆菌感染、慢性胃炎、胃食管反流、慢性萎缩性胃炎、糜烂性胃炎...',
  130. rating: 5.0,
  131. consultations: '1.1万',
  132. recommendations: 100,
  133. prices: {
  134. text: 100,
  135. voice: 150,
  136. video: 300
  137. },
  138. tags: ['百强医院', '可开处方', '从业24年', '擅长消化系统疾病', '可开处方'],
  139. isVerified: true,
  140. isExpert: true,
  141. },
  142. // ... 其他医生数据 ...
  143. ];
  144. openDetailModal(doctor?: any) {
  145. this.isModalOpen = true;
  146. this.doctor = doctor;
  147. }
  148. closeDetailModal() {
  149. this.isModalOpen = false;
  150. this.doctor = null;
  151. }
  152. goToDoctorDetail(doctor: Doctor) {
  153. // this.router.navigate(['/doctor-detail'], { state: { doctor: doctor } });
  154. }
  155. segmentChanged(event: any) {
  156. this.selectedSegment = event.detail.value;
  157. console.log(this.selectedSegment);
  158. }
  159. async openConsult(){
  160. const selectedOption = this.options.find(option => option.isSelected);
  161. if (!selectedOption) {
  162. // 显示 Toast 提示用户选择咨询方式
  163. const toast = await this.toastController.create({
  164. message: '请先选择咨询方式',
  165. duration: 2000,
  166. position: 'bottom'
  167. });
  168. toast.present();
  169. return;
  170. }
  171. if (selectedOption.title === '图文咨询' || selectedOption.title === '电话咨询') {
  172. this.isPaymentModalOpen = true;
  173. } else {
  174. // 处理其他选项(如需要)
  175. }
  176. }
  177. closePaymentModal() {
  178. this.isPaymentModalOpen = false;
  179. }
  180. appoint(id:any){
  181. let appointment = new CloudObject('appointment')
  182. appointment.set({
  183. doctor: {
  184. __type:"Pointer",
  185. className:"doctor",
  186. objectId:id
  187. },
  188. user: {
  189. __type:"Pointer",
  190. className:"user",
  191. objectId:this.currentUser.id
  192. },
  193. }
  194. )
  195. }
  196. }