fix: 完成科普页面以及一些商城页面

wisdom-app/src/app/component/article-card/article-card.component.html

@@ -0,0 +1,10 @@
+<div class="card">
+  <img [src]="card.image" alt="Image">
+  <div class="content">
+    <h3>{{ card.title }}</h3>
+    <p>{{ card.topic }} &nbsp; {{ card.date }}</p>
+    <p>
+      阅读量: {{ card.views }} &nbsp; 赞: {{ card.likes }}
+    </p>
+  </div>
+</div>

wisdom-app/src/app/component/article-card/article-card.component.scss

@@ -0,0 +1,37 @@
+.card {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #e0e0e0;
+    padding: 10px 0;
+  }
+  
+  .card img {
+    width: 120px;
+    height: 80px;
+    margin-right: 15px;
+    object-fit: cover;
+  }
+  
+  .card .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  
+  .card h3 {
+    font-size: 16px;
+    margin: 0;
+    color: #333;
+  }
+  
+  .card p {
+    margin: 5px 0;
+    color: #666;
+    font-size: 14px;
+  }
+  
+  .card p:last-child {
+    display: flex;
+    justify-content: space-between;
+    width: 150px;
+  }

wisdom-app/src/app/component/article-card/article-card.component.spec.ts

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

wisdom-app/src/app/component/article-card/article-card.component.ts

@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { IonCard } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-article-card',
+  templateUrl: './article-card.component.html',
+  styleUrls: ['./article-card.component.scss'],
+  standalone: true,
+  imports: [
+    IonCard, CommonModule
+  ]
+})
+export class ArticleCardComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+  /**
+   * controller for dropdown visibility
+   */
+  dropdownVisible = false;
+
+  toggleDropdown() {
+    this.dropdownVisible = !this.dropdownVisible;
+  }
+
+  @Input() card: any; // 接收父组件传递的卡片数据
+}

wisdom-app/src/app/component/edit-tag/edit-tag.component.ts

@@ -8,7 +8,6 @@ import { IonInput,IonButton, IonLabel, IonChip } from '@ionic/angular/standalone
   standalone: true,
   imports:[
     IonInput,IonButton,IonChip,IonLabel
-    
   ]
 })
 export class EditTagComponent  implements OnInit {

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

@@ -19,6 +19,26 @@
 <!-- node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve -->
 
 <ion-content [fullscreen]="true">
+
+   <!-- 轮播图区域 -->
+  <div class="carousel-container">
+    <div class="carousel" [style.transform]="'translateX(-' + currentSlide * 100 + '%)'">
+      <div class="slide" *ngFor="let image of images">
+        <img [src]="image" alt="轮播图">
+      </div>
+    </div>
+  
+    <button class="prev" (click)="prevSlide()">&#10094;</button>
+    <button class="next" (click)="nextSlide()">&#10095;</button>
+  
+    <div class="dots">
+      <span class="dot" *ngFor="let image of images; let i = index" 
+            [class.active]="i === currentSlide" 
+            (click)="goToSlide(i)"></span>
+    </div>
+  </div> 
+
+
   <div class="inquery">
     <div class="inquery-ai">
       <ion-button color="light" size="large" (click)="goToPage1()">

wisdom-app/src/app/tab1/tab1.page.scss

@@ -13,6 +13,71 @@
   padding: 0 16px; /* 增加按钮的左右内边距 */
   font-size: 16px; /* 调整按钮字体大小 */
 }
