|
|
@@ -1,11 +1,15 @@
|
|
|
import { Component } from '@angular/core';
|
|
|
-import { Router } from '@angular/router';
|
|
|
-import { IonHeader, IonToolbar, IonTitle, IonContent, ModalController, IonButton, IonGrid, IonCol, IonCardHeader, IonLabel, IonThumbnail, IonCardContent, IonCardTitle, IonCard, IonIcon, IonSearchbar, IonModal, IonButtons } from '@ionic/angular/standalone';
|
|
|
+import { ModalController, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonAvatar, IonButton, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonIcon, IonButtons, IonGrid, IonRow, IonThumbnail, IonSearchbar, IonCol } 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 { addIcons } from 'ionicons';
|
|
|
+import { airplane, bluetooth, call, wifi, close } from 'ionicons/icons';
|
|
|
import { SaleCardComponent } from '../component/sale-card/sale-card.component';
|
|
|
+import { CommonModule } from '@angular/common';
|
|
|
+import { CloudObject, CloudQuery } from 'src/lib/ncloud';
|
|
|
+import { Router } from '@angular/router';
|
|
|
+import { FmChatModalInput } from 'fmode-ng';
|
|
|
+
|
|
|
+addIcons({ airplane, bluetooth, call, wifi });
|
|
|
|
|
|
@Component({
|
|
|
selector: 'app-tab3',
|
|
|
@@ -19,16 +23,10 @@ import { SaleCardComponent } from '../component/sale-card/sale-card.component';
|
|
|
FmChatModalInput, IonModal, IonButtons
|
|
|
]
|
|
|
})
|
|
|
-
|
|
|
export class Tab3Page {
|
|
|
showDetailModal = false; // 控制模态显示与否
|
|
|
currentProduct: any; // 当前选择的商品信息
|
|
|
|
|
|
- constructor(
|
|
|
- private modalCtrl:ModalController,
|
|
|
- private router:Router,
|
|
|
- ) {}
|
|
|
-
|
|
|
categories = [
|
|
|
{ name: '皮肤用药', image: '../../assets/image/doctor7.png' },
|
|
|
{ name: '妇科用药', image: '../../assets/image/doctor7.png' },
|
|
|
@@ -39,48 +37,29 @@ export class Tab3Page {
|
|
|
{ name: '耳鼻咽喉', image: '../../assets/image/doctor7.png' },
|
|
|
{ name: '男科用药', image: '../../assets/image/doctor7.png' },
|
|
|
];
|
|
|
-
|
|
|
- products = [
|
|
|
- {
|
|
|
- title: '热销🔥🔥🔥',
|
|
|
- subtitle: '药品',
|
|
|
- name: '藿香正气水',
|
|
|
- price: '¥120',
|
|
|
- image: '../../assets/image/doctor7.png',
|
|
|
- prescription: false,
|
|
|
- usage: '口服，每次5-10毫升，每天2次',
|
|
|
- function: '解表化湿，理气和中。',
|
|
|
- spec: '10ml*10支/盒',
|
|
|
- composition: '藿香、紫苏叶、白芷、法半夏、厚朴等',
|
|
|
- taboo: '孕妇慎用'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '特价💰💰💰',
|
|
|
- subtitle: '药品',
|
|
|
- name: '知柏地黄丸',
|
|
|
- price: '¥200',
|
|
|
- image: '../../assets/image/doctor7.png',
|
|
|
- prescription: true,
|
|
|
- usage: '口服，一次6克，一日2次',
|
|
|
- function: '滋阴清热，用于阴虚火旺所致的潮热盗汗。',
|
|
|
- spec: '9g*10丸/盒',
|
|
|
- composition: '知母、黄柏、熟地黄、山药等',
|
|
|
- taboo: '孕妇、严重肝肾功能不全者慎用'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '特价💰💰💰',
|
|
|
- subtitle: '药品',
|
|
|
- name: '知柏地黄丸',
|
|
|
- price: '¥200',
|
|
|
- image: '../../assets/image/doctor7.png',
|
|
|
- prescription: true,
|
|
|
- usage: '口服，一次6克，一日2次',
|
|
|
- function: '滋阴清热，用于阴虚火旺所致的潮热盗汗。',
|
|
|
- spec: '9g*10丸/盒',
|
|
|
- composition: '知母、黄柏、熟地黄、山药等',
|
|
|
- taboo: '孕妇、严重肝肾功能不全者慎用'
|
|
|
- },
|
|
|
- ];
|
|
|
+
|
|
|
+ products: Array<CloudObject> = [];
|
|
|
+ allProducts: Array<CloudObject> = []; // 存储所有药品数据，用于分类过滤
|
|
|
+
|
|
|
+ constructor(
|
|
|
+ private modalCtrl: ModalController,
|
|
|
+ private router: Router,
|
|
|
+ ) {
|
|
|
+ addIcons({close}); }
|
|
|
+
|
|
|
+ async ngOnInit() {
|
|
|
+ await this.loadProducts();
|
|
|
+ }
|
|
|
+
|
|
|
+ async loadProducts() {
|
|
|
+ try {
|
|
|
+ const query = new CloudQuery('Drug');
|
|
|
+ this.products = await query.find();
|
|
|
+ this.allProducts = [...this.products]; // 初始化所有产品
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载药品数据失败', error);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
openDetailModal(product: any) {
|
|
|
this.currentProduct = product;
|
|
|
@@ -91,4 +70,35 @@ export class Tab3Page {
|
|
|
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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 分类点击事件
|
|
|
+ onCategoryClick(category: any) {
|
|
|
+ this.filterProducts(category.name);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 分享链接功能（可选）
|
|
|
+ shareDetailModal() {
|
|
|
+ // 实现分享功能
|
|
|
+ console.log('分享功能待实现');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 复制链接功能
|
|
|
+ copyLink() {
|
|
|
+ const link = window.location.href;
|
|
|
+ navigator.clipboard.writeText(link).then(() => {
|
|
|
+ console.log('链接已复制');
|
|
|
+ // 可添加用户提示
|
|
|
+ }).catch(err => {
|
|
|
+ console.error('复制失败', err);
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
