202226701045/poem-life-app/src/app/tab1/card-detail/card-detail.page.ts

import { Component, OnInit, } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonContent, IonHeader,IonItem,IonList, IonThumbnail,IonTitle, IonToolbar,IonFooter, IonButtons,IonButton, IonBackButton} from '@ionic/angular/standalone';





@Component({
  selector: 'app-card-detail',
  templateUrl: './card-detail.page.html',
  styleUrls: ['./card-detail.page.scss'],
  standalone: true,
  imports: [IonContent, IonHeader,IonThumbnail,IonList, IonTitle,IonItem,IonFooter, IonToolbar,IonButtons,IonButton, IonBackButton, CommonModule, FormsModule]
})
export class CardDetailPage implements OnInit {

  content: {
    title: string;
    editor: string;
    date: string;
    issue: string;
    detail: string;
    images: string[]; // 明确指定为字符串数组
    video: string;
    audio: string;
  } = {
    title: '',
    editor: '',
    date: '',
    issue: '',
    detail: '',
    images: [], // 初始化为空数组
    video: '',
    audio: ''
  };

  constructor(private activatedRoute: ActivatedRoute, private router: Router) { }

  ngOnInit() {
    const id = this.activatedRoute.snapshot.paramMap.get('id'); // 获取内容ID
    this.loadContent(id);
  }

  loadContent(id: string | null) {
    // 模拟加载内容，实际中应从服务获取数据
    this.content = {
      // title: `内容标题 ${id}`,
      title: `清平调`,
      editor: `文|编辑部`,
      // editor: `编者姓名 ${id}`,
      date: '2024-11-30',
      issue: `第1期`,
      // issue: `第${id}期`,
      detail: ` 云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。`,
      // detail: `这里是详细内容 ${id}...`,
      images: ['../assets/image/01/Vx_03.jpg', ], // 示例图片路径
      video: 'assets/video/sample.mp4', // 示例视频路径
      audio: 'assets/audio/sample.mp3' // 示例音频路径
    };
  }

  goBack() {
    this.router.navigate(['/tabs/tab1']); // 返回到 Tab1
  }
  prevContent() {
    const prevId = parseInt(this.content.issue.replace('第', '').replace('期', '')) - 1; // 简单逻辑示例
    if (prevId > 0) {
      this.router.navigate(['/card-detail'], { queryParams: { id: prevId } });
    }
  }

  nextContent() {
    const nextId = parseInt(this.content.issue.replace('第', '').replace('期', '')) + 1; // 简单逻辑示例
    this.router.navigate(['/card-detail'], { queryParams: { id: nextId } });
  }
}