yuyue

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

@@ -227,6 +227,7 @@ export class InquiryHumanComponent implements OnInit {
           className:"user",
           objectId:this.currentUser.id
         },
+        type: this.selectedOption?.title, // 咨询类型
         userPhone: this.currentUser?.data["phone"], // 获取当前用户的手机号
         username : this.currentUser?.data["realname"], // 获取当前用户的姓名
       });

wisdom-app/src/app/page/page-user-inquery/page-user-inquery.component.html

@@ -1,33 +1,48 @@
 <!-- 我的预约页面 -->
 <ion-header [translucent]="true">
-  <ion-toolbar class="searchbar">
-    <ion-button color="light" slot="start">
-      <ion-back-button  defaultHref="/" ></ion-back-button>
-    </ion-button>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/"></ion-back-button>
+    </ion-buttons>
     <ion-title>我的预约</ion-title>
   </ion-toolbar>
 </ion-header>
+
 <ion-content>
   <ion-refresher slot="fixed" (ionRefresh)="handleRefresh($event)">
     <ion-refresher-content></ion-refresher-content>
   </ion-refresher>
-  <ion-list *ngFor="let appointment of appointmentList">
-    @if(appointment){
-      <ion-item>
-        <h2>患者简介</h2>
-      </ion-item>
-      <ion-item >
-          <h3>姓名：{{appointment.get("username")}}</h3>
-      </ion-item>
-      <ion-item>
-        <p>电话"{{appointment.get("userPhone")}}</p>
-      </ion-item>
-      <ion-item>
-        <p>预约方式:{{appointment.get("type")}}</p>
-      </ion-item>
-      <ion-item>
-        <ion-button expand="block">立即前往</ion-button>
-      </ion-item>
-    }
+  
+  <ion-list>
+    <ion-card *ngFor="let appointment of appointmentList" class="appointment-card">
+      <ion-card-content>
+        <ion-item lines="none">
+          <ion-label>
+            <h2 class="appointment-name">姓名：{{appointment.get("username")}}</h2>
+          </ion-label>
+        </ion-item>
+        <ion-item lines="none">
+          <ion-icon name="call" slot="start" color="primary"></ion-icon>
+          <ion-label class="appointment-phone">{{appointment.get("userPhone")}}</ion-label>
+        </ion-item>
+        <ion-item lines="none">
+          <ion-icon name="calendar" slot="start" color="primary"></ion-icon>
+          <ion-label class="appointment-type">预约方式：{{appointment.get("type")}}</ion-label>
+        </ion-item>
+        <ion-button 
+          expand="block" 
+          color="primary" 
+          class="action-button"
+          (click)="presentAlert(appointment.get('username'), appointment.get('userPhone'))">
+          立即前往
+        </ion-button>
+      </ion-card-content>
+    </ion-card>
   </ion-list>
-</ion-content>
+  
+  <!-- 空状态处理 -->
+  <div *ngIf="appointmentList.length === 0" class="empty-state">
+    <ion-icon name="calendar-outline" size="large" color="medium"></ion-icon>
+    <p>您当前没有预约</p>
+  </div>
+</ion-content>

wisdom-app/src/app/page/page-user-inquery/page-user-inquery.component.scss

