fix: shopmall

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

@@ -0,0 +1,23 @@
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>{{ title }}</ion-card-title>
+    <ion-card-subtitle>{{ subtitle }}</ion-card-subtitle>
+  </ion-card-header>
+  <ion-card-content>
+    <ion-grid>
+      <ion-row>
+        <ion-col size="6" *ngFor="let product of products">
+          <ion-item>
+            <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-col>
+      </ion-row>
+    </ion-grid>
+  </ion-card-content>
+</ion-card>

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

@@ -0,0 +1,19 @@
+ion-card {
+    margin: 16px;
+  }
+  
+  ion-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  ion-card-title {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  
+  ion-card-subtitle {
+    font-size: 14px;
+    color: #ff4081;
+  } 

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

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

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

@@ -0,0 +1,25 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCol, IonGrid, IonItem, IonLabel, IonRow, IonThumbnail } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-sale-card',
+  templateUrl: './sale-card.component.html',
+  styleUrls: ['./sale-card.component.scss'],
+  standalone: true,
+  imports:[
+    CommonModule, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent,
+    IonGrid, IonCol, IonRow, IonItem, IonThumbnail, IonLabel, 
+  ]
+})
+export class SaleCardComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+  @Input() title: string = '';
+  @Input() subtitle: string = '';
+  @Input() products: { name: string, price: string, image: string }[] = [];
+
+}

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

@@ -36,4 +36,23 @@
       </ion-item>
     </ion-card-content>
   </ion-card>
+
+  <app-sale-card
+  title="健康护肤专场"
+  subtitle="医用更安心"
+  [products]="[
+    { name: '产品1', price: '到手价 ¥158', image: '../../assets/image/doctor7.png' },
+    { name: '产品2', price: '到手价 ¥158', image: '../../assets/image/doctor7.png' }
+  ]">
+</app-sale-card>
+
+<app-sale-card
+  title="健康生活季"
+  subtitle="品质优选更有心"
+  [products]="[
+    { name: '产品3', price: '热销第一名', image: '../../assets/image/doctor7.png' },
+    { name: '产品4', price: '热销第二名', image: '../../assets/image/doctor7.png' }
+  ]">
+</app-sale-card>
+  
 </ion-content>

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

@@ -5,6 +5,7 @@ import { ExploreContainerComponent } from '../explore-container/explore-containe
 import { FmChatModalInput } from 'fmode-ng';
 import { IonRow, IonItem } from '@ionic/angular/standalone';
 import { CommonModule } from '@angular/common';
+import { SaleCardComponent } from '../component/sale-card/sale-card.component';
 // import { ModalAudioMessageComponent } from 'fmode-ng/lib/aigc/chat/chat-modal-input/modal-audio-message/modal-audio-message.component';
 
 
@@ -16,7 +17,7 @@ import { CommonModule } from '@angular/common';
   imports: [
     IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
     IonButton, IonGrid, IonRow, IonCol,IonCardHeader, IonItem, IonLabel,IonThumbnail,IonCardContent,
-    IonCardTitle, IonCard, IonIcon, IonSearchbar, CommonModule,
+    IonCardTitle, IonCard, IonIcon, IonSearchbar, CommonModule,SaleCardComponent,
     // ASR语音输入模块
     FmChatModalInput,
     // ModalAudioMessageComponent
@@ -39,7 +40,7 @@ export class Tab3Page {
     { 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' },