绘画详细页面的完善

paint-app/src/app/app.routes.ts

@@ -1,5 +1,6 @@
 import { Routes } from '@angular/router';
 import { VideoPageComponent } from './video-page/video-page.component';
+import { DetailPageComponent } from './detail-page/detail-page.component';
 
 export const routes: Routes = [
   {
@@ -7,4 +8,5 @@ export const routes: Routes = [
     loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
   },
   { path: 'tabs/video-page/:id', component: VideoPageComponent },
+  { path: 'tabs/detail-page/:id', component: DetailPageComponent },
 ];

paint-app/src/app/detail-page/detail-page.component.html

@@ -1,3 +1,47 @@
-<p>
-  detail-page works!
-</p>
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="gopage()">
+        <ion-icon name="chevron-back">
+        </ion-icon>返回
+      </ion-button>
+    </ion-buttons>
+    <ion-title>图画详情</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <!-- 确保 paintList 有数据 -->
+  <ng-container *ngIf="paintList && paintList.length > 0; else noData">
+    <ion-card>
+      <img alt="Silhouette of mountains" [src]="paintList[0].get('picture')" />
+      <ion-card-header>
+        <ion-card-title>{{ getPaintDetail('name') }}</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        {{ getPaintDetail('introduction') }}
+      </ion-card-content>
+    </ion-card>
+    <ion-button slot="fixed" (click)="gopage1()">ai艺聊</ion-button>
+
+    <h4>作者介绍</h4>
+    <p>
+      {{ getPaintDetail('authorIntroduction') }}
+    </p>
+    <h4>历史背景</h4>
+    <p>
+      {{ getPaintDetail('background') }}
+    </p>
+    <h4>内容介绍</h4>
+    <p>
+      {{ getPaintDetail('detailedIntroduction') }}
+    </p>
+  </ng-container>
+
+  <!-- 当没有数据时显示的内容 -->
+  <ng-template #noData>
+    <p>没有可用的绘画数据。</p>
+  </ng-template>
+
+  
+</ion-content>

paint-app/src/app/detail-page/detail-page.component.scss

@@ -0,0 +1,4 @@
+ion-button[slot='fixed'] {
+    top: 50%;
+    right: 20px;
+  }

paint-app/src/app/detail-page/detail-page.component.ts

@@ -1,15 +1,74 @@
-import { Component, OnInit } from '@angular/core';
-
+import { Component} from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { CloudObject, CloudQuery } from 'src/lib/ncloud';
+import {chevronBack} from 'ionicons/icons';
+addIcons({chevronBack})
+import { addIcons } from 'ionicons';
+import { CommonModule } from '@angular/common';
 @Component({
   selector: 'app-detail-page',
   templateUrl: './detail-page.component.html',
   styleUrls: ['./detail-page.component.scss'],
   standalone: true,
+  imports:[IonCard,IonContent,IonButton,IonCardContent,IonCardHeader,IonCardSubtitle,IonCardTitle,
+    IonTitle,IonIcon,IonButtons,IonToolbar,IonHeader,CommonModule
+  ],
 })
-export class DetailPageComponent  implements OnInit {
+export class DetailPageComponent{
+
+
+  constructor(private router: Router,
+    private route:ActivatedRoute
+    ){}
+
+    
+  paintList:Array<CloudObject> = []
+  paintnameid: string='name5'; // 用于存储传递的参数
+ 
+
+    ngOnInit() {
+      console.log('接收到的参数');
+      // 订阅路由参数变化
+      this.route.params.subscribe(params => {
+          // 从路由参数中获取 'id' 参数并赋值给 paintname
+          this.paintnameid = params['id'];
+          console.log('接收到的参数:', this.paintnameid); // 打印接收到的参数以进行调试
+          
+          // 根据 paintname 加载相关的绘画数据
+          // 这里可以调用一个方法来加载与 paintname 相关的数据
+          // this.loadPaintData(this.paintname); // 示例：根据 paintname 加载数据
+      });
+  
+      // 调用方法加载绘画列表
+      this.loadpaintList(); // 加载绘画列表数据
+  }
+
+
+
+  gopage(){
+    this.router.navigate(['/tabs/tab2'])
+  }
+  gopage1(){
+    this.router.navigate(['/tabs/tab2'])
+  }
+
+  async loadpaintList(){
+    let query = new CloudQuery("paint");
+
+    await query.equalTo("nameid",this.paintnameid)
 
-  constructor() { }
+    this.paintList = await query.find()
 
-  ngOnInit() {}
+    if (this.paintList && this.paintList.length > 0) {
+      console.log('有列表');
+    }
+    else{
+      console.log('无列表');
+    }
+    }
 
+    getPaintDetail(property: string): string {
+      return this.paintList.length > 0 ? this.paintList[0].get(property) : '';
+    }
 }

paint-app/src/app/tab2/tab2.page.html

@@ -44,7 +44,7 @@
       <!-- (click)="navigateToDetail()" -->
       <div class="image-container">
         <div class="container">
-          <div *ngFor="let paint of paintList" class="image-wrapper" >
+          <div *ngFor="let paint of paintList" class="image-wrapper" (click)="navigateToDetail(paint.get('nameid'))">
               <img [src]="paint.get('picture')" [alt]="paint.get('name')" />
               <div class="description-box">
                   <div class="text1"><p>《{{ paint.get('name') }}》——{{ paint.get('artist') }}</p></div>

paint-app/src/app/tab2/tab2.page.scss

@@ -62,7 +62,7 @@ ion-segment-button ion-label {
   gap: 20px;               /* 图片间距，可以根据需要调整 */
 }
 .image-wrapper {
-  width: 50%; /* 每列宽度为50%，减去间距 */
+  width: 70%; /* 每列宽度为50%，减去间距 */
   margin: 5px; /* 设置间距 */
   box-sizing: border-box; /* 包括内边距和边框在内的宽度计算 */
   display: flex; /* 使用Flexbox布局 */

paint-app/src/app/tab2/tab2.page.ts

@@ -26,9 +26,24 @@ export class Tab2Page{
   nowvalue:string='';
   constructor(private router: Router){}
 
-   navigateToDetail(){
-    this.router.navigate(['/tabs/detail-page'])
-  }
+  navigateToDetail(objectId: string) {
+    console.log('进入 navigateToDetail 方法');
+    console.log('objectId:', objectId);
+
+    if (objectId) {
+        console.log('准备导航到 detail-page，objectId:', objectId);
+        console.log('Navigating to:', ['/tabs/detail-page', objectId]);
+        this.router.navigate(['/tabs/detail-page', encodeURIComponent(objectId)])
+            .then(success => {
+                console.log('导航成功:', success);
+            })
+            .catch(err => {
+                console.error('导航失败:', err);
+            });
+    } else {
+        console.error('objectId is null or undefined');
+    }
+}
   gopage(objectId: string){
     console.log('objectId:', objectId); // 调试输出
     if (objectId) {

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

@@ -52,14 +52,14 @@ export const routes: Routes = [
           import('../test2-page/test2-page.component').then((m) => m.Test2PageComponent),
       },
       {
-        path: 'detail-page',
+        path: 'video-page',
         loadComponent: () =>
-          import('../detail-page/detail-page.component').then((m) => m.DetailPageComponent),
+          import('../video-page/video-page.component').then((m) => m.VideoPageComponent),
       },
       {
-        path: 'video-page',
+        path: 'detail',
         loadComponent: () =>
-          import('../video-page/video-page.component').then((m) => m.VideoPageComponent),
+          import('../detail-page/detail-page.component').then((m) => m.DetailPageComponent),
       },
       {
         path: '',