+// 轮播图区域
+.carousel-container {
+  position: relative;
+  max-width: 800px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.carousel {
+  display: flex;
+  transition: transform 0.5s ease-in-out;
+}
+
+.slide {
+  min-width: 100%;
+}
+
+.slide img {
+  width: 100%;
+  height: auto;
+}
+
+.prev, .next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  padding: 16px;
+  border: none;
+  cursor: pointer;
+}
+
+.prev {
+  left: 0;
+}
+
+.next {
+  right: 0;
+}
+
+.dots {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+}
+
+.dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin: 0 5px;
+  background: #bbb;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.dot.active {
+  background: #717171;
+} 
+//
+
+
 
 .inquery{
   width:100%;

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

@@ -13,6 +13,7 @@ import { documentText, chatbubbles, person, calendar, newspaper,
 import { CloudObject, CloudQuery, CloudUser } from 'src/lib/ncloud';
 import { ChatPanelOptions, FmodeChat, FmodeChatMessage, openChatPanelModal } from 'fmode-ng';
 import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
+import { ArticleCardComponent } from '../component/article-card/article-card.component';
 addIcons({ documentText, chatbubbles, person, calendar, newspaper,
    medkit,clipboard, podium, videocam, people
  });
@@ -35,6 +36,43 @@ export class Tab1Page {
     // private navCtrl: NavController,
     private http: HttpClient // 注入 HttpClient
   ) {}
+
+ /**
+  * 轮播图
+  */
+  images = [
+    'https://picsum.photos/800/400?random=1',
+    'https://picsum.photos/800/400?random=2',
+    'https://picsum.photos/800/400?random=3'
+  ];
+  currentSlide = 0;
+  intervalId: any;
+  setSlidePosition() {
+    // 这里不需要额外的逻辑，因为在 HTML 中已经通过绑定实现
+  }
+
+  nextSlide() {
+    this.currentSlide = (this.currentSlide + 1) % this.images.length;
+  }
+
+  prevSlide() {
+    this.currentSlide = (this.currentSlide - 1 + this.images.length) % this.images.length;
+  }
+
+  goToSlide(index: number) {
+    this.currentSlide = index;
+  }
+
+  startAutoSlide() {
+    this.intervalId = setInterval(() => this.nextSlide(), 3000);
+  }
+  ngOnDestroy() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+  }
+
+
   /**
    * Go to the ai page
    */
@@ -121,6 +159,7 @@ export class Tab1Page {
 
   ngOnInit() {
     this.loadDoctorList()
+    this.startAutoSlide();
   }
 
   doctorList:Array<CloudObject> = []

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

@@ -7,7 +7,21 @@
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <div>
-    
+  <div class="search-bar">
+    <input type="text" placeholder="输入关键词搜索科普文章">
+  </div>
+  
+  <div class="tabs">
+    <span class="tab active">热点</span>
+    <span class="tab">专家科普</span>
+    <span class="tab">生活</span>
+    <span class="tab">睡眠</span>
+    <span class="tab">男性</span>
+    <span class="tab">女性</span>
+    <span class="tab">&#9660;</span>
+  </div>
+  
+  <div class="knowledge-cards">
+    <app-article-card *ngFor="let card of cards" [card]="card"></app-article-card>
   </div>
 </ion-content>

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

@@ -0,0 +1,30 @@
+// 
+.search-bar {
+    padding: 10px;
+    text-align: center;
+  }
+  
+  .search-bar input {
+    width: 80%;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+  
+  .tabs {
+    display: flex;
+    justify-content: space-around;
+    padding: 10px 0;
+    background-color: #f8f8f8;
+  }
+  
+  .tab {
+    cursor: pointer;
+    padding: 5px 10px;
+  }
+  
+  .tab.active {
+    color: green;
+  }
+
+//

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

@@ -4,8 +4,18 @@ import { ExploreContainerComponent } from '../explore-container/explore-containe
 import { addIcons } from 'ionicons';
 import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
 import { ModalController } from '@ionic/angular';
+import { ArticleCardComponent } from '../component/article-card/article-card.component';
+import { CommonModule } from '@angular/common';
 addIcons({ airplane, bluetooth, call, wifi });
 
+interface Article {
+  image: string;
+  title: string;
+  category: string;
+  date: string;
+  views: number;
+  likes: number;
+}
 
 @Component({
   selector: 'app-tab2',
@@ -13,10 +23,41 @@ addIcons({ airplane, bluetooth, call, wifi });
   styleUrls: ['tab2.page.scss'],
   standalone: true,
   imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
-    IonLabel,IonItem,IonList,IonAvatar
+    IonLabel,IonItem,IonList,IonAvatar,ArticleCardComponent,CommonModule
   ]
 })
+
+
 export class Tab2Page {
+
   constructor() {
   }
+
+  cards = [
+    {
+      image: 'https://picsum.photos/800/400?random=1',
+      title: '电话—麻烦？为何年轻人这么讨厌接电话',
+      topic: '生活',
+      date: '11月29日',
+      views: '1.2万',
+      likes: 132
+    },
+    {
+      image: 'https://picsum.photos/800/400?random=2',
+      title: '眼睛也会“高血压”？',
+      topic: '生活',
+      date: '11月26日',
+      views: '1.2万',
+      likes: 150
+    },
+    {
+      image: 'https://picsum.photos/800/400?random=3',
+      title: '眼睛也会“高血压”？',
+      topic: '生活',
+      date: '11月26日',
+      views: '1.2万',
+      likes: 150
+    },
+    // 添加更多卡片数据
+  ];
 }

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

@@ -1,11 +1,39 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      Chat模块组件演示
-    </ion-title>
+    <ion-title>药品商城</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-button (click)="goChat()">开始聊天</ion-button>
+  <ion-searchbar placeholder="搜索"></ion-searchbar>
+
+  <ion-grid>
+    <ion-row>
+      <ion-col size="2" *ngFor="let category of categories">
+        <ion-button fill="">
+          <div class="category-image-wrapper">
+            <img [src]="category.image" alt="{{ category.name }}" class="category-image">
+          </div>
+          <div class="category-name">{{ category.name }}</div>
+        </ion-button>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>健康护肤专场</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-item *ngFor="let product of products">
+        <ion-thumbnail slot="start">
+          <img [src]="product.image">
+        </ion-thumbnail>
+        <ion-label>
+          <h2>{{ product.name }}</h2>
+          <p>{{ product.price }}</p>
+        </ion-label>
+      </ion-item>
+    </ion-card-content>
+  </ion-card>
 </ion-content>

wisdom-app/src/app/tab3/tab3.page.scss

@@ -0,0 +1,35 @@
+ion-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  
+  .category-image-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background-color: #e0f7fa; /* 调整背景色 */
+    margin-bottom: 8px;
+  }
+  
+  .category-image {
+    display: inline-block;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+  }
+  
+  .category-name {
+    margin-top: 4px;
+    font-size: 14px;
+    color: #333;
+  }
+  
+  ion-icon {
+    font-size: 24px;
+    margin-bottom: 4px;
+  } 

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

@@ -1,8 +1,10 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { IonHeader, IonToolbar, IonTitle, IonContent, ModalController, IonButton } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, ModalController, IonButton, IonGrid, IonCol, IonCardHeader, IonLabel, IonThumbnail, IonCardContent, IonCardTitle, IonCard, IonIcon, IonSearchbar } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { FmChatModalInput } from 'fmode-ng';
+import { IonRow, IonItem } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
 // import { ModalAudioMessageComponent } from 'fmode-ng/lib/aigc/chat/chat-modal-input/modal-audio-message/modal-audio-message.component';
 
 