@@ -1,10 +1,84 @@
 ion-header {
-    background-color: #5c97ff;
-    color: white;
-  }
-  
-  ion-title {
-    font-size: 20px;
-    font-weight: bold;
-    text-align: center;
-  }
+  --background: #5c97ff;
+  --color: white;
+}
+
+ion-title {
+  font-size: 20px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.appointment-card {
+  margin: 12px;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s;
+}
+
+.appointment-card:hover {
+  transform: scale(1.02);
+}
+
+ion-card-content {
+  padding: 16px;
+}
+
+.appointment-name {
+  font-size: 18px;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.appointment-phone,
+.appointment-type {
+  font-size: 16px;
+  color: #555;
+}
+
+ion-icon {
+  margin-right: 8px;
+}
+
+.action-button {
+  margin-top: 16px;
+  --border-radius: 20px;
+  transition: transform 0.2s;
+}
+
+.action-button:active {
+  transform: scale(0.98);
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #888;
+  font-size: 16px;
+  padding: 20px;
+}
+
+.empty-state ion-icon {
+  margin-bottom: 12px;
+}
+
+/* 自定义 Alert 样式 */
+.custom-alert {
+  --background: #ffffff;
+  --border-radius: 12px;
+  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.custom-alert-header {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+}
+
+.custom-alert-message {
+  font-size: 16px;
+  color: #555;
+}

wisdom-app/src/app/page/page-user-inquery/page-user-inquery.component.ts

@@ -1,89 +1,149 @@
 import { CommonModule } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
-import { IonBackButton, IonButton, IonContent, IonHeader, IonItem, IonLabel, IonList, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { 
+  IonBackButton, 
+  IonButton, 
+  IonButtons,         // 导入 IonButtons
+  IonCard, 
+  IonCardContent, 
+  IonCardHeader, 
+  IonCardTitle, 
+  IonContent, 
+  IonHeader, 
+  IonIcon, 
+  IonItem, 
+  IonLabel, 
+  IonList, 
+  IonRefresher, 
+  IonRefresherContent, 
+  IonTitle, 
+  IonToolbar, 
+  AlertController 
+} from '@ionic/angular/standalone';
 import { CloudObject, CloudQuery, CloudUser } from 'src/lib/ncloud';
 
 @Component({
   selector: 'app-page-user-inquery',
   templateUrl: './page-user-inquery.component.html',
   styleUrls: ['./page-user-inquery.component.scss'],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   standalone: true,
   imports: [
-    CommonModule,IonTitle,IonContent,IonToolbar,IonHeader,IonList,IonLabel,IonItem,IonButton,
-    IonRefresher,IonRefresherContent,IonBackButton
+    CommonModule,
+    IonTitle,
+    IonContent,
+    IonToolbar,
+    IonHeader,
+    IonList,
+    IonLabel,
+    IonItem,
+    IonButton,
+    IonButtons,             // 添加 IonButtons 到 imports
+    IonRefresher,
+    IonRefresherContent,
+    IonBackButton,
+    IonCard,
+    IonCardContent,
+    IonIcon
   ]
 })
-export class PageUserInqueryComponent  implements OnInit {
-  handleRefresh(event:any) {
+export class PageUserInqueryComponent implements OnInit {
+  appointmentList: Array<CloudObject> = [];
+  currentUser: CloudUser;
+
+  constructor(private alertController: AlertController) {
+    this.currentUser = new CloudUser();
+    this.appointDisplay();
+    // this.load()
+  }
+
+  ngOnInit() {}
+
+  handleRefresh(event: any) {
     setTimeout(() => {
       // Any calls to load data go here
-      this.appointDisplay()
+      this.appointDisplay();
       event.target.complete();
     }, 2000);
   }
-  currentUser:CloudUser;
-  constructor(
 
-  ) {
-    this.currentUser = new CloudUser();
-    this.appointDisplay()
-    // this.load()
-   }
-
-  ngOnInit() {
-  }
-  appointmentList: Array<CloudObject> = []
   // 用来显示预约列表
-  async appointDisplay(){
-    console.log('appointDisplay')
+  async appointDisplay() {
+    console.log('appointDisplay');
     let query = new CloudQuery('appointment');
     // query.include("user")
-    query.equalTo('doctor', this.currentUser?.id)
-    this.appointmentList = await query.find()
-    console.log('我的appointmentList',this.appointmentList)
-    console.log("this.currentUser",this.currentUser)
+    query.equalTo('doctor', this.currentUser?.id);
+    this.appointmentList = await query.find();
+    console.log('我的appointmentList', this.appointmentList);
+    console.log("this.currentUser", this.currentUser);
   }
 
   // 用来认证医生
-  async load(){
+  async load() {
     let depart = new CloudQuery('Department');
-    depart.equalTo("name", "妇产科")
-    let object = await depart.find()
-    console.log('object',object)
+    depart.equalTo("name", "妇产科");
+    let object = await depart.find();
+    console.log('object', object);
     // this.currentUser = new CloudUser();
     // console.log('currentUser',this.currentUser)
     let doctor = new CloudObject('Doctor1');
     doctor.set({
       avatar: 'https://app.fmode.cn/dev/jxnu/202226701019/doctor7.png',
-    name: '李四',
-    title: '主任医师',
-    depart: {
-      __type:"Pointer",
-      className:"Department",
-      objectId:object[0].id
-    },
-    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,
-    user: {
-      __type:"Pointer",
-      className:"User",
-      objectId:"Gx3N24u5gl"
-    }
-    })
-    doctor.save()
-    console.log('doctor',doctor)
+      name: '李四',
+      title: '主任医师',
+      depart: {
+        __type: "Pointer",
+        className: "Department",
+        objectId: object[0].id
+      },
+      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,
+      user: {
+        __type: "Pointer",
+        className: "User",
+        objectId: "Gx3N24u5gl"
+      }
+    });
+    doctor.save();
+    console.log('doctor', doctor);
+  }
+
+  // 显示预约信息的弹出框
+  async presentAlert(username: string, userPhone: string) {
+    const alert = await this.alertController.create({
+      header: '预约确认',
+      message: `患者${username}已向您预约，请拨打 ${userPhone} 号码联系患者。`,
+      cssClass: 'custom-alert',
+      buttons: [
+        {
+          text: '取消',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => {
+            console.log('取消点击');
+          }
+        }, {
+          text: '拨打电话',
+          handler: () => {
+            window.location.href = `tel:${userPhone}`;
+          }
+        }
+      ]
+    });
+
+    await alert.present();
   }
-}
+}