随机食谱生成

smarteat-app/src/app/app.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import { NewlineToBrPipe } from './newline-to-br.pipe';  // 导入管道
+
+@NgModule({
+  declarations: [AppComponent, NewlineToBrPipe],  // 声明管道
+  imports: [BrowserModule],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

smarteat-app/src/app/asf/asf.component.html

@@ -0,0 +1,4 @@
+<p>
+  asf works!
+  <img src="https://app.fmode.cn/dev/jxnu/202226701038/boluogulaorou.jpeg" alt="">
+</p>

smarteat-app/src/app/asf/asf.component.spec.ts

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

smarteat-app/src/app/asf/asf.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-asf',
+  templateUrl: './asf.component.html',
+  styleUrls: ['./asf.component.scss'],
+  standalone: true,
+})
+export class AsfComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

smarteat-app/src/app/asx/asx.component.html

@@ -0,0 +1,3 @@
+<p>
+  asx works!
+</p>

smarteat-app/src/app/asx/asx.component.spec.ts

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

smarteat-app/src/app/asx/asx.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-asx',
+  templateUrl: './asx.component.html',
+  styleUrls: ['./asx.component.scss'],
+  standalone: true,
+})
+export class AsxComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

smarteat-app/src/app/asy/asy.component.html

@@ -0,0 +1,32 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>{{ dishDetails.title }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>{{ dishDetails.title }}</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <!-- 食谱图片 -->
+      <ion-img [src]="dishDetails.image_url">
+        <!-- 使用备用的 <img> 元素来处理 alt 属性 -->
+        <img [src]="dishDetails.image_url" [alt]="dishDetails.title">
+      </ion-img>
+      
+      <!-- 食材 -->
+      <h3>食材:</h3>
+      <p [innerHTML]="dishDetails.ingredient"></p> <!-- 使用 [innerHTML] 渲染带 <br> 的 HTML -->
+
+      <!-- 制作方法 -->
+      <h3>制作方法:</h3>
+      <p [innerHTML]="dishDetails.instructions"></p> <!-- 使用 [innerHTML] 渲染带 <br> 的 HTML -->
+
+      <!-- 小贴士 -->
+      <h3>小贴士:</h3>
+      <p [innerHTML]="dishDetails.tips"></p> <!-- 使用 [innerHTML] 渲染带 <br> 的 HTML -->
+    </ion-card-content>
+  </ion-card>
+</ion-content>

smarteat-app/src/app/asy/asy.component.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { AsyComponent } from './asy.component';
+import { NewlineToBrPipe } from '.././newline-to-br.pipe';  // 导入管道
+
+
+describe('AsyComponent', () => {
+  let component: AsyComponent;
+  let fixture: ComponentFixture<AsyComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [AsyComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AsyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+
+

smarteat-app/src/app/asy/asy.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import { CloudShipu } from '../../lib/cloudshipu';  // 引入 CloudShipu 类
+import { IonButton } from '@ionic/angular/standalone';
+import { CloudQuery } from 'src/lib/ncloud';
+import { NewlineToBrPipe } from '.././newline-to-br.pipe';  // 导入管道
+import { IonicModule } from '@ionic/angular';  // 确保导入 IonicModule
+import { sanitizeIdentifier } from '@angular/compiler';
+
+@Component({
+  selector: 'app-asy',
+  templateUrl: './asy.component.html',
+  styleUrls: ['./asy.component.scss'],
+  standalone: true,
+  imports: [
+    IonButton,
+    IonicModule
+  ],
+})
+export class AsyComponent  implements OnInit {
+
+  private CloudShipu: CloudShipu =new CloudShipu(); // 引入 CloudShipu 实例
+  private shipuData: any = null; // 信息
+
+    // 定义存储食谱详细信息的变量
+    dishDetails: any = {
+      title: '',
+      image_url: '',
+      ingredient: '',
+      instructions: '',
+      tips: '',
+    };
+
+  async ngOnInit(): Promise<void> {
+    await this.loadUserData(); // 页面初始化时加载用户数据
+    console.log(this.shipuData)
+    const randomIndex = Math.floor(Math.random() * this.shipuData.length);
+
+    // 访问这个随机索引的元素
+    this.dishDetails = this.shipuData[randomIndex].data;
+    // this.dishDetails = this.shipuData[1].data
+  }
+  
+  async loadUserData() {
+    try {
+        this.shipuData = await this.CloudShipu.getAllShipu();
+        
+    } catch (error) {
+        console.error('加载用户数据失败', error);
+    }
+  }
+
+  
+}
+

smarteat-app/src/app/newline-to-br.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { NewlineToBrPipe } from './newline-to-br.pipe';
+
+describe('NewlineToBrPipe', () => {
+  it('create an instance', () => {
+    const pipe = new NewlineToBrPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

smarteat-app/src/app/newline-to-br.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'newlineToBr',
+  standalone: true
+})
+export class NewlineToBrPipe implements PipeTransform {
+
+  transform(value: unknown, ...args: unknown[]): unknown {
+    return null;
+  }
+
+}

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

@@ -54,7 +54,7 @@
   <ion-grid>
     <ion-row>
       <ion-col size="12">
-        <ion-button>
+        <ion-button (click)="goToasf()">
           <ion-icon slot="start" name="document-outline"></ion-icon>
           健康目标管理
         </ion-button>
@@ -62,7 +62,7 @@
     </ion-row>
     <ion-row>
       <ion-col size="12">
-        <ion-button>
+        <ion-button (click)="goToasx()">
           <ion-icon slot="start" name="storefront-outline"></ion-icon>
           外卖推荐
         </ion-button>
@@ -80,7 +80,7 @@
       </ion-card-title>
     </ion-card-header>
     <ion-card-content>
-      <ion-button >
+      <ion-button (click)="goToasy()">
         查看推荐食谱
       </ion-button>
     </ion-card-content>

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

@@ -185,6 +185,18 @@ export class Tab1Page implements OnInit {
       this.router.navigate([`/tabs/tips`]);
     }
 
+    goToasy() {
+      this.router.navigate([`/tabs/asy`]);
+    }
+
+    goToasf(){
+      this.router.navigate([`/tabs/asf`]);
+    }
+
+    goToasx(){
+      this.router.navigate([`/tabs/asx`]);
+    }
+
     async login(){
       // 弹出登录窗口
       let user = await openUserLoginModal(this.modalCtrl);

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

@@ -31,6 +31,21 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../health-tips/health-tips.component').then((m) => m.HealthTipsComponent),
       },
+      {
+        path: 'asy',
+        loadComponent: () =>
+          import('../asy/asy.component').then((m) => m.AsyComponent),
+      },
+      {
+        path: 'asf',
+        loadComponent: () =>
+          import('../asf/asf.component').then((m) => m.AsfComponent),
+      },
+      {
+        path: 'asx',
+        loadComponent: () =>
+          import('../asx/asx.component').then((m) => m.AsxComponent),
+      },
       {
         path: '',
         redirectTo: '/tabs/tab1',