热销、特惠：查看更多

wisdom-app/src/app/all-products-modal/all-products-modal.component.html

@@ -0,0 +1,29 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>{{ title }}</ion-title>
+    <ion-buttons slot="end">
+      <ion-button fill="clear" (click)="dismiss()">
+        <ion-icon name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="modal-content">
+    <ion-card *ngFor="let product of products" class="product-card" (click)="openDetailModal(product)">
+      <ion-card-header class="product-card-header">
+        <div class="product-tag">{{ product.get('title') || '药品详情' }}</div>
+      </ion-card-header>
+      <ion-card-content class="product-card-content">
+        <div class="product-image-wrapper">
+          <img [src]="product.get('image')" alt="{{product.get('name')}}" class="product-image">
+        </div>
+        <div class="product-info">
+          <h3 class="product-name">{{ product.get('name') }}</h3>
+          <div class="product-price">{{ product.get('price') }}</div>
+        </div>
+      </ion-card-content>
+    </ion-card>
+  </div>
+</ion-content>

wisdom-app/src/app/all-products-modal/all-products-modal.component.scss

@@ -0,0 +1,66 @@
+.modal-content {
+    padding: 16px;
+  }
+  
+  .product-card {
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    margin-bottom: 16px;
+  }
+  
+  .product-card-header {
+    background: #ffeb3b;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+  }
+  
+  .product-tag {
+    font-size: 14px;
+    font-weight: bold;
+    color: #333;
+  }
+  
+  .product-card-content {
+    display: flex;
+    align-items: center;
+    padding: 12px;
+  }
+  
+  .product-image-wrapper {
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-right: 12px;
+  }
+  
+  .product-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  
+  .product-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  
+  .product-name {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    white-space: normal;
+    word-break: break-all;
+    margin-bottom: 4px;
+  }
+  
+  .product-price {
+    font-size: 14px;
+    color: #e53935;
+    font-weight: bold;
+  }

wisdom-app/src/app/all-products-modal/all-products-modal.component.spec.ts

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

wisdom-app/src/app/all-products-modal/all-products-modal.component.ts

@@ -0,0 +1,38 @@
+import { Component, Input } from '@angular/core';
+import { ModalController, IonicModule } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+import { CloudObject } from 'src/lib/ncloud';
+import { DetailModalComponent } from '../detail-modal/detail-modal.component'; // 确保路径正确
+
+@Component({
+  selector: 'app-all-products-modal',
+  templateUrl: './all-products-modal.component.html',
+  styleUrls: ['./all-products-modal.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    CommonModule,
+    DetailModalComponent
+  ]
+})
+export class AllProductsModalComponent {
+  @Input() products: Array<CloudObject> = [];
+  @Input() title: string = '';
+
+  constructor(private modalCtrl: ModalController) {}
+
+  // 关闭模态窗口
+  dismiss() {
+    this.modalCtrl.dismiss();
+  }
+
+  // 打开药品详情模态窗口
+  async openDetailModal(product: any) {
+    const modal = await this.modalCtrl.create({
+      component: DetailModalComponent, // 确保 DetailModalComponent 已创建
+      componentProps: { product: product },
+      cssClass: 'bottom-modal'
+    });
+    return await modal.present();
+  }
+}

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

@@ -1,3 +1,4 @@
+import { NgModule } from '@angular/core';
 import { Routes } from '@angular/router';
 
 export const routes: Routes = [
@@ -21,4 +22,8 @@ export const routes: Routes = [
     redirectTo: '/chat/session/chat/:chatId',
     pathMatch: 'full'
   },
+  {
+    path: 'drug-category',
+    loadComponent: () => import('./drug-category/drug-category.page').then( m => m.DrugCategoryPage)
+  },
 ];

wisdom-app/src/app/detail-modal/detail-modal.component.html

@@ -0,0 +1,26 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>{{ product?.get('name') || '药品详情' }}</ion-title>
+    <ion-buttons slot="end">
+      <ion-button fill="clear" (click)="dismiss()">
+        <ion-icon name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="modal-content" *ngIf="product">
+    <div class="image-container">
+      <img [src]="product.get('image')" alt="{{product.get('name')}}" class="medicine-image">
+    </div>
+    <h2 class="product-name">{{ product.get('name') }}</h2>
+    <p><strong>价格：</strong>{{ product.get('price') }}</p>
+    <p><strong>是否处方药：</strong>{{ product.get('prescription') ? '是' : '否' }}</p>
+    <p><strong>用法用量：</strong>{{ product.get('usage') }}</p>
+    <p><strong>主治功能：</strong>{{ product.get('function') }}</p>
+    <p><strong>规格：</strong>{{ product.get('spec') }}</p>
+    <p><strong>成分：</strong>{{ product.get('composition') }}</p>
+    <p><strong>禁忌：</strong>{{ product.get('taboo') }}</p>
+  </div>
+</ion-content>

wisdom-app/src/app/detail-modal/detail-modal.component.scss

@@ -0,0 +1,30 @@
+.modal-content {
+    padding: 16px;
+  }
+  
+  .image-container {
+    width: 100%;
+    text-align: center;
+    margin-bottom: 16px;
+  }
+  
+  .medicine-image {
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+    border-radius: 8px;
+  }
+  
+  .product-name {
+    font-size: 20px;
+    font-weight: bold;
+    color: #333;
+    text-align: center;
+    margin-bottom: 8px;
+  }
+  
+  p {
+    font-size: 16px;
+    color: #555;
+    margin-bottom: 4px;
+  }

wisdom-app/src/app/detail-modal/detail-modal.component.spec.ts

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

wisdom-app/src/app/detail-modal/detail-modal.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+import { ModalController, IonicModule } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+import { CloudObject } from 'src/lib/ncloud';
+
+@Component({
+  selector: 'app-detail-modal',
+  templateUrl: './detail-modal.component.html',
+  styleUrls: ['./detail-modal.component.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    CommonModule
+  ]
+})
+export class DetailModalComponent {
+  @Input() product: CloudObject | undefined;
+
+  constructor(private modalCtrl: ModalController) {}
+
+  // 关闭模态窗口
+  dismiss() {
+    this.modalCtrl.dismiss();
+  }
+}

wisdom-app/src/app/drug-category/drug-category.page.html

@@ -0,0 +1,31 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="dismiss()">
+        <ion-icon name="arrow-back"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>{{ categoryName }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="product-container">
+    <ng-container *ngFor="let product of products">
+      <ion-card class="product-card" (click)="openDetailModal(product)">
+        <ion-card-header class="product-card-header">
+          <div class="product-tag">{{ product.get('title') || '药品详情' }}</div>
+        </ion-card-header>
+        <ion-card-content class="product-card-content">
+          <div class="product-image-wrapper">
+            <img [src]="product.get('image')" alt="{{product.get('name')}}" class="product-image">
+          </div>
+          <div class="product-info">
+            <h3 class="product-name">{{ product.get('name') }}</h3>
+            <div class="product-price">{{ product.get('price') }}</div>
+          </div>
+        </ion-card-content>
+      </ion-card>
+    </ng-container>
+  </div>
+</ion-content>

wisdom-app/src/app/drug-category/drug-category.page.scss

@@ -0,0 +1,67 @@
+.product-container {
+    padding: 0 16px;
+    margin-top: 16px;
+  }
+  
+  .product-card {
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    margin-bottom: 16px;
+  }
+  
+  .product-card-header {
+    background: #ffeb3b;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+  }
+  
+  .product-tag {
+    font-size: 14px;
+    font-weight: bold;
+    color: #333;
+  }
+  
+  .product-card-content {
+    display: flex;
+    align-items: center;
+    padding: 12px;
+  }
+  
+  .product-image-wrapper {
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-right: 12px;
+  }
+  
+  .product-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  
+  .product-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  
+  .product-name {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    white-space: normal;
+    word-break: break-all;
+    margin-bottom: 4px;
+  }
+  
+  .product-price {
+    font-size: 14px;
+    color: #e53935;
+    font-weight: bold;
+  }

wisdom-app/src/app/drug-category/drug-category.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DrugCategoryPage } from './drug-category.page';
+
+describe('DrugCategoryPage', () => {
+  let component: DrugCategoryPage;
+  let fixture: ComponentFixture<DrugCategoryPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DrugCategoryPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

wisdom-app/src/app/drug-category/drug-category.page.ts

@@ -0,0 +1,58 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { CloudObject, CloudQuery } from 'src/lib/ncloud';
+import { ModalController } from '@ionic/angular';
+import { AllProductsModalComponent } from '../all-products-modal/all-products-modal.component';
+import { IonicModule } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-drug-category',
+  templateUrl: './drug-category.page.html',
+  styleUrls: ['./drug-category.page.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    CommonModule,
+    AllProductsModalComponent
+  ]
+})
+export class DrugCategoryPage implements OnInit {
+  categoryName: string = '';
+  products: Array<CloudObject> = [];
+
+  constructor(
+    private route: ActivatedRoute,
+    private modalCtrl: ModalController
+  ) {}
+
+  async ngOnInit() {
+    this.route.paramMap.subscribe(async params => {
+      this.categoryName = params.get('name') || '';
+      await this.loadProducts();
+    });
+  }
+
+  async loadProducts() {
+    try {
+      const query = new CloudQuery('Drug');
+      query.equalTo('category', this.categoryName);
+      this.products = await query.find();
+    } catch (error) {
+      console.error('加载分类药品数据失败', error);
+    }
+  }
+
+  async openDetailModal(product: any) {
+    const modal = await this.modalCtrl.create({
+      component: AllProductsModalComponent, // 确保存在此组件
+      componentProps: { product: product },
+      cssClass: 'bottom-modal'
+    });
+    return await modal.present();
+  }
+
+  dismiss() {
+    window.history.back();
+  }
+}

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

@@ -34,9 +34,11 @@
     </div>
   </div>
 
-  <!-- 商品卡片列表区域 -->
+<!-- 热销模块 -->
+<div class="marketing-section">
+  <h2>热销🔥🔥🔥</h2>
   <div class="product-container">
-    <ng-container *ngFor="let product of products">
+    <ng-container *ngFor="let product of hotProducts | slice:0:2">
       <ion-card class="product-card" (click)="openDetailModal(product)">
         <ion-card-header class="product-card-header">
           <div class="product-tag">{{ product.get('title') || '热销🔥🔥🔥' }}</div>
@@ -52,7 +54,53 @@
         </ion-card-content>
       </ion-card>
     </ng-container>
+    <ion-button fill="clear" (click)="viewMore('hot')">查看更多</ion-button>
   </div>
+</div>
+
+<!-- 特价模块 -->
+<div class="marketing-section">
+  <h2>特价优惠💰💰💰</h2>
+  <div class="product-container">
+    <ng-container *ngFor="let product of specialProducts | slice:0:2">
+      <ion-card class="product-card" (click)="openDetailModal(product)">
+        <ion-card-header class="product-card-header">
+          <div class="product-tag">{{ product.get('title') || '特价优惠💰💰💰' }}</div>
+        </ion-card-header>
+        <ion-card-content class="product-card-content">
+          <div class="product-image-wrapper">
+            <img [src]="product.get('image')" alt="{{product.get('name')}}" class="product-image">
+          </div>
+          <div class="product-info">
+            <h3 class="product-name">{{ product.get('name') }}</h3>
+            <div class="product-price">{{ product.get('price') }}</div>
+          </div>
+        </ion-card-content>
+      </ion-card>
+    </ng-container>
+    <ion-button fill="clear" (click)="viewMore('special')">查看更多</ion-button>
+  </div>
+</div>
+
+<!-- 商品卡片列表区域 -->
+<div class="product-container">
+  <ng-container *ngFor="let product of products">
+    <ion-card class="product-card" (click)="openDetailModal(product)">
+      <ion-card-header class="product-card-header">
+        <div class="product-tag">{{ product.get('title') || '药品详情' }}</div>
+      </ion-card-header>
+      <ion-card-content class="product-card-content">
+        <div class="product-image-wrapper">
+          <img [src]="product.get('image')" alt="{{product.get('name')}}" class="product-image">
+        </div>
+        <div class="product-info">
+          <h3 class="product-name">{{ product.get('name') }}</h3>
+          <div class="product-price">{{ product.get('price') }}</div>
+        </div>
+      </ion-card-content>
+    </ion-card>
+  </ng-container>
+</div>
 
   <!-- 底部弹出模态 -->
   <ion-modal [isOpen]="showDetailModal" cssClass="bottom-modal" backdropDismiss="true" (ionModalDidDismiss)="closeDetailModal()">

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

@@ -8,6 +8,9 @@ import { CommonModule } from '@angular/common';
 import { CloudObject, CloudQuery } from 'src/lib/ncloud';
 import { Router } from '@angular/router';
 import { FmChatModalInput } from 'fmode-ng';
+import { AllProductsModalComponent } from '../all-products-modal/all-products-modal.component';
+import { DetailModalComponent } from '../detail-modal/detail-modal.component'; // 确保此组件已创建
+import { IonicModule } from '@ionic/angular';
 
 addIcons({ airplane, bluetooth, call, wifi });
 
@@ -17,15 +20,18 @@ addIcons({ airplane, bluetooth, call, wifi });
   styleUrls: ['tab3.page.scss'],
   standalone: true,
   imports: [
-    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
-    IonButton, IonGrid, IonRow, IonCol, IonCardHeader, IonItem, IonLabel, IonThumbnail, IonCardContent,
-    IonCardTitle, IonCard, IonIcon, IonSearchbar, CommonModule, SaleCardComponent,
-    FmChatModalInput, IonModal, IonButtons
+    IonicModule,
+    CommonModule,
+    AllProductsModalComponent,
+    DetailModalComponent,
+    ExploreContainerComponent,
+    SaleCardComponent,
+    FmChatModalInput
   ]
 })
 export class Tab3Page {
-  showDetailModal = false;  // 控制模态显示与否
-  currentProduct: any;      // 当前选择的商品信息
+  showDetailModal = false;  // 控制详情模态显示与否
+  currentProduct: any;      // 当前选择的药品信息
 
   categories = [
     { name: '皮肤用药', image: '../../assets/image/doctor7.png' },
@@ -41,11 +47,13 @@ export class Tab3Page {
   products: Array<CloudObject> = [];
   allProducts: Array<CloudObject> = []; // 存储所有药品数据，用于分类过滤
 
+  hotProducts: Array<CloudObject> = [];
+  specialProducts: Array<CloudObject> = [];
+
   constructor(
     private modalCtrl: ModalController,
     private router: Router,
-  ) {
-      addIcons({close}); }
+  ) {}
 
   async ngOnInit() {
     await this.loadProducts();
@@ -56,33 +64,30 @@ export class Tab3Page {
       const query = new CloudQuery('Drug');
       this.products = await query.find();
       this.allProducts = [...this.products]; // 初始化所有产品
+
+      // 分类“热销”和“特价”药品
+      this.hotProducts = this.allProducts.filter(product => product.get('marketing') === 'hot');
+      this.specialProducts = this.allProducts.filter(product => product.get('marketing') === 'special');
     } catch (error) {
       console.error('加载药品数据失败', error);
     }
   }
 
+  // 打开详情模态窗口
   openDetailModal(product: any) {
     this.currentProduct = product;
     this.showDetailModal = true;
   }
 
+  // 关闭详情模态窗口
   closeDetailModal() {
     this.showDetailModal = false;
     this.currentProduct = null;
   }
 
-  // 根据分类过滤产品
-  filterProducts(categoryName: string) {
-    if (categoryName === '全部') {
-      this.products = [...this.allProducts];
-    } else {
-      this.products = this.allProducts.filter(product => product.get('category') === categoryName);
-    }
-  }
-
-  // 分类点击事件
+  // 根据分类导航到 drug-category 页面
   onCategoryClick(category: any) {
-    this.filterProducts(category.name);
+    this.router.navigate(['/drug-category', category.name]);
   }
 
   // 分享链接功能（可选）
@@ -102,19 +107,44 @@ export class Tab3Page {
     });
   }
 
