Merge branch 'master' of http://git.fmode.cn:3000/yuebuzu/s202226701018

wisdom-app/src/app/page/feedback-help/feedback-help.component.html

@@ -1,6 +1,6 @@
 <ion-header>
   <ion-toolbar>
-    <ion-button slot="start" (click)="backHome()" color="primary">back</ion-button>
+    <ion-button slot="start" size="small" (click)="backHome()" color="primary">back</ion-button>
     <ion-title>帮助</ion-title>
   </ion-toolbar>
 </ion-header>

wisdom-app/src/app/page/feedback-help/feedback-help.component.scss

@@ -12,6 +12,10 @@ ion-header {
 
 ion-toolbar {
   --background: transparent; /* 使工具栏背景透明 */
+  display: flex; /* 使用 Flexbox 布局 */
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    padding: 0; /* 去掉默认内边距 */
 }
 
 ion-title {

wisdom-app/src/app/page/feedback-help/feedback-help.component.ts

@@ -45,8 +45,18 @@ export class FeedbackHelpComponent  implements OnInit {
       detail: '确保用户信息仅用于医疗诊断目的，我方承诺不会将其泄露给第三方机构或个人。' },
     { title: '我不知道如何准确描述自己的症状，怎么办？', 
       detail: '您只需跟ai医生描述您不舒服的地方，医生会对此进行深入提问，您问答医生提出的问题就行了。' },
-    { title: '如何修改密码？', 
-      detail: '您可以通过点击我的主页“修改密码”链接来重置您的密码。' },
+    { title: '如何使用生成的个性化头像？', 
+      detail: '您可以复制头像生成后最下方生成的图片地址到编辑信息弹窗进行头像应用。' },
+    { title: '问题1', 
+      detail: '解决方案' },
+    { title: '问题2', 
+      detail: '解决方案' },
+    { title: '问题3', 
+      detail: '解决方案' },
+    { title: '问题4', 
+      detail: '解决方案' },
+    { title: '问题5', 
+      detail: '解决方案' },
   ];
 
   //打开解决方案

wisdom-app/src/app/page/guide/guide.component.html

@@ -0,0 +1,24 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-button slot="start" size="small" (click)="backHome()" color="primary">back</ion-button>
+    <ion-title>项目指南</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="banner">
+    <img src="https://app.fmode.cn/dev/jxnu/202226701019/logo.png" alt="项目海报" />
+  </div>
+
+  <div class="card-container">
+    <ion-card *ngFor="let feature of features" (click)="goToPage(feature)">
+      <ion-card-header>
+        <ion-card-title>{{ feature.title }}</ion-card-title>
+        <ion-card-subtitle>点击前往功能页面</ion-card-subtitle>
+      </ion-card-header>
+      <ion-card-content>
+        <p>{{ feature.description }}</p>
+      </ion-card-content>
+    </ion-card>
+  </div>
+</ion-content>

wisdom-app/src/app/page/guide/guide.component.scss

@@ -0,0 +1,46 @@
+ion-header {
+    background-color: #f8f9fa; /* 设置头部背景颜色 */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+  }
+  
+ion-toolbar {
+--background: transparent; /* 使工具栏背景透明 */
+display: flex; /* 使用 Flexbox 布局 */
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    padding: 0; /* 去掉默认内边距 */
+}
+
+ion-title {
+    font-size: 1.5em; /* 设置标题字体大小 */
+    font-weight: bold; /* 加粗标题 */
+    color: #000000; /* 设置标题颜色 */
+  }
+
+.banner {
+    text-align: center;
+    margin: 10px 0;
+  
+    img {
+      width: 100%;
+      height: auto;
+      border-radius: 10px;
+    }
+  }
+  
+  .card-container {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+  
+    ion-card {
+      margin: 10px 0;
+      border-radius: 10px;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      transition: transform 0.2s;
+  
+      &:hover {
+        transform: scale(1.02);
+      }
+    }
+  }

wisdom-app/src/app/page/guide/guide.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { GuideComponent } from './guide.component';
+
+describe('GuideComponent', () => {
+  let component: GuideComponent;
+  let fixture: ComponentFixture<GuideComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [GuideComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GuideComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

wisdom-app/src/app/page/guide/guide.component.ts

@@ -0,0 +1,75 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader, IonTitle, IonToolbar, NavController } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-guide',
+  templateUrl: './guide.component.html',
+  styleUrls: ['./guide.component.scss'],
+  standalone: true,
+  imports:[
+    IonContent,
+    IonCard,
+    IonTitle,
+    IonToolbar,
+    IonHeader,
+    IonCardContent,
+    IonCardTitle,
+    IonCardHeader,
+    IonButton,
+    IonCardSubtitle,
+    CommonModule
+  ]
+})
+export class GuideComponent  implements OnInit {
+
+  constructor(
+    private router: Router,
+    private navCtrl: NavController
+  ) { }
+
+  ngOnInit() {}
+
+  features = [
+    {
+      title: '信息填写',
+      description: '登入系统后，填写您的信息方能给您更完美的问诊服务',
+      path:'tabs/tab4'
+    },
+    {
+      title: 'AI问诊',
+      description: '不同科室的ai医生能解决您日常生活绝大多数的不适病症，或者给您提供准确的建议',
+      path:'tabs/inquiry/ai'
+    },
+    {
+      title: '药品展示',
+      description: '我们会向您展示日常生活中常用的非处方药品，展示其的作用、价格和成分信息等，方便您去药店购买',
+      path:'tabs/tab3'
+    },
+    {
+      title: '创建AI',
+      description: '您可以通过需求描述创建一个更符合您意愿的ai医生，他的回复建议将更贴合您的需求，作为您的专属医生',
+      path:'tabs/create-agent'
+    },
+    {
+      title: '我的健康',
+      description: '借此您能浏览您所有的问诊记录，来回顾您的健康历程',
+      path:'tabs/my-health'
+    },
+    {
+      title: '健康热点',
+      description: '它为您找寻到了网上最受关注的健康知识并将其分类，以方便您的查看',
+      path:'tabs/tab2'
+    },
+    // 可以继续添加更多功能
+  ];
+
+  goToPage(feature:any){
+    this.router.navigate([feature.path])
+  }
+
+  backHome(){
+    this.router.navigate(['tabs/tab4'])
+  }
+}

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

@@ -1,68 +1,71 @@
 <ion-header [translucent]="true">
   <ion-toolbar class="searchbar">
-    <ion-button color="light" slot="start">
-      <ion-back-button  defaultHref="/" ></ion-back-button>
-    </ion-button>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/" color="light"></ion-back-button>
+    </ion-buttons>
     <ion-title>找医生</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
-  <ion-segment [(ngModel)]="selectedSegment" (ionChange)="segmentChanged($event)">
+  <ion-segment [(ngModel)]="selectedSegment" (ionChange)="segmentChanged($event)" class="segment-control">
     <ion-segment-button *ngFor="let segment of segments" [value]="segment">
       {{segment}}
     </ion-segment-button>
   </ion-segment>
-  <div >
-    <ion-card class="ioncard" *ngFor="let doctor of doctors" (click)="openDetailModal(doctor)">
-      <ion-item lines="none">
-        <ion-avatar slot="start">
-          <img [src]="doctor.get('avatar')" alt="医生头像">
-        </ion-avatar>
-        
-        <ion-label>
-          <div class="doctor-header">
-            <h2>{{doctor.get('name')}}</h2>
-            <span>{{doctor.get('title')}}</span>
-            <span>{{doctor.data["specialty"]}}</span>
-            <ion-badge color="primary">可开处方</ion-badge>
-          </div>
-          
-          <div class="hospital-info">
-            <span>{{doctor.get('hospital')}}</span>
-            <ion-badge color="success">{{doctor.get('hospitalLevel')}}</ion-badge>
-            <ion-badge color="warning">{{doctor.get('hospitalType')}}</ion-badge>
-          </div>
-        </ion-label>
-      </ion-item>
-    
-      <ion-item lines="none">
-        <ion-text color="medium" class="expertise">
-          {{doctor.get('expertise')}}
-        </ion-text>
-      </ion-item>
-    
-      <ion-item lines="none">
-        <div class="stats">
-          <div>
-            <ion-text color="warning">{{doctor.get('rating')}}</ion-text>
-            <ion-icon name="star" color="warning"></ion-icon>
-          </div>
-          <div>接诊量 {{doctor.get('consultations')}}</div>
-          <div>同行认可 {{doctor.get('recommendations')}}</div>
-        </div>
-      </ion-item>
-    
-      <ion-item lines="none">
-        <div class="consultation-types">
-          <ion-button fill="outline">图文 ¥{{doctor.data["prices"]?.text}}</ion-button>
-          <ion-button fill="outline">电话 ¥{{doctor.data["prices"]?.voice}}</ion-button>
-          <ion-button fill="outline">视频 ¥{{doctor.data["prices"]?.video}}</ion-button>
-          <ion-button color="success">年度好医生</ion-button>
-        </div>
-      </ion-item>
-    </ion-card>
-  </div>
+
+  <ion-grid>
+    <ion-row>
+      <ion-col size="12">
+        <ion-card class="doctor-card" *ngFor="let doctor of doctors" (click)="openDetailModal(doctor)">
+          <ion-item lines="none">
+            <ion-avatar slot="start">
+              <img [src]="doctor.get('avatar')" alt="医生头像">
+            </ion-avatar>
+            <ion-label>
+              <div class="doctor-header">
+                <h2>{{doctor.get('name')}}</h2>
+                <span class="title">{{doctor.get('title')}}</span>
+                <span class="specialty">{{doctor.data["specialty"]}}</span>
+                <ion-badge color="primary">可开处方</ion-badge>
+              </div>
+              <div class="hospital-info">
+                <span>{{doctor.get('hospital')}}</span>
+                <ion-badge color="success">{{doctor.get('hospitalLevel')}}</ion-badge>
+                <ion-badge color="warning">{{doctor.get('hospitalType')}}</ion-badge>
+              </div>
+            </ion-label>
+          </ion-item>
+
+          <ion-item lines="none">
+            <ion-text color="medium" class="expertise">
+              {{doctor.get('expertise')}}
+            </ion-text>
+          </ion-item>
+
+          <ion-item lines="none">
+            <div class="stats">
+              <div>
+                <ion-text color="warning">{{doctor.get('rating')}}</ion-text>
+                <ion-icon name="star" color="warning"></ion-icon>
+              </div>
+              <div>接诊量 {{doctor.get('consultations')}}</div>
+              <div>同行认可 {{doctor.get('recommendations')}}</div>
+            </div>
+          </ion-item>
+
+          <ion-item lines="none">
+            <div class="consultation-types">
+              <ion-button fill="outline">图文 ¥{{doctor.data["prices"]?.text}}</ion-button>
+              <ion-button fill="outline">电话 ¥{{doctor.data["prices"]?.voice}}</ion-button>
+              <ion-button fill="outline">视频 ¥{{doctor.data["prices"]?.video}}</ion-button>
+              <ion-button color="success">年度好医生</ion-button>
+            </div>
+          </ion-item>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 
   <!-- 医生详情模态框 -->
   <ion-modal [isOpen]="isModalOpen" cssClass="bottom-modal">
@@ -79,72 +82,74 @@
       </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="doctor1.get('isVerified')">
-                <ion-icon name="checkmark-circle"></ion-icon>
-                已通过实名认证
+        <ion-card class="doctor-detail-card">
+          <div class="doctor-header1">
+            <div class="verification-badge" *ngIf="doctor1.get('isVerified')">
+              <ion-icon name="checkmark-circle"></ion-icon>
+              已通过实名认证
+            </div>
+            <div class="qualification-badge">
+              执业资质已审核通过
+            </div>
+          </div>
+
+          <div class="doctor-info1" style="display: flex;">
+            <div class="left-section">
+              <div class="name-title">
+                <h2>{{doctor1.get('name')}}</h2>
+                <ion-badge *ngIf="doctor1.get('isExpert')" color="warning">知名专家</ion-badge>
+              </div>
+
+              <div class="position">
+                <span>{{doctor1.get('specialty')}}</span>
+                <span>{{doctor1.get('title')}}</span>
               </div>
-              <div class="qualification-badge">
-                执业资质已审核通过
+
+              <div class="hospital">
+                <span>{{doctor1.get('hospital')}}</span>
+                <ion-badge color="success">{{doctor1.get('hospitalLevel')}}</ion-badge>
               </div>
-            </div>
-          
-            <div class="doctor-info1">
-              <div class="left-section">
-                <div class="name-title">
-                  <h2>{{doctor1.get('name')}}</h2>
-                  <ion-badge *ngIf="doctor1.get('isExpert')" color="warning">知名专家</ion-badge>
+
+              <div class="stats">
+                <div class="rating">
+                  <span class="number">{{doctor1.get('rating')}}</span>
+                  <ion-icon name="star" color="warning"></ion-icon>
                 </div>
-                
-                <div class="position">
-                  <span>{{doctor1.get('specialty')}}</span>
-                  <span>{{doctor1.get('title')}}</span>
+                <div class="consult">
+                  <span>接诊量 {{doctor1.get('recommendation')}}</span>
                 </div>
-                
-                <div class="hospital">
-                  <span>{{doctor1.get('hospital')}}</span>
-                  <ion-badge color="success">{{doctor1.get('hospitalLevel')}}</ion-badge>
+                <div class="service">
+                  <span>服务态度好</span>
                 </div>
-          
-                <div class="stats">
-                  <div class="rating">
-                    <span class="number">{{doctor1.get('rating')}}</span>
-                    <ion-icon name="star" color="warning"></ion-icon>
-                  </div>
-                  <div class="consult">
-                    <span>接诊量 {{doctor1.get('recommendation')}}</span>
-                  </div>
-                  <div class="service">
-                    <span>服务态度好</span>
-                  </div>
-                </div>
-              </div>
-          
-              <div class="right-section">
-                <ion-avatar>
-                  <img [src]="doctor1.get('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 doctor1.data['tags']" outline>
-                  {{tag}}
-                </ion-chip>
-              </div>
+
+            <div class="right-section">
+              <ion-avatar>
+                <img [src]="doctor1.get('avatar')" alt="医生头像">
+              </ion-avatar>
+              <ion-button fill="outline" size="small" color="success">
+                + 关注
+              </ion-button>
             </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="tags">
+            <ion-chip *ngFor="let tag of doctor1.data['tags']" outline>
+              {{tag}}
+            </ion-chip>
+          </div>
+        </ion-card>
+
+        <div class="info-section">
+          <div class="info-header">
+            <h1>擅长与简介</h1>
+          </div>
+          <div class="info-content">
+            <p>{{doctor1?.get('expertise')}}</p>
+          </div>
         </div>
+
         <div class="consult-options">
           <div class="option-grid">
             <div class="option-item" 
@@ -175,29 +180,37 @@
             </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 class="info">
+          <div class="info-header">
+            <h1>保证服务</h1>
           </div>
-          <div style="margin: 5px 10px;">
-            <p style="color: grey;">{{doctor1?.get('expertise')}}</p>
+          <div class="info-content guarantee">
+            <p>保证医生真实      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  未使用随时退&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        不满意可申诉</p>
+            <p></p>
+            <p></p>
           </div>
         </div>
-        <div>
-          <ion-buttons>
-            <ion-button color="primary" expand="block" (click)="appoint()">立即预约</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-button color="primary" expand="block" (click)="appoint()">立即预约</ion-button>
+        <ion-button class="consult-button" expand="block" color="success" (click)="openConsult()">立即咨询（点击付款）</ion-button>
       </ion-footer>
     </ng-template>
   </ion-modal>
 
-  <!-- 新增收款码模态框 -->
+  <!-- 收款码模态框 -->
   <ion-modal [isOpen]="isPaymentModalOpen" cssClass="payment-modal" (ionBackdropTap)="closePaymentModal()">
     <ng-template>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>支付方式</ion-title>
+          <ion-buttons slot="end">
+            <ion-button (click)="closePaymentModal()">关闭</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
       <ion-content class="ion-padding payment-content">
         <div class="payment-codes">
           <img src="../../../assets/image/paya.png" alt="收款码A" class="payment-image">

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

@@ -1,6 +1,6 @@
 ion-header {
-  background-color: #5c97ff;
-  color: white;
+  --background: #5c97ff;
+  --color: white;
 }
 
 ion-title {
@@ -8,22 +8,37 @@ ion-title {
   font-weight: bold;
   text-align: center;
 }
-.ioncard {
+
+.segment-control {
   margin: 16px;
-  box-shadow: none;
-  border: 1px solid #eee;
+}
+
+.doctor-card {
+  margin: 8px 0;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s;
+}
+
+.doctor-card:hover {
+  transform: translateY(-5px);
 }
 
 .doctor-header {
   display: flex;
   align-items: center;
   gap: 8px;
-  
+
   h2 {
     margin: 0;
     font-size: 18px;
     font-weight: bold;
   }
+
+  .title, .specialty {
+    font-size: 14px;
+    color: #555;
+  }
 }
 
 .hospital-info {
@@ -39,13 +54,14 @@ ion-title {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
+  -webkit-line-clamp: 2;
 }
 
 .stats {
   display: flex;
   gap: 16px;
   font-size: 14px;
-  
+
   div {
     display: flex;
     align-items: center;
@@ -57,20 +73,20 @@ ion-title {
   display: flex;
   gap: 8px;
   overflow-x: auto;
-  
+  padding: 8px 0;
+
   ion-button {
     --padding-start: 16px;
     --padding-end: 16px;
     height: 32px;
     font-size: 14px;
+    white-space: nowrap;
   }
 }
 
-.first {
-  margin: 5px 16px;
-  padding: 12px;
-  box-shadow: none;
-  border: 1px solid #eee;
+.doctor-detail-card {
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 .doctor-header1 {
@@ -84,20 +100,28 @@ ion-title {
     display: flex;
     align-items: center;
     gap: 4px;
-    
+
     ion-icon {
       color: #52c41a;
     }
   }
+
+  .qualification-badge {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: #52c41a;
+  }
 }
 
 .doctor-info1 {
   display: flex;
   justify-content: space-between;
-  
+  margin-bottom: 16px;
+
   .left-section {
     flex: 1;
-    
+
     .name-title {
       display: flex;
       align-items: center;
@@ -136,7 +160,7 @@ ion-title {
         display: flex;
         align-items: center;
         gap: 4px;
-        
+
         .number {
           color: #f90;
           font-weight: 500;
@@ -145,16 +169,16 @@ ion-title {
     }
 
     .tags {
-      color: blue;
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
-      
+      margin-top: 8px;
+
       ion-chip {
-        margin: 0;
         height: 24px;
-        --background: rgb(0, 255, 0);
-        --color: #666;
+        --background: rgba(230, 230, 243, 0.7);
+        --color: #333;
+        border-radius: 10px;
       }
     }
   }
@@ -164,7 +188,6 @@ ion-title {
     flex-direction: column;
     align-items: center;
     gap: 8px;
-    margin-left: 16px;
 
     ion-avatar {
       width: 64px;
@@ -179,27 +202,51 @@ ion-title {
   }
 }
 
-.aa{
-  margin: 2px auto;
-  padding: 0;
+.info-section {
+  margin: 16px 0;
+  padding: 12px;
+  background: #f9f9f9;
+  border-radius: 12px;
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
 }
-.aaa{
-  font-size: 12px;
+
+.info-header {
+  margin-bottom: 8px;
+}
+
+.info-header h1 {
+  font-size: 18px;
+  color: #333;
+}
+
+.info-content p {
+  color: #555;
+  line-height: 1.6;
+}
+
+.guarantee {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 12px;
+  font-size: 14px;
   color: gray;
-  margin-top: 0px;
-  margin-right: 15px;
-  margin-left: 35px;
+
+  p {
+    margin: 0;
+  }
 }
 
 .consult-options {
   padding: 16px;
   background: #fff;
   margin: 0 10px;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 }
 
 .option-grid {
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
   gap: 12px;
 }
 
@@ -210,15 +257,14 @@ ion-title {
   padding: 12px;
   cursor: pointer;
   transition: all 0.3s;
+  text-align: center;
 
   &.selected {
     border-color: var(--ion-color-primary);
     background-color: var(--ion-color-primary-tint);
 
-    .icon-wrapper {
-      ion-icon {
-        color: var(--ion-color-primary);
-      }
+    .icon-wrapper ion-icon {
+      color: var(--ion-color-primary);
     }
 
     .title1 {
@@ -244,7 +290,6 @@ ion-title {
   display: flex;
   flex-direction: column;
   align-items: center;
-  text-align: center;
 }
 
 .icon-wrapper {
@@ -283,31 +328,72 @@ ion-title {
   color: #999;
 }
 
-/* 新增收款码模态框样式 */
+.consult-button {
+  border-radius: 10px;
+}
+
+/* 收款码模态框的样式 */
 .payment-modal {
-  --width: 80%;
-  --max-width: 400px;
-  --height: auto;
-  --border-radius: 12px;
+  --width: 90%;             /* 增加模态框宽度到90% */
+  --max-width: 800px;       /* 增加模态框最大宽度到800px */
+  --border-radius: 12px;    /* 模态框圆角 */
 }
 
+/* 收款码内容区域的布局 */
 .payment-content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
+  display: flex;             /* 使用Flex布局 */
+  justify-content: center;   /* 水平居中 */
+  align-items: center;       /* 垂直居中 */
+  flex-direction: column;    /* 垂直排列 */
 }
 
+/* 收款码容器的样式 */
 .payment-codes {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
+  display: flex;             /* 使用Flex布局 */
+  flex-direction: row;       /* 水平排列，确保收款码并排 */
+  align-items: center;       /* 居中对齐 */
+  justify-content: center;   /* 水平居中对齐容器内的收款码 */
+  gap: 32px;                 /* 两个收款码之间的间距 */
+  width: 100%;               /* 设置容器宽度为100%，确保收款码在模态框中居中 */
 }
 
+/* 收款码图片的样式 */
 .payment-image {
-  width: 200px; // 根据实际需要调整尺寸
-  height: auto;
-  border: 1px solid #ddd;
-  border-radius: 8px;
+  width: 250px;              /* 增加图片宽度到250px */
+  height: auto;              /* 高度自适应，保持图片比例 */
+  border: 1px solid #ddd;    /* 边框 */
+  border-radius: 8px;        /* 圆角 */
+}
+
+/* 响应式设计：屏幕宽度小于等于768px时的样式调整 */
+@media (max-width: 768px) {
+  /* 医生信息部分改为垂直排列 */
+  .doctor-info1 {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  /* 右侧操作部分改为水平排列 */
+  .right-section {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  /* 保证服务部分改为垂直排列 */
+  .guarantee {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  /* 收款码容器在小屏幕上改为垂直排列 */
+  .payment-codes {
+    flex-direction: column;  /* 垂直排列 */
+    gap: 16px;               /* 减小间距 */
+  }
+
+  /* 收款码图片在小屏幕上调整宽度 */
+  .payment-image {
+    width: 80%;               /* 调整图片宽度以适应小屏幕 */
+    max-width: none;         /* 移除最大宽度限制 */
+  }
 }

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

@@ -7,7 +7,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { CloudObject, CloudQuery, CloudUser } from 'src/lib/ncloud';
 
-addIcons({ airplane, bluetooth, call, wifi });
+addIcons({ airplane, bluetooth, call, wifi, star, checkmarkCircle });
 
 interface Doctor {
   avatar: string;
@@ -50,7 +50,7 @@ interface ConsultOption {
     IonHeader, IonToolbar, IonTitle, IonContent, CommonModule,
     IonLabel, IonItem, IonList, IonAvatar, IonButton, IonChip, IonIcon, IonBadge,
     IonText, IonCard, IonSegment, IonSegmentButton, FormsModule, IonCol, IonRow, IonGrid,
-    IonModal, IonButtons, IonFooter,IonBackButton
+    IonModal, IonButtons, IonFooter, IonBackButton
   ]
 })
 export class InquiryHumanComponent implements OnInit {
@@ -96,33 +96,36 @@ export class InquiryHumanComponent implements OnInit {
       unit: '',
       isAvailable: false
     }
-];
-
+  ];
+  type:string = "图文咨询"
   selectOption(option: ConsultOption) {
     if (!option.isAvailable) return;
     this.options.forEach(opt => opt.isSelected = false);
     option.isSelected = true;
+    this.type = option.title
+    
   }
 
   isModalOpen = false;
   isPaymentModalOpen = false; // 新增状态变量
 
-  currentUser: CloudUser 
+  currentUser: CloudUser;
+
   constructor(
     private alertController: AlertController,
     private router: Router,
     private toastController: ToastController // 注入 ToastController
   ) {
-      addIcons({star,checkmarkCircle});
-      this.currentUser = new CloudUser();
-      this.loadDoctors();
-     }
+    this.currentUser = new CloudUser();
+    this.loadDoctors();
+  }
 
   ngOnInit() { }
 
   // 顶部导航栏
   selectedSegment = '全部';
   segments = ['全部', '妇产科', '儿科', '皮肤性病科', '内科'];
+
   // 选择科室
   async segmentChanged(event: any) {
     this.selectedSegment = event.detail.value;
@@ -133,29 +136,31 @@ export class InquiryHumanComponent implements OnInit {
   // 医生列表
   doctors: Array<CloudObject> = [];
   async loadDoctors() {
-    let query = new CloudQuery('Doctor1')
-    // query.include("depart")
-    // query.include("user")
+    let query = new CloudQuery('Doctor1');
     if (this.selectedSegment != '全部'){
-      query.equalTo('specialty', this.selectedSegment)
+      query.equalTo('specialty', this.selectedSegment);
     }
-    this.doctors = await query.find()
-    console.log(this.doctors)
+    this.doctors = await query.find();
+    console.log(this.doctors);
   }
+
   doctor1: any;
+
   // 打开医生详情模态框
   openDetailModal(doctor: any) {
     this.isModalOpen = true; // 打开模态框
     this.doctor1 = doctor; // 传递医生信息
   }
+
   closeDetailModal() {
     this.isModalOpen = false; // 关闭模态框
     this.doctor1 = null; // 清空医生信息
   }
 
   selectedOption: ConsultOption | undefined;
+
   async openConsult(){
-   this.selectedOption = this.options.find(option => option.isSelected);
+    this.selectedOption = this.options.find(option => option.isSelected);
     if (!this.selectedOption) {
       // 显示 Toast 提示用户选择咨询方式
       const toast = await this.toastController.create({
@@ -177,10 +182,12 @@ export class InquiryHumanComponent implements OnInit {
   closePaymentModal() {
     this.isPaymentModalOpen = false;
   }
-  num:number = 1
+
+  num: number = 1;
+
   // 立即预约 Appointment Doctor User 
   async appoint(){
-    console.log("this.doctor1",this.doctor1)
+    console.log("this.doctor1",this.doctor1);
     let alert = await this.alertController.create({
       header: '温馨提示',
       subHeader: 'Tips',
@@ -200,16 +207,20 @@ export class InquiryHumanComponent implements OnInit {
       buttons: ['好的'],
     });
     if(this.num == 0){
-      await alert1.present()
-      return
+      await alert1.present();
+      return;
+    }
+    if(!this.currentUser?.data["phone"] || !this.currentUser?.data["realname"]){
+      await alert2.present();
+      return;
     }
     if(!this.currentUser?.data["phone"] || !this.currentUser?.data["realname"]){
       await alert2.present()
       return
     }
     if(this.num == 1){
-      console.log("立即预约我的医生")
-      let appointment = new CloudObject('appointment')
+      console.log("立即预约我的医生");
+      let appointment = new CloudObject('appointment');
       appointment.set({
         doctor: {
           __type:"Pointer",
@@ -222,16 +233,15 @@ export class InquiryHumanComponent implements OnInit {
           className:"user",
           objectId:this.currentUser.id
         },
-        type: this.selectedOption?.title, // 咨询类型
+        type: this.type, // 咨询类型
         userPhone: this.currentUser?.data["phone"], // 获取当前用户的手机号
         username : this.currentUser?.data["realname"], // 获取当前用户的姓名
-      }
-      )
-      appointment.save()
-      this.num = 0
-      console.log(appointment)
-      await alert.present()
+      });
+      console.log("type",this.type)
+      appointment.save();
+      this.num = 0;
+      console.log(appointment);
+      await alert.present();
     }
-    
   }
 }

wisdom-app/src/app/page/page-create-agent/page-create-agent.component.html

@@ -1,17 +1,11 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <!-- <ion-buttons slot="start">
-      <ion-button (click)="backhome()" color="primary" >{{back}}</ion-button>
-    </ion-buttons> -->
-    <ion-button color="light" slot="start">
-      <ion-back-button  defaultHref="/" ></ion-back-button>
-    </ion-button>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/" color="light"></ion-back-button>
+    </ion-buttons>
     <ion-title>创建智能体</ion-title>
-
-    @if(progress!=0 && progress!=1){
-      <ion-progress-bar  [value]="progress"></ion-progress-bar>
-    }
-
+    <!-- 使用Angular的 *ngIf 指令来控制进度条的显示 -->
+    <ion-progress-bar *ngIf="progress > 0 && progress < 1" [value]="progress"></ion-progress-bar>
   </ion-toolbar>
 </ion-header>
 
@@ -19,69 +13,120 @@
   <ion-refresher slot="fixed" (ionRefresh)="handleRefresh($event)">
     <ion-refresher-content></ion-refresher-content>
   </ion-refresher>
-  <div style="text-align: center; margin-top: 20px">
-    <img height="80px" [src]="currentUser.get('avatar')" alt="" style="border-radius: 50%;">
-    <p>AI生成头像</p>
+
+  <!-- 用户头像和描述 -->
+  <div class="user-avatar-section">
+    <img
+      class="user-avatar"
+      [src]="currentUser.get('avatar') || '../../assets/image/doctor7.png'"
+      alt="用户头像"
+    />
+    <p class="avatar-description">AI生成头像</p>
   </div>
-  <div>
-    <ion-card>
+
+  <!-- 创建智能体表单 -->
+  <ion-card class="form-card">
+    <ion-card-header>
+      <ion-card-title>创建智能体信息</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
       <ion-list>
+        <!-- 名称输入 -->
         <ion-item>
-          <p style="width: 60px; font-weight: bolder;">名称：</p>
-          <!-- <ion-input label="输入你想了解的科普信息" placeholder="Enter text"></ion-input> -->
-          <ion-input  [value]="name" placeholder="输入名称" (ionInput)="nameInput($event)"></ion-input>
+          <ion-label position="stacked">名称</ion-label>
+          <ion-input
+            type="text"
+            placeholder="输入名称"
+            [(ngModel)]="name"
+          ></ion-input>
         </ion-item>
+        
+        <!-- 年龄输入 -->
         <ion-item>
-          <p style="width: 60px; font-weight: bolder;">年龄：</p>
-          <ion-input  [value]="age" placeholder="输入年龄" (ionInput)="ageInput($event)"></ion-input>
+          <ion-label position="stacked">年龄</ion-label>
+          <ion-input
+            type="number"
+            placeholder="输入年龄"
+            [(ngModel)]="age"
+          ></ion-input>
         </ion-item>
+        
+        <!-- 性别选择 -->
         <ion-item>
-          <p style="width: 60px;  font-weight: bolder;">性别：</p>
+          <ion-label position="stacked">性别</ion-label>
           <ion-select
-            aria-label="性别"
             placeholder="选择性别"
-            (ionChange)="genderChange($event)"
-            (ionCancel)="genderCancel()"
-            (ionDismiss)="genderDismiss()"
+            [(ngModel)]="gender"
           >
             <ion-select-option value="男">男</ion-select-option>
             <ion-select-option value="女">女</ion-select-option>
+            <ion-select-option value="其他">其他</ion-select-option>
           </ion-select>
         </ion-item>
-        <ion-item style="height: auto;">
-            <p style="width:120px;font-weight: bolder;">设定描述：</p>
-            <ion-textarea [value]="desc" placeholder="示例：你是一位经验丰富的妇科医生，拥有丰富的临床经验" (ionInput)="descInput($event)" autoGrow="true"></ion-textarea> 
+        
+        <!-- 设定描述 -->
+        <ion-item>
+          <ion-label position="stacked">设定描述</ion-label>
+          <ion-textarea
+            placeholder="示例：你是一位经验丰富的妇科医生，拥有丰富的临床经验"
+            autoGrow="true"
+            [(ngModel)]="desc"
+          ></ion-textarea>
         </ion-item>
       </ion-list>
-    </ion-card>
-  </div>
-  <ion-card>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 我的智能体列表 -->
+  <ion-card class="agent-list-card" *ngFor="let agent of agentList">
     <ion-card-header>
       <ion-card-title>我的智能体</ion-card-title>
       <ion-card-subtitle>智能体</ion-card-subtitle>
     </ion-card-header>
     <ion-card-content>
       <ion-list>
-        <ion-item  *ngFor="let agent of agentList" lines="none">
-          <ion-thumbnail slot="start" (click)="openInquiry(agent)">
-            <img [src]="agent.get('avatar') || '../../assets/image/doctor7.png'" [alt]="agent.get('name')" />
+        <ion-item  lines="none">
+          <ion-thumbnail slot="start">
+            <img
+              [src]="agent.get('avatar') || '../../assets/image/doctor7.png'"
+              [alt]="agent.get('name')"
+              (click)="openInquiry(agent)"
+            />
           </ion-thumbnail>
-          <div class="doctor-info" (click)="openInquiry(agent)">
-            <div>
-              <ion-text>{{ agent.get('name') }}({{ agent.get('age') }}岁)</ion-text>
-            </div>
-            <div>
-              <ion-text>{{ agent.get('gender') }}</ion-text>
-            </div>
-          </div>
-          <ion-button ios="logo-apple" size="small" color="danger" (click)="deleteAgent(agent)" slot="end">删除</ion-button>
+          <ion-label (click)="openInquiry(agent)" class="agent-info">
+            <h2>{{ agent.get('name') }} ({{ agent.get('age') }}岁)</h2>
+            <p>{{ agent.get('gender') }}</p>
+          </ion-label>
+          <ion-button
+            size="small"
+            color="danger"
+            fill="clear"
+            (click)="deleteAgent(agent)"
+            slot="end"
+          >
+            删除
+          </ion-button>
         </ion-item>
       </ion-list>
     </ion-card-content>
   </ion-card>
+
+  <!-- 空状态 -->
+  <div *ngIf="agentList.length === 0" class="empty-state">
+    <ion-icon name="person-off-outline" size="large"></ion-icon>
+    <p>暂无智能体记录</p>
+  </div>
 </ion-content>
+
 <ion-footer>
   <ion-toolbar>
-    <ion-button  (click)="createAgent()" expand="block" color="primary" >创建ai医生</ion-button>
+    <ion-button
+      expand="block"
+      color="primary"
+      (click)="createAgent()"
+      class="create-agent-button"
+    >
+      创建AI医生
+    </ion-button>
   </ion-toolbar>
 </ion-footer>

wisdom-app/src/app/page/page-create-agent/page-create-agent.component.scss

@@ -1,10 +1,156 @@
+/* 通用样式 */
 ion-header {
-    background-color: #5c97ff;
-    color: white;
-}
-
-ion-title {
+    --background: #478aff;
+    --color: white;
+  }
+  
+  ion-title {
     font-size: 20px;
     font-weight: bold;
     text-align: center;
-}
+  }
+  
+  ion-toolbar {
+    --background: #699df9;
+    position: relative;
+  }
+  
+  ion-back-button {
+    --color: white;
+  }
+  
+  ion-progress-bar {
+    margin-top: 8px;
+    height: 4px;
+  }
+  
+  /* 用户头像部分 */
+  .user-avatar-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 20px 0;
+  }
+  
+  .user-avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid #5c97ff;
+  }
+  
+  .avatar-description {
+    margin-top: 10px;
+    font-size: 16px;
+    color: #555;
+  }
+  
+  /* 表单卡片 */
+  .form-card {
+    margin: 0 16px 20px 16px;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+  
+  .form-card ion-card-title {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  
+  .form-card ion-card-subtitle {
+    font-size: 14px;
+    color: #888;
+  }
+  
+  /* 智能体列表卡片 */
+  .agent-list-card {
+    margin: 0 16px 20px 16px;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+  
+  .agent-list-card ion-card-title {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  
+  .agent-list-card ion-card-subtitle {
+    font-size: 14px;
+    color: #888;
+  }
+  
+  .agent-info {
+    cursor: pointer;
+  }
+  
+  .agent-info h2 {
+    font-size: 16px;
+    margin: 0;
+    color: #333;
+  }
+  
+  .agent-info p {
+    font-size: 14px;
+    margin: 4px 0 0 0;
+    color: #666;
+  }
+  
+  /* 删除按钮样式 */
+  ion-button[color="danger"] {
+    --padding-start: 8px;
+    --padding-end: 8px;
+    font-size: 14px;
+  }
+  
+  /* 创建智能体按钮 */
+  .create-agent-button {
+    --border-radius: 0;
+    font-size: 16px;
+    font-weight: bold;
+  }
+  
+  /* 空状态样式 */
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 10vh;
+    color: #888;
+    font-size: 16px;
+  }
+  
+  .empty-state ion-icon {
+    margin-bottom: 12px;
+    color: #bbb;
+  }
+
+  
+  /* 响应式设计 */
+  @media (max-width: 600px) {
+    .user-avatar {
+      width: 60px;
+      height: 60px;
+    }
+  
+    .avatar-description {
+      font-size: 14px;
+    }
+  
+    .form-card, .agent-list-card {
+      margin: 0 8px 16px 8px;
+    }
+  
+    .create-agent-button {
+      font-size: 14px;
+    }
+  
+    .agent-info h2 {
+      font-size: 14px;
+    }
+  
+    .agent-info p {
+      font-size: 12px;
+    }
+  }

wisdom-app/src/app/page/page-create-agent/page-create-agent.component.ts

@@ -4,6 +4,8 @@ import { CloudObject, CloudQuery, CloudUser } from 'src/lib/ncloud';
 import { LoadingController,IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonIcon, ModalController, IonTextarea, IonInput, IonCard, IonCardHeader, IonCardTitle, IonThumbnail, IonCardContent, IonCardSubtitle, IonItem, IonList, IonLabel, IonAvatar, IonSelect, IonSelectOption, AlertController, IonButtons, IonProgressBar, IonText, IonRefresherContent, IonRefresher, ToastController, IonToast, IonFooter, IonBackButton } from '@ionic/angular/standalone';
 import { CommonModule } from '@angular/common';
 import { AvatarModule, ChatPanelOptions, DalleOptions, FmodeChat, FmodeChatCompletion, FmodeChatMessage, ImagineWork, openChatPanelModal } from 'fmode-ng';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
 
 
 @Component({
@@ -42,7 +44,7 @@ import { AvatarModule, ChatPanelOptions, DalleOptions, FmodeChat, FmodeChatCompl
      IonCardSubtitle,
      IonRefresher,
      IonRefresherContent,
-    IonToast
+    IonToast,FormsModule
   ],
 })
 export class PageCreateAgentComponent  implements OnInit {
@@ -331,9 +333,36 @@ ${userPrompt}
       }
       openChatPanelModal(this.modalCtrl,options)
   }
-  deleteAgent(agent:CloudObject){
+  async deleteAgent(agent:CloudObject){
+    const alert = await this.alertController.create({
+      header: '确认删除',
+      message: `确定要删除 ${agent.get('name')} 吗？`,
+      buttons: [
+        {
+          text: '取消',
+          role: 'cancel',
+        },
+        {
+          text: '确认',
+          handler: () => {
+            this.agentList = this.agentList.filter(a => a.id !== agent.id);
+            this.presentToast('智能体已删除。');
+          },
+        },
+      ],
+    });
+    
+    await alert.present();
     console.log("删除了",agent);
     agent.destroy();
     this.loadAgentData();
   }
+  async presentToast(message: string) {
+    const toast = await this.toastController.create({
+      message,
+      duration: 2000,
+      position: 'bottom',
+    });
+    toast.present();
+  }
 }

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

@@ -1,33 +1,66 @@
 <!-- 我的预约页面 -->
 <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-button fill="clear" size="small" class="toggle-button" (click)="toggleDetails(appointment?.id)">
+          <ion-icon [name]="isExpanded(appointment.id) ? 'chevron-up' : 'chevron-down'"></ion-icon>
+          {{ isExpanded(appointment.id) ? '收起' : '展开' }}
+        </ion-button>
+        
+        <!-- 折叠的内容 -->
+        <div class="additional-details" *ngIf="isExpanded(appointment?.id)">
+          <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-item lines="none">
+            <ion-icon name="time" slot="start" color="primary"></ion-icon>
+            <ion-label class="appointment-time">时间：{{appointment.updatedAt | date:'short'}}</ion-label>
+          </ion-item>
+          <ion-button 
+            expand="block" 
+            color="primary" 
+            class="action-button"
+            (click)="presentAlert(appointment.get('username'), appointment.get('userPhone'))">
+            立即前往
+          </ion-button>
+          <ion-button color="danger" expand="block" (click)="deleteAppoint(appointment)">
+            删除预约
+          </ion-button>
+        </div>
+      </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,191 @@
 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;
+}
+ion-header {
+  --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,
+.appointment-time {
+  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;
+}
+
+/* 折叠按钮样式 */
+.toggle-button {
+  --padding-start: 0;
+  --padding-end: 0;
+  --min-height: 0;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+}
+
+/* 折叠内容过渡效果 */
+.additional-details {
+  margin-top: 12px;
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; max-height: 0; }
+  to { opacity: 1; max-height: 500px; }
+}

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

@@ -1,89 +1,174 @@
 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);
+    let list = await query.find()
+    this.appointmentList = list.reverse();
+    console.log('我的appointmentList', this.appointmentList);
+    console.log("this.currentUser", this.currentUser);
   }
+  expandedAppointments: Set<string> = new Set();
 
+// 切换折叠状态
+toggleDetails(appointmentId: any) {
+  if (this.expandedAppointments.has(appointmentId)) {
+    this.expandedAppointments.delete(appointmentId);
+  } else {
+    this.expandedAppointments.add(appointmentId);
+  }
+}
+// 检查是否展开
+isExpanded(appointmentId: any): boolean {
+  return this.expandedAppointments.has(appointmentId);
+}
   // 用来认证医生
-  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();
+  }
+  async deleteAppoint(appoint:CloudObject){
+    let alert = await this.alertController.create({
+      header: '温馨提示',
+      subHeader: 'Tips',
+      message: '删除成功！',
+      buttons: ['好的'],
+    });
+    console.log("删除了",appoint)
+    appoint.destroy();
+    this.appointDisplay();
+    await alert.present();
+    
+  }
+}

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

@@ -155,6 +155,10 @@
             <ion-icon name="cloud-circle" slot="start"></ion-icon>
             <ion-label (click)="goToWeatherTime()">天气与时间</ion-label>
           </ion-item>
+          <ion-item>
+            <ion-icon name="compass" slot="start"></ion-icon>
+            <ion-label (click)="goToGuide()">智养指南</ion-label>
+          </ion-item>
           <ion-item>
             <ion-icon name="chatbox" slot="start"></ion-icon>
             <ion-label>联系客服</ion-label>

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

@@ -76,6 +76,11 @@ export class Tab4Page {
     this.router.navigate(['/tabs/password'])
   }
 
+  //前往指南页面
+  goToGuide(){
+    this.router.navigate(['/tabs/guide'])
+  }
+
   //前往天气时间页面
   goToWeatherTime(){
     this.router.navigate(['/tabs/weather-time'])

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

@@ -95,6 +95,13 @@ export const routes: Routes = [
             (m) => m.TimeWeatherComponent
           ),
       },
+      {
+        path: 'guide',
+        loadComponent: () =>
+          import('../page/guide/guide.component').then(
+            (m) => m.GuideComponent
+          ),
+      },
       {
         path: '',
         redirectTo: '/tabs/tab1',