update tab1 轮播图跳转

smarteat-app/deploy.ps1

@@ -1,7 +1,7 @@
 # 打包项目，携带应用前缀（index.html中相对路径将自动修复为/dev/jxnu/202226701038前缀）
 # /dev/ 项目测试版上传路径
 # /dev/jxnu/202226701038 nova-crm项目预留路径
-set NODE_OPTIONS=–max_old_space_size=16000
+set NODE_OPTIONS –max_old_space_size=16000
 node ./node_modules/@angular/cli/bin/ng build --base-href="/dev/jxnu/202226701038/"
 
 # 清空旧文件目录
@@ -18,3 +18,5 @@ obsutil chattri obs://nova-cloud/dev/jxnu/202226701038 -r -f -i=XSUWJSVMZNHLWFAI
 # 列举对象
 obsutil ls obs://nova-cloud/dev/jxnu/202226701038  -i=XSUWJSVMZNHLWFAINRZ1 -k=P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e="obs.cn-south-1.myhuaweicloud.com"
 
+obsutil cp ssbt2022.jpg obs://nova-cloud/dev/jxnu/202226701038/ -f -i XSUWJSVMZNHLWFAINRZ1 -k P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e obs.cn-south-1.myhuaweicloud.com
+obsutil ls obs://nova-cloud/dev/jxnu/202226701038 -i XSUWJSVMZNHLWFAINRZ1 -k P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e obs.cn-south-1.myhuaweicloud.com

smarteat-app/src/app/image-popup/image-popup.component.html

@@ -0,0 +1,15 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="close()" >
+        <ion-icon name="arrow-back"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>内容详情</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <img [src]="imageUrl" style="width: 100%; height: auto;" />
+  <div [innerHTML]="description"></div> <!-- 这里插入 HTML 格式的描述 -->
+</ion-content>

smarteat-app/src/app/image-popup/image-popup.component.spec.ts

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

smarteat-app/src/app/image-popup/image-popup.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { ModalController } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-image-popup',
+  templateUrl: './image-popup.component.html',
+  styleUrls: ['./image-popup.component.scss'],
+  standalone:true,
+  imports:[
+    IonContent,IonHeader,IonButton,IonButtons,IonToolbar,IonTitle,IonIcon
+  ]
+})
+export class ImagePopupComponent {
+  @Input() imageUrl: string = ''; // 添加默认值
+  @Input() description: string = ''; // 添加默认值
+
+  constructor(private modalController: ModalController) {}
+
+  close() {
+    this.modalController.dismiss();
+  }
+}

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

@@ -4,23 +4,23 @@
 
 <ion-content [fullscreen]="true">
   <!-- 轮播图区域 -->
-  <div class="carousel-container" style="border-radius: 25px; margin: 5px auto;">
-    <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 class="carousel-container" style="border-radius: 25px; margin: 5px auto;">
+  <div class="carousel" [style.transform]="'translateX(-' + currentSlide * 100 + '%)'">
+    <div class="slide" *ngFor="let image of images; let i = index"> <!-- 添加 let i = index -->
+      <img [src]="image" (click)="onImageClick(i)" style="width: 100%; height: auto;" /> <!-- 使用 i -->
     </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>
+
   <!-- 推荐健康建议 -->
   <ion-card>
     <ion-card-header>

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

@@ -6,7 +6,8 @@ import { addIcons } from 'ionicons';
 import { albumsOutline, documentOutline, leafOutline, scanOutline, storefrontOutline } from 'ionicons/icons';
 import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCol, IonContent, IonHeader, IonIcon, IonInput, IonRow, IonTextarea, IonTitle, IonToolbar, IonGrid, IonCardTitle, IonSearchbar,} from '@ionic/angular/standalone'; // 导入 Ionic 组件
 import { CommonModule } from '@angular/common'; // 导入 CommonModule
-
+import { ImagePopupComponent } from '../image-popup/image-popup.component'; // 导入弹窗组件
+import { ModalController,NavController} from '@ionic/angular/standalone';
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
@@ -15,7 +16,7 @@ import { CommonModule } from '@angular/common'; // 导入 CommonModule
   imports: [
     CommonModule, IonContent, IonHeader, IonTitle, IonToolbar, 
     IonButton, IonTextarea, IonInput, IonCard, IonCardContent, IonGrid, IonRow, IonCol, IonIcon,
-    IonCardHeader,IonCardTitle,IonSearchbar
+    IonCardHeader,IonCardTitle,IonSearchbar,
   ],
 })
 export class Tab1Page implements OnInit {
@@ -27,16 +28,16 @@ export class Tab1Page implements OnInit {
 
   // 存储图片的数组
   images = [
-    'https://example.com/image1.jpg',
-    'https://example.com/image2.jpg',
-    'https://example.com/image3.jpg',
-    'https://example.com/image4.jpg'
+    'https://app.fmode.cn/dev/jxnu/202226701038/ssbt2022.jpg',
+    'https://app.fmode.cn/dev/jxnu/202226701038/ssbt2022.jpg',
+    'https://app.fmode.cn/dev/jxnu/202226701038/ssbt2022.jpg',
+    'https://app.fmode.cn/dev/jxnu/202226701038/ssbt2022.jpg'
   ];
 
   // 当前显示的幻灯片索引
   currentSlide: number = 0;
 
-  constructor(private router: Router) {
+  constructor(private router: Router, private modalCtrl: ModalController) {
     addIcons({ scanOutline, documentOutline, storefrontOutline, albumsOutline, leafOutline });
     this.cloudSeUser = new CloudSeUser();
   }
@@ -121,6 +122,35 @@ export class Tab1Page implements OnInit {
     });
   }
 
+   // 打开弹窗
+async openImagePopup(imageUrl: string, description: string) {
+  try {
+    const modal = await this.modalCtrl.create({
+      component: ImagePopupComponent,
+      componentProps: { imageUrl, description }
+    });
+    await modal.present();
+  } catch (error) {
+    console.error('打开弹窗时出错', error);  // 捕获并输出错误
+  }
+}
+
+
+  // 点击轮播图
+async onImageClick(index: number) {
+const descriptions = [
+  '<p><strong>第一张图片</strong>的描述内容。<br>这里有更多的文字，还可以使用 <em>斜体</em> 和 <u>下划线</u>。</p>',
+  '<p><strong>第二张图片</strong>的描述内容。<br>此描述支持更复杂的布局和<strong>加粗文本</strong>。</p>',
+  '<p><strong>第三张图片</strong>的描述内容。<br>您可以在这里插入更多的 <a href="#">链接</a> 或者其他 HTML 元素。</p>',
+  '<p><strong>第四张图片</strong>的描述内容。<br>支持多行内容和 <em>各种格式</em>。</p>'
+];
+
+
+  // 打开弹窗并传递描述
+  await this.openImagePopup(this.images[index], descriptions[index]);
+}
+
+
   // 前一个幻灯片
   prevSlide() {
     if (this.currentSlide > 0) {