-  //搜索功能
+  // 搜索功能
   searchTerm: string = '';
 
-async searchProducts(event: any) {
-  this.searchTerm = event.detail.value.toLowerCase();
-  if (this.searchTerm) {
-    this.products = this.allProducts.filter(product =>
-      product.get('name').toLowerCase().includes(this.searchTerm) ||
-      product.get('function').toLowerCase().includes(this.searchTerm) ||
-      product.get('composition').toLowerCase().includes(this.searchTerm)
-    );
-  } else {
-    this.products = [...this.allProducts];
+  async searchProducts(event: any) {
+    this.searchTerm = event.detail.value.toLowerCase();
+    if (this.searchTerm) {
+      this.products = this.allProducts.filter(product =>
+        product.get('name').toLowerCase().includes(this.searchTerm) ||
+        product.get('function').toLowerCase().includes(this.searchTerm) ||
+        product.get('composition').toLowerCase().includes(this.searchTerm)
+      );
+    } else {
+      this.products = [...this.allProducts];
+    }
+  }
+
+  // 查看更多功能，打开 AllProductsModalComponent 模态窗口
+  async viewMore(type: string) {
+    let filteredProducts: Array<CloudObject> = [];
+    let title: string = '';
+
+    if (type === 'hot') {
+      filteredProducts = this.hotProducts;
+      title = '热销药品';
+    } else if (type === 'special') {
+      filteredProducts = this.specialProducts;
+      title = '特价药品';
+    }
+
+    const modal = await this.modalCtrl.create({
+      component: AllProductsModalComponent,
+      componentProps: {
+        products: filteredProducts,
+        title: title
+      },
+      cssClass: 'bottom-modal'
+    });
+
+    return await modal.present();
   }
-}
 }

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