@@ -13,7 +15,8 @@ import { FmChatModalInput } from 'fmode-ng';
   standalone: true,
   imports: [
     IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
-    IonButton,
+    IonButton, IonGrid, IonRow, IonCol,IonCardHeader, IonItem, IonLabel,IonThumbnail,IonCardContent,
+    IonCardTitle, IonCard, IonIcon, IonSearchbar, CommonModule,
     // ASR语音输入模块
     FmChatModalInput,
     // ModalAudioMessageComponent
@@ -24,33 +27,25 @@ export class Tab3Page {
     private modalCtrl:ModalController,
     private router:Router,
     ) {
-
   }
 
+  categories = [
+    { name: '皮肤用药', image: '../../assets/image/doctor7.png' },
+    { name: '妇科用药', image: '../../assets/image/doctor7.png' },
+    { name: '肠胃消化', image: '../../assets/image/doctor7.png' },
+    { name: '呼吸用药', image: '../../assets/image/doctor7.png' },
+    { name: '营养补充', image: '../../assets/image/doctor7.png' },
+    { name: '家庭常备', image: '../../assets/image/doctor7.png' },
+    { name: '耳鼻咽喉', image: '../../assets/image/doctor7.png' },
+    { name: '男科用药', image: '../../assets/image/doctor7.png' },
+  ];
+
+  products = [
+    { name: '清宫长春胶囊', price: '¥120', image: '../../assets/image/doctor7.png' },
+    { name: '知柏地黄丸', price: '¥200', image: '../../assets/image/doctor7.png' },
+  ];
+
   goChat(){
     this.router.navigateByUrl("/chat/session/role/2DXJkRsjXK")
   }
-
-
-  // audioModalHeightPoint:number = 0.35;
-  // async startTalk(){
-  //   // 根据手机兼容性，适配组件弹出高度
-  //   let height = document.body.clientHeight || 960;
-  //   this.audioModalHeightPoint = Number((165/height).toFixed(2));
-
-  //   // 弹出组件
-  //   let modal:any
-  //   let chat:any
-  //   modal = await this.modalCtrl.create({
-  //     component:ModalAudioMessageComponent,
-  //     componentProps:{
-  //       chat:chat,
-  //       modal:modal,
-  //       onBreakPointSet:()=>{
-  //         modal?.setCurrentBreakpoint(this.audioModalHeightPoint)
-  //       }
-  //     }
-  //   })
-  //   modal.present();
-  // }
 }

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

@@ -7,7 +7,7 @@
 
     <ion-tab-button tab="tab2" href="/tabs/tab2">
       <ion-icon aria-hidden="true" name="home"></ion-icon>
-      <ion-label>社区</ion-label>
+      <ion-label>科普</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab3" href="/tabs/tab3">

wisdom-prod/schema/schema.md

@@ -24,7 +24,7 @@
    - gender: String 性别
    - age: String 年龄
    - specialty: String（专业领域）
-   - qualifications: String（资格证书）
+   - qualifications: Array（资格证书）
    - depart: Pointer<Department>
    - createdAt: Date
    - user: Pointer<User>