@@ -1,5 +1,6 @@
-import { Routes } from '@angular/router';
 import { TabsPage } from './tabs.page';
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 
 export const routes: Routes = [
   {
@@ -81,16 +82,31 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../page/page-smart-community/page-smart-community.component').then((m) => m.PageSmartCommunityComponent),
       },
+      {
+        path: 'drug-category/:name',
+        loadComponent: () =>
+          import('../drug-category/drug-category.page').then(
+            (m) => m.DrugCategoryPage
+          ),
+      },
       {
         path: '',
-        redirectTo: '/tabs/tab1',
-        pathMatch: 'full',
+        redirectTo: '/tabs/tab3',
+        pathMatch: 'full'
       },
     ],
   },
   {
     path: '',
-    redirectTo: '/tabs/tab1',
-    pathMatch: 'full',
-  },
+    redirectTo: '/tabs/tab3',
+    pathMatch: 'full'
+  }
 ];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

wisdom-server/migration/data.js

@@ -425,7 +425,7 @@ module.exports.DrugList = [
       "objectId": "drug001",
       "name": "头孢克肟片",
       "price": "¥50",
-      "image": "https://img0.baidu.com/it/u=4236046589,3116401473&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
+      "image": "https://drug-platform.cdn.bcebos.com/online/drug/d1647832930805172776.png?x-bce-process=image/auto-orient,o_1/resize,w_1242,limit_1/quality,Q_85/format,f_auto",
       "prescription": true,
       "usage": "口服，每次1片，每日3次",
       "function": "抗菌消炎，用于敏感菌引起的感染",